feat: add Storybook for backend-free UI work#308
Conversation
Adds Storybook 10 with the @storybook/nextjs framework so design and
component work no longer requires standing up the full dashboard backend.
Highlights:
- .storybook config mirrors tsconfig path aliases and wraps stories in
ThemeProvider, TooltipProvider, and Toaster (no tRPC needed).
- Server actions are aliased to a stub and next-safe-action/hooks is
redirected to a controllable mock so server-only deps stay out of the
bundle and stories can drive success / pending / error states.
- First story: CreateApiKeyDialog with five play-driven states
(empty form, validation error, submitting, server error, success
with revealed key), used to iterate on the dialog UX.
Dialog UX follow-ups while writing the stories:
- Title/description switch on the success step ("Your New API Key", no
description); removed the now-redundant inner label.
- Close button is variant=secondary; the X is hidden on the success step.
- Copy button is variant=primary; clicking the readonly key field also
copies and shares the same animation state as the button.
- Input primitive: readOnly inputs no longer show hover/focus affordances
intended for editable fields.
Run with `bun run storybook` (defaults to port 6006).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
@hsiez is attempting to deploy a commit to the E2B Team on Vercel. A member of the Team first needs to authorize it. |
|
Before After |
|
@ben-fornefeld I totally understand if the storybook integration is too intrusive, worth an attempt. |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6ab9189b0b
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| const screen = await openDialog(canvasElement) | ||
| const input = await screen.findByLabelText('Name') | ||
| await userEvent.type(input, 'production-key') | ||
| await userEvent.click(await screen.findByRole('button', { name: /^create key$/i })) |
There was a problem hiding this comment.
The SuccessWithRevealedKey play function still expects Your API Key, but the component now renders Your New API Key on success (create-api-key-dialog.tsx). This makes the play function fail whenever the story runs, so the success state story is effectively broken and no longer validates the intended UI flow.
Useful? React with 👍 / 👎.
1 participant
Adds Storybook 10 with the @storybook/nextjs framework so design and component work no longer requires standing up the full dashboard backend.
Highlights:
Dialog UX follow-ups while writing the stories:
Run with
bun run storybook(defaults to port 6006).