storybook-guidelines

Storybook stories for conditional rendering should explicitly cover each state branch, such as elements shown or hidden by conditions. This ensures stories demonstrate real state changes and predictable behavior rather than trivial prop variations.

Meta configuration should be minimal and imports should be explicit, avoiding barrel imports. Use the project alias for imports to maintain clear dependency tracking and ensure robust component stories.

Storybook supports Japanese naming for component stories to make visual distinctions immediately clear. This approach maintains consistency across components and helps developers quickly identify specific UI states.

Event handlers in Storybook stories should be defined using fn() within per-story args. TypeScript with inline documentation is required to provide clear maintainability and type safety for component logic.

Storybook stories often lack coverage because they drift toward non-critical prop variations instead of conditional rendering branches. Following concise rules to focus on real state changes ensures comprehensive UI coverage.

Barrel imports are not recommended for Storybook stories. Explicit imports with the project alias are required to prevent unnecessary variations and ensure predictable component behavior during testing.