Skip to content

chore: set up Storybook for Component Library Documentation and Testing #146

@brionmario

Description

@brionmario

Current Limitation

Currently, the @asgardeo/react UI components doesn't have support for testing in isolation. This creates several development and testing challenges:

Current State:

  • No Storybook visual component documentation or testing platform
  • Components like OrganizationSwitcher, CreateOrganization, etc. can only be tested within full application context
  • Difficult to test component variations, edge cases, and different prop combinations in isolation
  • No Storybook stories to showcase component API and usage examples
  • Manual testing required for UI regression detection without Storybook visual testing

Missing Storybook Capabilities:

  • Interactive Storybook component playground for developers
  • Storybook visual regression testing for UI components
  • Storybook component documentation with live examples
  • Isolated testing environment for different component states
  • Storybook design system validation and consistency checking
  • Storybook accessibility testing in isolation

Suggested Improvement

Implement Storybook for component testing in isolation across the React packages in the monorepo.

  1. Install Storybook Dependencies
  • Install Storybook core packages and React framework support in the monorepo root
  • Add Storybook addons for accessibility testing, essentials, and visual regression testing
  1. Add Storybook to @asgardeo/react Package
  • Configure Storybook to target the React components in the @asgardeo/react package
  • Set up Storybook to discover and load stories from the React package components
  • Configure Vite framework integration for optimal build performance
  1. Add Storybook to @asgardeo/nextjs Package
  • Extend Storybook configuration to include Next.js specific components
  • Configure story discovery for Next.js package components
  • Ensure compatibility with Next.js component patterns
  1. Create Storybook Stories Structure
  • Add .stories.tsx files alongside existing components like OrganizationSwitcher
  • Create stories for different component states (default, loading, error)
  • Document component props and usage examples in stories
  1. Integrate with Existing i18n System
  • Configure Storybook to use the existing translation system from packages/javascript/src/i18n/
  • Set up locale switching in Storybook toolbar using the en-US translations
  • Enable testing components in different language contexts
  1. Configure Storybook Addons
  • Set up accessibility addon for WCAG compliance testing
  • Configure visual regression testing with Chromatic
  • Add design tokens addon for consistent theming
  • Enable essential addons for controls, docs, and viewport testing
  1. Add Build Scripts
  • Add Storybook development and build scripts to package.json
  • Configure Storybook build output for deployment
  • Set up Storybook static build generation

Please select the package issue is related to

@asgardeo/react, @asgardeo/nextjs

Version

current

Reporter Checklist

  • I have searched the existing issues and this is not a duplicate.
  • I have provided all the necessary information.
  • I have verified the improvement is not available in the latest version of the package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    @asgardeo/reactIssues related to the `React.js` wrapper of Asgardeo JavaScript SDKComplexity/MediumIssues with the implementation complexity flagged as `Medium`Type/Improvementgood first issueGood for newcomers

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions