Skip to content

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

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

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-gates → field-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-gates → field-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 temporarily deployed to Preview – nextgen-docs June 24, 2026 11:36 Inactive
@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

@fforootd

Copy link
Copy Markdown
Member

This looks obsolete I am going to steal one idea though into a new PR 😁

This branch was previously deployed

2 inactive deployments
Preview – nextgen — 68042746 Deployed Jun 24, 2026 by vercel[bot]
Preview – nextgen-docs — 68042746 Deployed Jun 24, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

3 participants