frontend-storybook

Frontend Storybook Rules

Vue naming, styling, icons, and derived-state also auto-attach from frontend-component.mdc (*.stories.ts is *.ts).

Running Storybook

Start Storybook locally for component development and debugging:

CURSOR_DEV=true nix develop -c pnpm storybook

Storybook starts on http://localhost:6006 by default.

Shared Test Data Builders

Storybook stories reuse the same makeMe builders as unit tests. Source code lives in packages/donut-test-fixtures.

import makeMe from "donut-test-fixtures/makeMe"

The makeMe object provides access to test data builders:

• makeMe.anAnsweredQuestion creates recall prompts with answers.
• makeMe.anMcq creates MCQ data.
• makeMe.aNote creates note data.
• makeMe.aNoteRealm creates note realm data.
• Many other API-shaped builders are available.

const correctQuestion = makeMe.anAnsweredQuestion
  .answerCorrect(true)
  .withChoiceIndex(0)
  .please()

const questionWithNote = makeMe.anAnsweredQuestion
  .withNote(makeMe.aNote.topicConstructor("TypeScript").please())
  .answerCorrect(true)
  .please()

Writing A Story

1. Create a file named ComponentName.stories.ts in the same directory as the component.
2. Import the component and necessary builders.
3. Define the story meta and stories.

import type { Meta, StoryObj } from "@storybook/vue3"
import makeMe from "donut-test-fixtures/makeMe"
import MyComponent from "./MyComponent.vue"

const meta = {
  title: "Category/MyComponent",
  component: MyComponent,
  tags: ["autodocs"],
} satisfies Meta<typeof MyComponent>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    prop1: makeMe.someBuilder.please(),
  },
}

Story Variants

Create multiple story variants to showcase different component states:

export const Variant1: Story = {
  args: {
    // props for variant 1
  },
}

export const Variant2: Story = {
  args: {
    // props for variant 2
  },
}