Merge pull request #26621 from nkabrown/docs-csf-v3

Docs: Align documentation with CSF v3
(cherry picked from commit 09be01b116562fa1663ee1a3f4236905491dcade)

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

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`.
 
 <!-- prettier-ignore-start -->
 

docs/writing-stories/index.md

@@ -4,7 +4,8 @@ title: 'How to write stories'
 
 <YouTubeCallout id="P0WHt_L0-2g" title="How to write Storybook stories | Component Story Format" />
 
-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 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.
 
@@ -169,7 +170,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.
 
 <!-- prettier-ignore-start -->