refactor(joint-react): unify Storybook design system, remove embedded docs#3428
Open
samuelgja wants to merge 3 commits into
Open
refactor(joint-react): unify Storybook design system, remove embedded docs#3428samuelgja wants to merge 3 commits into
samuelgja wants to merge 3 commits into
Conversation
…ement with JointJS collections
…rrors during visibility changes
…e display - Implemented CodeBlock component with collapsible and copyable functionality. - Integrated Prism.js for syntax highlighting with a custom theme. - Added demo styles for unified controls and nodes in Storybook. - Created Showcase component to unify story presentation with code display. - Introduced design tokens for consistent styling across the Storybook. - Updated API documentation links to point to the new JointJS documentation. - Removed unused makeStory utility to streamline codebase. - Updated dependencies in yarn.lock for improved package management.
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 the documentation that now lives in the docs site.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 are gone (docs live at docs.jointjs.com).introduction.mdxis now a small landing page. API links point at the realdocs.jointjs.com/api-react/{Category}/{Name}instead of a placeholder domain.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), so what readers copy is what runs.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 rather than one. It also duplicated documentation that now lives on the docs site, which meant the same content was maintained twice and went stale — several
docs.mdxpages described APIs the demos no longer used.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.
Verification
yarn testpasses: typecheck, lint (0 errors), knip, jest 94 suites / 1032 tests (React 19) and 93 / 1028 (React 18)yarn build-storybooksucceedsScreenshots (if appropriate):