Learn-skills.dev nebula-storybook-stories

CRITICAL: Every component MUST have an individual story file.

Each component in

src/components/

requires a corresponding story file in

src/stories/

. The story file:

• Must be named

  <component-name>.stories.jsx

  (kebab-case with hyphens)
• Must import the component from

  @/components/<component-name>

• Must showcase the component's props and variants

Example structure:

src/components/my-card/
├── index.jsx
└── component.yml

src/stories/my-card.stories.jsx  # Required story file for my-card component

Name mapping

Use this canonical mapping for component/story naming:

• component.yml machineName

  :

  my-card

• Component folder:

  src/components/my-card/

• Component import:

  @/components/my-card

• Story file:

  src/stories/my-card.stories.jsx

Story file requirements:

• Use Storybook CSF3 format (object-based stories).
• Include

  argTypes

  for props with predefined options (like enums).
• Create multiple story exports to showcase different variants.
• Use decorators when components need specific backgrounds (e.g., dark backgrounds for light-colored components).

After creating components, verify story files exist:

# List all story files
ls src/stories/*.stories.jsx

# Verify a specific component has its story
ls src/stories/<component-name>.stories.jsx