asgardeo / asgardeo/javascript

chore: set up `Storybook` for Component Library Documentation and Testing

Open
#146 19 comments 0 reactions 0 assignees View on GitHub
@asgardeo/react Complexity/Medium good first issue Type/Improvement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.