The current state of storybook-react lacks proper categorization and order for the stories being pulled from various locations:
apps/storybook-react
packages/design-tokens
packages/design-system-react
This disorganized structure makes it challenging to navigate and understand the components and their documentation effectively. To improve the usability and documentation of storybook-react, we need to update its configuration and organization.
Technical Details
Goal: Ensure a consistent structure in storybook-react to better categorize and organize stories.
Scope:
Consolidate the sources of stories (apps/storybook-react, packages/design-tokens, packages/design-system-react) into a logical hierarchy.
Define categories that align with the project’s design system and component types.
Apply custom sorting to ensure components are listed in a meaningful order.
Documentation Improvements:
Add descriptive metadata for each story to clarify its purpose and usage.
Enhance storybook’s overall appearance and accessibility by leveraging Storybook add-ons (e.g., @storybook/addon-docs, @storybook/addon-controls).
Improve documentation for existing stories, ensuring they provide comprehensive examples and usage guidelines.
Tooling Updates:
Evaluate and apply configuration changes to Storybook (e.g., main.js, preview.js).
Introduce global themes or decorators to provide a consistent design.
Acceptance Criteria
Stories are categorized under clear, logical headings, e.g.:
Design Tokens
Components
The order of stories reflects the natural hierarchy of components.
Stories include detailed documentation with:
Example usage.
Props documentation.
Visual examples (e.g., controls, states).
Storybook configuration (main.js and preview.js) reflects the new categorization and order.
The updated Storybook instance is functional, accessible, and user-friendly.
Description
The current state of
storybook-reactlacks proper categorization and order for the stories being pulled from various locations:apps/storybook-reactpackages/design-tokenspackages/design-system-reactThis disorganized structure makes it challenging to navigate and understand the components and their documentation effectively. To improve the usability and documentation of
storybook-react, we need to update its configuration and organization.Technical Details
storybook-reactto better categorize and organize stories.apps/storybook-react,packages/design-tokens,packages/design-system-react) into a logical hierarchy.@storybook/addon-docs,@storybook/addon-controls).main.js,preview.js).Acceptance Criteria
main.jsandpreview.js) reflects the new categorization and order.References
Let me know if you’d like me to refine this further!