refactor(joint-react): unify Storybook design system, remove embedded docs#3431
Open
samuelgja wants to merge 1 commit into
Open
refactor(joint-react): unify Storybook design system, remove embedded docs#3431samuelgja wants to merge 1 commit into
samuelgja wants to merge 1 commit into
Conversation
… docs
Rebuilds the @joint/react Storybook around one Showcase frame applied via a
global decorator: a shared graph-paper canvas, syntax-highlighted collapsible
Show-code, and reusable brand tokens / .jj-* classes so every story reads as
one product.
- Removes all docs.mdx/story.mdx pages and the step-by-step tutorial (docs now
live on the docs site); introduction.mdx becomes a small landing page.
- Auto-injects each story's source via ?raw imports instead of hand-written
strings; demo code is self-contained.
- Makes .jj-paper transparent in the storybook so the dark canvas shows through
(removing the per-story PAPER_STYLE workaround).
- Points API links at docs.jointjs.com/api-react/{Category}/{Name}.
- Drops dead utils (make-story, stories-utils, with-simple-data), unused UI
components and 4 unused devDependencies; refreshes a stale knip config.
Storybook only - no src changes.
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.
Description
Refactors the
@joint/reactStorybook into a single unified design system and removes documentation that now lives on the docs site. Storybook only — nosrcchanges.Unified design system (
stories/ui/) — a global decorator wraps every story in one branded frame, so all 60 stories read as one product:Showcase— category eyebrow, title, one-line description, API reference link, variant badgeCanvas— shared graph-paper dot-grid drawing surfaceCodeBlock— syntax-highlighted (prism-react-renderer), collapsible "Show code" with line numbers, copy button and multi-file tabstokens.css/demo.css— JointJS brand tokens plus reusable.jj-btn/.jj-input/.jj-node/.jj-controlsclasses so demo internals matchDocs removed — all 26
docs.mdx/story.mdxpages and the Step-by-step tutorial (docs live on the docs site).introduction.mdxis now a small landing page. API links point atdocs.jointjs.com/api-react/{Category}/{Name}.Source is auto-injected — every story shows its real demo file via a
?rawimport; no hand-maintained code strings. Demo code is self-contained (nostorybook-config/themeimports).Diagram theming —
.jj-paperships an opaque light background, which every story used to override with an inline darkPAPER_STYLE. It is now transparent in the storybook so the shared dark canvas shows through, and incidental light element colors were remapped to one dark palette. Colors that carry meaning (theming demos, status colors, charts) are untouched.Cleanup — removed
make-story,stories-utils,with-simple-data, unused UI components, and 4 unused devDependencies; refreshed a staleknip.jsonwhose entry patterns did not match this package'sstory.tsxconvention.Motivation and Context
The Storybook had drifted — every story styled its own paper, buttons and nodes, so the gallery looked like a dozen different products. It also duplicated documentation that now lives on the docs site, so the same content was maintained twice and went stale. Storybook is now purely a visual, interactive gallery of runnable examples with a consistent look, which also makes it embeddable in the docs site later.
This replaces a previous PR that accidentally bundled unrelated
srcchanges with the storybook work; this branch contains only the storybook refactor, based directly onmaster.Verification
yarn testpasses: typecheck, lint (0 errors), knip, jest 93 suites / 1026 tests (React 19) and 92 / 1022 (React 18)yarn build-storybooksucceedsScreenshots (if appropriate):