## Summary
Reviewed and refactored all Storybook stories to use shared utilities,
eliminating ~200 lines of duplicate code while ensuring stories use
current theme, config, and styles consistently.
## Changes
### New Shared Utilities (.storybook/)
- **argTypes.ts**: Shared argTypes definitions (hostname, subscription, etc.)
- **decorators.tsx**: Reusable decorators (context providers, hostname mocking)
- **mocks.ts**: Shared mock context values (AFConfig, AppContext)
### Refactored Story Files
- HomePageSetting.stories.tsx: Now uses shared utilities
- UpgradeBanner.stories.tsx: Reduced from ~195 to ~80 lines
- UpgradePlan.stories.tsx: Reduced from ~180 to ~95 lines
- TextColor.stories.tsx: Uses shared argTypes
- RecordNotFound.stories.tsx: Reduced from ~235 to ~170 lines
### Configuration Updates
- **main.ts**: Added MUI optimizeDeps for proper theme support, removed deprecated buildStoriesJson
- **GUIDE.md**: Comprehensive documentation with examples and best practices
- **tsconfig.web.json**: Explicitly exclude .storybook/ from production builds
### Lint Fixes & Improvements
- **ApproveRequestPage.tsx**: Added missing blank line (lint fix)
- **subscription.ts**: Fixed type casting to avoid @typescript-eslint/no-explicit-any
- **AppTheme.tsx**: Changed to named imports (better practice)
## Benefits
- ✅ Zero code duplication across stories
- ✅ Consistent theme, config, and styles across all stories
- ✅ Better maintainability (change once, apply everywhere)
- ✅ Improved type safety with shared utilities
- ✅ Comprehensive documentation for future story development
- ✅ Storybook files guaranteed excluded from production builds
## Testing
- All linting passes (pnpm run lint)
- Storybook configuration verified to not be included in production builds
- Multiple layers of protection ensure isolation from main application
Co-Authored-By: Claude <noreply@anthropic.com>
