WIP: Update multiple components guidance

docs/snippets/angular/list-story-unchecked.ts.mdx → docs/snippets/angular/reuse-story-csf2.ts.mdx

@@ -1,24 +1,16 @@
 ```ts
 // List.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/angular';
-
 import { moduleMetadata } from '@storybook/angular';
-
 import { CommonModule } from '@angular/common';
 
 import { List } from './list.component';
 import { ListItem } from './list-item.component';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
@@ -31,11 +23,6 @@ const meta: Meta<List> = {
 export default meta;
 type Story = StoryObj<List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const OneItem: Story = {
   render: (args) => ({
     props: args,

docs/snippets/angular/reuse-story-render-function.ts.mdx

@@ -0,0 +1,36 @@
+```ts
+// List.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+const meta: Meta<List> = {
+  component: List,
+  decorators: [
+    moduleMetadata({
+      declarations: [List, ListItem],
+      imports: [CommonModule],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<List>;
+
+export const OneItem: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        ${Unchecked.render({ ...Unchecked.args })}
+      </app-list>
+   `,
+  }),
+};
+```

docs/snippets/solid/list-story-unchecked.js.mdx → docs/snippets/react/reuse-story-csf2.js.mdx

@@ -1,17 +1,11 @@
 ```js
 // List.stories.js|jsx
-
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 

docs/snippets/react/list-story-unchecked.ts-4-9.mdx → docs/snippets/react/reuse-story-csf2.ts-4-9.mdx

@@ -1,19 +1,13 @@
 ```ts
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 

docs/snippets/react/list-story-unchecked.ts.mdx → docs/snippets/react/reuse-story-csf2.ts.mdx

@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 

docs/snippets/react/reuse-story-portable.js.mdx

@@ -0,0 +1,22 @@
+```js
+// List.stories.js|jsx
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export default {
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```

docs/snippets/react/reuse-story-portable.ts-4-9.mdx

@@ -0,0 +1,26 @@
+```ts
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```

docs/snippets/react/reuse-story-portable.ts.mdx

@@ -0,0 +1,29 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```
+
+
+

docs/snippets/react/list-story-unchecked.js.mdx → docs/snippets/solid/reuse-story-csf2.js.mdx

@@ -1,17 +1,11 @@
 ```js
 // List.stories.js|jsx
-
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 

docs/snippets/solid/list-story-unchecked.ts-4-9.mdx → docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx

@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 

docs/snippets/solid/list-story-unchecked.ts.mdx → docs/snippets/solid/reuse-story-csf2.ts.mdx

@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 

docs/snippets/solid/reuse-story-render-function.js.mdx

@@ -0,0 +1,19 @@
+```js
+// List.stories.js|jsx
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export default {
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}
+    </List>
+  ),
+};
+```

docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx

@@ -0,0 +1,24 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}
+    </List>
+  ),
+};
+```

docs/snippets/solid/reuse-story-render-function.ts.mdx

@@ -0,0 +1,24 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}>
+    </List>
+  ),
+};
+```

docs/snippets/vue/list-story-unchecked.3.js.mdx → docs/snippets/vue/reuse-story-csf2.js.mdx

@@ -1,18 +1,12 @@
 ```js
 // List.stories.js
-
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -22,9 +16,6 @@ export default {
  * to learn how to use render functions.
  */
 export const OneItem = {
-  args: {
-    ...Unchecked.args,
-  },
   render: (args) => ({
     components: { List, ListItem },
     setup() {
@@ -33,5 +24,8 @@ export const OneItem = {
     },
     template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
   }),
+  args: {
+    ...Unchecked.args,
+  },
 };
 ```