Skip to content

refactor(components): extract field rendering into _fields.liquid partial and fix select enum mapping - #398

Draft
peintnermax wants to merge 10 commits into
mainfrom
refactor-liquid-fields
Draft

refactor(components): extract field rendering into _fields.liquid partial and fix select enum mapping#398
peintnermax wants to merge 10 commits into
mainfrom
refactor-liquid-fields

Conversation

@peintnermax

Copy link
Copy Markdown
Member

Summary

Refactors the Liquid field rendering system into a dedicated partial and module, renames mandatory-gatesfield-patcher, fixes select enum values being dropped by the Go API, and documents the real-server demo workflow.

Changes

Field rendering refactor (packages/components/src/orchestrator/)

  • New _fields.liquid partial — field rendering logic moved from default.liquid into a reusable partial with {% case f.type %} dispatch for checkbox, select, and default input types
  • New liquid-fields.ts — all field-related filters (fieldPlaceholder, fieldHelp, fieldError, selectOptions, formLevelError) and the {% fields %} tag extracted from liquid.ts
  • liquid.ts simplified to a thin wrapper that delegates field concerns to liquid-fields.ts
  • mandatory-gatesfield-patcher — renamed tag, file, and spec for clarity

Bug fix: select enum values dropped by Go API (internal/api/flow.go)

  • toFlowFieldValidation mapped Format, MinLength, MaxLength but silently dropped Enum. The OpenAPI spec already declared validation.enum — the mapper just never populated it.

Default schema/flow (temporary, for testing)

  • Added gender property with enum to default-human-user-schema.json
  • Added "gender" to register step fields in default-login-flow-definition.json
  • Added register.field.gender translations (en, de, it)

Docs

  • AGENTS.md: Documented real-server demo workflow and fixed mock server port (4000 → 8080)
  • .env.example: Added ZITADEL_PROJECT_SECRET placeholder

Validation

  • 107 component tests passing (moon run components:test)
  • Manual E2E with real Go server: register flow renders gender <zl-select> with enum options

Release notes / changeset

Internal refactor + bug fix. Touches @zitadel/components — the Enum fix and field-patcher rename are patch-level.

bastionstack and others added 9 commits June 23, 2026 20:31
Add form-associated <zl-checkbox>/<Checkbox> and <zl-select>/<Select>
atoms in both renderers, render the select/checkbox field types in the
orchestrator, and replace the Lit/console dev playgrounds with a single
Storybook workbench that hosts both renderers and gates render, a11y,
and cross-renderer parity in CI.

Co-authored-by: Cursor <cursoragent@cursor.com>
The `@zitadel/source` export condition on @zitadel/components flipped every
TS consumer (sdk-vue/react/angular, login-ui) to compile the package from
source via the repo-wide `customConditions`, which broke `full-pr`:
unresolved `*.css?inline` / `*.liquid` modules (TS2307) and composite
dist project-reference conflicts (TS6305).

Revert the condition on the component exports so all consumers resolve
`dist` as before, and give Storybook source resolution (for Lit shadow-CSS
and atom HMR) through a bundler-only Vite alias instead.

Co-authored-by: Cursor <cursoragent@cursor.com>
- Drop the `@zitadel/components/vite-liquid-plugin` package export: it
  pointed `default`/`types` at an unpublished `.ts` source file (the
  package ships only `dist/`), so an external import would 404. It is
  dev-only build tooling, so Storybook now imports it by source path like
  the package's own vitest config already does.
- React `<Select>`: omit the hidden input's form entry when nothing is
  selected so `FormData.get(name)` is `null`, matching `<zl-select>`'s
  `setFormValue(value || null)` (was submitting an empty string).
- Add the required `Parity` story to checkbox.stories.tsx. It caught two
  real cross-renderer drifts in the `.zr-checkbox` surface — missing
  `box-sizing: border-box` subtree and inherited `line-height` — now
  mirrored from the Lit atom's `baseHostStyles` in checkbox.css.

Co-authored-by: Cursor <cursoragent@cursor.com>
`optimizeDeps.include` lists the heavy third-party deps of the excluded
workspace packages (dompurify, liquidjs, lucide, lucide-react, xstate,
@faker-js/faker) so the addon-vitest browser run pre-bundles them up
front. But Storybook never declared them, so under pnpm's strict
node_modules they were unresolvable from the app on a clean install:
Vite could not pre-bundle them, discovered them mid-test, and reloaded —
losing the suite ("Vitest failed to find the current suite") on every
cold CI run while a warm local cache masked it.

Declare them as devDependencies so every include entry resolves.

Co-authored-by: Cursor <cursoragent@cursor.com>
`storybook:typecheck` references `api`/`api-mock` as composite projects but
imports them in type-checked files (main.ts, orchestrator.stories.ts). Their
`dist/*.d.ts` are never produced (api-mock's build is a no-op, api builds via
tsdown to `.d.mts`), so on a clean CI checkout `tsc --noEmit -p` failed with
TS6305. Locally it only passed against stale `dist` outputs.

Switch storybook:typecheck to `tsc --build` so it compiles the referenced
composite projects first. That surfaced two latent errors in api-mock's lib
config, which had never been compiled (its `tsconfig.json` is solution-style
with empty files/include, so `tsc -p` checked nothing):
- missing `tslib` (importHelpers) -> add as a dependency
- a real TS2322 in `flowListItemResponse` -> cast the mock record status to the
  generated literal union, matching the sibling `flowDetailResponse`

Add an `api-mock:build` dep edge so Moon re-runs the typecheck when api-mock
source changes.

Co-authored-by: Cursor <cursoragent@cursor.com>
@vercel

vercel Bot commented Jun 24, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nextgen Ready Ready Preview, Comment Jun 24, 2026 11:39am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
nextgen-docs Skipped Skipped Jun 24, 2026 11:39am

Request Review

@peintnermax peintnermax changed the title Refactor liquid fields refactor(components): extract field rendering into _fields.liquid partial and fix select enum mapping Jun 24, 2026
@github-actions

github-actions Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

🦋 Changeset detected

Latest commit: 6804274

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages
Name Type
@zitadel/shared-component-styles Patch
@zitadel/components Patch
@zitadel/ui-react Patch
@zitadel/storybook Patch
@zitadel/sdk-angular Patch
@zitadel/sdk-next Patch
@zitadel/sdk-nuxt Patch
@zitadel/sdk-qwik Patch
@zitadel/sdk-react Patch
@zitadel/sdk-solid Patch
@zitadel/sdk-svelte Patch
@zitadel/sdk-vue Patch
@zitadel/cli Patch
@zitadel/server Patch
@zitadel/server-linux-x64 Patch
@zitadel/server-linux-arm64 Patch
@zitadel/server-darwin-x64 Patch
@zitadel/server-darwin-arm64 Patch
@zitadel/server-win32-x64 Patch
@zitadel/api Patch
@zitadel/sdk-core Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

2 participants