-
Notifications
You must be signed in to change notification settings - Fork 41
Open
Labels
@asgardeo/reactIssues related to the `React.js` wrapper of Asgardeo JavaScript SDKIssues related to the `React.js` wrapper of Asgardeo JavaScript SDKComplexity/MediumIssues with the implementation complexity flagged as `Medium`Issues with the implementation complexity flagged as `Medium`Type/Improvementgood first issueGood for newcomersGood for newcomers
Description
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.
- 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
- Add Storybook to
@asgardeo/reactPackage
- Configure Storybook to target the React components in the
@asgardeo/reactpackage - Set up Storybook to discover and load stories from the React package components
- Configure Vite framework integration for optimal build performance
- Add Storybook to
@asgardeo/nextjsPackage
- Extend Storybook configuration to include Next.js specific components
- Configure story discovery for Next.js package components
- Ensure compatibility with Next.js component patterns
- Create Storybook Stories Structure
- Add
.stories.tsxfiles alongside existing components likeOrganizationSwitcher - Create stories for different component states (default, loading, error)
- Document component props and usage examples in stories
- 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-UStranslations - Enable testing components in different language contexts
- 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
- 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
Labels
@asgardeo/reactIssues related to the `React.js` wrapper of Asgardeo JavaScript SDKIssues related to the `React.js` wrapper of Asgardeo JavaScript SDKComplexity/MediumIssues with the implementation complexity flagged as `Medium`Issues with the implementation complexity flagged as `Medium`Type/Improvementgood first issueGood for newcomersGood for newcomers