asgardeo / asgardeo/javascript
chore: set up `Storybook` for Component Library Documentation and Testing
- Dominant language
- TypeScript
- Stars
- 18
- Forks
- 67
- Avg merge
- 4h 6m
- Merged PRs (30d)
- 13
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.
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
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
- [x] I have searched the existing issues and this is not a duplicate.
- [x] I have provided all the necessary information.
- [x] I have verified the improvement is not available in the latest version of the package.
Contributor guide
Assessment
This issue has not been assessed yet.