From 08fd06435ae7ad5c877014a52322bf222a58c176 Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Fri, 22 Mar 2024 11:02:29 -0400 Subject: [PATCH 1/2] Align documentation with CSF v3 * CSF v3 component examples are story objects not story functions * add missing punctuation mark --- docs/builders/vite.md | 2 +- docs/get-started/whats-a-story.md | 2 +- docs/writing-stories/index.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/builders/vite.md b/docs/builders/vite.md index a254e7b5f7a0..2acc59769c1a 100644 --- a/docs/builders/vite.md +++ b/docs/builders/vite.md @@ -109,7 +109,7 @@ If you need, you can also configure Storybook's Vite builder using TypeScript. R ### Working directory not being detected -By default, the Vite builder enables Vite's [`server.fs.strict`](https://vitejs.dev/config/#server-fs-strict) option for increased security, defining the project's `root` to Storybook's configuration directory +By default, the Vite builder enables Vite's [`server.fs.strict`](https://vitejs.dev/config/#server-fs-strict) option for increased security, defining the project's `root` to Storybook's configuration directory. If you need to override it, you can use the `viteFinal` function and adjust it. ### ArgTypes are not generated automatically diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md index 9ef527d5d6c3..af516341df3e 100644 --- a/docs/get-started/whats-a-story.md +++ b/docs/get-started/whats-a-story.md @@ -8,7 +8,7 @@ The CLI created example components that demonstrate the types of components you Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js` or `.stories.ts`. The stories are written in Component Story Format (CSF)--an ES6 modules-based standard--for writing component examples. -Let’s start with the `Button` component. A story is a function that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`. +Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`. diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md index 28aa1cfeee5a..3f9b4b2fa613 100644 --- a/docs/writing-stories/index.md +++ b/docs/writing-stories/index.md @@ -4,7 +4,7 @@ title: 'How to write stories' -A story captures the rendered state of a UI component. It’s a function that returns a component’s state given a set of arguments. +A story captures the rendered state of a UI component. It’s an object with annotations and a render function that returns a component’s state given a set of arguments. Storybook uses the generic term arguments (args for short) when talking about React’s `props`, Vue’s `props`, Angular’s `@Input`, and other similar concepts. @@ -169,7 +169,7 @@ Your story will now be shown in the sidebar with the given text. ## How to write stories -A story is a function that describes how to render a component. You can have multiple stories per component, and the simplest way to create stories is to render a component with different arguments multiple times. +A story is an object that describes how to render a component. You can have multiple stories per component, and the simplest way to create stories is to render a component with different arguments multiple times. From b2f5a90c899559002d62496ad578be722a6b21b9 Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Mon, 25 Mar 2024 09:32:49 -0400 Subject: [PATCH 2/2] Update docs/writing-stories/index.md Co-authored-by: jonniebigodes --- docs/writing-stories/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md index 3f9b4b2fa613..abc6632d90f8 100644 --- a/docs/writing-stories/index.md +++ b/docs/writing-stories/index.md @@ -4,7 +4,8 @@ title: 'How to write stories' -A story captures the rendered state of a UI component. It’s an object with annotations and a render function that returns a component’s state given a set of arguments. +A story captures the rendered state of a UI component. It's an object with annotations that describe the component's behavior and appearance given a set +of arguments. Storybook uses the generic term arguments (args for short) when talking about React’s `props`, Vue’s `props`, Angular’s `@Input`, and other similar concepts.