Skip to content

feat(react-ui): add Storybook stories for the genui-lib Form component#766

Open
Shinyaigeek wants to merge 1 commit into
thesysdev:mainfrom
Shinyaigeek:feat/form-genui-story
Open

feat(react-ui): add Storybook stories for the genui-lib Form component#766
Shinyaigeek wants to merge 1 commit into
thesysdev:mainfrom
Shinyaigeek:feat/form-genui-story

Conversation

@Shinyaigeek

Copy link
Copy Markdown
Contributor

Summary

Form is a genui-lib (openui-lang) component with no standalone React counterpart, so it had no Storybook coverage: the existing stories under components/*/stories exercise the plain React components, and the lang layer's Form container — validation wiring, primary-button validation, the FormControl input union — was never rendered anywhere in Storybook.

This PR adds stories that render openui-lang programs through Renderer with openuiLibrary — the same path an LLM response takes — so the lang-layer behavior (positional args, validation, Action) is visible as-is.

  • Default — a contact form matching the library's own prompt example (Input / Select / TextArea with required rules and a hint)
  • ValidationErrors — a play function submits the empty form, showing the per-field "This field is required" hints produced by the primary-button validation path
  • AllControlTypes — covers the full FormControl input union: DatePicker, Slider, CheckBoxGroup, RadioGroup

The stories live under a new GenUI/ Storybook section to keep lang-layer components separate from Components/, and to give future lang-only stories (e.g. Stack) a home.

Testing

  • Both openui-lang programs parse cleanly against openuiLibrary.toJSONSchema() (no errors, unresolved refs, or orphans)
  • tsc --noEmit reports no errors for the new file
  • Verified all three stories render in Storybook, including the play-function validation errors

🤖 Generated with Claude Code

Form is a genui-lib (openui-lang) component with no standalone React
counterpart, so it had no Storybook coverage: the existing stories under
components/*/stories exercise the plain React components, and the lang
layer's Form container — validation wiring, primary-button validation,
the FormControl input union — was never rendered anywhere in Storybook.

Render openui-lang programs through Renderer with openuiLibrary, the
same path an LLM response takes. Three stories: a contact form matching
the library's prompt example, a play-function story that submits the
empty form to show per-field validation errors, and a form covering
every FormControl input type (DatePicker, Slider, CheckBoxGroup,
RadioGroup).

The stories live under a new "GenUI/" Storybook section to keep
lang-layer components separate from "Components/", and to give future
lang-only stories (e.g. Stack) a home.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant