asgardeo / asgardeo/javascript

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

Aperta
#146 19 commenti 0 reazioni 0 assegnatari Vedi su GitHub
@asgardeo/react Complexity/Medium good first issue Type/Improvement
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.