Cursor rule

1---
2description: Frontend Storybook stories for Vue components, story format, story variants, makeMe builders, Storybook aliases
3globs: frontend/src/**/*.stories.ts
4alwaysApply: false
5---
6# Frontend Storybook Rules
7 
8Use this rule when creating or updating frontend Storybook stories. Component-level naming, styling, icon, and derived-state conventions live in `frontend-component.mdc`.
9 
10## Running Storybook
11 
12Start Storybook locally for component development and debugging:
13 
14```bash
15CURSOR_DEV=true nix develop -c pnpm storybook
16```
17 
18Storybook starts on `http://localhost:6006` by default.
19 
20## Shared Test Data Builders
21 
22Storybook stories reuse the same `makeMe` builders as unit tests. Source code lives in `packages/doughnut-test-fixtures`.
23 
24```typescript
25import makeMe from "doughnut-test-fixtures/makeMe"
26```
27 
28The `makeMe` object provides access to test data builders:
29 
30- `makeMe.anAnsweredQuestion` creates recall prompts with answers.
31- `makeMe.aPredefinedQuestion` creates predefined question data.
32- `makeMe.aNote` creates note data.
33- `makeMe.aNoteRealm` creates note realm data.
34- Many other API-shaped builders are available.
35 
36```typescript
37const correctQuestion = makeMe.anAnsweredQuestion
38  .answerCorrect(true)
39  .withChoiceIndex(0)
40  .please()
41 
42const questionWithNote = makeMe.anAnsweredQuestion
43  .withNote(makeMe.aNote.topicConstructor("TypeScript").please())
44  .answerCorrect(true)
45  .please()
46```
47 
48## Writing A Story
49 
501. Create a file named `ComponentName.stories.ts` in the same directory as the component.
512. Import the component and necessary builders.
523. Define the story meta and stories.
53 
54```typescript
55import type { Meta, StoryObj } from "@storybook/vue3"
56import makeMe from "doughnut-test-fixtures/makeMe"
57import MyComponent from "./MyComponent.vue"
58 
59const meta = {
60  title: "Category/MyComponent",
61  component: MyComponent,
62  tags: ["autodocs"],
63} satisfies Meta<typeof MyComponent>
64 
65export default meta
66type Story = StoryObj<typeof meta>
67 
68export const Default: Story = {
69  args: {
70    prop1: makeMe.someBuilder.please(),
71  },
72}
73```
74 
75## Story Variants
76 
77Create multiple story variants to showcase different component states:
78 
79```typescript
80export const Variant1: Story = {
81  args: {
82    // props for variant 1
83  },
84}
85 
86export const Variant2: Story = {
87  args: {
88    // props for variant 2
89  },
90}
91```
92 
93## Module Aliases
94 
95Storybook supports the same module aliases as the main application:
96 
97- `@/` points to `src/`.
98- `@tests/*` points to `tests/`, for example `@tests/helpers`.
99- `@generated/` points to `generated/`.
100 
101For API-shaped fixtures, import `makeMe` from `doughnut-test-fixtures/makeMe`; do not use an `@tests/fixtures` alias.
102 
103## Global Styles
104 
105Storybook automatically loads global styles from `src/assets/daisyui.css`, including Tailwind CSS base styles, DaisyUI component styles, and custom application styles.
106 
107## Best Practices
108 
1091. Reuse builders: always use `makeMe` instead of ad-hoc mock objects that duplicate API shapes.
1102. Avoid duplication: use builders for consistency.
1113. Add multiple variants to showcase different component states.
1124. Use the `autodocs` tag to automatically generate documentation.
1135. Keep builders framework-neutral so they work in both tests and Storybook.
114