asgardeo / asgardeo/javascript
chore: set up `Storybook` for Component Library Documentation and Testing
- Lingua principale
- TypeScript
- Stelle
- 18
- Fork
- 67
- Merge medio
- 4h 6m
- PR unite (30g)
- 13
Descrizione
### 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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia esaminando i file package.json del monorepo e il sistema di traduzione esistente in packages/javascript/src/i18n/. Esamina i componenti OrganizationSwitcher e CreateOrganization per determinare la copertura delle story per i package @asgardeo/react e @asgardeo/nextjs. Il lavoro è completato quando Storybook viene eseguito e compilato, rileva le story per entrambi i package, supporta gli addon indicati e il cambio di locale e include esempi predefiniti, di caricamento e di errore.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- nextjs, react, storybook, typescript, vite
- Ambito
- devtools, documentation, frontend, testing
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 25/100