Replace design-system with Storybook app#306
Merged
Conversation
Migrate the component gallery from the bespoke `@react-grab/design-system`
package + `/design-system` Next.js route into a proper Storybook 10 app at
`apps/storybook`. Gallery now lives outside the website build, runs
standalone at :6006, and covers each overlay component in isolation.
- Playground story mirrors the old full-scene preview with arg controls
- Components/SelectionLabel, ContextMenu, Toolbar, CommentsDropdown each
expose their real states (idle / prompt / copying / copied / error,
collapsed edges, comment presets, long-name truncation)
- Shared fixtures + demo bounds + noop helper keep stories lean
- Scoped `no-unassigned-vars: off` for *.tsx in root vp lint config so
Solid's `ref={varName}` shorthand doesn't trip the linter
- Drop `vp check` duplication across per-package scripts; rely on root
- Fix two pre-existing `no-useless-escape` lint warnings in cli and
find-unique-selector regexes
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
commit: |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| │ ├── main.ts ← Storybook config | ||
| │ └── preview.tsx ← global parameters & CSS import | ||
| └── stories/ | ||
| ├── constants.ts ← shared magic numbers (ms, px) |
Contributor
There was a problem hiding this comment.
Suggested change
| ├── constants.ts ← shared magic numbers (ms, px) | |
| ├── demo-bounds.ts ← shared magic numbers (ms, px) |
README.md references non-existent constants.ts file instead of the actual demo-bounds.ts file
aidenybai
added a commit
that referenced
this pull request
Apr 20, 2026
Follow-up to #306: wire the existing `canvasDecorator` (preview.tsx) and `assertMounted` helper (assertions.ts) into all five story files that were still hand-rolling the wrapping and `waitFor` assertion blocks. - Drop `<Canvas>` wrapping from every `render()` — the decorator now handles full-viewport styling globally - Replace 5 copies of `waitFor(() => expect(...).not.toBeNull())` with single-line `assertMounted(canvasElement, "[data-...]")` calls - Extract the sample dashboard JSX from `renderer.stories.tsx` into the already-created `SampleDashboard` component, trimming the renderer story from 444 → 240 lines - Playground `NoSelection` path now uses `assertNotMounted` instead of an `if/else` inside `waitFor`
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@react-grab/design-systempackage +apps/website/app/design-system/Next.js route into a standalone Storybook 10 app atapps/storybook/http://localhost:6006, and isolates each overlay component with its real statesno-unassigned-vars: offto*.tsxin the root vp config so Solid's idiomaticref={varName}shorthand stops producing 9 false-positive warningslint/format/checkscripts fromreact-graband@react-grab/storybook— all consolidated at root viavp checkWhat's in the gallery
selectedElement, prompt mode, context menu, comment presets). Element metadata derives fromdata-story-id/data-componentattributes on the JSX nodes, so adding a new sample element is a one-line JSX change.Each component meta ships a
playsmoke test that asserts its root selector mounts.Notable changes
apps/storybook/.storybook/main.tsdisablesstorybook-solidjs-vitedocgen (removes ~30 noisy dev-server warnings — docgen is React-only and useless here)packages/react-grab/src/utils/find-unique-selector.ts+packages/cli/src/commands/configure.ts: fix two pre-existingno-useless-escaperegex warnings ([a-z\-]→[a-z-])vite.config.ts:lint.rules.overridesaddsno-unassigned-vars: offscoped to**/*.tsx. Rule still catches real never-assigned bugs in.tsfiles; only disabled where Solid's JSX ref compiler transform is in play.pnpm typecheckwired intoturbo run typecheckso bothreact-graband@react-grab/storybooktypecheck in CI.apps/website/app/design-system/route +packages/design-system/package entirely — gallery no longer lives in the website.Test plan
pnpm check— 380 files formatted, 324 lint-cleanpnpm typecheck— all 4 turbo tasks passpnpm --filter @react-grab/storybook build— static build succeedspnpm --filter @react-grab/storybook dev— all 40 stories render at:6006, play functions pass in the Interactions panelpnpm build— core packages still build (storybook not in default filter, by design)Note
Medium Risk
Medium risk because it removes the
@react-grab/design-systempackage and the website’s/design-systemroute, and changes build/typecheck wiring, which could break internal developer workflows if any hidden dependencies remain.Overview
Moves the UI state gallery out of the website and into a new standalone
apps/storybookStorybook 10 workspace (SolidJS+Vite), including stories forSelectionLabel,ContextMenu,Toolbar,CommentsDropdown, plus a fullReactGrabRendererplayground.Deletes the
packages/design-systempackage and removes the Next.jsapps/website/app/design-systemroute and related website build dependency, while updating Changesets ignore list and docs to reflect the new app.Tweaks repo tooling: runs root
typecheckviaturbo run typecheck, adds a lint override disablingno-unassigned-varsfor*.tsx, and fixes two minor regex warnings in the CLI config parser andfind-unique-selectorutility.Reviewed by Cursor Bugbot for commit 09440ae. Bugbot is set up for automated code reviews on this repo. Configure here.