Description

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:
  1. Consolidate the sources of stories (apps/storybook-react, packages/design-tokens, packages/design-system-react) into a logical hierarchy.
  2. Define categories that align with the project’s design system and component types.
  3. 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.

References

• Storybook Configuration Docs
• Storybook Add-ons Documentation
• Related PRs/Issues:
  • Add references to related PRs or discussions here if applicable.

Let me know if you’d like me to refine this further!