From 60cd3ae4bbe5b4010bedf38b09019b22ec654aba Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Sat, 18 Feb 2023 17:09:12 -0500
Subject: [PATCH 01/36] Added solid to frameworks list.

---
 docs/frameworks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/frameworks.js b/docs/frameworks.js
index f37ffd6cd8cc..f98084101d8c 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -1,6 +1,6 @@
 module.exports = {
   coreFrameworks: ['react', 'vue', 'angular', 'web-components'],
-  communityFrameworks: ['ember', 'html', 'svelte', 'preact', 'qwik'],
+  communityFrameworks: ['ember', 'html', 'svelte', 'preact', 'qwik', 'solid'],
   featureGroups: [
     {
       name: 'Essentials',

From e998e3be0e0a3f63fffd497abbbab30776a9b65f Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Sat, 18 Feb 2023 17:09:48 -0500
Subject: [PATCH 02/36] Added helper script for synchronizing docs with
 frontpage repo.

---
 docs/sync.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 docs/sync.js

diff --git a/docs/sync.js b/docs/sync.js
new file mode 100644
index 000000000000..e7bddb54eb94
--- /dev/null
+++ b/docs/sync.js
@@ -0,0 +1,74 @@
+/**
+ * Util script for synchronizing docs with frontpage repository.
+ * For running it:
+ * - cd /storybook/docs
+ * - node sync.js 
+ */
+const fs = require('fs');
+const readline = require('readline');
+const path = require('path');
+
+const askQuestion = (query) => {
+  const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+  });
+
+  return new Promise(resolve => rl.question(`${query}\n`, ans => {
+      rl.close();
+      resolve(ans);
+  }))
+}
+
+const run = async () => {
+  let frontpageDocsPath = '/src/content/docs'
+
+  const frontpageAbsPath = await askQuestion('Provide the frontpage project absolute path:')
+  frontpageDocsPath = `${frontpageAbsPath}${frontpageDocsPath}`;
+  
+  if (!fs.existsSync(frontpageDocsPath)) {
+    console.error(`The directory ${frontpageDocsPath} doesn't exists`);
+    process.exit(1)
+  }
+
+  console.log(`Synchronizing files from: \n${__dirname} \nto: \n${frontpageDocsPath}`)
+  
+  fs.watch(__dirname , {recursive: true}, (_, filename) => {
+    const srcFilePath = path.join(__dirname, filename);
+    const targetFilePath = path.join(frontpageDocsPath, filename);
+    const targetDir = targetFilePath.split('/').slice(0, -1).join('/');
+
+    if (filename === 'sync.js') return;
+
+    //Syncs create file
+    if (!fs.existsSync(targetFilePath)) {
+      fs.mkdirSync(targetDir, {recursive: true})
+
+      try {
+        fs.closeSync(fs.openSync(targetFilePath, 'w'));
+        console.log(`Created ${filename}.`);
+      } catch (error) {
+        throw error;
+      }
+    }
+    
+    //Syncs remove file
+    if (!fs.existsSync(srcFilePath)) {
+      try {
+        fs.unlinkSync(targetFilePath);
+        console.log(`Removed ${filename}.`);
+      } catch (error) {
+        throw error;
+      }
+      return;
+    }
+
+    //Syncs update file
+    fs.copyFile(srcFilePath, targetFilePath, (err) => {
+      console.log(`Updated ${filename}.`);
+      if (err) throw err;
+    });
+  })
+}
+
+run();
\ No newline at end of file

From ab4e73e288895ccd56625a3c3f18d424968e3123 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Sat, 18 Feb 2023 17:23:05 -0500
Subject: [PATCH 03/36] Added basic button story docs.

---
 docs/get-started/install.md                   |  2 ++
 .../installation-command-section/solid.mdx    | 15 ++++++++++
 .../installation-problems/solid.mdx           | 11 +++++++
 docs/get-started/whats-a-story.md             |  4 +++
 .../solid/button-story-with-args.js.mdx       | 21 ++++++++++++++
 .../solid/button-story-with-args.ts-4-9.mdx   | 27 +++++++++++++++++
 .../solid/button-story-with-args.ts.mdx       | 26 +++++++++++++++++
 docs/snippets/solid/button-story.js.mdx       | 23 +++++++++++++++
 docs/snippets/solid/button-story.ts-4-9.mdx   | 29 +++++++++++++++++++
 docs/snippets/solid/button-story.ts.mdx       | 28 ++++++++++++++++++
 10 files changed, 186 insertions(+)
 create mode 100644 docs/get-started/installation-command-section/solid.mdx
 create mode 100644 docs/get-started/installation-problems/solid.mdx
 create mode 100644 docs/snippets/solid/button-story-with-args.js.mdx
 create mode 100644 docs/snippets/solid/button-story-with-args.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-with-args.ts.mdx
 create mode 100644 docs/snippets/solid/button-story.js.mdx
 create mode 100644 docs/snippets/solid/button-story.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story.ts.mdx

diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index 77db823a856b..6fcd24f8001f 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -15,6 +15,7 @@ title: 'Install Storybook'
    'get-started/installation-command-section/vue.mdx',
    'get-started/installation-command-section/web-components.mdx',
    'get-started/installation-command-section/qwik.mdx',
+   'get-started/installation-command-section/solid.mdx',
   ]}
 />
 
@@ -88,6 +89,7 @@ Below are some of the most common installation issues and instructions on how to
    'get-started/installation-problems/vue.mdx',
    'get-started/installation-problems/web-components.mdx',
    'get-started/installation-problems/qwik.mdx',
+   'get-started/installation-problems/solid.mdx',
   ]}
 />
 
diff --git a/docs/get-started/installation-command-section/solid.mdx b/docs/get-started/installation-command-section/solid.mdx
new file mode 100644
index 000000000000..41e5c040cc9d
--- /dev/null
+++ b/docs/get-started/installation-command-section/solid.mdx
@@ -0,0 +1,15 @@
+Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
+
+- With npm:
+
+```shell
+npx storybook init
+```
+
+- With pnpm:
+
+```shell
+pnpm dlx storybook init
+```
+
+If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
diff --git a/docs/get-started/installation-problems/solid.mdx b/docs/get-started/installation-problems/solid.mdx
new file mode 100644
index 000000000000..9308bb9b154a
--- /dev/null
+++ b/docs/get-started/installation-problems/solid.mdx
@@ -0,0 +1,11 @@
+- Add the `--type solid` flag to the installation command to set up Storybook manually:
+
+  ```shell
+  npx storybook init --type solid
+  ```
+
+- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --package-manager=npm
+  ```
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 52e04afae91f..ed9e8689e905 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -26,6 +26,8 @@ Let’s start with the `Button` component. A story is a function that describes
     'html/button-story.js.mdx',
     'html/button-story.ts.mdx',
     'preact/button-story.js.mdx',
+    'solid/button-story.js.mdx',
+    'solid/button-story.ts.mdx',
   ]}
   usesCsf3
   csf2Path="get-started/whats-a-story#snippet-button-story"
@@ -56,6 +58,8 @@ The above story definition can be further improved to take advantage of [Storybo
     'html/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',
     'preact/button-story-with-args.js.mdx',
+    'solid/button-story-with-args.js.mdx',
+    'solid/button-story-with-args.ts.mdx',
   ]}
   usesCsf3
   csf2Path="get-started/whats-a-story#snippet-button-story-with-args"
diff --git a/docs/snippets/solid/button-story-with-args.js.mdx b/docs/snippets/solid/button-story-with-args.js.mdx
new file mode 100644
index 000000000000..119f049a57cd
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-args.js.mdx
@@ -0,0 +1,21 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    label: 'Button',
+    primary: true,
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
new file mode 100644
index 000000000000..498436f4f995
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
@@ -0,0 +1,27 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/solid';
+
+import { Button, ButtonProps } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-with-args.ts.mdx b/docs/snippets/solid/button-story-with-args.ts.mdx
new file mode 100644
index 000000000000..60b45603ae58
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-args.ts.mdx
@@ -0,0 +1,26 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/solid';
+
+import { Button, ButtonProps } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story.js.mdx b/docs/snippets/solid/button-story.js.mdx
new file mode 100644
index 000000000000..6a3c4c9adedb
--- /dev/null
+++ b/docs/snippets/solid/button-story.js.mdx
@@ -0,0 +1,23 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => <Button primary label="Button" />,
+};
+```
diff --git a/docs/snippets/solid/button-story.ts-4-9.mdx b/docs/snippets/solid/button-story.ts-4-9.mdx
new file mode 100644
index 000000000000..723e66eb367a
--- /dev/null
+++ b/docs/snippets/solid/button-story.ts-4-9.mdx
@@ -0,0 +1,29 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/solid';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => <Button primary label="Button" />,
+};
+```
diff --git a/docs/snippets/solid/button-story.ts.mdx b/docs/snippets/solid/button-story.ts.mdx
new file mode 100644
index 000000000000..8a73d95ee04e
--- /dev/null
+++ b/docs/snippets/solid/button-story.ts.mdx
@@ -0,0 +1,28 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/solid';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => <Button primary label="Button" />,
+};
+```

From 1eaba3e657d7f67aaab83fecaada2e7e0e3cd699 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Sun, 19 Feb 2023 11:34:38 -0500
Subject: [PATCH 04/36] Updated setup.md

---
 docs/get-started/setup.md                     |  6 ++++-
 ...ew-with-styled-components-decorator.js.mdx | 19 +++++++++++++
 ...components-decorator.story-function.js.mdx | 13 +++++++++
 docs/snippets/solid/your-component.js.mdx     | 21 +++++++++++++++
 docs/snippets/solid/your-component.ts-4-9.mdx | 27 +++++++++++++++++++
 docs/snippets/solid/your-component.ts.mdx     | 26 ++++++++++++++++++
 6 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx
 create mode 100644 docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
 create mode 100644 docs/snippets/solid/your-component.js.mdx
 create mode 100644 docs/snippets/solid/your-component.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/your-component.ts.mdx

diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index cfdb36083e82..fa862aa83887 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -23,6 +23,8 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'html/your-component.js.mdx',
     'html/your-component.ts.mdx',
     'preact/your-component.js.mdx',
+    'solid/your-component.js.mdx',
+    'solid/your-component.ts.mdx',
   ]}
   usesCsf3
   csf2Path="get-started/setup#snippet-your-component"
@@ -78,7 +80,9 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in
     'vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx',
     'vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx',
     'vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx',
-    'angular/storybook-preview-with-styled-components-decorator.ts.mdx'
+    'angular/storybook-preview-with-styled-components-decorator.ts.mdx',
+    'solid/storybook-preview-with-styled-components-decorator.js.mdx',
+    'solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
   ]}
 />
 
diff --git a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx
new file mode 100644
index 000000000000..20d6d2b736d8
--- /dev/null
+++ b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx
@@ -0,0 +1,19 @@
+```js
+// .storybook/preview.js
+
+import { ThemeProvider } from "solid-styled-components";
+
+const theme = {
+  colors: {
+    primary: "hotpink"
+  }
+};
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <Story />
+    </ThemeProvider>
+  ),
+];
+```
diff --git a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
new file mode 100644
index 000000000000..77396537eda2
--- /dev/null
+++ b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
@@ -0,0 +1,13 @@
+```js
+// .storybook/preview.js
+
+import { ThemeProvider } from "solid-styled-components";
+
+const theme = {
+  colors: {
+    primary: "hotpink"
+  }
+};
+
+export const decorators = [(Story) => <ThemeProvider theme={theme}>{Story()}</ThemeProvider>];
+```
diff --git a/docs/snippets/solid/your-component.js.mdx b/docs/snippets/solid/your-component.js.mdx
new file mode 100644
index 000000000000..de2ed47c9fb7
--- /dev/null
+++ b/docs/snippets/solid/your-component.js.mdx
@@ -0,0 +1,21 @@
+```js
+// YourComponent.stories.js|jsx
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  component: YourComponent,
+};
+
+export const FirstStory = {
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+};
+```
diff --git a/docs/snippets/solid/your-component.ts-4-9.mdx b/docs/snippets/solid/your-component.ts-4-9.mdx
new file mode 100644
index 000000000000..42d0a7084c8f
--- /dev/null
+++ b/docs/snippets/solid/your-component.ts-4-9.mdx
@@ -0,0 +1,27 @@
+```tsx
+// YourComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/solid';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+
+  component: YourComponent,
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FirstStory: Story = {
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+};
+```
diff --git a/docs/snippets/solid/your-component.ts.mdx b/docs/snippets/solid/your-component.ts.mdx
new file mode 100644
index 000000000000..42817f099346
--- /dev/null
+++ b/docs/snippets/solid/your-component.ts.mdx
@@ -0,0 +1,26 @@
+```tsx
+// YourComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/solid';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+const meta: Meta<typeof YourComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  component: YourComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof YourComponent>;
+
+export const FirstStory: Story = {
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+};
+```

From ed4944c9de45b3dae5dbfd6b109b2c9591a7d861 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 20 Feb 2023 11:21:33 -0500
Subject: [PATCH 05/36] Added introduction code snippets.

---
 docs/snippets/solid/button-group-story.js.mdx | 24 +++++++++
 .../solid/button-group-story.ts-4-9.mdx       | 30 +++++++++++
 docs/snippets/solid/button-group-story.ts.mdx | 29 +++++++++++
 .../button-story-component-decorator.js.mdx   | 21 ++++++++
 ...utton-story-component-decorator.ts-4-9.mdx | 27 ++++++++++
 .../button-story-component-decorator.ts.mdx   | 25 +++++++++
 ...story-default-export-with-component.js.mdx | 14 +++++
 ...y-default-export-with-component.ts-4-9.mdx | 17 +++++++
 ...story-default-export-with-component.ts.mdx | 16 ++++++
 .../solid/button-story-rename-story.js.mdx    | 19 +++++++
 .../button-story-rename-story.ts-4-9.mdx      | 28 ++++++++++
 .../solid/button-story-rename-story.ts.mdx    | 27 ++++++++++
 .../solid/button-story-using-args.js.mdx      | 35 +++++++++++++
 .../solid/button-story-using-args.ts-4-9.mdx  | 39 ++++++++++++++
 .../solid/button-story-using-args.ts.mdx      | 38 ++++++++++++++
 .../solid/button-story-with-args.ts-4-9.mdx   |  2 +-
 .../solid/button-story-with-args.ts.mdx       |  2 +-
 .../solid/button-story-with-blue-args.js.mdx  | 24 +++++++++
 .../button-story-with-blue-args.ts-4-9.mdx    | 30 +++++++++++
 .../solid/button-story-with-blue-args.ts.mdx  | 28 ++++++++++
 .../solid/button-story-with-emojis.js.mdx     | 31 +++++++++++
 .../solid/button-story-with-emojis.ts-4-9.mdx | 37 ++++++++++++++
 .../solid/button-story-with-emojis.ts.mdx     | 36 +++++++++++++
 docs/snippets/solid/button-story.ts-4-9.mdx   |  2 +-
 docs/snippets/solid/button-story.ts.mdx       |  2 +-
 .../solid/button-story.with-hooks.js.mdx      | 39 ++++++++++++++
 .../snippets/solid/list-story-expanded.js.mdx | 40 +++++++++++++++
 .../solid/list-story-expanded.ts-4-9.mdx      | 46 +++++++++++++++++
 .../snippets/solid/list-story-expanded.ts.mdx | 45 ++++++++++++++++
 .../solid/list-story-reuse-data.js.mdx        | 34 +++++++++++++
 .../solid/list-story-reuse-data.ts-4-9.mdx    | 39 ++++++++++++++
 .../solid/list-story-reuse-data.ts.mdx        | 38 ++++++++++++++
 docs/snippets/solid/list-story-starter.js.mdx | 18 +++++++
 .../solid/list-story-starter.ts-4-9.mdx       | 23 +++++++++
 docs/snippets/solid/list-story-starter.ts.mdx | 22 ++++++++
 .../login-form-with-play-function.js.mdx      | 45 ++++++++++++++++
 .../login-form-with-play-function.ts-4-9.mdx  | 51 +++++++++++++++++++
 .../login-form-with-play-function.ts.mdx      | 50 ++++++++++++++++++
 docs/snippets/solid/your-component.ts-4-9.mdx |  2 +-
 docs/snippets/solid/your-component.ts.mdx     |  2 +-
 docs/writing-stories/introduction.md          | 25 +++++++++
 41 files changed, 1096 insertions(+), 6 deletions(-)
 create mode 100644 docs/snippets/solid/button-group-story.js.mdx
 create mode 100644 docs/snippets/solid/button-group-story.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-group-story.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-component-decorator.js.mdx
 create mode 100644 docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-component-decorator.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-default-export-with-component.js.mdx
 create mode 100644 docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-default-export-with-component.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-rename-story.js.mdx
 create mode 100644 docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-rename-story.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-using-args.js.mdx
 create mode 100644 docs/snippets/solid/button-story-using-args.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-using-args.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-with-blue-args.js.mdx
 create mode 100644 docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-with-blue-args.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-with-emojis.js.mdx
 create mode 100644 docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-with-emojis.ts.mdx
 create mode 100644 docs/snippets/solid/button-story.with-hooks.js.mdx
 create mode 100644 docs/snippets/solid/list-story-expanded.js.mdx
 create mode 100644 docs/snippets/solid/list-story-expanded.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/list-story-expanded.ts.mdx
 create mode 100644 docs/snippets/solid/list-story-reuse-data.js.mdx
 create mode 100644 docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/list-story-reuse-data.ts.mdx
 create mode 100644 docs/snippets/solid/list-story-starter.js.mdx
 create mode 100644 docs/snippets/solid/list-story-starter.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/list-story-starter.ts.mdx
 create mode 100644 docs/snippets/solid/login-form-with-play-function.js.mdx
 create mode 100644 docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/login-form-with-play-function.ts.mdx

diff --git a/docs/snippets/solid/button-group-story.js.mdx b/docs/snippets/solid/button-group-story.js.mdx
new file mode 100644
index 000000000000..161485da28fc
--- /dev/null
+++ b/docs/snippets/solid/button-group-story.js.mdx
@@ -0,0 +1,24 @@
+```js
+// ButtonGroup.stories.js|jsx
+
+import { ButtonGroup } from '../ButtonGroup';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'ButtonGroup',
+  component: ButtonGroup,
+};
+
+export const Pair = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```
diff --git a/docs/snippets/solid/button-group-story.ts-4-9.mdx b/docs/snippets/solid/button-group-story.ts-4-9.mdx
new file mode 100644
index 000000000000..5bbfbce9c97c
--- /dev/null
+++ b/docs/snippets/solid/button-group-story.ts-4-9.mdx
@@ -0,0 +1,30 @@
+```tsx
+// ButtonGroup.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'ButtonGroup',
+
+  component: ButtonGroup,
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```
diff --git a/docs/snippets/solid/button-group-story.ts.mdx b/docs/snippets/solid/button-group-story.ts.mdx
new file mode 100644
index 000000000000..c3dce785bc4b
--- /dev/null
+++ b/docs/snippets/solid/button-group-story.ts.mdx
@@ -0,0 +1,29 @@
+```tsx
+// ButtonGroup.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta: Meta<typeof ButtonGroup> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'ButtonGroup',
+  component: ButtonGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-component-decorator.js.mdx b/docs/snippets/solid/button-story-component-decorator.js.mdx
new file mode 100644
index 000000000000..c0a42657a209
--- /dev/null
+++ b/docs/snippets/solid/button-story-component-decorator.js.mdx
@@ -0,0 +1,21 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+```
diff --git a/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
new file mode 100644
index 000000000000..cb403075946f
--- /dev/null
+++ b/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
@@ -0,0 +1,27 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
diff --git a/docs/snippets/solid/button-story-component-decorator.ts.mdx b/docs/snippets/solid/button-story-component-decorator.ts.mdx
new file mode 100644
index 000000000000..7f137e00a3c9
--- /dev/null
+++ b/docs/snippets/solid/button-story-component-decorator.ts.mdx
@@ -0,0 +1,25 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+```
diff --git a/docs/snippets/solid/button-story-default-export-with-component.js.mdx b/docs/snippets/solid/button-story-default-export-with-component.js.mdx
new file mode 100644
index 000000000000..ec47e8b6c508
--- /dev/null
+++ b/docs/snippets/solid/button-story-default-export-with-component.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+```
diff --git a/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
new file mode 100644
index 000000000000..f5c035ebe565
--- /dev/null
+++ b/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
@@ -0,0 +1,17 @@
+```tsx
+// Button.stories.ts|tsx
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
diff --git a/docs/snippets/solid/button-story-default-export-with-component.ts.mdx b/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
new file mode 100644
index 000000000000..218aa19d2d43
--- /dev/null
+++ b/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
@@ -0,0 +1,16 @@
+```tsx
+// Button.stories.ts|tsx
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+```
diff --git a/docs/snippets/solid/button-story-rename-story.js.mdx b/docs/snippets/solid/button-story-rename-story.js.mdx
new file mode 100644
index 000000000000..d528caf02f51
--- /dev/null
+++ b/docs/snippets/solid/button-story-rename-story.js.mdx
@@ -0,0 +1,19 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export const Primary = {
+  name: 'I am the primary',
+  render: () => <Button primary label="Button" />,
+};
+```
diff --git a/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx b/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
new file mode 100644
index 000000000000..efbf900a2be2
--- /dev/null
+++ b/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
@@ -0,0 +1,28 @@
+```tsx
+// Button.stories.ts|tsx
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  name: 'I am the primary',
+  render: () => <Button primary label="Button" />,
+};
+```
diff --git a/docs/snippets/solid/button-story-rename-story.ts.mdx b/docs/snippets/solid/button-story-rename-story.ts.mdx
new file mode 100644
index 000000000000..70b47637772f
--- /dev/null
+++ b/docs/snippets/solid/button-story-rename-story.ts.mdx
@@ -0,0 +1,27 @@
+```tsx
+// Button.stories.ts|tsx
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  name: 'I am the primary',
+  render: () => <Button primary label="Button" />,
+};
+```
diff --git a/docs/snippets/solid/button-story-using-args.js.mdx b/docs/snippets/solid/button-story-using-args.js.mdx
new file mode 100644
index 000000000000..0bb99c2de02e
--- /dev/null
+++ b/docs/snippets/solid/button-story-using-args.js.mdx
@@ -0,0 +1,35 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
+
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-using-args.ts-4-9.mdx b/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
new file mode 100644
index 000000000000..8e7530765bae
--- /dev/null
+++ b/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  backgroundColor: '#ff0',
+  label: 'Button',
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-using-args.ts.mdx b/docs/snippets/solid/button-story-using-args.ts.mdx
new file mode 100644
index 000000000000..127ba072af07
--- /dev/null
+++ b/docs/snippets/solid/button-story-using-args.ts.mdx
@@ -0,0 +1,38 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  backgroundColor: '#ff0',
+  label: 'Button',
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
index 498436f4f995..999a3e73a047 100644
--- a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
-import type { Meta, StoryObj } from '@storybook/solid';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button, ButtonProps } from './Button';
 
diff --git a/docs/snippets/solid/button-story-with-args.ts.mdx b/docs/snippets/solid/button-story-with-args.ts.mdx
index 60b45603ae58..d637763c5a5d 100644
--- a/docs/snippets/solid/button-story-with-args.ts.mdx
+++ b/docs/snippets/solid/button-story-with-args.ts.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
-import type { Meta, StoryObj } from '@storybook/solid';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button, ButtonProps } from './Button';
 
diff --git a/docs/snippets/solid/button-story-with-blue-args.js.mdx b/docs/snippets/solid/button-story-with-blue-args.js.mdx
new file mode 100644
index 000000000000..1243258cd41f
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-blue-args.js.mdx
@@ -0,0 +1,24 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx b/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
new file mode 100644
index 000000000000..93d0d85411c6
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
@@ -0,0 +1,30 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
diff --git a/docs/snippets/solid/button-story-with-blue-args.ts.mdx b/docs/snippets/solid/button-story-with-blue-args.ts.mdx
new file mode 100644
index 000000000000..79818ec5a2ad
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-blue-args.ts.mdx
@@ -0,0 +1,28 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/solid/button-story-with-emojis.js.mdx b/docs/snippets/solid/button-story-with-emojis.js.mdx
new file mode 100644
index 000000000000..ed2f44bfe215
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-emojis.js.mdx
@@ -0,0 +1,31 @@
+```ts
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => <Button backgroundColor="#ff0" label="Button" />,
+};
+
+export const Secondary = {
+  render: () => <Button backgroundColor="#ff0" label="😄👍😍💯" />,
+};
+
+export const Tertiary = {
+  render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />,
+};
+```
diff --git a/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx b/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
new file mode 100644
index 000000000000..b962d022720e
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
@@ -0,0 +1,37 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => <Button backgroundColor="#ff0" label="Button" />,
+};
+
+export const Secondary: Story = {
+  render: () => <Button backgroundColor="#ff0" label="😄👍😍💯" />,
+};
+
+export const Tertiary: Story = {
+  render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />,
+};
+```
diff --git a/docs/snippets/solid/button-story-with-emojis.ts.mdx b/docs/snippets/solid/button-story-with-emojis.ts.mdx
new file mode 100644
index 000000000000..aa7e4ef34b1a
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-emojis.ts.mdx
@@ -0,0 +1,36 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => <Button backgroundColor="#ff0" label="Button" />,
+};
+
+export const Secondary: Story = {
+  render: () => <Button backgroundColor="#ff0" label="😄👍😍💯" />,
+};
+
+export const Tertiary: Story = {
+  render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />,
+};
+```
diff --git a/docs/snippets/solid/button-story.ts-4-9.mdx b/docs/snippets/solid/button-story.ts-4-9.mdx
index 723e66eb367a..1d7d79098192 100644
--- a/docs/snippets/solid/button-story.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story.ts-4-9.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
-import type { Meta, StoryObj } from '@storybook/solid';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story.ts.mdx b/docs/snippets/solid/button-story.ts.mdx
index 8a73d95ee04e..d575f0ea368c 100644
--- a/docs/snippets/solid/button-story.ts.mdx
+++ b/docs/snippets/solid/button-story.ts.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
-import type { Meta, StoryObj } from '@storybook/solid';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story.with-hooks.js.mdx b/docs/snippets/solid/button-story.with-hooks.js.mdx
new file mode 100644
index 000000000000..90c7d6bc6f89
--- /dev/null
+++ b/docs/snippets/solid/button-story.with-hooks.js.mdx
@@ -0,0 +1,39 @@
+```js
+// Button.stories.js|ts|jsx|tsx
+
+import { createSignal } from "solid-js";
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+/*
+ * Example Button story with Solid Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = createSignal('Secondary');
+  const [isPrimary, setIsPrimary] = createSignal(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary()) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary()} onClick={handleOnChange} label={value()} />;
+};
+
+export const Primary = {
+  render: () => <ButtonWithHooks />,
+};
+```
diff --git a/docs/snippets/solid/list-story-expanded.js.mdx b/docs/snippets/solid/list-story-expanded.js.mdx
new file mode 100644
index 000000000000..b4c8c115d0dc
--- /dev/null
+++ b/docs/snippets/solid/list-story-expanded.js.mdx
@@ -0,0 +1,40 @@
+```js
+// List.stories.js|jsx
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export const Empty = {};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
+
+export const ManyItems = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-expanded.ts-4-9.mdx b/docs/snippets/solid/list-story-expanded.ts-4-9.mdx
new file mode 100644
index 000000000000..f4b90c123bde
--- /dev/null
+++ b/docs/snippets/solid/list-story-expanded.ts-4-9.mdx
@@ -0,0 +1,46 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
+
+export const ManyItems: Story = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-expanded.ts.mdx b/docs/snippets/solid/list-story-expanded.ts.mdx
new file mode 100644
index 000000000000..93ff1fbc9c07
--- /dev/null
+++ b/docs/snippets/solid/list-story-expanded.ts.mdx
@@ -0,0 +1,45 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const Empty: Story = {};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
+
+export const ManyItems: Story = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-reuse-data.js.mdx b/docs/snippets/solid/list-story-reuse-data.js.mdx
new file mode 100644
index 000000000000..0e42b3b28f36
--- /dev/null
+++ b/docs/snippets/solid/list-story-reuse-data.js.mdx
@@ -0,0 +1,34 @@
+```js
+// List.stories.js|jsx
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+
+export const ManyItems = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.args} />
+      <ListItem {...Unselected.args} />
+      <ListItem {...Unselected.args} />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
new file mode 100644
index 000000000000..ce91c7066fe0
--- /dev/null
+++ b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
@@ -0,0 +1,39 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 All ListItem stories are imported
+import * as ListItemStories from './ListItemStories';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: Story = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.args} />
+      <ListItem {...Unselected.args} />
+      <ListItem {...Unselected.args} />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-reuse-data.ts.mdx b/docs/snippets/solid/list-story-reuse-data.ts.mdx
new file mode 100644
index 000000000000..0c640ab8437d
--- /dev/null
+++ b/docs/snippets/solid/list-story-reuse-data.ts.mdx
@@ -0,0 +1,38 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 All ListItem stories are imported
+import * as ListItemStories from './ListItemStories';
+
+const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems: Story = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem {...Selected.args} />
+      <ListItem {...Unselected.args} />
+      <ListItem {...Unselected.args} />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-starter.js.mdx b/docs/snippets/solid/list-story-starter.js.mdx
new file mode 100644
index 000000000000..81397e556b6a
--- /dev/null
+++ b/docs/snippets/solid/list-story-starter.js.mdx
@@ -0,0 +1,18 @@
+```js
+// List.stories.js|jsx
+
+import { List } from './List';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+// Always an empty list, not super interesting
+
+export const Empty = {};
+```
diff --git a/docs/snippets/solid/list-story-starter.ts-4-9.mdx b/docs/snippets/solid/list-story-starter.ts-4-9.mdx
new file mode 100644
index 000000000000..f1a16a50d679
--- /dev/null
+++ b/docs/snippets/solid/list-story-starter.ts-4-9.mdx
@@ -0,0 +1,23 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+//👇 Always an empty list, not super interesting
+export const Empty: Story = {};
+```
diff --git a/docs/snippets/solid/list-story-starter.ts.mdx b/docs/snippets/solid/list-story-starter.ts.mdx
new file mode 100644
index 000000000000..f795a60d12e7
--- /dev/null
+++ b/docs/snippets/solid/list-story-starter.ts.mdx
@@ -0,0 +1,22 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+
+const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+//👇 Always an empty list, not super interesting
+export const Empty: Story = {};
+```
diff --git a/docs/snippets/solid/login-form-with-play-function.js.mdx b/docs/snippets/solid/login-form-with-play-function.js.mdx
new file mode 100644
index 000000000000..34a725522948
--- /dev/null
+++ b/docs/snippets/solid/login-form-with-play-function.js.mdx
@@ -0,0 +1,45 @@
+```js
+// LoginForm.stories.js|jsx
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import { expect } from '@storybook/jest';
+
+import { LoginForm } from './LoginForm';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Form',
+  component: LoginForm,
+};
+
+export const EmptyForm = {};
+
+/*
+ * See https://storybook.js.org/docs/7.0/solid/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/7.0/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
+};
+```
diff --git a/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
new file mode 100644
index 000000000000..6750cf83a8cf
--- /dev/null
+++ b/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
@@ -0,0 +1,51 @@
+```tsx
+// LoginForm.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { within, userEvent } from '@storybook/testing-library';
+
+import { expect } from '@storybook/jest';
+
+import { LoginForm } from './LoginForm';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Form',
+
+  component: LoginForm,
+} satisfies Meta<typeof LoginForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EmptyForm: Story = {};
+
+/*
+ * See https://storybook.js.org/docs/7.0/solid/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/7.0/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
+};
+```
diff --git a/docs/snippets/solid/login-form-with-play-function.ts.mdx b/docs/snippets/solid/login-form-with-play-function.ts.mdx
new file mode 100644
index 000000000000..a40ab8c98757
--- /dev/null
+++ b/docs/snippets/solid/login-form-with-play-function.ts.mdx
@@ -0,0 +1,50 @@
+```tsx
+// LoginForm.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { within, userEvent } from '@storybook/testing-library';
+
+import { expect } from '@storybook/jest';
+
+import { LoginForm } from './LoginForm';
+
+const meta: Meta<typeof LoginForm> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Form',
+  component: LoginForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof LoginForm>;
+
+export const EmptyForm: Story = {};
+
+/*
+ * See https://storybook.js.org/docs/7.0/solid/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/7.0/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  },
+};
+```
diff --git a/docs/snippets/solid/your-component.ts-4-9.mdx b/docs/snippets/solid/your-component.ts-4-9.mdx
index 42d0a7084c8f..ec5027876035 100644
--- a/docs/snippets/solid/your-component.ts-4-9.mdx
+++ b/docs/snippets/solid/your-component.ts-4-9.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // YourComponent.stories.ts|tsx
 
-import type { Meta, StoryObj } from '@storybook/solid';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { YourComponent } from './YourComponent';
 
diff --git a/docs/snippets/solid/your-component.ts.mdx b/docs/snippets/solid/your-component.ts.mdx
index 42817f099346..623ed78600f1 100644
--- a/docs/snippets/solid/your-component.ts.mdx
+++ b/docs/snippets/solid/your-component.ts.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // YourComponent.stories.ts|tsx
 
-import type { Meta, StoryObj } from '@storybook/solid';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { YourComponent } from './YourComponent';
 
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 4b006b57cd5d..d5c856f98603 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -41,6 +41,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
     'web-components/button-story-default-export-with-component.js.mdx',
     'html/button-story-default-export.js.mdx',
     'html/button-story-default-export.ts.mdx',
+    'solid/button-story-default-export-with-component.js.mdx',
+    'solid/button-story-default-export-with-component.ts.mdx',
   ]}
 />
 
@@ -71,6 +73,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
     'svelte/button-story.js.mdx',
     'html/button-story.js.mdx',
     'html/button-story.ts.mdx',
+    'solid/button-story.js.mdx',
+    'solid/button-story.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story"
@@ -87,6 +91,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 <CodeSnippets
   paths={[
     'react/button-story.with-hooks.js.mdx',
+    'solid/button-story.with-hooks.js.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
@@ -116,6 +121,8 @@ You can rename any particular story you need. For instance, to give it a more ac
     'svelte/button-story-rename-story.js.mdx',
     'html/button-story-rename-story.js.mdx',
     'html/button-story-rename-story.ts.mdx',
+    'solid/button-story-rename-story.js.mdx',
+    'solid/button-story-rename-story.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story-rename-story"
@@ -144,6 +151,8 @@ A story is a function that describes how to render a component. You can have mul
     'svelte/button-story-with-emojis.js.mdx',
     'html/button-story-with-emojis.js.mdx',
     'html/button-story-with-emojis.ts.mdx',
+    'solid/button-story-with-emojis.js.mdx',
+    'solid/button-story-with-emojis.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story-with-emojis"
@@ -173,6 +182,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
     'svelte/button-story-using-args.js.mdx',
     'html/button-story-using-args.js.mdx',
     'html/button-story-using-args.ts.mdx',
+    'solid/button-story-using-args.js.mdx',
+    'solid/button-story-using-args.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story-using-args"
@@ -198,6 +209,8 @@ What’s more, you can import `args` to reuse when writing stories for other com
     'web-components/button-group-story.js.mdx',
     'web-components/button-group-story.ts.mdx',
     'svelte/button-group-story.js.mdx',
+    'solid/button-group-story.js.mdx',
+    'solid/button-group-story.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-group-story"
@@ -244,6 +257,8 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'solid/login-form-with-play-function.js.mdx',
+    'solid/login-form-with-play-function.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-login-form-with-play-function"
@@ -272,6 +287,8 @@ For instance, suppose you wanted to test your Button component against a differe
     'svelte/button-story-with-blue-args.js.mdx',
     'html/button-story-with-blue-args.js.mdx',
     'html/button-story-with-blue-args.ts.mdx',
+    'solid/button-story-with-blue-args.js.mdx',
+    'solid/button-story-with-blue-args.ts.mdx',
   ]}
 />
 
@@ -307,6 +324,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
     'svelte/button-story-component-decorator.js.mdx',
     'html/button-story-component-decorator.js.mdx',
     'html/button-story-component-decorator.ts.mdx',
+    'solid/button-story-component-decorator.js.mdx',
+    'solid/button-story-component-decorator.ts.mdx',
   ]}
 />
 
@@ -333,6 +352,8 @@ When building design systems or component libraries, you may have two or more co
     'web-components/list-story-starter.ts.mdx',
     'html/list-story-starter.js.mdx',
     'html/list-story-starter.ts.mdx',
+    'solid/list-story-starter.js.mdx',
+    'solid/list-story-starter.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-list-story-starter"
@@ -357,6 +378,8 @@ In such cases, it makes sense to render a different function for each story:
     'web-components/list-story-expanded.ts.mdx',
     'html/list-story-expanded.js.mdx',
     'html/list-story-expanded.ts.mdx',
+    'solid/list-story-expanded.js.mdx',
+    'solid/list-story-expanded.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-list-story-expanded"
@@ -381,6 +404,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
     'web-components/list-story-reuse-data.ts.mdx',
     'html/list-story-reuse-data.js.mdx',
     'html/list-story-reuse-data.ts.mdx',
+    'solid/list-story-reuse-data.js.mdx',
+    'solid/list-story-reuse-data.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-list-story-reuse-data"

From 9028e556de0334c66305f31f70b6bfe2d62706e6 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 20 Feb 2023 11:38:48 -0500
Subject: [PATCH 06/36] Added args code snippets

---
 ...button-story-component-args-primary.js.mdx | 22 +++++++++++++
 ...on-story-component-args-primary.ts-4-9.mdx | 30 ++++++++++++++++++
 ...button-story-component-args-primary.ts.mdx | 27 ++++++++++++++++
 docs/snippets/solid/page-story-slots.js.mdx   | 30 ++++++++++++++++++
 .../solid/page-story-slots.ts-4-9.mdx         | 31 +++++++++++++++++++
 docs/snippets/solid/page-story-slots.ts.mdx   | 30 ++++++++++++++++++
 docs/snippets/solid/page-story.js.mdx         | 23 ++++++++++++++
 docs/snippets/solid/page-story.ts-4-9.mdx     | 29 +++++++++++++++++
 docs/snippets/solid/page-story.ts.mdx         | 28 +++++++++++++++++
 docs/writing-stories/args.md                  |  8 +++++
 10 files changed, 258 insertions(+)
 create mode 100644 docs/snippets/solid/button-story-component-args-primary.js.mdx
 create mode 100644 docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-component-args-primary.ts.mdx
 create mode 100644 docs/snippets/solid/page-story-slots.js.mdx
 create mode 100644 docs/snippets/solid/page-story-slots.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/page-story-slots.ts.mdx
 create mode 100644 docs/snippets/solid/page-story.js.mdx
 create mode 100644 docs/snippets/solid/page-story.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/page-story.ts.mdx

diff --git a/docs/snippets/solid/button-story-component-args-primary.js.mdx b/docs/snippets/solid/button-story-component-args-primary.js.mdx
new file mode 100644
index 000000000000..8f82da8d91a3
--- /dev/null
+++ b/docs/snippets/solid/button-story-component-args-primary.js.mdx
@@ -0,0 +1,22 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
new file mode 100644
index 000000000000..af76159beaaf
--- /dev/null
+++ b/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
@@ -0,0 +1,30 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+```
diff --git a/docs/snippets/solid/button-story-component-args-primary.ts.mdx b/docs/snippets/solid/button-story-component-args-primary.ts.mdx
new file mode 100644
index 000000000000..330ad245b26e
--- /dev/null
+++ b/docs/snippets/solid/button-story-component-args-primary.ts.mdx
@@ -0,0 +1,27 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+```
diff --git a/docs/snippets/solid/page-story-slots.js.mdx b/docs/snippets/solid/page-story-slots.js.mdx
new file mode 100644
index 000000000000..0154d3490ef1
--- /dev/null
+++ b/docs/snippets/solid/page-story-slots.js.mdx
@@ -0,0 +1,30 @@
+```js
+// Page.stories.js|jsx
+
+import { Page } from './Page';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Page',
+  component: Page,
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const CustomFooter = {
+  render: (args) => (
+    <Page {...args}>
+      <footer>{args.footer}</footer>
+    </Page>
+  ),
+  args: {
+    footer: 'Built with Storybook',
+  },
+};
+```
diff --git a/docs/snippets/solid/page-story-slots.ts-4-9.mdx b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
new file mode 100644
index 000000000000..58531549e1dd
--- /dev/null
+++ b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
@@ -0,0 +1,31 @@
+```tsx
+// Page.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Page } from './Page';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Page',
+
+  component: Page,
+} satisfies Meta<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CustomFooter: Story = {
+  render: (args) => (
+    <Page {...args}>
+      <footer>{args.footer}</footer>
+    </Page>
+  ),
+  args: {
+    footer: 'Built with Storybook',
+  },
+};
+```
diff --git a/docs/snippets/solid/page-story-slots.ts.mdx b/docs/snippets/solid/page-story-slots.ts.mdx
new file mode 100644
index 000000000000..1df829afb0da
--- /dev/null
+++ b/docs/snippets/solid/page-story-slots.ts.mdx
@@ -0,0 +1,30 @@
+```tsx
+// Page.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Page',
+  component: Page,
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const CustomFooter: Story = {
+  render: (args) => (
+    <Page {...args}>
+      <footer>{args.footer}</footer>
+    </Page>
+  ),
+  args: {
+    footer: 'Built with Storybook',
+  },
+};
+```
diff --git a/docs/snippets/solid/page-story.js.mdx b/docs/snippets/solid/page-story.js.mdx
new file mode 100644
index 000000000000..101bb9ec3334
--- /dev/null
+++ b/docs/snippets/solid/page-story.js.mdx
@@ -0,0 +1,23 @@
+```js
+// Page.stories.js|jsx
+
+import { Page } from './Page';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Page',
+  component: Page,
+};
+
+export const LoggedIn = {
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+```
diff --git a/docs/snippets/solid/page-story.ts-4-9.mdx b/docs/snippets/solid/page-story.ts-4-9.mdx
new file mode 100644
index 000000000000..d8d277da83a1
--- /dev/null
+++ b/docs/snippets/solid/page-story.ts-4-9.mdx
@@ -0,0 +1,29 @@
+```tsx
+// Page.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Page } from './Page';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Page',
+
+  component: Page,
+} satisfies Meta<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+```
diff --git a/docs/snippets/solid/page-story.ts.mdx b/docs/snippets/solid/page-story.ts.mdx
new file mode 100644
index 000000000000..30368768741d
--- /dev/null
+++ b/docs/snippets/solid/page-story.ts.mdx
@@ -0,0 +1,28 @@
+```tsx
+// Page.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Page } from './Page';
+
+//👇 Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta: Meta<typeof Page> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Page',
+  component: Page,
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const LoggedIn: Story = {
+  args: {
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 32b337b4b077..5267eb922c81 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -32,6 +32,8 @@ To define the args of a single story, use the `args` CSF story key:
     'svelte/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',
     'html/button-story-with-args.js.mdx',
+    'solid/button-story-with-args.js.mdx',
+    'solid/button-story-with-args.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/args#snippet-button-story-with-args"
@@ -76,6 +78,8 @@ You can also define args at the component level; they will apply to all the comp
     'web-components/button-story-component-args-primary.js.mdx',
     'web-components/button-story-component-args-primary.ts.mdx',
     'svelte/button-story-component-args-primary.js.mdx',
+    'solid/button-story-component-args-primary.js.mdx',
+    'solid/button-story-component-args-primary.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/args#snippet-button-story-component-args-primary"
@@ -138,6 +142,8 @@ Args are useful when writing stories for composite components that are assembled
     'web-components/page-story.js.mdx',
     'web-components/page-story.ts.mdx',
     'svelte/page-story.js.mdx',
+    'solid/page-story.js.mdx',
+    'solid/page-story.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/args#snippet-page-story"
@@ -162,6 +168,8 @@ You can use args in your stories to configure the component's appearance, simila
     'angular/page-story-slots.ts.mdx',
     'web-components/page-story-slots.js.mdx',
     'web-components/page-story-slots.ts.mdx',
+    'solid/page-story-slots.js.mdx',
+    'solid/page-story-slots.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/args#snippet-page-story-slots"

From a6c0e0aadc7fff0805d64939ae6e0a8d96bb4dc2 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 20 Feb 2023 11:48:31 -0500
Subject: [PATCH 07/36] Added parameters code snippets.

---
 docs/writing-stories/parameters.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index 3e954c1a2219..bd118b0b4500 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -42,6 +42,8 @@ We can set the parameters for all stories of a component using the `parameters`
     'web-components/button-story-with-blue-args.js.mdx',
     'web-components/button-story-with-blue-args.ts.mdx',
     'svelte/button-story-with-blue-args.js.mdx',
+    'solid/button-story-with-blue-args.js.mdx',
+    'solid/button-story-with-blue-args.ts.mdx',
   ]}
 />
 

From 61651430d4e05d0312921dcb4300d840082c2c0d Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 20 Feb 2023 14:52:38 -0500
Subject: [PATCH 08/36] Added decorators code snippets.

---
 .../solid/button-story-decorator.js.mdx       | 24 ++++++++++++++++
 ...ory-decorator.story-function-ts.ts-4-9.mdx | 28 +++++++++++++++++++
 ...n-story-decorator.story-function-ts.ts.mdx | 27 ++++++++++++++++++
 .../storybook-preview-global-decorator.js.mdx | 11 ++++++++
 ...iew-global-decorator.story-function.js.mdx |  5 ++++
 .../your-component-with-decorator.js.mdx      | 21 ++++++++++++++
 ...nt-with-decorator.story-function-js.js.mdx | 18 ++++++++++++
 ...ith-decorator.story-function-ts.ts-4-9.mdx | 22 +++++++++++++++
 ...nt-with-decorator.story-function-ts.ts.mdx | 21 ++++++++++++++
 .../your-component-with-decorator.ts-4-9.mdx  | 27 ++++++++++++++++++
 .../your-component-with-decorator.ts.mdx      | 25 +++++++++++++++++
 docs/writing-stories/decorators.md            | 13 +++++++++
 12 files changed, 242 insertions(+)
 create mode 100644 docs/snippets/solid/button-story-decorator.js.mdx
 create mode 100644 docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
 create mode 100644 docs/snippets/solid/storybook-preview-global-decorator.js.mdx
 create mode 100644 docs/snippets/solid/storybook-preview-global-decorator.story-function.js.mdx
 create mode 100644 docs/snippets/solid/your-component-with-decorator.js.mdx
 create mode 100644 docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx
 create mode 100644 docs/snippets/solid/your-component-with-decorator.story-function-ts.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx
 create mode 100644 docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/your-component-with-decorator.ts.mdx

diff --git a/docs/snippets/solid/button-story-decorator.js.mdx b/docs/snippets/solid/button-story-decorator.js.mdx
new file mode 100644
index 000000000000..d6f749a6b2c0
--- /dev/null
+++ b/docs/snippets/solid/button-story-decorator.js.mdx
@@ -0,0 +1,24 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export const Primary = {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+```
diff --git a/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx b/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx
new file mode 100644
index 000000000000..4de49f1ed016
--- /dev/null
+++ b/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx
@@ -0,0 +1,28 @@
+```tsx
+// Button.stories.ts|tsx
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+```
diff --git a/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
new file mode 100644
index 000000000000..befd2657823f
--- /dev/null
+++ b/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
@@ -0,0 +1,27 @@
+```tsx
+// Button.stories.ts|tsx
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+```
diff --git a/docs/snippets/solid/storybook-preview-global-decorator.js.mdx b/docs/snippets/solid/storybook-preview-global-decorator.js.mdx
new file mode 100644
index 000000000000..9da0785f1d7a
--- /dev/null
+++ b/docs/snippets/solid/storybook-preview-global-decorator.js.mdx
@@ -0,0 +1,11 @@
+```js
+// .storybook/preview.js
+
+export const decorators = [
+  (Story) => (
+    <div style={{ margin: '3em' }}>
+      <Story />
+    </div>
+  ),
+];
+```
diff --git a/docs/snippets/solid/storybook-preview-global-decorator.story-function.js.mdx b/docs/snippets/solid/storybook-preview-global-decorator.story-function.js.mdx
new file mode 100644
index 000000000000..e8c58840851a
--- /dev/null
+++ b/docs/snippets/solid/storybook-preview-global-decorator.story-function.js.mdx
@@ -0,0 +1,5 @@
+```js
+// .storybook/preview.js
+
+export const decorators = [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>];
+```
diff --git a/docs/snippets/solid/your-component-with-decorator.js.mdx b/docs/snippets/solid/your-component-with-decorator.js.mdx
new file mode 100644
index 000000000000..8c95d2870270
--- /dev/null
+++ b/docs/snippets/solid/your-component-with-decorator.js.mdx
@@ -0,0 +1,21 @@
+```js
+// YourComponent.stories.js|jsx
+
+import { YourComponent } from './YourComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  component: YourComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+```
diff --git a/docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx b/docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx
new file mode 100644
index 000000000000..e2b1e922bb6f
--- /dev/null
+++ b/docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx
@@ -0,0 +1,18 @@
+```js
+// YourComponent.stories.js|jsx
+
+import { YourComponent } from './YourComponent';
+
+// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
+// Useful to prevent the full remount of the component's story.
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  component: YourComponent,
+  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
+};
+```
diff --git a/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts-4-9.mdx b/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts-4-9.mdx
new file mode 100644
index 000000000000..df392af6f999
--- /dev/null
+++ b/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts-4-9.mdx
@@ -0,0 +1,22 @@
+```tsx
+// YourComponent.stories.ts|tsx
+
+import type { Meta } from 'storybook-solidjs';
+
+import { YourComponent } from './YourComponent';
+
+// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
+// Useful to prevent the full remount of the component's story.
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+
+  component: YourComponent,
+  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+```
diff --git a/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx b/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx
new file mode 100644
index 000000000000..9a9359fb10ab
--- /dev/null
+++ b/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx
@@ -0,0 +1,21 @@
+```tsx
+// YourComponent.stories.ts|tsx
+
+import type { Meta } from 'storybook-solidjs';
+
+import { YourComponent } from './YourComponent';
+
+// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
+// Useful to prevent the full remount of the component's story.
+const meta: Meta<typeof YourComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  component: YourComponent,
+  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
+};
+
+export default meta;
+```
diff --git a/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx b/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
new file mode 100644
index 000000000000..cf25ecef6f28
--- /dev/null
+++ b/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
@@ -0,0 +1,27 @@
+```tsx
+// YourComponent.stories.ts|tsx
+
+import type { Meta } from 'storybook-solidjs';
+
+import { YourComponent } from './YourComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+
+  component: YourComponent,
+
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+```
diff --git a/docs/snippets/solid/your-component-with-decorator.ts.mdx b/docs/snippets/solid/your-component-with-decorator.ts.mdx
new file mode 100644
index 000000000000..ff8b91d92bef
--- /dev/null
+++ b/docs/snippets/solid/your-component-with-decorator.ts.mdx
@@ -0,0 +1,25 @@
+```tsx
+// YourComponent.stories.ts|tsx
+
+import type { Meta } from 'storybook-solidjs';
+
+import { YourComponent } from './YourComponent';
+
+const meta: Meta<typeof YourComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  component: YourComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+```
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index 008597adde86..c52dfe4f64b1 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -27,6 +27,10 @@ Some components require a “harness” to render in a useful way. For instance,
     'web-components/your-component-with-decorator.js.mdx',
     'web-components/your-component-with-decorator.ts.mdx',
     'svelte/your-component-with-decorator.js.mdx',
+    'solid/your-component-with-decorator.js.mdx',
+    'solid/your-component-with-decorator.story-function-js.js.mdx',
+    'solid/your-component-with-decorator.ts.mdx',
+    'solid/your-component-with-decorator.story-function-ts.ts.mdx',
   ]}
 />
 
@@ -53,6 +57,8 @@ For example, if you're working with React's Styled Components and your component
     'vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx',
     'angular/add-localize-package-to-polyfills.ts.mdx',
     'angular/storybook-preview-with-angular-polyfills.js.mdx',
+    'solid/storybook-preview-with-styled-components-decorator.js.mdx',
+    'solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
   ]}
 />
 
@@ -95,6 +101,9 @@ To define a decorator for a single story, use the `decorators` key on a named ex
     'web-components/button-story-decorator.js.mdx',
     'web-components/button-story-decorator.ts.mdx',
     'svelte/button-story-decorator.js.mdx',
+    'solid/button-story-decorator.js.mdx',
+    'solid/button-story-decorator.story-function.js.mdx',
+    'solid/button-story-decorator.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/decorators#snippet-button-story-decorator"
@@ -122,6 +131,8 @@ To define a decorator for all stories of a component, use the `decorators` key o
     'web-components/button-story-component-decorator.js.mdx',
     'web-components/button-story-component-decorator.ts.mdx',
     'svelte/button-story-component-decorator.js.mdx',
+    'solid/button-story-component-decorator.js.mdx',
+    'solid/button-story-component-decorator.ts.mdx',
   ]}
 />
 
@@ -141,6 +152,8 @@ We can also set a decorator for **all stories** via the `decorators` export of y
     'angular/storybook-preview-global-decorator.ts.mdx',
     'web-components/storybook-preview-global-decorator.js.mdx',
     'svelte/storybook-preview-global-decorator.js.mdx',
+    'solid/storybook-preview-global-decorator.js.mdx',
+    'solid/storybook-preview-global-decorator.story-function.js.mdx',
   ]}
 />
 

From 399450e441372906de708b3955dbda4a663e9fcf Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 20 Feb 2023 16:15:51 -0500
Subject: [PATCH 09/36] Added loaders code snippets.

---
 docs/snippets/solid/loader-story.js.mdx     | 27 ++++++++++++++++++
 docs/snippets/solid/loader-story.ts-4-9.mdx | 31 +++++++++++++++++++++
 docs/snippets/solid/loader-story.ts.mdx     | 30 ++++++++++++++++++++
 docs/writing-stories/loaders.md             |  2 ++
 4 files changed, 90 insertions(+)
 create mode 100644 docs/snippets/solid/loader-story.js.mdx
 create mode 100644 docs/snippets/solid/loader-story.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/loader-story.ts.mdx

diff --git a/docs/snippets/solid/loader-story.js.mdx b/docs/snippets/solid/loader-story.js.mdx
new file mode 100644
index 000000000000..6296d06553b1
--- /dev/null
+++ b/docs/snippets/solid/loader-story.js.mdx
@@ -0,0 +1,27 @@
+```js
+// TodoItem.stories.js|jsx
+
+import fetch from 'node-fetch';
+
+import { TodoItem } from './TodoItem';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Examples/Loader'
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+};
+
+export const Primary = {
+  loaders: [
+    async () => ({
+      todo: await (
+        await fetch('https://jsonplaceholder.typicode.com/todos/1')
+      ).json(),
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/solid/loader-story.ts-4-9.mdx b/docs/snippets/solid/loader-story.ts-4-9.mdx
new file mode 100644
index 000000000000..883d996fa912
--- /dev/null
+++ b/docs/snippets/solid/loader-story.ts-4-9.mdx
@@ -0,0 +1,31 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import fetch from 'node-fetch';
+
+import { TodoItem } from './TodoItem';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Examples/Loader',
+
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+} satisfies Meta<typeof TodoItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/solid/loader-story.ts.mdx b/docs/snippets/solid/loader-story.ts.mdx
new file mode 100644
index 000000000000..70e3c7229d76
--- /dev/null
+++ b/docs/snippets/solid/loader-story.ts.mdx
@@ -0,0 +1,30 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import fetch from 'node-fetch';
+
+import { TodoItem } from './TodoItem';
+
+const meta: Meta<typeof TodoItem> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Examples/Loader',
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+};
+
+export default meta;
+type Story = StoryObj<typeof TodoItem>;
+
+export const Primary: Story = {
+  loaders: [
+    async () => ({
+      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+    }),
+  ],
+};
+```
diff --git a/docs/writing-stories/loaders.md b/docs/writing-stories/loaders.md
index b526841d65b7..3216179238c1 100644
--- a/docs/writing-stories/loaders.md
+++ b/docs/writing-stories/loaders.md
@@ -26,6 +26,8 @@ Loaders are helpful when you need to load story data externally (e.g., from a re
     'web-components/loader-story.js.mdx',
     'web-components/loader-story.ts.mdx',
     'svelte/loader-story.js.mdx',
+    'solid/loader-story.js.mdx',
+    'solid/loader-story.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/loaders#snippet-loader-story"

From 3cd2232bf03f3e8818845cf8bc26e43f5dc21b18 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 21 Feb 2023 17:28:12 -0500
Subject: [PATCH 10/36] Added code snippets for pages and screens.

---
 .../solid/document-screen-fetch.js.mdx        | 58 +++++++++++++
 .../solid/document-screen-with-graphql.js.mdx | 62 ++++++++++++++
 .../solid/document-screen-with-graphql.ts.mdx | 85 +++++++++++++++++++
 .../mock-context-container-global.js.mdx      | 18 ++++
 .../mock-context-container-provider.js.mdx    | 22 +++++
 .../solid/mock-context-container.js.mdx       | 42 +++++++++
 .../snippets/solid/mock-context-create.js.mdx |  9 ++
 .../snippets/solid/mock-context-in-use.js.mdx | 19 +++++
 .../solid/simple-page-implementation.js.mdx   | 16 ++++
 .../solid/simple-page-implementation.ts.mdx   | 24 ++++++
 .../build-pages-with-storybook.md             |  8 ++
 11 files changed, 363 insertions(+)
 create mode 100644 docs/snippets/solid/document-screen-fetch.js.mdx
 create mode 100644 docs/snippets/solid/document-screen-with-graphql.js.mdx
 create mode 100644 docs/snippets/solid/document-screen-with-graphql.ts.mdx
 create mode 100644 docs/snippets/solid/mock-context-container-global.js.mdx
 create mode 100644 docs/snippets/solid/mock-context-container-provider.js.mdx
 create mode 100644 docs/snippets/solid/mock-context-container.js.mdx
 create mode 100644 docs/snippets/solid/mock-context-create.js.mdx
 create mode 100644 docs/snippets/solid/mock-context-in-use.js.mdx
 create mode 100644 docs/snippets/solid/simple-page-implementation.js.mdx
 create mode 100644 docs/snippets/solid/simple-page-implementation.ts.mdx

diff --git a/docs/snippets/solid/document-screen-fetch.js.mdx b/docs/snippets/solid/document-screen-fetch.js.mdx
new file mode 100644
index 000000000000..27305acccfa9
--- /dev/null
+++ b/docs/snippets/solid/document-screen-fetch.js.mdx
@@ -0,0 +1,58 @@
+```js
+// YourPage.js|jsx|ts|tsx
+
+import { createSignal } from 'solid-js';
+
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
+
+// Example hook to retrieve data from an external endpoint
+function useFetchData() {
+  const [status, setStatus] = createSignal('idle');
+  const [data, setData] = createSignal([]);
+  
+  setStatus('loading');
+  fetch('https://your-restful-endpoint')
+    .then((res) => {
+      if (!res.ok) {
+        throw new Error(res.statusText);
+      }
+      return res;
+    })
+    .then((res) => res.json())
+    .then((data) => {
+      setStatus('success');
+      setData(data);
+    })
+    .catch(() => {
+      setStatus('error');
+    });
+
+  return {
+    status,
+    data,
+  };
+}
+export function DocumentScreen() {
+  const { status, data } = useFetchData();
+  const { user, document, subdocuments } = data();
+
+  return (
+    <Switch>
+      <Match when={status() === 'loading'}>
+        <p>Loading...</p>
+      </Match>
+      <Match when={status() === 'error'}>
+        <p>There was an error fetching the data!</p>
+      </Match>
+      <Match when={user} keyed>
+        <PageLayout user={user}>
+          <DocumentHeader document={document} />
+          <DocumentList documents={subdocuments} />
+        </PageLayout>
+      </Match>
+    </Switch>
+  );
+}
+```
diff --git a/docs/snippets/solid/document-screen-with-graphql.js.mdx b/docs/snippets/solid/document-screen-with-graphql.js.mdx
new file mode 100644
index 000000000000..d367b57279dd
--- /dev/null
+++ b/docs/snippets/solid/document-screen-with-graphql.js.mdx
@@ -0,0 +1,62 @@
+```js
+// YourPage.js|jsx
+
+import { Match, Switch } from "solid-js";
+import { createGraphQLClient, gql } from "@solid-primitives/graphql";
+
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
+
+const newQuery = createGraphQLClient("https://foobar.com/v1/api");
+const AllInfoQuery = gql`
+  query AllInfo {
+    user {
+      userID
+      name
+    }
+    document {
+      id
+      userID
+      title
+      brief
+      status
+    }
+    subdocuments {
+      id
+      userID
+      title
+      content
+      status
+    }
+  }
+`;
+
+function useFetchInfo() {
+  const [data] = newQuery(AllInfoQuery, {path: 'home'});
+  return data;
+}
+
+export function DocumentScreen() {
+  const data = useFetchInfo();
+
+  return (
+    <Switch>
+      <Match when={data.loading}>
+        <p>Loading...</p>
+      </Match>
+      <Match when={data.error}>
+        <p>There was an error fetching the data!</p>
+      </Match>
+      <Match when={data()} keyed>
+        {data => (
+          <PageLayout user={data.user}>
+            <DocumentHeader document={data.document} />
+            <DocumentList documents={data.subdocuments} />
+          </PageLayout>
+        )}
+      </Match>
+    </Switch>
+  );
+}
+```
diff --git a/docs/snippets/solid/document-screen-with-graphql.ts.mdx b/docs/snippets/solid/document-screen-with-graphql.ts.mdx
new file mode 100644
index 000000000000..8d290bfd3aaf
--- /dev/null
+++ b/docs/snippets/solid/document-screen-with-graphql.ts.mdx
@@ -0,0 +1,85 @@
+```ts
+// YourPage.ts|tsx
+
+import { createGraphQLClient, gql } from "@solid-primitives/graphql";
+
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
+
+const newQuery = createGraphQLClient("https://foobar.com/v1/api");
+const AllInfoQuery = gql`
+  query AllInfo {
+    user {
+      userID
+      name
+    }
+    document {
+      id
+      userID
+      title
+      brief
+      status
+    }
+    subdocuments {
+      id
+      userID
+      title
+      content
+      status
+    }
+  }
+`;
+
+interface Data {
+  AllInfo: {
+    user: {
+      userID: number;
+      name: string;
+      opening_crawl: boolean;
+    };
+    document: {
+      id: number;
+      userID: number;
+      title: string;
+      brief: string;
+      status: string;
+    };
+    subdocuments: {
+      id: number;
+      userID: number;
+      title: string;
+      content: string;
+      status: string;
+    };
+  };
+}
+
+function useFetchInfo() {
+  const [data] = newQuery<Data>(AllInfoQuery, {path: 'home'});
+  return data;
+}
+
+export function DocumentScreen() {
+  const data = useFetchInfo();
+
+  return (
+    <Switch>
+      <Match when={data.loading}>
+        <p>Loading...</p>
+      </Match>
+      <Match when={data.error}>
+        <p>There was an error fetching the data!</p>
+      </Match>
+      <Match when={data()} keyed>
+        {data => (
+          <PageLayout user={data.user}>
+            <DocumentHeader document={data.document} />
+            <DocumentList documents={data.subdocuments} />
+          </PageLayout>
+        )}
+      </Match>
+    </Switch>
+  );
+}
+```
diff --git a/docs/snippets/solid/mock-context-container-global.js.mdx b/docs/snippets/solid/mock-context-container-global.js.mdx
new file mode 100644
index 000000000000..dc9e0d365305
--- /dev/null
+++ b/docs/snippets/solid/mock-context-container-global.js.mdx
@@ -0,0 +1,18 @@
+```js
+// .storybook/preview.js
+
+import { normal as NavigationNormal } from '../components/Navigation.stories';
+
+import GlobalContainerContext from '../components/lib/GlobalContainerContext';
+
+const context = {
+  NavigationContainer: NavigationNormal,
+};
+
+const AppDecorator = (storyFn) => {
+  return (
+    <GlobalContainerContext.Provider value={context}>{storyFn()}</GlobalContainerContext.Provider>
+  );
+};
+export const decorators = [AppDecorator];
+```
diff --git a/docs/snippets/solid/mock-context-container-provider.js.mdx b/docs/snippets/solid/mock-context-container-provider.js.mdx
new file mode 100644
index 000000000000..40a606ef477c
--- /dev/null
+++ b/docs/snippets/solid/mock-context-container-provider.js.mdx
@@ -0,0 +1,22 @@
+```js
+// pages/profile.js|jsx
+
+import ProfilePageContext from './ProfilePageContext';
+import { ProfilePageContainer } from './ProfilePageContainer';
+import { UserPostsContainer } from './UserPostsContainer';
+import { UserFriendsContainer } from './UserFriendsContainer';
+
+//👇 Ensure that your context value remains referentially equal between each render.
+const context = {
+  UserPostsContainer,
+  UserFriendsContainer,
+};
+
+export const AppProfilePage = () => {
+  return (
+    <ProfilePageContext.Provider value={context}>
+      <ProfilePageContainer />
+    </ProfilePageContext.Provider>
+  );
+};
+```
diff --git a/docs/snippets/solid/mock-context-container.js.mdx b/docs/snippets/solid/mock-context-container.js.mdx
new file mode 100644
index 000000000000..8640961954b0
--- /dev/null
+++ b/docs/snippets/solid/mock-context-container.js.mdx
@@ -0,0 +1,42 @@
+```js
+// ProfilePage.stories.js|jsx
+
+import { ProfilePage } from './ProfilePage';
+import { UserPosts } from './UserPosts';
+
+//👇 Imports a specific story from a story file
+import { Normal as UserFriendsNormal } from './UserFriends.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'ProfilePage',
+  component: ProfilePage,
+};
+
+const ProfilePageProps = {
+  name: 'Jimi Hendrix',
+  userId: '1',
+};
+
+const context = {
+  //👇 We can access the `userId` prop here if required:
+  UserPostsContainer({ userId }) {
+    return <UserPosts {...UserPostsProps} />;
+  },
+  // Most of the time we can simply pass in a story.
+  // In this case we're passing in the `normal` story export
+  // from the `UserFriends` component stories.
+  UserFriendsContainer: UserFriendsNormal,
+};
+
+export const Normal = {
+  render: () => (
+    <ProfilePageContext.Provider value={context}>
+      <ProfilePage {...ProfilePageProps} />
+    </ProfilePageContext.Provider>
+  ),
+};
+```
diff --git a/docs/snippets/solid/mock-context-create.js.mdx b/docs/snippets/solid/mock-context-create.js.mdx
new file mode 100644
index 000000000000..983c4195e4e2
--- /dev/null
+++ b/docs/snippets/solid/mock-context-create.js.mdx
@@ -0,0 +1,9 @@
+```js
+// ProfilePageContext.js|jsx
+
+import { createContext } from 'solid-js';
+
+const ProfilePageContext = createContext();
+
+export default ProfilePageContext;
+```
diff --git a/docs/snippets/solid/mock-context-in-use.js.mdx b/docs/snippets/solid/mock-context-in-use.js.mdx
new file mode 100644
index 000000000000..98d491b6db72
--- /dev/null
+++ b/docs/snippets/solid/mock-context-in-use.js.mdx
@@ -0,0 +1,19 @@
+```js
+// ProfilePage.js|jsx
+
+import { useContext } from 'solid-js';
+
+import ProfilePageContext from './ProfilePageContext';
+
+export const ProfilePage = (props) => {
+  const { UserPostsContainer, UserFriendsContainer } = useContext(ProfilePageContext);
+
+  return (
+    <div>
+      <h1>{props.name}</h1>
+      <UserPostsContainer userId={props.userId} />
+      <UserFriendsContainer userId={props.userId} />
+    </div>
+  );
+};
+```
diff --git a/docs/snippets/solid/simple-page-implementation.js.mdx b/docs/snippets/solid/simple-page-implementation.js.mdx
new file mode 100644
index 000000000000..d156c9ff27d0
--- /dev/null
+++ b/docs/snippets/solid/simple-page-implementation.js.mdx
@@ -0,0 +1,16 @@
+```js
+// YourPage.js|jsx
+
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
+
+export function DocumentScreen({ user, document, subdocuments }) {
+  return (
+    <PageLayout user={user}>
+      <DocumentHeader document={document} />
+      <DocumentList documents={subdocuments} />
+    </PageLayout>
+  );
+}
+```
diff --git a/docs/snippets/solid/simple-page-implementation.ts.mdx b/docs/snippets/solid/simple-page-implementation.ts.mdx
new file mode 100644
index 000000000000..913064973839
--- /dev/null
+++ b/docs/snippets/solid/simple-page-implementation.ts.mdx
@@ -0,0 +1,24 @@
+```tsx
+// YourPage.ts|tsx
+
+import PageLayout from './PageLayout';
+import Document from './Document';
+import SubDocuments from './SubDocuments';
+import DocumentHeader from './DocumentHeader';
+import DocumentList from './DocumentList';
+
+export interface DocumentScreen {
+  user?: {};
+  document?: Document;
+  subdocuments?: SubDocuments[];
+}
+
+function DocumentScreen({ user, document, subdocuments }) {
+  return (
+    <PageLayout user={user}>
+      <DocumentHeader document={document} />
+      <DocumentList documents={subdocuments} />
+    </PageLayout>
+  );
+}
+```
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index b87b7a78cdd1..d39310791111 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -44,6 +44,8 @@ When you are building screens in this way, it is typical that the inputs of a co
     'web-components/simple-page-implementation.js.mdx',
     'web-components/simple-page-implementation.ts.mdx',
     'svelte/simple-page-implementation.js.mdx',
+    'solid/simple-page-implementation.js.mdx',
+    'solid/simple-page-implementation.ts.mdx',
   ]}
 />
 
@@ -142,6 +144,7 @@ If you're working with pure presentational screens, adding stories through [args
     'angular/document-screen-fetch.ts.mdx',
     'svelte/document-screen-fetch.js.mdx',
     'web-components/document-screen-fetch.js.mdx',
+    'solid/document-screen-fetch.js.mdx',
   ]}
 />
 
@@ -311,6 +314,7 @@ First, create a React context, and name it `ProfilePageContext`. It does nothing
 <CodeSnippets
   paths={[
     'react/mock-context-create.js.mdx',
+    'solid/mock-context-create.js.mdx',
   ]}
 />
 
@@ -323,6 +327,7 @@ First, create a React context, and name it `ProfilePageContext`. It does nothing
 <CodeSnippets
   paths={[
     'react/mock-context-in-use.js.mdx',
+    'solid/mock-context-in-use.js.mdx',
   ]}
 />
 
@@ -337,6 +342,7 @@ In the context of Storybook, instead of providing container components through c
 <CodeSnippets
   paths={[
     'react/mock-context-container.js.mdx',
+    'solid/mock-context-container.js.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/build-pages-with-storybook#snippet-mock-context-container"
@@ -361,6 +367,7 @@ For example, in Next.js, this would be your `pages/profile.js` component.
 <CodeSnippets
   paths={[
     'react/mock-context-container-provider.js.mdx',
+    'solid/mock-context-container-provider.js.mdx',
   ]}
 />
 
@@ -375,6 +382,7 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator
 <CodeSnippets
   paths={[
     'react/mock-context-container-global.js.mdx',
+    'solid/mock-context-container-global.js.mdx',
   ]}
 />
 

From 2627ae3290cd10e995c41ab66e3703bd1238d41a Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 21 Feb 2023 17:51:29 -0500
Subject: [PATCH 11/36] Snippets for multiple components docs

---
 .../snippets/solid/list-story-template.js.mdx | 49 ++++++++++++++++++
 .../solid/list-story-template.ts-4-9.mdx      | 51 +++++++++++++++++++
 .../snippets/solid/list-story-template.ts.mdx | 50 ++++++++++++++++++
 .../solid/list-story-unchecked.js.mdx         | 25 +++++++++
 .../solid/list-story-unchecked.ts-4-9.mdx     | 31 +++++++++++
 .../solid/list-story-unchecked.ts.mdx         | 30 +++++++++++
 .../list-story-with-subcomponents.js.mdx      | 26 ++++++++++
 .../list-story-with-subcomponents.ts-4-9.mdx  | 34 +++++++++++++
 .../list-story-with-subcomponents.ts.mdx      | 31 +++++++++++
 .../list-story-with-unchecked-children.js.mdx | 23 +++++++++
 ...t-story-with-unchecked-children.ts-4-9.mdx | 29 +++++++++++
 .../list-story-with-unchecked-children.ts.mdx | 28 ++++++++++
 .../stories-for-multiple-components.md        |  8 +++
 13 files changed, 415 insertions(+)
 create mode 100644 docs/snippets/solid/list-story-template.js.mdx
 create mode 100644 docs/snippets/solid/list-story-template.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/list-story-template.ts.mdx
 create mode 100644 docs/snippets/solid/list-story-unchecked.js.mdx
 create mode 100644 docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/list-story-unchecked.ts.mdx
 create mode 100644 docs/snippets/solid/list-story-with-subcomponents.js.mdx
 create mode 100644 docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/list-story-with-subcomponents.ts.mdx
 create mode 100644 docs/snippets/solid/list-story-with-unchecked-children.js.mdx
 create mode 100644 docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/list-story-with-unchecked-children.ts.mdx

diff --git a/docs/snippets/solid/list-story-template.js.mdx b/docs/snippets/solid/list-story-template.js.mdx
new file mode 100644
index 000000000000..a9ae83d6288d
--- /dev/null
+++ b/docs/snippets/solid/list-story-template.js.mdx
@@ -0,0 +1,49 @@
+```js
+// List.stories.js|jsx
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+//👇 The ListTemplate construct will be spread to the existing stories.
+const ListTemplate = {
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+};
+
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+};
+
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [
+      {
+        ...Unchecked.args,
+      },
+    ],
+  },
+};
+```
diff --git a/docs/snippets/solid/list-story-template.ts-4-9.mdx b/docs/snippets/solid/list-story-template.ts-4-9.mdx
new file mode 100644
index 000000000000..96d61fed9a33
--- /dev/null
+++ b/docs/snippets/solid/list-story-template.ts-4-9.mdx
@@ -0,0 +1,51 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * Seehttps://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+//👇 The ListTemplate construct will be spread to the existing stories.
+const ListTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+};
+
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+};
+
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [{ ...Unchecked.args }],
+  },
+};
+```
diff --git a/docs/snippets/solid/list-story-template.ts.mdx b/docs/snippets/solid/list-story-template.ts.mdx
new file mode 100644
index 000000000000..a2629eb9723a
--- /dev/null
+++ b/docs/snippets/solid/list-story-template.ts.mdx
@@ -0,0 +1,50 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * Seehttps://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+//👇 The ListTemplate construct will be spread to the existing stories.
+const ListTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <List>
+        {items.map((item) => (
+          <ListItem {...item} />
+        ))}
+      </List>
+    );
+  },
+};
+
+export const Empty = {
+  ...ListTemplate,
+  args: {
+    items: [],
+  },
+};
+
+export const OneItem = {
+  ...ListTemplate,
+  args: {
+    items: [{ ...Unchecked.args }],
+  },
+};
+```
diff --git a/docs/snippets/solid/list-story-unchecked.js.mdx b/docs/snippets/solid/list-story-unchecked.js.mdx
new file mode 100644
index 000000000000..12f201763c60
--- /dev/null
+++ b/docs/snippets/solid/list-story-unchecked.js.mdx
@@ -0,0 +1,25 @@
+```js
+// List.stories.js|jsx
+
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => (
+    <List {...args}>
+      <Unchecked {...Unchecked.args} />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
new file mode 100644
index 000000000000..c32208a91cec
--- /dev/null
+++ b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
@@ -0,0 +1,31 @@
+```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 { Unchecked } from './ListItem.stories';
+
+export const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      <Unchecked {...Unchecked.args} />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-unchecked.ts.mdx b/docs/snippets/solid/list-story-unchecked.ts.mdx
new file mode 100644
index 000000000000..5f55cf00c503
--- /dev/null
+++ b/docs/snippets/solid/list-story-unchecked.ts.mdx
@@ -0,0 +1,30 @@
+```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 { Unchecked } from './ListItem.stories';
+
+export const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      <Unchecked {...Unchecked.args} />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-with-subcomponents.js.mdx b/docs/snippets/solid/list-story-with-subcomponents.js.mdx
new file mode 100644
index 000000000000..7a69ea23c99c
--- /dev/null
+++ b/docs/snippets/solid/list-story-with-subcomponents.js.mdx
@@ -0,0 +1,26 @@
+```js
+// List.stories.js|jsx
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+};
+
+export const Empty = {};
+
+export const OneItem = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx b/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
new file mode 100644
index 000000000000..1f1b1091178d
--- /dev/null
+++ b/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
@@ -0,0 +1,34 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+
+  component: List,
+
+  //👈 Adds the ListItem component as a subcomponent
+  subcomponents: { ListItem },
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {};
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-with-subcomponents.ts.mdx b/docs/snippets/solid/list-story-with-subcomponents.ts.mdx
new file mode 100644
index 000000000000..9e37c554fc6f
--- /dev/null
+++ b/docs/snippets/solid/list-story-with-subcomponents.ts.mdx
@@ -0,0 +1,31 @@
+```tsx
+// List.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+import { ListItem } from './ListItem';
+
+const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const Empty: Story = {};
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      <ListItem />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.js.mdx b/docs/snippets/solid/list-story-with-unchecked-children.js.mdx
new file mode 100644
index 000000000000..b31c1ed4b7f0
--- /dev/null
+++ b/docs/snippets/solid/list-story-with-unchecked-children.js.mdx
@@ -0,0 +1,23 @@
+```js
+// List.stories.js|jsx
+
+import { List } from './List';
+
+//👇 Instead of importing ListItem, we import the stories
+import { Unchecked } from './ListItem.stories';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export const OneItem = {
+  args: {
+    children: <Unchecked {...Unchecked.args} />,
+  },
+};
+```
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx b/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
new file mode 100644
index 000000000000..1a8d3d29f838
--- /dev/null
+++ b/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
@@ -0,0 +1,29 @@
+```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 { Unchecked } from './ListItem.stories';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  args: {
+    children: <Unchecked {...Unchecked.args} />,
+  },
+};
+```
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx b/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx
new file mode 100644
index 000000000000..a69c4036fc9b
--- /dev/null
+++ b/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx
@@ -0,0 +1,28 @@
+```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 { Unchecked } from './ListItem.stories';
+
+const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  args: {
+    children: <Unchecked {...Unchecked.args} />,
+  },
+};
+```
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 5b0c87dd13e8..043b6a459aac 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -17,6 +17,8 @@ It's useful to write stories that [render two or more components](../writing-sto
     'vue/list-story-with-sub-components.ts-3.ts.mdx',
     'web-components/list-story-with-subcomponents.js.mdx',
     'web-components/list-story-with-subcomponents.ts.mdx',
+    'solid/list-story-with-subcomponents.js.mdx',
+    'solid/list-story-with-subcomponents.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-subcomponents"
@@ -52,6 +54,8 @@ The simplest change we can make to the above is to reuse the stories of the `Lis
     'angular/list-story-unchecked.ts.mdx',
     'web-components/list-story-unchecked.js.mdx',
     'web-components/list-story-unchecked.ts.mdx',
+    'solid/list-story-unchecked.js.mdx',
+    'solid/list-story-unchecked.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-unchecked"
@@ -73,6 +77,8 @@ One way we improve that situation is by pulling the rendered subcomponent out in
   paths={[
     'react/list-story-with-unchecked-children.js.mdx',
     'react/list-story-with-unchecked-children.ts.mdx',
+    'solid/list-story-with-unchecked-children.js.mdx',
+    'solid/list-story-with-unchecked-children.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-unchecked-children"
@@ -114,6 +120,8 @@ Another option that is more “data”-based is to create a special “story-gen
     'angular/list-story-template.ts.mdx',
     'web-components/list-story-template.js.mdx',
     'web-components/list-story-template.ts.mdx',
+    'solid/list-story-template.js.mdx',
+    'solid/list-story-template.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-template"

From 69edbd205a0ef8fe3879c5e752a82ebd7b672bcf Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 21 Feb 2023 18:22:01 -0500
Subject: [PATCH 12/36] Added docs-page code snippets.

---
 .../solid/button-story-auto-docs.js.mdx       | 29 +++++++++++++++
 .../solid/button-story-auto-docs.ts-4-9.mdx   | 36 +++++++++++++++++++
 .../solid/button-story-auto-docs.ts.mdx       | 34 ++++++++++++++++++
 docs/writing-docs/docs-page.md                |  2 ++
 4 files changed, 101 insertions(+)
 create mode 100644 docs/snippets/solid/button-story-auto-docs.js.mdx
 create mode 100644 docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-auto-docs.ts.mdx

diff --git a/docs/snippets/solid/button-story-auto-docs.js.mdx b/docs/snippets/solid/button-story-auto-docs.js.mdx
new file mode 100644
index 000000000000..c48e89a20803
--- /dev/null
+++ b/docs/snippets/solid/button-story-auto-docs.js.mdx
@@ -0,0 +1,29 @@
+```js
+// Button.stories.js
+
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx b/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
new file mode 100644
index 000000000000..9f4ab55a7184
--- /dev/null
+++ b/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
@@ -0,0 +1,36 @@
+```tsx
+// Button.stories.ts
+
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'Button',
+  component: Button,
+
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['autodocs'],
+
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
diff --git a/docs/snippets/solid/button-story-auto-docs.ts.mdx b/docs/snippets/solid/button-story-auto-docs.ts.mdx
new file mode 100644
index 000000000000..f7acec59f5c1
--- /dev/null
+++ b/docs/snippets/solid/button-story-auto-docs.ts.mdx
@@ -0,0 +1,34 @@
+```tsx
+// Button.stories.ts
+
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Button',
+  component: Button,
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
diff --git a/docs/writing-docs/docs-page.md b/docs/writing-docs/docs-page.md
index a5ca0c5b6610..dc6c59a06754 100644
--- a/docs/writing-docs/docs-page.md
+++ b/docs/writing-docs/docs-page.md
@@ -26,6 +26,8 @@ To enable auto-generated documentation for your stories, you'll need to add the
     'svelte/button-story-auto-docs.js.mdx',
     'web-components/button-story-auto-docs.js.mdx',
     'web-components/button-story-auto-docs.ts.mdx',
+    'solid/button-story-auto-docs.js.mdx',
+    'solid/button-story-auto-docs.ts.mdx',
   ]}
 />
 

From 27efa18d2a8bc03ca2ed25f7fabd95e5c58d9b77 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 21 Feb 2023 19:12:42 -0500
Subject: [PATCH 13/36] Added code snippets for sharing.

---
 docs/sharing/design-integrations.md           |  2 +
 .../component-story-figma-integration.js.mdx  | 23 +++++++++++
 ...mponent-story-figma-integration.ts-4-9.mdx | 28 +++++++++++++
 .../component-story-figma-integration.ts.mdx  | 28 +++++++++++++
 .../component-story-with-accessibility.js.mdx | 32 +++++++++++++++
 ...ponent-story-with-accessibility.ts-4-9.mdx | 39 +++++++++++++++++++
 .../component-story-with-accessibility.ts.mdx | 37 ++++++++++++++++++
 .../solid/mdx-canvas-multiple-stories.mdx.mdx | 39 +++++++++++++++++++
 docs/writing-docs/doc-block-canvas.md         |  1 +
 docs/writing-tests/interaction-testing.md     |  2 +
 10 files changed, 231 insertions(+)
 create mode 100644 docs/snippets/solid/component-story-figma-integration.js.mdx
 create mode 100644 docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/component-story-figma-integration.ts.mdx
 create mode 100644 docs/snippets/solid/component-story-with-accessibility.js.mdx
 create mode 100644 docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/component-story-with-accessibility.ts.mdx
 create mode 100644 docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx

diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
index 2fdc0b810eda..f365e172b64c 100644
--- a/docs/sharing/design-integrations.md
+++ b/docs/sharing/design-integrations.md
@@ -109,6 +109,8 @@ In Storybook, add a new [parameter](../writing-stories/parameters.md) named `des
     'svelte/component-story-figma-integration.js.mdx',
     'web-components/component-story-figma-integration.js.mdx',
     'web-components/component-story-figma-integration.ts.mdx',
+    'solid/component-story-figma-integration.js.mdx',
+    'solid/component-story-figma-integration.ts.mdx',
   ]}
   usesCsf3
   csf2Path="sharing/design-integrations#snippet-component-story-figma-integration"
diff --git a/docs/snippets/solid/component-story-figma-integration.js.mdx b/docs/snippets/solid/component-story-figma-integration.js.mdx
new file mode 100644
index 000000000000..f3ba8e5eed1c
--- /dev/null
+++ b/docs/snippets/solid/component-story-figma-integration.js.mdx
@@ -0,0 +1,23 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+export default {
+  title: 'FigmaExample',
+  component: MyComponent,
+  decorators: [withDesign],
+};
+
+export const Example = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+};
+```
diff --git a/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
new file mode 100644
index 000000000000..5195eef46aab
--- /dev/null
+++ b/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
@@ -0,0 +1,28 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'FigmaExample',
+  component: MyComponent,
+  decorators: [withDesign],
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+};
+```
diff --git a/docs/snippets/solid/component-story-figma-integration.ts.mdx b/docs/snippets/solid/component-story-figma-integration.ts.mdx
new file mode 100644
index 000000000000..1d772fd61117
--- /dev/null
+++ b/docs/snippets/solid/component-story-figma-integration.ts.mdx
@@ -0,0 +1,28 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+const meta: Meta<typeof MyComponent> = {
+  title: 'FigmaExample',
+  component: MyComponent,
+  decorators: [withDesign],
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const Example: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Sample-File',
+    },
+  },
+};
+```
diff --git a/docs/snippets/solid/component-story-with-accessibility.js.mdx b/docs/snippets/solid/component-story-with-accessibility.js.mdx
new file mode 100644
index 000000000000..97b528d055b4
--- /dev/null
+++ b/docs/snippets/solid/component-story-with-accessibility.js.mdx
@@ -0,0 +1,32 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
+  title: 'Accessibility testing',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// This is an accessible story
+export const Accessible = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+// This is not
+export const Inaccessible = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
diff --git a/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx b/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
new file mode 100644
index 000000000000..8976e325d7e2
--- /dev/null
+++ b/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
+  title: 'Accessibility testing',
+
+  component: Button,
+
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// This is an accessible story
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+// This is not
+export const Inaccessible: Story = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
diff --git a/docs/snippets/solid/component-story-with-accessibility.ts.mdx b/docs/snippets/solid/component-story-with-accessibility.ts.mdx
new file mode 100644
index 000000000000..2a743a9b9991
--- /dev/null
+++ b/docs/snippets/solid/component-story-with-accessibility.ts.mdx
@@ -0,0 +1,37 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   */
+  title: 'Accessibility testing',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// This is an accessible story
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+// This is not
+export const Inaccessible: Story = {
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
diff --git a/docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx
new file mode 100644
index 000000000000..3eed2fd03e96
--- /dev/null
+++ b/docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx
@@ -0,0 +1,39 @@
+```md
+<!-- Badge.stories.mdx -->
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { Badge } from './Badge';
+
+<Meta title="MDX/Badge" component={Badge} />
+
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/solid/api/csf
+  to learn how to use render functions.
+-->
+
+<Canvas>
+  <Story 
+    name="warning"
+    args={{
+      status: 'warning', 
+      label: 'Warning',
+    }}
+    render={(args) => <Badge {...args } />} />
+  <Story 
+    name="neutral"
+    args={{
+      status: 'neutral', 
+      label: 'Neutral',
+    }}
+    render={(args) => <Badge {...args } />} />
+  <Story 
+    name="error"
+    args={{
+      status: 'error', 
+      label: 'Error',
+    }}
+    render={(args) => <Badge {...args } />} />
+</Canvas>
+```
diff --git a/docs/writing-docs/doc-block-canvas.md b/docs/writing-docs/doc-block-canvas.md
index 7eeb45d6a3e2..44a5f7f2c1b1 100644
--- a/docs/writing-docs/doc-block-canvas.md
+++ b/docs/writing-docs/doc-block-canvas.md
@@ -44,6 +44,7 @@ If you want, you can also group multiple stories and render them inside a single
     'vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx',
     'vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx',
     'svelte/mdx-canvas-multiple-stories.mdx.mdx',
+    'solid/mdx-canvas-multiple-stories.mdx.mdx',
   ]}
   usesCsf3
   csf2Path="writing-docs/doc-block-canvas#snippet-mdx-canvas-multiple-stories"
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 3991d0a1dcdf..dc141e706bc3 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -67,6 +67,8 @@ The test itself is defined inside a `play` function connected to a story. Here's
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'solid/login-form-with-play-function.js.mdx',
+    'solid/login-form-with-play-function.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-tests/interaction-testing#snippet-login-form-with-play-function"

From 277e23069e21e959a0e7c30eee1609363fbd6d4b Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 21 Feb 2023 19:52:23 -0500
Subject: [PATCH 14/36] Added essentials code snippets.

---
 docs/essentials/controls.md                   |  8 ++-
 docs/essentials/toolbars-and-globals.md       |  3 ++
 docs/essentials/viewport.md                   |  2 +
 ...component-story-custom-args-complex.js.mdx | 47 +++++++++++++++++
 ...onent-story-custom-args-complex.ts-4-9.mdx | 52 +++++++++++++++++++
 ...component-story-custom-args-complex.ts.mdx | 51 ++++++++++++++++++
 .../component-story-figma-integration.js.mdx  |  2 +-
 ...mponent-story-figma-integration.ts-4-9.mdx |  2 +-
 .../component-story-figma-integration.ts.mdx  |  2 +-
 ...component-story-configure-viewports.js.mdx | 33 ++++++++++++
 ...onent-story-configure-viewports.ts-4-9.mdx | 40 ++++++++++++++
 ...component-story-configure-viewports.ts.mdx | 38 ++++++++++++++
 ...ory-use-globaltype-backwards-compat.js.mdx |  8 +++
 .../my-component-story-use-globaltype.js.mdx  | 41 +++++++++++++++
 ...-component-story-use-globaltype.ts-4-9.mdx | 47 +++++++++++++++++
 .../my-component-story-use-globaltype.ts.mdx  | 46 ++++++++++++++++
 ...able-story-fully-customize-controls.js.mdx | 44 ++++++++++++++++
 ...-story-fully-customize-controls.ts-4-9.mdx | 45 ++++++++++++++++
 ...able-story-fully-customize-controls.ts.mdx | 44 ++++++++++++++++
 19 files changed, 550 insertions(+), 5 deletions(-)
 create mode 100644 docs/snippets/solid/component-story-custom-args-complex.js.mdx
 create mode 100644 docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/component-story-custom-args-complex.ts.mdx
 create mode 100644 docs/snippets/solid/my-component-story-configure-viewports.js.mdx
 create mode 100644 docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/my-component-story-configure-viewports.ts.mdx
 create mode 100644 docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx
 create mode 100644 docs/snippets/solid/my-component-story-use-globaltype.js.mdx
 create mode 100644 docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/my-component-story-use-globaltype.ts.mdx
 create mode 100644 docs/snippets/solid/table-story-fully-customize-controls.js.mdx
 create mode 100644 docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/table-story-fully-customize-controls.ts.mdx

diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index e9271a8449d6..68356dabb43b 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -97,10 +97,10 @@ This replaces the input with a radio group for a more intuitive experience.
 
 For a few types, Controls can automatically be inferred with [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp). If you've used the Storybook CLI to setup your project it should have automatically created the following defaults in `.storybook/preview.js`:
 
-| Data type | Default regex                            | Description                                               |
+| Data type |              Default regex               |                        Description                        |
 | :-------: | :--------------------------------------: | :-------------------------------------------------------: |
 | **color** | <code>/(background&#124;color)$/i</code> | Will display a color picker UI for the args that match it |
-| **date**  | `/Date$/`                                | Will display a date picker UI for the args that match it  |
+| **date**  |                `/Date$/`                 | Will display a date picker UI for the args that match it  |
 
 If you haven't used the CLI to setup the configuration, or if you want to define your own patterns, use the `matchers` property in the `controls` parameter:
 
@@ -131,6 +131,8 @@ Until now, we only used auto-generated controls based on the component we're wri
     'angular/table-story-fully-customize-controls.ts.mdx',
     'web-components/table-story-fully-customize-controls.js.mdx',
     'web-components/table-story-fully-customize-controls.ts.mdx',
+    'solid/table-story-fully-customize-controls.js.mdx',
+    'solid/table-story-fully-customize-controls.ts.mdx',
   ]}
   usesCsf3
   csf2Path="essentials/controls#snippet-table-story-fully-customize-controls"
@@ -164,6 +166,8 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
     'svelte/component-story-custom-args-complex.js.mdx',
     'web-components/component-story-custom-args-complex.js.mdx',
     'web-components/component-story-custom-args-complex.ts.mdx',
+    'solid/component-story-custom-args-complex.js.mdx',
+    'solid/component-story-custom-args-complex.ts.mdx',
   ]}
   usesCsf3
   csf2Path="essentials/controls#snippet-component-story-custom-args-complex"
diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
index 3383531bf0fa..eb67610b8ab7 100644
--- a/docs/essentials/toolbars-and-globals.md
+++ b/docs/essentials/toolbars-and-globals.md
@@ -110,6 +110,8 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
     'svelte/my-component-story-use-globaltype.js.mdx',
     'web-components/my-component-story-use-globaltype.js.mdx',
     'web-components/my-component-story-use-globaltype.ts.mdx',
+    'solid/my-component-story-use-globaltype.js.mdx',
+    'solid/my-component-story-use-globaltype.ts.mdx',
   ]}
   usesCsf3
   csf2Path="essentials/toolbars-and-globals#snippet-my-component-story-use-globaltype"
@@ -131,6 +133,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
     'svelte/my-component-story-use-globaltype-backwards-compat.js.mdx',
     'web-components/my-component-story-use-globaltype-backwards-compat.js.mdx',
     'web-components/my-component-story-use-globaltype-backwards-compat.ts.mdx',
+    'solid/my-component-story-use-globaltype-backwards-compat.js.mdx',
   ]}
 />
 
diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md
index e438db813006..d5da3a8a88f3 100644
--- a/docs/essentials/viewport.md
+++ b/docs/essentials/viewport.md
@@ -127,6 +127,8 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
     'web-components/my-component-story-configure-viewports.js.mdx',
     'web-components/my-component-story-configure-viewports.ts.mdx',
     'svelte/my-component-story-configure-viewports.js.mdx',
+    'solid/my-component-story-configure-viewports.js.mdx',
+    'solid/my-component-story-configure-viewports.ts.mdx',
   ]}
   usesCsf3
   csf2Path="essentials/viewport#snippet-my-component-story-configure-viewports"
diff --git a/docs/snippets/solid/component-story-custom-args-complex.js.mdx b/docs/snippets/solid/component-story-custom-args-complex.js.mdx
new file mode 100644
index 000000000000..874059f27034
--- /dev/null
+++ b/docs/snippets/solid/component-story-custom-args-complex.js.mdx
@@ -0,0 +1,47 @@
+```js
+// YourComponent.stories.js|jsx
+
+import { createSignal, createEffect } from 'solid-js';
+import { YourComponent } from './your-component';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  component: YourComponent,
+  //👇 Creates specific argTypes with options
+  argTypes: {
+    propertyA: {
+      options: ['Item One', 'Item Two', 'Item Three'],
+      control: { type: 'select' }, // Automatically inferred when 'options' is defined
+    },
+    propertyB: {
+      options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+    },
+  },
+};
+
+//👇 Some function to demonstrate the behavior
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // Makes some computations and returns something
+};
+
+export const ExampleStory = {
+  render: (args) => {
+    const [someFunctionResult, setSomeFunctionResult] = createSignal();
+    
+    //👇 Assigns the function result to a signal
+    createEffect(() => {
+      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB))
+    })
+
+    return <YourComponent {...args} someProperty={someFunctionResult()} />;
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+};
+```
diff --git a/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx b/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
new file mode 100644
index 000000000000..7199841b6c2c
--- /dev/null
+++ b/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
@@ -0,0 +1,52 @@
+```tsx
+// YourComponent.stories.ts|tsx
+
+import { createSignal, createEffect } from 'solid-js';
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { YourComponent } from './your-component';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+
+  //👇 Creates specific argTypes with options
+  argTypes: {
+    propertyA: {
+      options: ['Item One', 'Item Two', 'Item Three'],
+      control: { type: 'select' }, // Automatically inferred when 'options' is defined
+    },
+    propertyB: {
+      options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+    },
+  },
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+//👇 Some function to demonstrate the behavior
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // Makes some computations and returns something
+};
+
+export const ExampleStory: Story = {
+  render: (args) => {
+    const [someFunctionResult, setSomeFunctionResult] = createSignal();
+    
+    //👇 Assigns the function result to a signal
+    createEffect(() => {
+      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB))
+    })
+
+    return <YourComponent {...args} someProperty={someFunctionResult()} />;
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+};
+```
diff --git a/docs/snippets/solid/component-story-custom-args-complex.ts.mdx b/docs/snippets/solid/component-story-custom-args-complex.ts.mdx
new file mode 100644
index 000000000000..a18c52a1f200
--- /dev/null
+++ b/docs/snippets/solid/component-story-custom-args-complex.ts.mdx
@@ -0,0 +1,51 @@
+```tsx
+// YourComponent.stories.ts|tsx
+
+import { createSignal, createEffect } from 'solid-js';
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { YourComponent } from './your-component';
+
+const meta: Meta<typeof YourComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  //👇 Creates specific argTypes with options
+  argTypes: {
+    propertyA: {
+      options: ['Item One', 'Item Two', 'Item Three'],
+      control: { type: 'select' }, // Automatically inferred when 'options' is defined
+    },
+    propertyB: {
+      options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof YourComponent>;
+
+//👇 Some function to demonstrate the behavior
+const someFunction = (valuePropertyA, valuePropertyB) => {
+  // Makes some computations and returns something
+};
+
+export const ExampleStory: Story = {
+  render: (args) => {
+    const [someFunctionResult, setSomeFunctionResult] = createSignal();
+    
+    //👇 Assigns the function result to a signal
+    createEffect(() => {
+      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB))
+    })
+
+    return <YourComponent {...args} someProperty={someFunctionResult()} />;
+  },
+  args: {
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  },
+};
+```
diff --git a/docs/snippets/solid/component-story-figma-integration.js.mdx b/docs/snippets/solid/component-story-figma-integration.js.mdx
index f3ba8e5eed1c..191fb296ca11 100644
--- a/docs/snippets/solid/component-story-figma-integration.js.mdx
+++ b/docs/snippets/solid/component-story-figma-integration.js.mdx
@@ -5,7 +5,7 @@ import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
-// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
diff --git a/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
index 5195eef46aab..31033afe5136 100644
--- a/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
-// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction#default-export
 const meta = {
   title: 'FigmaExample',
   component: MyComponent,
diff --git a/docs/snippets/solid/component-story-figma-integration.ts.mdx b/docs/snippets/solid/component-story-figma-integration.ts.mdx
index 1d772fd61117..d98f677a95cb 100644
--- a/docs/snippets/solid/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/solid/component-story-figma-integration.ts.mdx
@@ -7,7 +7,7 @@ import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
-// More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction#default-export
 const meta: Meta<typeof MyComponent> = {
   title: 'FigmaExample',
   component: MyComponent,
diff --git a/docs/snippets/solid/my-component-story-configure-viewports.js.mdx b/docs/snippets/solid/my-component-story-configure-viewports.js.mdx
new file mode 100644
index 000000000000..0943f82b32b5
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-configure-viewports.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+  parameters: {
+    //👇 The viewports object from the Essentials addon
+    viewport: {
+      //👇 The viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      //👇 Your own default viewport
+      defaultViewport: 'iphone6',
+    },
+  },
+};
+
+export const MyStory = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx b/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
new file mode 100644
index 000000000000..9f41a7c20c35
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
@@ -0,0 +1,40 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+
+  component: MyComponent,
+
+  parameters: {
+    //👇 The viewports object from the Essentials addon
+    viewport: {
+      //👇 The viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      //👇 Your own default viewport
+      defaultViewport: 'iphone6',
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MyStory: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-story-configure-viewports.ts.mdx b/docs/snippets/solid/my-component-story-configure-viewports.ts.mdx
new file mode 100644
index 000000000000..b79a8dd2da88
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-configure-viewports.ts.mdx
@@ -0,0 +1,38 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+  parameters: {
+    //👇 The viewports object from the Essentials addon
+    viewport: {
+      //👇 The viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      //👇 Your own default viewport
+      defaultViewport: 'iphone6',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const MyStory: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex',
+    },
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx
new file mode 100644
index 000000000000..e53c6cd9f9c3
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -0,0 +1,8 @@
+```js
+// MyComponent.stories.js|jsx|ts|tsx
+
+export const StoryWithLocale = ({ globals: { locale } }) => {
+  const caption = getCaptionForLocale(locale);
+  return <p>{caption}</p>;
+};
+```
diff --git a/docs/snippets/solid/my-component-story-use-globaltype.js.mdx b/docs/snippets/solid/my-component-story-use-globaltype.js.mdx
new file mode 100644
index 000000000000..22a64ab1d7d8
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-use-globaltype.js.mdx
@@ -0,0 +1,41 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx b/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
new file mode 100644
index 000000000000..3f828164930e
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
@@ -0,0 +1,47 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-story-use-globaltype.ts.mdx b/docs/snippets/solid/my-component-story-use-globaltype.ts.mdx
new file mode 100644
index 000000000000..fa988cc72c0c
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-use-globaltype.ts.mdx
@@ -0,0 +1,46 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'zh':
+      return '你好!';
+    default:
+      return 'Hello!';
+  }
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <p>{caption}</p>;
+  },
+};
+```
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.js.mdx b/docs/snippets/solid/table-story-fully-customize-controls.js.mdx
new file mode 100644
index 000000000000..b31a8a49468c
--- /dev/null
+++ b/docs/snippets/solid/table-story-fully-customize-controls.js.mdx
@@ -0,0 +1,44 @@
+```js
+// Table.stories.js|jsx
+
+import { Table } from './Table';
+import { TD } from './TableDataCell';
+import { TR } from './TableRow';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Custom Table',
+  component: Table,
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const TableStory = {
+  render: ({ data, ...args }) => (
+    <Table {...args}>
+      {data.map((row) => (
+        <TR>
+          {row.map((item) => (
+            <TD>{item}</TD>
+          ))}
+        </TR>
+      ))}
+    </Table>
+  ),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
+};
+```
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx b/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
new file mode 100644
index 000000000000..aec0f53253ef
--- /dev/null
+++ b/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
@@ -0,0 +1,45 @@
+```tsx
+// Table.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Table } from './Table';
+import { TD } from './TableDataCell';
+import { TR } from './TableRow';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Custom Table',
+
+  component: Table,
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TableStory: Story = {
+  render: ({ data, ...args }) => (
+    <Table {...args}>
+      {data.map((row) => (
+        <TR>
+          {row.map((item) => (
+            <TD>{item}</TD>
+          ))}
+        </TR>
+      ))}
+    </Table>
+  ),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
+};
+```
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx b/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx
new file mode 100644
index 000000000000..a1e318cb2617
--- /dev/null
+++ b/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx
@@ -0,0 +1,44 @@
+```ts
+// Table.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Table } from './Table';
+import { TD } from './TableDataCell';
+import { TR } from './TableRow';
+
+const meta: Meta<typeof Table> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Custom Table',
+  component: Table,
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const TableStory: Story = {
+  render: ({ data, ...args }) => (
+    <Table {...args}>
+      {data.map((row) => (
+        <TR>
+          {row.map((item) => (
+            <TD>{item}</TD>
+          ))}
+        </TR>
+      ))}
+    </Table>
+  ),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
+};
+```

From e83d5ae9d4e6412ef34ec16b887a9f601f35606a Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 21 Feb 2023 20:04:00 -0500
Subject: [PATCH 15/36] Addons code snippets.

---
 docs/addons/addons-api.md                     |  2 ++
 docs/addons/writing-addons.md                 |  2 ++
 .../button-story-with-addon-example.js.mdx    | 24 +++++++++++++
 ...button-story-with-addon-example.ts-4-9.mdx | 36 +++++++++++++++++++
 .../button-story-with-addon-example.ts.mdx    | 34 ++++++++++++++++++
 5 files changed, 98 insertions(+)
 create mode 100644 docs/snippets/solid/button-story-with-addon-example.js.mdx
 create mode 100644 docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-with-addon-example.ts.mdx

diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index 14bc9a186449..cc42959b089d 100644
--- a/docs/addons/addons-api.md
+++ b/docs/addons/addons-api.md
@@ -239,6 +239,8 @@ Let's say you've got a story like this:
     'svelte/button-story-with-addon-example.js.mdx',
     'web-components/button-story-with-addon-example.js.mdx',
     'web-components/button-story-with-addon-example.ts.mdx',
+    'solid/button-story-with-addon-example.js.mdx',
+    'solid/button-story-with-addon-example.ts.mdx',
   ]}
   usesCsf3
   csf2Path="addons/addons-api#snippet-button-story-with-addon-example"
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index ea3987c95200..511a140b3726 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -204,6 +204,8 @@ When Storybook was initialized, it provided a small set of example stories. Chan
     'svelte/button-story-with-addon-example.js.mdx',
     'web-components/button-story-with-addon-example.js.mdx',
     'web-components/button-story-with-addon-example.ts.mdx',
+    'solid/button-story-with-addon-example.js.mdx',
+    'solid/button-story-with-addon-example.ts.mdx',
   ]}
   usesCsf3
   csf2Path="addons/writing-addons#snippet-button-story-with-addon-example"
diff --git a/docs/snippets/solid/button-story-with-addon-example.js.mdx b/docs/snippets/solid/button-story-with-addon-example.js.mdx
new file mode 100644
index 000000000000..6638df8e6875
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-addon-example.js.mdx
@@ -0,0 +1,24 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'This data is passed to the addon',
+    },
+  },
+};
+
+export const Basic = {
+  render: () => <Button>Hello</Button>,
+};
+```
diff --git a/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
new file mode 100644
index 000000000000..f067347d3780
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
@@ -0,0 +1,36 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'this data is passed to the addon',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Basic: Story = {
+  render: () => <Button>Hello</Button>,
+};
+```
diff --git a/docs/snippets/solid/button-story-with-addon-example.ts.mdx b/docs/snippets/solid/button-story-with-addon-example.ts.mdx
new file mode 100644
index 000000000000..90d87c014d76
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-addon-example.ts.mdx
@@ -0,0 +1,34 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'this data is passed to the addon',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Basic: Story = {
+  render: () => <Button>Hello</Button>,
+};
+```

From 697ae4a99ab5efc54275fae314fd1682c03644e1 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Wed, 22 Feb 2023 09:41:12 -0500
Subject: [PATCH 16/36] Added docs code snippets.

---
 docs/configure/environment-variables.md       |  2 ++
 docs/configure/frameworks.md                  |  2 +-
 docs/configure/images-and-assets.md           |  6 ++++
 docs/configure/telemetry.md                   |  2 +-
 .../component-story-static-asset-cdn.js.mdx   | 22 ++++++++++++
 ...omponent-story-static-asset-cdn.ts-4-9.mdx | 24 +++++++++++++
 .../component-story-static-asset-cdn.ts.mdx   | 24 +++++++++++++
 ...nent-story-static-asset-with-import.js.mdx | 27 +++++++++++++++
 ...-story-static-asset-with-import.ts-4-9.mdx | 34 +++++++++++++++++++
 ...nent-story-static-asset-with-import.ts.mdx | 34 +++++++++++++++++++
 ...t-story-static-asset-without-import.js.mdx | 16 +++++++++
 ...ory-static-asset-without-import.ts-4-9.mdx | 23 +++++++++++++
 ...t-story-static-asset-without-import.ts.mdx | 23 +++++++++++++
 .../my-component-with-env-variables.js.mdx    | 20 +++++++++++
 ...my-component-with-env-variables.ts-4-9.mdx | 26 ++++++++++++++
 .../my-component-with-env-variables.ts.mdx    | 25 ++++++++++++++
 16 files changed, 308 insertions(+), 2 deletions(-)
 create mode 100644 docs/snippets/solid/component-story-static-asset-cdn.js.mdx
 create mode 100644 docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/component-story-static-asset-cdn.ts.mdx
 create mode 100644 docs/snippets/solid/component-story-static-asset-with-import.js.mdx
 create mode 100644 docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
 create mode 100644 docs/snippets/solid/component-story-static-asset-without-import.js.mdx
 create mode 100644 docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/component-story-static-asset-without-import.ts.mdx
 create mode 100644 docs/snippets/solid/my-component-with-env-variables.js.mdx
 create mode 100644 docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/my-component-with-env-variables.ts.mdx

diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
index fe3eb4ad0b0a..91bb89ea0dc5 100644
--- a/docs/configure/environment-variables.md
+++ b/docs/configure/environment-variables.md
@@ -59,6 +59,8 @@ Then you can access this environment variable anywhere, even within your stories
     'web-components/my-component-with-env-variables.js.mdx',
     'web-components/my-component-with-env-variables.ts.mdx',
     'svelte/my-component-with-env-variables.js.mdx',
+    'solid/my-component-with-env-variables.js.mdx',
+    'solid/my-component-with-env-variables.ts.mdx',
   ]}
   usesCsf3
   csf2Path="configure/environment-variables#snippet-my-component-with-env-variables"
diff --git a/docs/configure/frameworks.md b/docs/configure/frameworks.md
index 079f4b3b0de4..4928420ccd23 100644
--- a/docs/configure/frameworks.md
+++ b/docs/configure/frameworks.md
@@ -15,7 +15,7 @@ Storybook provides support for the leading industry builders and frameworks. How
 | Builder | Framework                                                                |
 | ------- | ------------------------------------------------------------------------ |
 | Webpack | React, Angular, Vue, Web Components, NextJS, HTML, Ember, Preact, Svelte |
-| Vite    | React, Vue, Web Components, HTML, Svelte, SvelteKit, Qwik                |
+| Vite    | React, Vue, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid         |
 
 ## Configure
 
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index 63dd3dc26c97..e7e21826e2c3 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -24,6 +24,8 @@ Afterward, you can use any asset in your stories:
     'svelte/component-story-static-asset-with-import.js.mdx',
     'web-components/component-story-static-asset-with-import.js.mdx',
     'web-components/component-story-static-asset-with-import.ts.mdx',
+    'solid/component-story-static-asset-with-import.js.mdx',
+    'solid/component-story-static-asset-with-import.ts.mdx',
   ]}
   usesCsf3
   csf2Path="configure/images-and-assets#snippet-component-story-static-asset-with-import"
@@ -62,6 +64,8 @@ Here `../public` is your static directory. Now use it in a component or story li
     'svelte/component-story-static-asset-without-import.js.mdx',
     'web-components/component-story-static-asset-without-import.js.mdx',
     'web-components/component-story-static-asset-without-import.ts.mdx',
+    'solid/component-story-static-asset-without-import.js.mdx',
+    'solid/component-story-static-asset-without-import.ts.mdx',
   ]}
   usesCsf3
   csf2Path="configure/images-and-assets#snippet-component-story-static-asset-without-import"
@@ -115,6 +119,8 @@ Upload your files to an online CDN and reference them. In this example, we’re
     'svelte/component-story-static-asset-cdn.js.mdx',
     'web-components/component-story-static-asset-cdn.js.mdx',
     'web-components/component-story-static-asset-cdn.ts.mdx',
+    'solid/component-story-static-asset-cdn.js.mdx',
+    'solid/component-story-static-asset-cdn.ts.mdx',
   ]}
   usesCsf3
   csf2Path="configure/images-and-assets#snippet-component-story-static-asset-cdn"
diff --git a/docs/configure/telemetry.md b/docs/configure/telemetry.md
index 3ac997b7128d..d6c4265a04f8 100644
--- a/docs/configure/telemetry.md
+++ b/docs/configure/telemetry.md
@@ -8,7 +8,7 @@ Storybook collects completely anonymous data to help us improve user experience.
 
 Hundreds of thousands of developers use Storybook daily to build, test, and document components. Storybook is framework agnostic and integrates with the front-end ecosystem:
 
-- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue](https://vuejs.org/), and [Svelte](https://svelte.dev/)
+- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/) and [Solid](https://www.solidjs.com/)
 - **Libraries** such as [Styled-Components](https://styled-components.com/), [Tailwind](https://tailwindcss.com/), [Redux](https://redux.js.org/)
 - **Design tools** such as [Figma](https://figma.com/), [Sketch](https://www.sketch.com/), [Zeplin](https://zeplin.io/) and [InVision](https://www.invisionapp.com/)
 - **Workflow tools** such as [Notion](https://www.notion.so/product), [Confluence](https://www.atlassian.com/software/confluence), and [Jira](https://www.atlassian.com/software/jira)
diff --git a/docs/snippets/solid/component-story-static-asset-cdn.js.mdx b/docs/snippets/solid/component-story-static-asset-cdn.js.mdx
new file mode 100644
index 000000000000..2f8c7f3db332
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-cdn.js.mdx
@@ -0,0 +1,22 @@
+```js
+// MyComponent.stories.js|jsx|ts|tsx
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
+};
+```
diff --git a/docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx b/docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx
new file mode 100644
index 000000000000..57bfb86222ea
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```tsx
+//  MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithAnImage: Story = {
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
+};
+```
diff --git a/docs/snippets/solid/component-story-static-asset-cdn.ts.mdx b/docs/snippets/solid/component-story-static-asset-cdn.ts.mdx
new file mode 100644
index 000000000000..336e99a0abcb
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-cdn.ts.mdx
@@ -0,0 +1,24 @@
+```tsx
+//  MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const WithAnImage: Story = {
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
+};
+```
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.js.mdx b/docs/snippets/solid/component-story-static-asset-with-import.js.mdx
new file mode 100644
index 000000000000..163bba9ed83b
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-with-import.js.mdx
@@ -0,0 +1,27 @@
+```js
+// MyComponent.stories.js|jsx|ts|tsx
+
+import imageFile from './static/image.png';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+};
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage = {
+  render: () => <img src={image.src} alt={image.alt} />,
+};
+```
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx b/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
new file mode 100644
index 000000000000..b98463450c01
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
@@ -0,0 +1,34 @@
+```tsx
+//  MyComponent.stories.ts|tsx
+
+import imageFile from './static/image.png';
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage: Story = {
+  render: () => <img src={image.src} alt={image.alt} />,
+};
+```
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx b/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
new file mode 100644
index 000000000000..77064765117a
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
@@ -0,0 +1,34 @@
+```tsx
+//  MyComponent.stories.ts|tsx
+
+import imageFile from './static/image.png';
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+const image = {
+  src: imageFile,
+  alt: 'my image',
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const WithAnImage: Story = {
+  render: () => <img src={image.src} alt={image.alt} />,
+};
+```
diff --git a/docs/snippets/solid/component-story-static-asset-without-import.js.mdx b/docs/snippets/solid/component-story-static-asset-without-import.js.mdx
new file mode 100644
index 000000000000..aada809e54ea
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-without-import.js.mdx
@@ -0,0 +1,16 @@
+```js
+// MyComponent.stories.js|jsx|ts|tsx
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+};
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage = {
+  render: () => <img src="/image.png" alt="my image" />,
+};
+```
diff --git a/docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx b/docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx
new file mode 100644
index 000000000000..81fe5daf9982
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx
@@ -0,0 +1,23 @@
+```tsx
+//  MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage: Story = {
+  render: () => <img src="/image.png" alt="my image" />,
+};
+```
diff --git a/docs/snippets/solid/component-story-static-asset-without-import.ts.mdx b/docs/snippets/solid/component-story-static-asset-without-import.ts.mdx
new file mode 100644
index 000000000000..c51e1ea80737
--- /dev/null
+++ b/docs/snippets/solid/component-story-static-asset-without-import.ts.mdx
@@ -0,0 +1,23 @@
+```tsx
+//  MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'img',
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+// Assume image.png is located in the "public" directory.
+export const WithAnImage: Story = {
+  render: () => <img src="/image.png" alt="my image" />,
+};
+```
diff --git a/docs/snippets/solid/my-component-with-env-variables.js.mdx b/docs/snippets/solid/my-component-with-env-variables.js.mdx
new file mode 100644
index 000000000000..00fdd19ee49c
--- /dev/null
+++ b/docs/snippets/solid/my-component-with-env-variables.js.mdx
@@ -0,0 +1,20 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+export const ExampleStory = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
new file mode 100644
index 000000000000..0e780ce37568
--- /dev/null
+++ b/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
@@ -0,0 +1,26 @@
+```tsx
+// MyComponent.stories.ts| tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExampleStory: Story = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-with-env-variables.ts.mdx b/docs/snippets/solid/my-component-with-env-variables.ts.mdx
new file mode 100644
index 000000000000..aac9f319c808
--- /dev/null
+++ b/docs/snippets/solid/my-component-with-env-variables.ts.mdx
@@ -0,0 +1,25 @@
+```tsx
+// MyComponent.stories.ts| tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ExampleStory: Story = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
+```

From d7ccdb4ad7c4387ede8ffa4e8a9ef5733d845764 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Wed, 22 Feb 2023 10:59:39 -0500
Subject: [PATCH 17/36] Added api and contribute snippets.

---
 docs/api/csf.md                               | 21 +++++++++
 docs/contribute/new-snippets.md               | 10 +++--
 .../button-story-click-handler-args.js.mdx    | 26 +++++++++++
 ...button-story-click-handler-args.ts-4-9.mdx | 30 +++++++++++++
 .../button-story-click-handler-args.ts.mdx    | 29 +++++++++++++
 ...n-story-click-handler-simplificated.js.mdx | 18 ++++++++
 ...ory-click-handler-simplificated.ts-4-9.mdx | 24 +++++++++++
 ...n-story-click-handler-simplificated.ts.mdx | 23 ++++++++++
 .../solid/button-story-click-handler.js.mdx   | 20 +++++++++
 .../button-story-click-handler.ts-4-9.mdx     | 26 +++++++++++
 .../solid/button-story-click-handler.ts.mdx   | 25 +++++++++++
 .../solid/button-story-with-sample.js.mdx     | 23 ++++++++++
 ...t-story-with-custom-render-function.js.mdx | 32 ++++++++++++++
 ...ory-with-custom-render-function.ts-4-9.mdx | 36 ++++++++++++++++
 ...t-story-with-custom-render-function.ts.mdx | 35 +++++++++++++++
 .../solid/csf-2-example-starter.js.mdx        | 13 ++++++
 .../solid/csf-2-example-starter.ts.mdx        | 15 +++++++
 .../snippets/solid/csf-2-example-story.js.mdx |  6 +++
 .../snippets/solid/csf-2-example-story.ts.mdx |  6 +++
 .../solid/csf-3-example-render.js.mdx         |  8 ++++
 .../solid/csf-3-example-render.ts.mdx         |  8 ++++
 .../solid/csf-3-example-starter.ts-4-9.mdx    | 16 +++++++
 .../solid/csf-3-example-starter.ts.mdx        | 14 ++++++
 .../my-component-story-basic-and-props.js.mdx | 20 +++++++++
 ...component-story-basic-and-props.ts-4-9.mdx | 26 +++++++++++
 .../my-component-story-basic-and-props.ts.mdx | 25 +++++++++++
 .../my-component-story-with-nonstory.js.mdx   | 33 ++++++++++++++
 ...y-component-story-with-nonstory.ts-4-9.mdx | 43 +++++++++++++++++++
 .../my-component-story-with-nonstory.ts.mdx   | 38 ++++++++++++++++
 29 files changed, 646 insertions(+), 3 deletions(-)
 create mode 100644 docs/snippets/solid/button-story-click-handler-args.js.mdx
 create mode 100644 docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-click-handler-args.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-click-handler-simplificated.js.mdx
 create mode 100644 docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-click-handler.js.mdx
 create mode 100644 docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story-click-handler.ts.mdx
 create mode 100644 docs/snippets/solid/button-story-with-sample.js.mdx
 create mode 100644 docs/snippets/solid/component-story-with-custom-render-function.js.mdx
 create mode 100644 docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/component-story-with-custom-render-function.ts.mdx
 create mode 100644 docs/snippets/solid/csf-2-example-starter.js.mdx
 create mode 100644 docs/snippets/solid/csf-2-example-starter.ts.mdx
 create mode 100644 docs/snippets/solid/csf-2-example-story.js.mdx
 create mode 100644 docs/snippets/solid/csf-2-example-story.ts.mdx
 create mode 100644 docs/snippets/solid/csf-3-example-render.js.mdx
 create mode 100644 docs/snippets/solid/csf-3-example-render.ts.mdx
 create mode 100644 docs/snippets/solid/csf-3-example-starter.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/csf-3-example-starter.ts.mdx
 create mode 100644 docs/snippets/solid/my-component-story-basic-and-props.js.mdx
 create mode 100644 docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/my-component-story-basic-and-props.ts.mdx
 create mode 100644 docs/snippets/solid/my-component-story-with-nonstory.js.mdx
 create mode 100644 docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/my-component-story-with-nonstory.ts.mdx

diff --git a/docs/api/csf.md b/docs/api/csf.md
index c935f45e389a..02604e69a175 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -51,6 +51,8 @@ With CSF, every named export in the file represents a story object by default.
     'angular/my-component-story-basic-and-props.ts.mdx',
     'web-components/my-component-story-basic-and-props.js.mdx',
     'web-components/my-component-story-basic-and-props.ts.mdx',
+    'solid/my-component-story-basic-and-props.js.mdx',
+    'solid/my-component-story-basic-and-props.ts.mdx',
   ]}
   usesCsf3
   csf2Path="api/csf#snippet-my-component-story-basic-and-props"
@@ -107,6 +109,8 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def
     'angular/button-story-click-handler.ts.mdx',
     'web-components/button-story-click-handler.js.mdx',
     'web-components/button-story-click-handler.ts.mdx',
+    'solid/button-story-click-handler.js.mdx',
+    'solid/button-story-click-handler.ts.mdx',
   ]}
   usesCsf3
   csf2Path="api/csf#snippet-button-story-click-handler"
@@ -130,6 +134,8 @@ Now consider the same example, re-written with args:
     'svelte/button-story-click-handler-args.js.mdx',
     'web-components/button-story-click-handler-args.js.mdx',
     'web-components/button-story-click-handler-args.ts.mdx',
+    'solid/button-story-click-handler-args.js.mdx',
+    'solid/button-story-click-handler-args.ts.mdx',
   ]}
   usesCsf3
   csf2Path="api/csf#snippet-button-story-click-handler-args"
@@ -150,6 +156,8 @@ Or even more simply:
     'vue/button-story-click-handler-simplificated.ts.mdx',
     'web-components/button-story-click-handler-simplificated.js.mdx',
     'web-components/button-story-click-handler-simplificated.ts.mdx',
+    'solid/button-story-click-handler-simplificated.js.mdx',
+    'solid/button-story-click-handler-simplificated.ts.mdx',
   ]}
   usesCsf3
   csf2Path="api/csf#snippet-button-story-click-handler-simplificated"
@@ -181,6 +189,8 @@ A good use case for the `play` function is a form component. With previous Story
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'solid/login-form-with-play-function.js.mdx',
+    'solid/login-form-with-play-function.ts.mdx',
   ]}
   usesCsf3
   csf2Path="api/csf#snippet-login-form-with-play-function"
@@ -206,6 +216,8 @@ Starting in Storybook 6.4, you can write your stories as JavaScript objects, red
    'preact/component-story-with-custom-render-function.js.mdx',
    'web-components/component-story-with-custom-render-function.js.mdx',
    'web-components/component-story-with-custom-render-function.ts.mdx',
+   'solid/component-story-with-custom-render-function.js.mdx',
+   'solid/component-story-with-custom-render-function.ts.mdx',
   ]}
   usesCsf3
 />
@@ -261,6 +273,8 @@ Consider the following story file:
     'angular/my-component-story-with-nonstory.ts.mdx',
     'web-components/my-component-story-with-nonstory.js.mdx',
     'web-components/my-component-story-with-nonstory.ts.mdx',
+    'solid/my-component-story-with-nonstory.js.mdx',
+    'solid/my-component-story-with-nonstory.ts.mdx',
   ]}
   usesCsf3
   csf2Path="api/csf#snippet-my-component-story-with-nonstory"
@@ -298,6 +312,8 @@ In CSF 2, the named exports are always functions that instantiate a component, a
     'angular/csf-2-example-starter.ts.mdx',
     'web-components/csf-2-example-starter.js.mdx',
     'web-components/csf-2-example-starter.ts.mdx',
+    'solid/csf-2-example-starter.js.mdx',
+    'solid/csf-2-example-starter.ts.mdx',
   ]}
 />
 
@@ -318,6 +334,7 @@ Here's the CSF 3 equivalent:
     'angular/csf-3-example-starter.ts.mdx',
     'web-components/csf-3-example-starter.js.mdx',
     'web-components/csf-3-example-starter.ts.mdx',
+    'solid/csf-3-example-starter.ts.mdx',
   ]}
 />
 
@@ -378,6 +395,8 @@ Let's start with a simple CSF 2 story function:
     'angular/csf-2-example-story.ts.mdx',
     'web-components/csf-2-example-story.js.mdx',
     'web-components/csf-2-example-story.ts.mdx',
+    'solid/csf-2-example-story.js.mdx',
+    'solid/csf-2-example-story.ts.mdx',
   ]}
 />
 
@@ -398,6 +417,8 @@ Now, let's rewrite it as a story object in CSF 3 with an explicit `render` funct
     'angular/csf-3-example-render.ts.mdx',
     'web-components/csf-3-example-render.js.mdx',
     'web-components/csf-3-example-render.ts.mdx',
+    'solid/csf-3-example-render.js.mdx',
+    'solid/csf-3-example-render.ts.mdx',
   ]}
 />
 
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 9b70c7e4250d..8a36a0d67702 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -10,9 +10,9 @@ Storybook maintains code snippets for a [variety of frameworks](./../api/framewo
 
 We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework.
 
-| React                                                                        | Vue                                                                        | Angular                                                                        | Web Components                                                                        | Svelte                                                                        | Ember | HTML | Preact |
-| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----- | ---- | ------ |
-| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | ❌    | ❌   | ❌     |
+| React                                                                        | Vue                                                                        | Angular                                                                        | Web Components                                                                        | Svelte                                                                        | Solid                                                                        | Ember | HTML | Preact |
+| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----- | ---- | ------ |
+| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/solid) | ❌    | ❌   | ❌     |
 
 ## Setup
 
@@ -44,6 +44,8 @@ Browse the documentation and look for the code snippets you're willing to contri
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
     'web-components/your-component.js.mdx',
+    'solid/your-component.js.mdx',
+    'solid/your-component.ts.mdx',
   ]}
 />
 
@@ -66,6 +68,8 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
     'web-components/your-component.js.mdx',
+    'solid/your-component.js.mdx',
+    'solid/your-component.ts.mdx',
     'ember/your-component.js.mdx', //👈🏼 The code snippet you created.
   ]}
 />
diff --git a/docs/snippets/solid/button-story-click-handler-args.js.mdx b/docs/snippets/solid/button-story-click-handler-args.js.mdx
new file mode 100644
index 000000000000..68a3262dce72
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler-args.js.mdx
@@ -0,0 +1,26 @@
+```js
+// Button.stories.js|jsx
+
+import solid from 'solid';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = {
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+};
+```
diff --git a/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
new file mode 100644
index 000000000000..30bf46423197
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
@@ -0,0 +1,30 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text = {
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+};
+```
diff --git a/docs/snippets/solid/button-story-click-handler-args.ts.mdx b/docs/snippets/solid/button-story-click-handler-args.ts.mdx
new file mode 100644
index 000000000000..7ac81e1ca0f1
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler-args.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Text = {
+  args: {
+    label: 'Hello',
+    onClick: action('clicked'),
+  },
+  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
+};
+```
diff --git a/docs/snippets/solid/button-story-click-handler-simplificated.js.mdx b/docs/snippets/solid/button-story-click-handler-simplificated.js.mdx
new file mode 100644
index 000000000000..e636636fc0f4
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler-simplificated.js.mdx
@@ -0,0 +1,18 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+  component: Button,
+}
+
+export const Text = {
+  args: {...},
+};
+```
diff --git a/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
new file mode 100644
index 000000000000..eea83d553021
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  args: {},
+};
+```
diff --git a/docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx
new file mode 100644
index 000000000000..470fca4b1c63
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Text: Story = {
+  args: {},
+};
+```
diff --git a/docs/snippets/solid/button-story-click-handler.js.mdx b/docs/snippets/solid/button-story-click-handler.js.mdx
new file mode 100644
index 000000000000..878887acd12e
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler.js.mdx
@@ -0,0 +1,20 @@
+```js
+// Button.stories.js|jsx
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = {
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+};
+```
diff --git a/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
new file mode 100644
index 000000000000..e604923d9f33
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
@@ -0,0 +1,26 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+};
+```
diff --git a/docs/snippets/solid/button-story-click-handler.ts.mdx b/docs/snippets/solid/button-story-click-handler.ts.mdx
new file mode 100644
index 000000000000..e4e1161ed0c8
--- /dev/null
+++ b/docs/snippets/solid/button-story-click-handler.ts.mdx
@@ -0,0 +1,25 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { action } from '@storybook/addon-actions';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  render: () => <Button label="Hello" onClick={action('clicked')} />,
+};
+```
diff --git a/docs/snippets/solid/button-story-with-sample.js.mdx b/docs/snippets/solid/button-story-with-sample.js.mdx
new file mode 100644
index 000000000000..3f263b53d0c2
--- /dev/null
+++ b/docs/snippets/solid/button-story-with-sample.js.mdx
@@ -0,0 +1,23 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * to learn how to use render functions.
+ */
+export const Sample = {
+  render: () => <Button label="hello button" />,
+};
+```
diff --git a/docs/snippets/solid/component-story-with-custom-render-function.js.mdx b/docs/snippets/solid/component-story-with-custom-render-function.js.mdx
new file mode 100644
index 000000000000..ab972846cb58
--- /dev/null
+++ b/docs/snippets/solid/component-story-with-custom-render-function.js.mdx
@@ -0,0 +1,32 @@
+```js
+// MyComponent.stories.js|jsx
+
+import solid from 'solid';
+
+import { Layout } from './Layout';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example = {
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+};
+```
diff --git a/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx b/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
new file mode 100644
index 000000000000..e9575b4e1cee
--- /dev/null
+++ b/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
@@ -0,0 +1,36 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Layout } from './Layout';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// This story uses a render function to fully control how the component renders.
+export const Example: Story = {
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+};
+```
diff --git a/docs/snippets/solid/component-story-with-custom-render-function.ts.mdx b/docs/snippets/solid/component-story-with-custom-render-function.ts.mdx
new file mode 100644
index 000000000000..63416945a119
--- /dev/null
+++ b/docs/snippets/solid/component-story-with-custom-render-function.ts.mdx
@@ -0,0 +1,35 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Layout } from './Layout';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+// This story uses a render function to fully control how the component renders.
+export const Example: Story = {
+  render: () => (
+    <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  ),
+};
+```
diff --git a/docs/snippets/solid/csf-2-example-starter.js.mdx b/docs/snippets/solid/csf-2-example-starter.js.mdx
new file mode 100644
index 000000000000..6af95a68753d
--- /dev/null
+++ b/docs/snippets/solid/csf-2-example-starter.js.mdx
@@ -0,0 +1,13 @@
+```js
+// CSF 2
+
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Primary = (args) => <Button {...args} />;
+Primary.args = { primary: true };
+```
diff --git a/docs/snippets/solid/csf-2-example-starter.ts.mdx b/docs/snippets/solid/csf-2-example-starter.ts.mdx
new file mode 100644
index 000000000000..fb55727065c3
--- /dev/null
+++ b/docs/snippets/solid/csf-2-example-starter.ts.mdx
@@ -0,0 +1,15 @@
+```tsx
+// CSF 2
+
+import { ComponentStory, ComponentMeta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+export const Primary: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+Primary.args = { primary: true };
+```
diff --git a/docs/snippets/solid/csf-2-example-story.js.mdx b/docs/snippets/solid/csf-2-example-story.js.mdx
new file mode 100644
index 000000000000..dd37c0c366ca
--- /dev/null
+++ b/docs/snippets/solid/csf-2-example-story.js.mdx
@@ -0,0 +1,6 @@
+```js
+// CSF 2
+
+// Other imports and story implementation
+export const Default = (args) => <Button {...args} />;
+```
diff --git a/docs/snippets/solid/csf-2-example-story.ts.mdx b/docs/snippets/solid/csf-2-example-story.ts.mdx
new file mode 100644
index 000000000000..c874f9a0e2dc
--- /dev/null
+++ b/docs/snippets/solid/csf-2-example-story.ts.mdx
@@ -0,0 +1,6 @@
+```ts
+// CSF 2
+
+// Other imports and story implementation
+export const Default: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+```
diff --git a/docs/snippets/solid/csf-3-example-render.js.mdx b/docs/snippets/solid/csf-3-example-render.js.mdx
new file mode 100644
index 000000000000..335954d99d51
--- /dev/null
+++ b/docs/snippets/solid/csf-3-example-render.js.mdx
@@ -0,0 +1,8 @@
+```js
+// CSF 3 - explicit render function
+
+// Other imports and story implementation
+export const Default = {
+  render: (args) => <Button {...args} />,
+};
+```
diff --git a/docs/snippets/solid/csf-3-example-render.ts.mdx b/docs/snippets/solid/csf-3-example-render.ts.mdx
new file mode 100644
index 000000000000..3ea134d0e043
--- /dev/null
+++ b/docs/snippets/solid/csf-3-example-render.ts.mdx
@@ -0,0 +1,8 @@
+```ts
+// CSF 3 - explicit render function
+
+// Other imports and story implementation
+export const Default: Story = {
+  render: (args) => <Button {...args} />,
+};
+```
diff --git a/docs/snippets/solid/csf-3-example-starter.ts-4-9.mdx b/docs/snippets/solid/csf-3-example-starter.ts-4-9.mdx
new file mode 100644
index 000000000000..dbf66c18a4d6
--- /dev/null
+++ b/docs/snippets/solid/csf-3-example-starter.ts-4-9.mdx
@@ -0,0 +1,16 @@
+```tsx
+// CSF 3
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = { args: { primary: true } };
+```
diff --git a/docs/snippets/solid/csf-3-example-starter.ts.mdx b/docs/snippets/solid/csf-3-example-starter.ts.mdx
new file mode 100644
index 000000000000..74ce1415d934
--- /dev/null
+++ b/docs/snippets/solid/csf-3-example-starter.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// CSF 3
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = { component: Button };
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = { args: { primary: true } };
+```
diff --git a/docs/snippets/solid/my-component-story-basic-and-props.js.mdx b/docs/snippets/solid/my-component-story-basic-and-props.js.mdx
new file mode 100644
index 000000000000..54856fe66196
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-basic-and-props.js.mdx
@@ -0,0 +1,20 @@
+```js
+// MyComponent.story.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Path/To/MyComponent',
+  component: MyComponent,
+};
+
+export const Basic = {};
+
+export const WithProp = {
+  render: () => <MyComponent prop="value" />,
+};
+```
diff --git a/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
new file mode 100644
index 000000000000..23b34e4c57db
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
@@ -0,0 +1,26 @@
+```tsx
+// MyComponent.story.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Path/To/MyComponent',
+
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+
+export const WithProp: Story = {
+  render: () => <MyComponent prop="value" />,
+};
+```
diff --git a/docs/snippets/solid/my-component-story-basic-and-props.ts.mdx b/docs/snippets/solid/my-component-story-basic-and-props.ts.mdx
new file mode 100644
index 000000000000..4623fc4c2785
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-basic-and-props.ts.mdx
@@ -0,0 +1,25 @@
+```tsx
+// MyComponent.story.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Path/To/MyComponent',
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const Basic: Story = {};
+
+export const WithProp: Story = {
+  render: () => <MyComponent prop="value" />,
+};
+```
diff --git a/docs/snippets/solid/my-component-story-with-nonstory.js.mdx b/docs/snippets/solid/my-component-story-with-nonstory.js.mdx
new file mode 100644
index 000000000000..c2ca3afcb720
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-with-nonstory.js.mdx
@@ -0,0 +1,33 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { MyComponent } from './MyComponent';
+
+import someData from './data.json';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
+  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
+};
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+export const SimpleStory = {
+  args: {
+    data: simpleData,
+  },
+};
+
+export const ComplexStory = {
+  args: {
+    data: complexData,
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
new file mode 100644
index 000000000000..6320f99fdff9
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
@@ -0,0 +1,43 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+import someData from './data.json';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+
+  component: MyComponent,
+
+  // 👈 Storybook loads these stories
+  includeStories: ['SimpleStory', 'ComplexStory'],
+
+  // 👈 Storybook ignores anything that contains Data
+  excludeStories: /.*Data$/,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+export const SimpleStory: Story = {
+  args: {
+    data: simpleData,
+  },
+};
+
+export const ComplexStory: Story = {
+  args: {
+    data: complexData,
+  },
+};
+```
diff --git a/docs/snippets/solid/my-component-story-with-nonstory.ts.mdx b/docs/snippets/solid/my-component-story-with-nonstory.ts.mdx
new file mode 100644
index 000000000000..4cda99977867
--- /dev/null
+++ b/docs/snippets/solid/my-component-story-with-nonstory.ts.mdx
@@ -0,0 +1,38 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { MyComponent } from './MyComponent';
+
+import someData from './data.json';
+
+const meta: Meta<typeof MyComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
+  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+export const SimpleStory: Story = {
+  args: {
+    data: simpleData,
+  },
+};
+
+export const ComplexStory: Story = {
+  args: {
+    data: complexData,
+  },
+};
+```

From cb72c9be67f38c4c7f916e993c26c3c4247311c5 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Wed, 22 Feb 2023 14:31:06 -0500
Subject: [PATCH 18/36] Updated contribute code snippets guide.

---
 docs/contribute/new-snippets.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 8a36a0d67702..7ad382943913 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -24,6 +24,14 @@ git checkout -b code-snippets-for-framework
 
 Before adding your snippets, open the `docs` folder with your editor of choice. Get familiarized with the documentation, including how the snippets are organized and their contents.
 
+Then change your current directory path to the docs folder. Synchronize the documentation file changes with the Storybook website by running the script `sync.js`.
+
+```shell
+cd docs && node sync.js
+```
+
+It will prompt to type the absolute path of your `frontpage` project folder, like this `/absolute/path/to/frontpage`.
+
 ### Add your first snippet
 
 Now that you're familiar with how the documentation is structured, it's time to add the code snippets. First, go to the `docs/snippets/` folder and create a new directory for your framework of choice (e.g., `ember`).
@@ -99,10 +107,10 @@ Navigate to the `frontpage` directory and install the required dependencies with
 yarn
 ```
 
-Next, you'll need a way to get the documentation linked to the website. Execute the following:
+Next, you'll need a way to extract the monorepo docs to the website. Execute the following:
 
 ```shell
-yarn link-monorepo-docs  ./path-to-your-local-storybook
+yarn extract-monorepo-docs $branch
 ```
 
 And run the Storybook website with the following command:

From 724ade78d9b90e2f6de97d748c5451ecd7f04aac Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Wed, 22 Feb 2023 15:21:45 -0500
Subject: [PATCH 19/36] Formatted with prettier.

---
 docs/snippets/solid/button-story.with-hooks.js.mdx     |  2 +-
 .../solid/component-story-custom-args-complex.js.mdx   |  6 +++---
 .../component-story-custom-args-complex.ts-4-9.mdx     |  6 +++---
 .../solid/component-story-custom-args-complex.ts.mdx   |  6 +++---
 docs/snippets/solid/document-screen-fetch.js.mdx       |  2 +-
 .../snippets/solid/document-screen-with-graphql.js.mdx | 10 +++++-----
 .../snippets/solid/document-screen-with-graphql.ts.mdx |  8 ++++----
 ...ook-preview-with-styled-components-decorator.js.mdx |  6 +++---
 ...h-styled-components-decorator.story-function.js.mdx |  6 +++---
 9 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/docs/snippets/solid/button-story.with-hooks.js.mdx b/docs/snippets/solid/button-story.with-hooks.js.mdx
index 90c7d6bc6f89..d1d29c06cbcb 100644
--- a/docs/snippets/solid/button-story.with-hooks.js.mdx
+++ b/docs/snippets/solid/button-story.with-hooks.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js|ts|jsx|tsx
 
-import { createSignal } from "solid-js";
+import { createSignal } from 'solid-js';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/component-story-custom-args-complex.js.mdx b/docs/snippets/solid/component-story-custom-args-complex.js.mdx
index 874059f27034..93b40d592e7a 100644
--- a/docs/snippets/solid/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/solid/component-story-custom-args-complex.js.mdx
@@ -31,11 +31,11 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 export const ExampleStory = {
   render: (args) => {
     const [someFunctionResult, setSomeFunctionResult] = createSignal();
-    
+
     //👇 Assigns the function result to a signal
     createEffect(() => {
-      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB))
-    })
+      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB));
+    });
 
     return <YourComponent {...args} someProperty={someFunctionResult()} />;
   },
diff --git a/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx b/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
index 7199841b6c2c..0ef058f5c5ba 100644
--- a/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
@@ -36,11 +36,11 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 export const ExampleStory: Story = {
   render: (args) => {
     const [someFunctionResult, setSomeFunctionResult] = createSignal();
-    
+
     //👇 Assigns the function result to a signal
     createEffect(() => {
-      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB))
-    })
+      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB));
+    });
 
     return <YourComponent {...args} someProperty={someFunctionResult()} />;
   },
diff --git a/docs/snippets/solid/component-story-custom-args-complex.ts.mdx b/docs/snippets/solid/component-story-custom-args-complex.ts.mdx
index a18c52a1f200..710027e6df8d 100644
--- a/docs/snippets/solid/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/solid/component-story-custom-args-complex.ts.mdx
@@ -35,11 +35,11 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 export const ExampleStory: Story = {
   render: (args) => {
     const [someFunctionResult, setSomeFunctionResult] = createSignal();
-    
+
     //👇 Assigns the function result to a signal
     createEffect(() => {
-      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB))
-    })
+      setSomeFunctionResult(someFunction(args.propertyA, args.propertyB));
+    });
 
     return <YourComponent {...args} someProperty={someFunctionResult()} />;
   },
diff --git a/docs/snippets/solid/document-screen-fetch.js.mdx b/docs/snippets/solid/document-screen-fetch.js.mdx
index 27305acccfa9..f5ea3504eccc 100644
--- a/docs/snippets/solid/document-screen-fetch.js.mdx
+++ b/docs/snippets/solid/document-screen-fetch.js.mdx
@@ -11,7 +11,7 @@ import { DocumentList } from './DocumentList';
 function useFetchData() {
   const [status, setStatus] = createSignal('idle');
   const [data, setData] = createSignal([]);
-  
+
   setStatus('loading');
   fetch('https://your-restful-endpoint')
     .then((res) => {
diff --git a/docs/snippets/solid/document-screen-with-graphql.js.mdx b/docs/snippets/solid/document-screen-with-graphql.js.mdx
index d367b57279dd..c75dbc4b0a0c 100644
--- a/docs/snippets/solid/document-screen-with-graphql.js.mdx
+++ b/docs/snippets/solid/document-screen-with-graphql.js.mdx
@@ -1,14 +1,14 @@
 ```js
 // YourPage.js|jsx
 
-import { Match, Switch } from "solid-js";
-import { createGraphQLClient, gql } from "@solid-primitives/graphql";
+import { Match, Switch } from 'solid-js';
+import { createGraphQLClient, gql } from '@solid-primitives/graphql';
 
 import { PageLayout } from './PageLayout';
 import { DocumentHeader } from './DocumentHeader';
 import { DocumentList } from './DocumentList';
 
-const newQuery = createGraphQLClient("https://foobar.com/v1/api");
+const newQuery = createGraphQLClient('https://foobar.com/v1/api');
 const AllInfoQuery = gql`
   query AllInfo {
     user {
@@ -33,7 +33,7 @@ const AllInfoQuery = gql`
 `;
 
 function useFetchInfo() {
-  const [data] = newQuery(AllInfoQuery, {path: 'home'});
+  const [data] = newQuery(AllInfoQuery, { path: 'home' });
   return data;
 }
 
@@ -49,7 +49,7 @@ export function DocumentScreen() {
         <p>There was an error fetching the data!</p>
       </Match>
       <Match when={data()} keyed>
-        {data => (
+        {(data) => (
           <PageLayout user={data.user}>
             <DocumentHeader document={data.document} />
             <DocumentList documents={data.subdocuments} />
diff --git a/docs/snippets/solid/document-screen-with-graphql.ts.mdx b/docs/snippets/solid/document-screen-with-graphql.ts.mdx
index 8d290bfd3aaf..039bb7c64424 100644
--- a/docs/snippets/solid/document-screen-with-graphql.ts.mdx
+++ b/docs/snippets/solid/document-screen-with-graphql.ts.mdx
@@ -1,13 +1,13 @@
 ```ts
 // YourPage.ts|tsx
 
-import { createGraphQLClient, gql } from "@solid-primitives/graphql";
+import { createGraphQLClient, gql } from '@solid-primitives/graphql';
 
 import { PageLayout } from './PageLayout';
 import { DocumentHeader } from './DocumentHeader';
 import { DocumentList } from './DocumentList';
 
-const newQuery = createGraphQLClient("https://foobar.com/v1/api");
+const newQuery = createGraphQLClient('https://foobar.com/v1/api');
 const AllInfoQuery = gql`
   query AllInfo {
     user {
@@ -56,7 +56,7 @@ interface Data {
 }
 
 function useFetchInfo() {
-  const [data] = newQuery<Data>(AllInfoQuery, {path: 'home'});
+  const [data] = newQuery<Data>(AllInfoQuery, { path: 'home' });
   return data;
 }
 
@@ -72,7 +72,7 @@ export function DocumentScreen() {
         <p>There was an error fetching the data!</p>
       </Match>
       <Match when={data()} keyed>
-        {data => (
+        {(data) => (
           <PageLayout user={data.user}>
             <DocumentHeader document={data.document} />
             <DocumentList documents={data.subdocuments} />
diff --git a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx
index 20d6d2b736d8..480954f7079f 100644
--- a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx
+++ b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx
@@ -1,12 +1,12 @@
 ```js
 // .storybook/preview.js
 
-import { ThemeProvider } from "solid-styled-components";
+import { ThemeProvider } from 'solid-styled-components';
 
 const theme = {
   colors: {
-    primary: "hotpink"
-  }
+    primary: 'hotpink',
+  },
 };
 
 export const decorators = [
diff --git a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
index 77396537eda2..5be7da9c5a51 100644
--- a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
+++ b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
@@ -1,12 +1,12 @@
 ```js
 // .storybook/preview.js
 
-import { ThemeProvider } from "solid-styled-components";
+import { ThemeProvider } from 'solid-styled-components';
 
 const theme = {
   colors: {
-    primary: "hotpink"
-  }
+    primary: 'hotpink',
+  },
 };
 
 export const decorators = [(Story) => <ThemeProvider theme={theme}>{Story()}</ThemeProvider>];

From 394c46edd486b01932fed6e3d40e94f2a18f2534 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 20 Mar 2023 19:59:07 -0500
Subject: [PATCH 20/36] Added Sync docs script as a sb task

---
 docs/sync.js               | 74 --------------------------------------
 scripts/task.ts            |  4 ++-
 scripts/tasks/sync-docs.ts | 55 ++++++++++++++++++++++++++++
 scripts/utils/ask.ts       | 15 ++++++++
 4 files changed, 73 insertions(+), 75 deletions(-)
 delete mode 100644 docs/sync.js
 create mode 100644 scripts/tasks/sync-docs.ts
 create mode 100644 scripts/utils/ask.ts

diff --git a/docs/sync.js b/docs/sync.js
deleted file mode 100644
index e7bddb54eb94..000000000000
--- a/docs/sync.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Util script for synchronizing docs with frontpage repository.
- * For running it:
- * - cd /storybook/docs
- * - node sync.js 
- */
-const fs = require('fs');
-const readline = require('readline');
-const path = require('path');
-
-const askQuestion = (query) => {
-  const rl = readline.createInterface({
-      input: process.stdin,
-      output: process.stdout,
-  });
-
-  return new Promise(resolve => rl.question(`${query}\n`, ans => {
-      rl.close();
-      resolve(ans);
-  }))
-}
-
-const run = async () => {
-  let frontpageDocsPath = '/src/content/docs'
-
-  const frontpageAbsPath = await askQuestion('Provide the frontpage project absolute path:')
-  frontpageDocsPath = `${frontpageAbsPath}${frontpageDocsPath}`;
-  
-  if (!fs.existsSync(frontpageDocsPath)) {
-    console.error(`The directory ${frontpageDocsPath} doesn't exists`);
-    process.exit(1)
-  }
-
-  console.log(`Synchronizing files from: \n${__dirname} \nto: \n${frontpageDocsPath}`)
-  
-  fs.watch(__dirname , {recursive: true}, (_, filename) => {
-    const srcFilePath = path.join(__dirname, filename);
-    const targetFilePath = path.join(frontpageDocsPath, filename);
-    const targetDir = targetFilePath.split('/').slice(0, -1).join('/');
-
-    if (filename === 'sync.js') return;
-
-    //Syncs create file
-    if (!fs.existsSync(targetFilePath)) {
-      fs.mkdirSync(targetDir, {recursive: true})
-
-      try {
-        fs.closeSync(fs.openSync(targetFilePath, 'w'));
-        console.log(`Created ${filename}.`);
-      } catch (error) {
-        throw error;
-      }
-    }
-    
-    //Syncs remove file
-    if (!fs.existsSync(srcFilePath)) {
-      try {
-        fs.unlinkSync(targetFilePath);
-        console.log(`Removed ${filename}.`);
-      } catch (error) {
-        throw error;
-      }
-      return;
-    }
-
-    //Syncs update file
-    fs.copyFile(srcFilePath, targetFilePath, (err) => {
-      console.log(`Updated ${filename}.`);
-      if (err) throw err;
-    });
-  })
-}
-
-run();
\ No newline at end of file
diff --git a/scripts/task.ts b/scripts/task.ts
index 22013a2f4eb1..83843a5f9c0c 100644
--- a/scripts/task.ts
+++ b/scripts/task.ts
@@ -15,6 +15,7 @@ import { publish } from './tasks/publish';
 import { runRegistryTask } from './tasks/run-registry';
 import { generate } from './tasks/generate';
 import { sandbox } from './tasks/sandbox';
+import { syncDocs } from './tasks/sync-docs';
 import { dev } from './tasks/dev';
 import { smokeTest } from './tasks/smoke-test';
 import { build } from './tasks/build';
@@ -90,6 +91,7 @@ export const tasks = {
   compile,
   check,
   publish,
+  'sync-docs': syncDocs,
   'run-registry': runRegistryTask,
   // These tasks pertain to a single sandbox in the ../sandboxes dir
   generate,
@@ -105,7 +107,7 @@ export const tasks = {
 type TaskKey = keyof typeof tasks;
 
 function isSandboxTask(taskKey: TaskKey) {
-  return !['install', 'compile', 'publish', 'run-registry', 'check'].includes(taskKey);
+  return !['install', 'compile', 'publish', 'run-registry', 'check', 'sync-docs'].includes(taskKey);
 }
 
 export const options = createOptions({
diff --git a/scripts/tasks/sync-docs.ts b/scripts/tasks/sync-docs.ts
new file mode 100644
index 000000000000..c514455ecbc2
--- /dev/null
+++ b/scripts/tasks/sync-docs.ts
@@ -0,0 +1,55 @@
+import fs from 'fs';
+import path from 'path';
+import type { Task } from '../task';
+import { ask } from '../utils/ask';
+
+const logger = console;
+
+export const syncDocs: Task = {
+  description: 'Synchronize documentation',
+  service: true,
+  async ready() {
+    return false;
+  },
+  async run() {
+    const rootDir = path.join(__dirname, '..', '..');
+    const docsDir = path.join(rootDir, 'docs');
+    let frontpageDocsPath = '/src/content/docs';
+
+    const frontpagePath = await ask('Provide the frontpage project path:');
+    frontpageDocsPath = path.join(rootDir, frontpagePath, frontpageDocsPath);
+
+    if (!fs.existsSync(frontpageDocsPath)) {
+      logger.info(`The directory ${frontpageDocsPath} doesn't exists`);
+      process.exit(1);
+    }
+
+    logger.info(`Synchronizing files from: \n${docsDir} \nto: \n${frontpageDocsPath}`);
+
+    fs.watch(docsDir, { recursive: true }, (_, filename) => {
+      const srcFilePath = path.join(docsDir, filename);
+      const targetFilePath = path.join(frontpageDocsPath, filename);
+      const targetDir = targetFilePath.split('/').slice(0, -1).join('/');
+
+      // Syncs create file
+      if (!fs.existsSync(targetFilePath)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+        fs.closeSync(fs.openSync(targetFilePath, 'w'));
+        logger.info(`Created ${filename}.`);
+      }
+
+      // Syncs remove file
+      if (!fs.existsSync(srcFilePath)) {
+        fs.unlinkSync(targetFilePath);
+        logger.info(`Removed ${filename}.`);
+        return;
+      }
+
+      // Syncs update file
+      fs.copyFile(srcFilePath, targetFilePath, (err) => {
+        logger.info(`Updated ${filename}.`);
+        if (err) throw err;
+      });
+    });
+  },
+};
diff --git a/scripts/utils/ask.ts b/scripts/utils/ask.ts
new file mode 100644
index 000000000000..a8cb5141f3ae
--- /dev/null
+++ b/scripts/utils/ask.ts
@@ -0,0 +1,15 @@
+import readline from 'readline';
+
+export const ask = (query: string) => {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise<string>((resolve) =>
+    rl.question(`${query}\n`, (ans) => {
+      rl.close();
+      resolve(ans);
+    })
+  );
+};

From 1adf1dc27e19e15879e95a8c06237a64c15bd4c8 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 21 Mar 2023 10:34:43 -0500
Subject: [PATCH 21/36] Upd. why-storybook.md

---
 docs/get-started/why-storybook.md             |  2 ++
 docs/snippets/solid/histogram-story.js.mdx    | 23 +++++++++++++++
 .../snippets/solid/histogram-story.ts-4-9.mdx | 28 +++++++++++++++++++
 docs/snippets/solid/histogram-story.ts.mdx    | 28 +++++++++++++++++++
 4 files changed, 81 insertions(+)
 create mode 100644 docs/snippets/solid/histogram-story.js.mdx
 create mode 100644 docs/snippets/solid/histogram-story.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/histogram-story.ts.mdx

diff --git a/docs/get-started/why-storybook.md b/docs/get-started/why-storybook.md
index f0409040a264..015d6eb5bdcc 100644
--- a/docs/get-started/why-storybook.md
+++ b/docs/get-started/why-storybook.md
@@ -52,6 +52,8 @@ You write stories for granular UI component variation and then use those stories
     'preact/histogram-story.js.mdx',
     'html/histogram-story.js.mdx',
     'html/histogram-story.ts.mdx',
+    'solid/histogram-story.js.mdx',
+    'solid/histogram-story.ts.mdx',
   ]}
   usesCsf3
   csf2Path="why-storybook#snippet-histogram-story"
diff --git a/docs/snippets/solid/histogram-story.js.mdx b/docs/snippets/solid/histogram-story.js.mdx
new file mode 100644
index 000000000000..6ab90f983712
--- /dev/null
+++ b/docs/snippets/solid/histogram-story.js.mdx
@@ -0,0 +1,23 @@
+```js
+// Histogram.stories.js|jsx
+
+import { Histogram } from './Histogram';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Histogram',
+  component: Histogram,
+};
+
+export const Default = {
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+};
+```
diff --git a/docs/snippets/solid/histogram-story.ts-4-9.mdx b/docs/snippets/solid/histogram-story.ts-4-9.mdx
new file mode 100644
index 000000000000..ff0e10f4591e
--- /dev/null
+++ b/docs/snippets/solid/histogram-story.ts-4-9.mdx
@@ -0,0 +1,28 @@
+```ts
+// Histogram.stories.ts|tsx
+
+import type { Meta, StoryObj } from "storybook-solidjs";
+
+import { Histogram } from './Histogram';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Histogram',
+  component: Histogram,
+} satisfies Meta<typeof Histogram>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+};
+```
diff --git a/docs/snippets/solid/histogram-story.ts.mdx b/docs/snippets/solid/histogram-story.ts.mdx
new file mode 100644
index 000000000000..d0393fe25e8c
--- /dev/null
+++ b/docs/snippets/solid/histogram-story.ts.mdx
@@ -0,0 +1,28 @@
+```ts
+// Histogram.stories.ts|tsx
+
+import type { Meta, StoryObj } from "storybook-solidjs";
+
+import { Histogram } from './Histogram';
+
+const meta: Meta<typeof Histogram> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Histogram',
+  component: Histogram,
+};
+
+export default meta;
+type Story = StoryObj<typeof Histogram>;
+
+export const Default: Story = {
+  args: {
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  },
+};
+```

From d1be186445a3de4086992acad3703457fbaa1d8a Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 21 Mar 2023 11:24:20 -0500
Subject: [PATCH 22/36] Removed unused type from button story mdx.

---
 docs/snippets/solid/button-story-with-args.ts-4-9.mdx | 2 +-
 docs/snippets/solid/button-story-with-args.ts.mdx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
index 999a3e73a047..91a9a397867a 100644
--- a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
diff --git a/docs/snippets/solid/button-story-with-args.ts.mdx b/docs/snippets/solid/button-story-with-args.ts.mdx
index d637763c5a5d..430082341bdd 100644
--- a/docs/snippets/solid/button-story-with-args.ts.mdx
+++ b/docs/snippets/solid/button-story-with-args.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.

From b0b4a48568a3571bfad717d30bf66dca69101f8e Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Thu, 23 Mar 2023 19:05:10 -0500
Subject: [PATCH 23/36] Updated get-started.

---
 docs/get-started/setup.md                     |  2 +-
 ...ew-with-styled-components-decorator.ts.mdx | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 docs/snippets/solid/storybook-preview-with-styled-components-decorator.ts.mdx

diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index b94825b47fb3..ae6be473190b 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -87,7 +87,7 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in
     'vue/storybook-preview-with-mixin-decorator.mixin-2.ts.mdx',
     'angular/storybook-preview-with-styled-components-decorator.ts.mdx',
     'solid/storybook-preview-with-styled-components-decorator.js.mdx',
-    'solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
+    'solid/storybook-preview-with-styled-components-decorator.ts.mdx',
   ]}
 />
 
diff --git a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.ts.mdx b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.ts.mdx
new file mode 100644
index 000000000000..292fb737afcb
--- /dev/null
+++ b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.ts.mdx
@@ -0,0 +1,23 @@
+```tsx
+// .storybook/preview.tsx
+import { Preview } from 'storybook-solidjs';
+import { ThemeProvider, DefaultTheme } from 'solid-styled-components';
+
+const theme: DefaultTheme = {
+  colors: {
+    primary: 'hotpink',
+  },
+};
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default preview;
+```

From 6ab445f346df284a3b63fcc2a828eaa874638e10 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Fri, 24 Mar 2023 10:37:34 -0500
Subject: [PATCH 24/36] Updated writing-stories.md

---
 .../solid/button-story-component-decorator.ts-4-9.mdx       | 2 +-
 docs/snippets/solid/button-story-component-decorator.ts.mdx | 2 +-
 .../button-story-default-export-with-component.ts-4-9.mdx   | 2 +-
 .../solid/button-story-default-export-with-component.ts.mdx | 1 +
 docs/snippets/solid/button-story-rename-story.ts-4-9.mdx    | 1 +
 docs/snippets/solid/button-story-rename-story.ts.mdx        | 1 +
 docs/snippets/solid/button-story-using-args.ts-4-9.mdx      | 6 ++++--
 docs/snippets/solid/button-story-using-args.ts.mdx          | 6 ++++--
 docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx        | 2 +-
 docs/snippets/solid/list-story-reuse-data.ts.mdx            | 2 +-
 docs/writing-stories/introduction.md                        | 4 +---
 11 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
index cb403075946f..3541ea62f4eb 100644
--- a/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
-import type { Meta, StoryObj } from 'storybook-solidjs';
+import type { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story-component-decorator.ts.mdx b/docs/snippets/solid/button-story-component-decorator.ts.mdx
index 7f137e00a3c9..91e67a36aada 100644
--- a/docs/snippets/solid/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/solid/button-story-component-decorator.ts.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
-import type { Meta, StoryObj } from 'storybook-solidjs';
+import type { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
index f5c035ebe565..54941394fa55 100644
--- a/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
@@ -1,5 +1,6 @@
 ```tsx
 // Button.stories.ts|tsx
+import { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
@@ -9,7 +10,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story-default-export-with-component.ts.mdx b/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
index 218aa19d2d43..a5eb4135278b 100644
--- a/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
@@ -1,5 +1,6 @@
 ```tsx
 // Button.stories.ts|tsx
+import { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx b/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
index efbf900a2be2..a67e0532e563 100644
--- a/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
@@ -1,5 +1,6 @@
 ```tsx
 // Button.stories.ts|tsx
+import { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story-rename-story.ts.mdx b/docs/snippets/solid/button-story-rename-story.ts.mdx
index 70b47637772f..59d81d1ede4b 100644
--- a/docs/snippets/solid/button-story-rename-story.ts.mdx
+++ b/docs/snippets/solid/button-story-rename-story.ts.mdx
@@ -1,5 +1,6 @@
 ```tsx
 // Button.stories.ts|tsx
+import { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story-using-args.ts-4-9.mdx b/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
index 8e7530765bae..b1bdb9fb475c 100644
--- a/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
@@ -19,8 +19,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
-  backgroundColor: '#ff0',
-  label: 'Button',
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
 };
 
 export const Secondary: Story = {
diff --git a/docs/snippets/solid/button-story-using-args.ts.mdx b/docs/snippets/solid/button-story-using-args.ts.mdx
index 127ba072af07..03d53ddff90f 100644
--- a/docs/snippets/solid/button-story-using-args.ts.mdx
+++ b/docs/snippets/solid/button-story-using-args.ts.mdx
@@ -18,8 +18,10 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
-  backgroundColor: '#ff0',
-  label: 'Button',
+  args: {
+    backgroundColor: '#ff0',
+    label: 'Button',
+  },
 };
 
 export const Secondary: Story = {
diff --git a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
index ce91c7066fe0..0135bc33a778 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { List } from './List';
 import { ListItem } from './ListItem';
 
 //👇 All ListItem stories are imported
-import * as ListItemStories from './ListItemStories';
+import { Selected, Unselected } from './ListItem.stories';
 
 const meta = {
   /* 👇 The title prop is optional.
diff --git a/docs/snippets/solid/list-story-reuse-data.ts.mdx b/docs/snippets/solid/list-story-reuse-data.ts.mdx
index 0c640ab8437d..32154a0444f8 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts.mdx
@@ -7,7 +7,7 @@ import { List } from './List';
 import { ListItem } from './ListItem';
 
 //👇 All ListItem stories are imported
-import * as ListItemStories from './ListItemStories';
+import { Selected, Unselected } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index c8c59ad8fadb..58fe8ca0d49d 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -88,8 +88,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 <CodeSnippets
   paths={[
-    'react/button-story.with-hooks.js.mdx',
-    'solid/button-story.with-hooks.js.mdx',
+    'react/button-story.with-hooks.js.mdx'
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
@@ -288,7 +287,6 @@ For instance, suppose you wanted to test your Button component against a differe
 
 <!-- prettier-ignore-end -->
 
-
 ![Parameters background color](./parameters-background-colors.png)
 
 This parameter would instruct the backgrounds addon to reconfigure itself whenever a Button story is selected. Most addons are configured via a parameter-based API and can be influenced at a [global](./parameters.md#global-parameters), [component](./parameters.md#component-parameters) and [story](./parameters.md#story-parameters) level.

From 83eb4e015626dea0647ca4f5401c021ca69b8fe2 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Fri, 24 Mar 2023 12:02:49 -0500
Subject: [PATCH 25/36] Updated args.md

---
 .../solid/button-story-component-args-primary.ts-4-9.mdx        | 2 +-
 docs/snippets/solid/button-story-component-args-primary.ts.mdx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
index af76159beaaf..7a317835b45b 100644
--- a/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
-import type { Meta } from 'storybook-solidjs';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story-component-args-primary.ts.mdx b/docs/snippets/solid/button-story-component-args-primary.ts.mdx
index 330ad245b26e..45dd2bfd582f 100644
--- a/docs/snippets/solid/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/solid/button-story-component-args-primary.ts.mdx
@@ -1,7 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
-import type { Meta } from 'storybook-solidjs';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 

From acd432333eb9dc14c5c140a8a63b51f249d07b0f Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Fri, 24 Mar 2023 15:33:27 -0500
Subject: [PATCH 26/36] updated decorators.md

---
 .../solid/button-story-decorator.ts.mdx       | 27 +++++++++++++++++++
 .../storybook-preview-global-decorator.ts.mdx | 18 +++++++++++++
 docs/writing-stories/decorators.md            |  9 +++----
 3 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 docs/snippets/solid/button-story-decorator.ts.mdx
 create mode 100644 docs/snippets/solid/storybook-preview-global-decorator.ts.mdx

diff --git a/docs/snippets/solid/button-story-decorator.ts.mdx b/docs/snippets/solid/button-story-decorator.ts.mdx
new file mode 100644
index 000000000000..608dd1c28653
--- /dev/null
+++ b/docs/snippets/solid/button-story-decorator.ts.mdx
@@ -0,0 +1,27 @@
+```js
+// Button.stories.js|jsx
+import type { StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary = {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+```
diff --git a/docs/snippets/solid/storybook-preview-global-decorator.ts.mdx b/docs/snippets/solid/storybook-preview-global-decorator.ts.mdx
new file mode 100644
index 000000000000..075869c6b667
--- /dev/null
+++ b/docs/snippets/solid/storybook-preview-global-decorator.ts.mdx
@@ -0,0 +1,18 @@
+```js
+// .storybook/preview.tsx
+
+import { Preview } from 'storybook-solidjs';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default preview;
+```
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index 9666ba867afd..95a1bf43e7c5 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -25,9 +25,7 @@ Some components require a “harness” to render in a useful way. For instance,
     'web-components/your-component-with-decorator.ts.mdx',
     'svelte/your-component-with-decorator.js.mdx',
     'solid/your-component-with-decorator.js.mdx',
-    'solid/your-component-with-decorator.story-function-js.js.mdx',
-    'solid/your-component-with-decorator.ts.mdx',
-    'solid/your-component-with-decorator.story-function-ts.ts.mdx',
+    'solid/your-component-with-decorator.ts.mdx'
   ]}
 />
 
@@ -60,7 +58,7 @@ For example, if you're working with React's Styled Components and your component
     'angular/add-localize-package-to-polyfills.ts.mdx',
     'angular/storybook-preview-with-angular-polyfills.js.mdx',
     'solid/storybook-preview-with-styled-components-decorator.js.mdx',
-    'solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx',
+    'solid/storybook-preview-with-styled-components-decorator.ts.mdx',
   ]}
 />
 
@@ -102,7 +100,6 @@ To define a decorator for a single story, use the `decorators` key on a named ex
     'web-components/button-story-decorator.ts.mdx',
     'svelte/button-story-decorator.js.mdx',
     'solid/button-story-decorator.js.mdx',
-    'solid/button-story-decorator.story-function.js.mdx',
     'solid/button-story-decorator.ts.mdx',
   ]}
   usesCsf3
@@ -153,7 +150,7 @@ We can also set a decorator for **all stories** via the `decorators` export of y
     'web-components/storybook-preview-global-decorator.js.mdx',
     'svelte/storybook-preview-global-decorator.js.mdx',
     'solid/storybook-preview-global-decorator.js.mdx',
-    'solid/storybook-preview-global-decorator.story-function.js.mdx',
+    'solid/storybook-preview-global-decorator.ts.mdx',
   ]}
 />
 

From 000a08719afcdec827a2a85ecf4f845264bb5954 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Fri, 24 Mar 2023 15:58:16 -0500
Subject: [PATCH 27/36] Updated loaders.md

---
 docs/snippets/solid/loader-story.js.mdx     | 2 --
 docs/snippets/solid/loader-story.ts-4-9.mdx | 2 --
 docs/snippets/solid/loader-story.ts.mdx     | 2 --
 3 files changed, 6 deletions(-)

diff --git a/docs/snippets/solid/loader-story.js.mdx b/docs/snippets/solid/loader-story.js.mdx
index 6296d06553b1..4ae58618b878 100644
--- a/docs/snippets/solid/loader-story.js.mdx
+++ b/docs/snippets/solid/loader-story.js.mdx
@@ -1,8 +1,6 @@
 ```js
 // TodoItem.stories.js|jsx
 
-import fetch from 'node-fetch';
-
 import { TodoItem } from './TodoItem';
 
 export default {
diff --git a/docs/snippets/solid/loader-story.ts-4-9.mdx b/docs/snippets/solid/loader-story.ts-4-9.mdx
index 883d996fa912..b2357c0ef1d7 100644
--- a/docs/snippets/solid/loader-story.ts-4-9.mdx
+++ b/docs/snippets/solid/loader-story.ts-4-9.mdx
@@ -3,8 +3,6 @@
 
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
-import fetch from 'node-fetch';
-
 import { TodoItem } from './TodoItem';
 
 const meta = {
diff --git a/docs/snippets/solid/loader-story.ts.mdx b/docs/snippets/solid/loader-story.ts.mdx
index 70e3c7229d76..f975a917532d 100644
--- a/docs/snippets/solid/loader-story.ts.mdx
+++ b/docs/snippets/solid/loader-story.ts.mdx
@@ -3,8 +3,6 @@
 
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
-import fetch from 'node-fetch';
-
 import { TodoItem } from './TodoItem';
 
 const meta: Meta<typeof TodoItem> = {

From fb636a734f5b31fc10437ca44c622670f33e429b Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Fri, 24 Mar 2023 18:11:13 -0500
Subject: [PATCH 28/36] Updated build-pages-with-storybook

---
 .../solid/document-screen-fetch.js.mdx        | 11 ++++-----
 .../mock-context-container-global.ts.mdx      | 24 +++++++++++++++++++
 .../build-pages-with-storybook.md             |  5 ++--
 3 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 docs/snippets/solid/mock-context-container-global.ts.mdx

diff --git a/docs/snippets/solid/document-screen-fetch.js.mdx b/docs/snippets/solid/document-screen-fetch.js.mdx
index f5ea3504eccc..445d87b5015a 100644
--- a/docs/snippets/solid/document-screen-fetch.js.mdx
+++ b/docs/snippets/solid/document-screen-fetch.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // YourPage.js|jsx|ts|tsx
 
-import { createSignal } from 'solid-js';
+import { createSignal, Match, Switch } from 'solid-js';
 
 import { PageLayout } from './PageLayout';
 import { DocumentHeader } from './DocumentHeader';
@@ -35,8 +35,7 @@ function useFetchData() {
   };
 }
 export function DocumentScreen() {
-  const { status, data } = useFetchData();
-  const { user, document, subdocuments } = data();
+  const { status, data } = useFetchData()
 
   return (
     <Switch>
@@ -47,9 +46,9 @@ export function DocumentScreen() {
         <p>There was an error fetching the data!</p>
       </Match>
       <Match when={user} keyed>
-        <PageLayout user={user}>
-          <DocumentHeader document={document} />
-          <DocumentList documents={subdocuments} />
+        <PageLayout user={data().user}>
+          <DocumentHeader document={data().document} />
+          <DocumentList documents={data().subdocuments} />
         </PageLayout>
       </Match>
     </Switch>
diff --git a/docs/snippets/solid/mock-context-container-global.ts.mdx b/docs/snippets/solid/mock-context-container-global.ts.mdx
new file mode 100644
index 000000000000..95f27b1e7c25
--- /dev/null
+++ b/docs/snippets/solid/mock-context-container-global.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-framework';
+
+import { normal as NavigationNormal } from '../components/Navigation.stories';
+
+import GlobalContainerContext from '../components/lib/GlobalContainerContext';
+
+const context = {
+  NavigationContainer: NavigationNormal,
+};
+
+const AppDecorator = (storyFn) => {
+  return (
+    <GlobalContainerContext.Provider value={context}>{storyFn()}</GlobalContainerContext.Provider>
+  );
+};
+
+const preview: Preview = {
+  decorators: [AppDecorator],
+};
+
+export default preview;
+```
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 241a6a4808fd..4307a31020f4 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -386,9 +386,10 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator
 
 <CodeSnippets
   paths={[
-    'react/mock-context-container-global.js.mdx',
-    'solid/mock-context-container-global.js.mdx',
+    'react/mock-context-container-global.js.mdx',    
     'react/mock-context-container-global.ts.mdx',
+    'solid/mock-context-container-global.js.mdx',
+    'solid/mock-context-container-global.ts.mdx',
   ]}
 />
 

From adebb35248ebe344d5893c21d3024c583ecf344d Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Fri, 24 Mar 2023 21:57:37 -0500
Subject: [PATCH 29/36] Updated new-snippets.md

---
 docs/contribute/new-snippets.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 64e552c061a9..48056633e039 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -24,13 +24,13 @@ git checkout -b code-snippets-for-framework
 
 Before adding your snippets, open the `docs` folder with your editor of choice. Get familiarized with the documentation, including how the snippets are organized and their contents.
 
-Then change your current directory path to the docs folder. Synchronize the documentation file changes with the Storybook website by running the script `sync.js`.
+Then inside the root folder of the Storybook monorepo, run the following command:
 
 ```shell
-cd docs && node sync.js
+yarn task
 ```
 
-It will prompt to type the absolute path of your `frontpage` project folder, like this `/absolute/path/to/frontpage`.
+Select the option `Synchronize documentation (sync-docs)` and type the path of your `frontpage` project folder. Now every file change inside the monorepo `docs` folder will be reflected in the frontpage repo at `src/content/docs`.
 
 ### Add your first snippet
 
@@ -113,6 +113,10 @@ Next, you'll need a way to extract the monorepo docs to the website. Execute the
 yarn extract-monorepo-docs $branch
 ```
 
+<div class="aside">
+💡 We recommend extracting documentation from the website before adding code snippets. If you've already added multiple snippets, simply copy the <code>docs</code> folder from the Storybook monorepo and paste it into the frontpage repo at <code>src/content</code> (if the <code>docs</code> folder exists, replace it) to keep your most recent changes.
+</div>
+
 And run the Storybook website with the following command:
 
 ```shell

From f49900512ea114d6d17750616ea0a64476dbcf59 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Thu, 13 Apr 2023 14:36:32 -0500
Subject: [PATCH 30/36] Applied prettier.

---
 docs/snippets/solid/document-screen-fetch.js.mdx | 2 +-
 docs/snippets/solid/histogram-story.ts-4-9.mdx   | 2 +-
 docs/snippets/solid/histogram-story.ts.mdx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/snippets/solid/document-screen-fetch.js.mdx b/docs/snippets/solid/document-screen-fetch.js.mdx
index 445d87b5015a..17c028587220 100644
--- a/docs/snippets/solid/document-screen-fetch.js.mdx
+++ b/docs/snippets/solid/document-screen-fetch.js.mdx
@@ -35,7 +35,7 @@ function useFetchData() {
   };
 }
 export function DocumentScreen() {
-  const { status, data } = useFetchData()
+  const { status, data } = useFetchData();
 
   return (
     <Switch>
diff --git a/docs/snippets/solid/histogram-story.ts-4-9.mdx b/docs/snippets/solid/histogram-story.ts-4-9.mdx
index ff0e10f4591e..09cea6d1d778 100644
--- a/docs/snippets/solid/histogram-story.ts-4-9.mdx
+++ b/docs/snippets/solid/histogram-story.ts-4-9.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Histogram.stories.ts|tsx
 
-import type { Meta, StoryObj } from "storybook-solidjs";
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Histogram } from './Histogram';
 
diff --git a/docs/snippets/solid/histogram-story.ts.mdx b/docs/snippets/solid/histogram-story.ts.mdx
index d0393fe25e8c..45f142dbce0b 100644
--- a/docs/snippets/solid/histogram-story.ts.mdx
+++ b/docs/snippets/solid/histogram-story.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Histogram.stories.ts|tsx
 
-import type { Meta, StoryObj } from "storybook-solidjs";
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Histogram } from './Histogram';
 

From 2ac455c7b46bfcf79c346f27013e37f6b5ba489b Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 18 Apr 2023 16:03:54 -0500
Subject: [PATCH 31/36] Code review changes.

---
 .../solid/button-story-auto-docs.ts-4-9.mdx   |  4 +-
 .../solid/button-story-auto-docs.ts.mdx       |  2 +-
 .../solid/button-story-decorator.ts.mdx       |  3 +-
 ...y-default-export-with-component.ts-4-9.mdx |  3 +-
 ...story-default-export-with-component.ts.mdx |  3 +-
 .../component-story-figma-integration.js.mdx  |  1 -
 ...mponent-story-figma-integration.ts-4-9.mdx |  1 -
 .../component-story-figma-integration.ts.mdx  |  1 -
 .../component-story-static-asset-cdn.js.mdx   |  2 +-
 ...nent-story-static-asset-with-import.js.mdx |  2 +-
 ...t-story-static-asset-without-import.js.mdx |  2 +-
 .../solid/mdx-canvas-multiple-stories.mdx.mdx | 39 -------------------
 ...ory-use-globaltype-backwards-compat.js.mdx |  2 +-
 .../storybook-preview-global-decorator.js.mdx | 18 +++++----
 ...iew-global-decorator.story-function.js.mdx |  5 ---
 .../storybook-preview-global-decorator.ts.mdx |  1 -
 ...components-decorator.story-function.js.mdx | 13 -------
 ...ith-decorator.story-function-ts.ts-4-9.mdx | 22 -----------
 docs/writing-stories/introduction.md          |  2 +-
 .../stories-for-multiple-components.md        |  4 +-
 20 files changed, 24 insertions(+), 106 deletions(-)
 delete mode 100644 docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx
 delete mode 100644 docs/snippets/solid/storybook-preview-global-decorator.story-function.js.mdx
 delete mode 100644 docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
 delete mode 100644 docs/snippets/solid/your-component-with-decorator.story-function-ts.ts-4-9.mdx

diff --git a/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx b/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
index 9f4ab55a7184..532a394a46eb 100644
--- a/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
@@ -1,5 +1,5 @@
 ```tsx
-// Button.stories.ts
+// Button.stories.ts|tsx
 
 import type { Meta } from 'storybook-solidjs';
 
@@ -8,10 +8,8 @@ import { Button } from './Button';
 const meta = {
   title: 'Button',
   component: Button,
-
   //👇 Enables auto-generated documentation for the component story
   tags: ['autodocs'],
-
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/docs/snippets/solid/button-story-auto-docs.ts.mdx b/docs/snippets/solid/button-story-auto-docs.ts.mdx
index f7acec59f5c1..1571f4a6b22b 100644
--- a/docs/snippets/solid/button-story-auto-docs.ts.mdx
+++ b/docs/snippets/solid/button-story-auto-docs.ts.mdx
@@ -1,5 +1,5 @@
 ```tsx
-// Button.stories.ts
+// Button.stories.ts|tsx
 
 import type { Meta } from 'storybook-solidjs';
 
diff --git a/docs/snippets/solid/button-story-decorator.ts.mdx b/docs/snippets/solid/button-story-decorator.ts.mdx
index 608dd1c28653..ef89309aacef 100644
--- a/docs/snippets/solid/button-story-decorator.ts.mdx
+++ b/docs/snippets/solid/button-story-decorator.ts.mdx
@@ -1,5 +1,6 @@
 ```js
-// Button.stories.js|jsx
+// Button.stories.ts|tsx
+
 import type { StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
diff --git a/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
index 54941394fa55..8dbc760aa4cd 100644
--- a/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
@@ -1,6 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
-import { Meta } from 'storybook-solidjs';
+
+import type { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/button-story-default-export-with-component.ts.mdx b/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
index a5eb4135278b..4c29bdb87a53 100644
--- a/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
@@ -1,6 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
-import { Meta } from 'storybook-solidjs';
+
+import type { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/solid/component-story-figma-integration.js.mdx b/docs/snippets/solid/component-story-figma-integration.js.mdx
index 191fb296ca11..fe959db7d08b 100644
--- a/docs/snippets/solid/component-story-figma-integration.js.mdx
+++ b/docs/snippets/solid/component-story-figma-integration.js.mdx
@@ -5,7 +5,6 @@ import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
-// More on default export: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction#default-export
 export default {
   title: 'FigmaExample',
   component: MyComponent,
diff --git a/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
index 31033afe5136..899629ed8a40 100644
--- a/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx
@@ -7,7 +7,6 @@ import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
-// More on default export: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction#default-export
 const meta = {
   title: 'FigmaExample',
   component: MyComponent,
diff --git a/docs/snippets/solid/component-story-figma-integration.ts.mdx b/docs/snippets/solid/component-story-figma-integration.ts.mdx
index d98f677a95cb..e86cf73a6596 100644
--- a/docs/snippets/solid/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/solid/component-story-figma-integration.ts.mdx
@@ -7,7 +7,6 @@ import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
-// More on default export: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction#default-export
 const meta: Meta<typeof MyComponent> = {
   title: 'FigmaExample',
   component: MyComponent,
diff --git a/docs/snippets/solid/component-story-static-asset-cdn.js.mdx b/docs/snippets/solid/component-story-static-asset-cdn.js.mdx
index 2f8c7f3db332..6a5bdeeadde7 100644
--- a/docs/snippets/solid/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/solid/component-story-static-asset-cdn.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx|ts|tsx
+// MyComponent.stories.js|jsx
 
 export default {
   /* 👇 The title prop is optional.
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.js.mdx b/docs/snippets/solid/component-story-static-asset-with-import.js.mdx
index 163bba9ed83b..371df1a61a1c 100644
--- a/docs/snippets/solid/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/solid/component-story-static-asset-with-import.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx|ts|tsx
+// MyComponent.stories.js|jsx
 
 import imageFile from './static/image.png';
 
diff --git a/docs/snippets/solid/component-story-static-asset-without-import.js.mdx b/docs/snippets/solid/component-story-static-asset-without-import.js.mdx
index aada809e54ea..0b35258b04b7 100644
--- a/docs/snippets/solid/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/solid/component-story-static-asset-without-import.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx|ts|tsx
+// MyComponent.stories.js|jsx
 
 export default {
   /* 👇 The title prop is optional.
diff --git a/docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx
deleted file mode 100644
index 3eed2fd03e96..000000000000
--- a/docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```md
-<!-- Badge.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import { Badge } from './Badge';
-
-<Meta title="MDX/Badge" component={Badge} />
-
-<!--
- 👇 Render functions are a framework specific feature to allow you control on how the component renders.
-  See https://storybook.js.org/docs/7.0/solid/api/csf
-  to learn how to use render functions.
--->
-
-<Canvas>
-  <Story 
-    name="warning"
-    args={{
-      status: 'warning', 
-      label: 'Warning',
-    }}
-    render={(args) => <Badge {...args } />} />
-  <Story 
-    name="neutral"
-    args={{
-      status: 'neutral', 
-      label: 'Neutral',
-    }}
-    render={(args) => <Badge {...args } />} />
-  <Story 
-    name="error"
-    args={{
-      status: 'error', 
-      label: 'Error',
-    }}
-    render={(args) => <Badge {...args } />} />
-</Canvas>
-```
diff --git a/docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx
index e53c6cd9f9c3..0c7ffb79e6dd 100644
--- a/docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx|ts|tsx
+// MyComponent.stories.js|jsx
 
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
diff --git a/docs/snippets/solid/storybook-preview-global-decorator.js.mdx b/docs/snippets/solid/storybook-preview-global-decorator.js.mdx
index 9da0785f1d7a..8ecf094c320c 100644
--- a/docs/snippets/solid/storybook-preview-global-decorator.js.mdx
+++ b/docs/snippets/solid/storybook-preview-global-decorator.js.mdx
@@ -1,11 +1,13 @@
-```js
+```jsx
 // .storybook/preview.js
 
-export const decorators = [
-  (Story) => (
-    <div style={{ margin: '3em' }}>
-      <Story />
-    </div>
-  ),
-];
+export default {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
 ```
diff --git a/docs/snippets/solid/storybook-preview-global-decorator.story-function.js.mdx b/docs/snippets/solid/storybook-preview-global-decorator.story-function.js.mdx
deleted file mode 100644
index e8c58840851a..000000000000
--- a/docs/snippets/solid/storybook-preview-global-decorator.story-function.js.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-```js
-// .storybook/preview.js
-
-export const decorators = [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>];
-```
diff --git a/docs/snippets/solid/storybook-preview-global-decorator.ts.mdx b/docs/snippets/solid/storybook-preview-global-decorator.ts.mdx
index 075869c6b667..9b34c7ffc16d 100644
--- a/docs/snippets/solid/storybook-preview-global-decorator.ts.mdx
+++ b/docs/snippets/solid/storybook-preview-global-decorator.ts.mdx
@@ -7,7 +7,6 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <div style={{ margin: '3em' }}>
-        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
         <Story />
       </div>
     ),
diff --git a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
deleted file mode 100644
index 5be7da9c5a51..000000000000
--- a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.story-function.js.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-```js
-// .storybook/preview.js
-
-import { ThemeProvider } from 'solid-styled-components';
-
-const theme = {
-  colors: {
-    primary: 'hotpink',
-  },
-};
-
-export const decorators = [(Story) => <ThemeProvider theme={theme}>{Story()}</ThemeProvider>];
-```
diff --git a/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts-4-9.mdx b/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts-4-9.mdx
deleted file mode 100644
index df392af6f999..000000000000
--- a/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts-4-9.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-```tsx
-// YourComponent.stories.ts|tsx
-
-import type { Meta } from 'storybook-solidjs';
-
-import { YourComponent } from './YourComponent';
-
-// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
-// Useful to prevent the full remount of the component's story.
-const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'YourComponent',
-
-  component: YourComponent,
-  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
-} satisfies Meta<typeof YourComponent>;
-
-export default meta;
-```
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 58fe8ca0d49d..3971b056a50b 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -88,7 +88,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 <CodeSnippets
   paths={[
-    'react/button-story.with-hooks.js.mdx'
+    'react/button-story.with-hooks.js.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 914ff0002264..f1f8c47b7bea 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -43,9 +43,7 @@ One way we improve that situation is by pulling the rendered subcomponent out in
 <CodeSnippets
   paths={[
     'react/list-story-with-unchecked-children.js.mdx',
-    'react/list-story-with-unchecked-children.ts.mdx',
-    'solid/list-story-with-unchecked-children.js.mdx',
-    'solid/list-story-with-unchecked-children.ts.mdx',
+    'react/list-story-with-unchecked-children.ts.mdx',    
   ]}
   usesCsf3
   csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-unchecked-children"

From 7701ee3c1f19aabe296a375d202db054254c5f2f Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Tue, 18 Apr 2023 16:10:51 -0500
Subject: [PATCH 32/36] Removed version from docs url.

---
 docs/snippets/solid/button-group-story.js.mdx               | 2 +-
 docs/snippets/solid/button-group-story.ts-4-9.mdx           | 2 +-
 docs/snippets/solid/button-group-story.ts.mdx               | 2 +-
 docs/snippets/solid/button-story-click-handler-args.js.mdx  | 2 +-
 .../solid/button-story-click-handler-args.ts-4-9.mdx        | 2 +-
 docs/snippets/solid/button-story-click-handler-args.ts.mdx  | 2 +-
 .../solid/button-story-click-handler-simplificated.js.mdx   | 2 +-
 .../button-story-click-handler-simplificated.ts-4-9.mdx     | 2 +-
 .../solid/button-story-click-handler-simplificated.ts.mdx   | 2 +-
 docs/snippets/solid/button-story-click-handler.js.mdx       | 2 +-
 docs/snippets/solid/button-story-click-handler.ts-4-9.mdx   | 2 +-
 docs/snippets/solid/button-story-click-handler.ts.mdx       | 2 +-
 .../solid/button-story-component-args-primary.js.mdx        | 2 +-
 .../solid/button-story-component-args-primary.ts-4-9.mdx    | 2 +-
 .../solid/button-story-component-args-primary.ts.mdx        | 2 +-
 docs/snippets/solid/button-story-component-decorator.js.mdx | 2 +-
 .../solid/button-story-component-decorator.ts-4-9.mdx       | 2 +-
 docs/snippets/solid/button-story-component-decorator.ts.mdx | 2 +-
 docs/snippets/solid/button-story-decorator.js.mdx           | 2 +-
 .../button-story-decorator.story-function-ts.ts-4-9.mdx     | 2 +-
 .../solid/button-story-decorator.story-function-ts.ts.mdx   | 2 +-
 docs/snippets/solid/button-story-decorator.ts.mdx           | 2 +-
 .../solid/button-story-default-export-with-component.js.mdx | 2 +-
 .../button-story-default-export-with-component.ts-4-9.mdx   | 2 +-
 .../solid/button-story-default-export-with-component.ts.mdx | 2 +-
 docs/snippets/solid/button-story-rename-story.js.mdx        | 2 +-
 docs/snippets/solid/button-story-rename-story.ts-4-9.mdx    | 4 ++--
 docs/snippets/solid/button-story-rename-story.ts.mdx        | 4 ++--
 docs/snippets/solid/button-story-using-args.js.mdx          | 2 +-
 docs/snippets/solid/button-story-using-args.ts-4-9.mdx      | 2 +-
 docs/snippets/solid/button-story-using-args.ts.mdx          | 2 +-
 docs/snippets/solid/button-story-with-addon-example.js.mdx  | 2 +-
 .../solid/button-story-with-addon-example.ts-4-9.mdx        | 4 ++--
 docs/snippets/solid/button-story-with-addon-example.ts.mdx  | 4 ++--
 docs/snippets/solid/button-story-with-args.js.mdx           | 2 +-
 docs/snippets/solid/button-story-with-args.ts-4-9.mdx       | 2 +-
 docs/snippets/solid/button-story-with-args.ts.mdx           | 2 +-
 docs/snippets/solid/button-story-with-blue-args.js.mdx      | 2 +-
 docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx  | 2 +-
 docs/snippets/solid/button-story-with-blue-args.ts.mdx      | 2 +-
 docs/snippets/solid/button-story-with-emojis.js.mdx         | 4 ++--
 docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx     | 4 ++--
 docs/snippets/solid/button-story-with-emojis.ts.mdx         | 4 ++--
 docs/snippets/solid/button-story-with-sample.js.mdx         | 4 ++--
 docs/snippets/solid/button-story.js.mdx                     | 4 ++--
 docs/snippets/solid/button-story.ts-4-9.mdx                 | 4 ++--
 docs/snippets/solid/button-story.ts.mdx                     | 4 ++--
 docs/snippets/solid/button-story.with-hooks.js.mdx          | 2 +-
 .../solid/component-story-custom-args-complex.js.mdx        | 2 +-
 .../solid/component-story-custom-args-complex.ts-4-9.mdx    | 2 +-
 .../solid/component-story-custom-args-complex.ts.mdx        | 2 +-
 docs/snippets/solid/component-story-static-asset-cdn.js.mdx | 4 ++--
 .../solid/component-story-static-asset-cdn.ts-4-9.mdx       | 2 +-
 docs/snippets/solid/component-story-static-asset-cdn.ts.mdx | 2 +-
 .../solid/component-story-static-asset-with-import.js.mdx   | 4 ++--
 .../component-story-static-asset-with-import.ts-4-9.mdx     | 4 ++--
 .../solid/component-story-static-asset-with-import.ts.mdx   | 4 ++--
 .../component-story-static-asset-without-import.js.mdx      | 2 +-
 .../component-story-static-asset-without-import.ts-4-9.mdx  | 2 +-
 .../component-story-static-asset-without-import.ts.mdx      | 2 +-
 .../solid/component-story-with-accessibility.js.mdx         | 2 +-
 .../solid/component-story-with-accessibility.ts-4-9.mdx     | 2 +-
 .../solid/component-story-with-accessibility.ts.mdx         | 2 +-
 .../component-story-with-custom-render-function.js.mdx      | 2 +-
 .../component-story-with-custom-render-function.ts-4-9.mdx  | 2 +-
 .../component-story-with-custom-render-function.ts.mdx      | 2 +-
 docs/snippets/solid/histogram-story.js.mdx                  | 2 +-
 docs/snippets/solid/histogram-story.ts-4-9.mdx              | 2 +-
 docs/snippets/solid/histogram-story.ts.mdx                  | 2 +-
 docs/snippets/solid/list-story-expanded.js.mdx              | 4 ++--
 docs/snippets/solid/list-story-expanded.ts-4-9.mdx          | 4 ++--
 docs/snippets/solid/list-story-expanded.ts.mdx              | 4 ++--
 docs/snippets/solid/list-story-reuse-data.js.mdx            | 4 ++--
 docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx        | 4 ++--
 docs/snippets/solid/list-story-reuse-data.ts.mdx            | 4 ++--
 docs/snippets/solid/list-story-starter.js.mdx               | 2 +-
 docs/snippets/solid/list-story-starter.ts-4-9.mdx           | 2 +-
 docs/snippets/solid/list-story-starter.ts.mdx               | 2 +-
 docs/snippets/solid/list-story-template.js.mdx              | 2 +-
 docs/snippets/solid/list-story-template.ts-4-9.mdx          | 2 +-
 docs/snippets/solid/list-story-template.ts.mdx              | 2 +-
 docs/snippets/solid/list-story-unchecked.js.mdx             | 2 +-
 docs/snippets/solid/list-story-unchecked.ts-4-9.mdx         | 2 +-
 docs/snippets/solid/list-story-unchecked.ts.mdx             | 2 +-
 docs/snippets/solid/list-story-with-subcomponents.js.mdx    | 2 +-
 .../snippets/solid/list-story-with-subcomponents.ts-4-9.mdx | 2 +-
 docs/snippets/solid/list-story-with-subcomponents.ts.mdx    | 2 +-
 .../solid/list-story-with-unchecked-children.js.mdx         | 2 +-
 .../solid/list-story-with-unchecked-children.ts-4-9.mdx     | 2 +-
 .../solid/list-story-with-unchecked-children.ts.mdx         | 2 +-
 docs/snippets/solid/loader-story.js.mdx                     | 2 +-
 docs/snippets/solid/loader-story.ts-4-9.mdx                 | 2 +-
 docs/snippets/solid/loader-story.ts.mdx                     | 2 +-
 docs/snippets/solid/login-form-with-play-function.js.mdx    | 6 +++---
 .../snippets/solid/login-form-with-play-function.ts-4-9.mdx | 6 +++---
 docs/snippets/solid/login-form-with-play-function.ts.mdx    | 6 +++---
 docs/snippets/solid/mock-context-container.js.mdx           | 2 +-
 .../solid/my-component-story-basic-and-props.js.mdx         | 2 +-
 .../solid/my-component-story-basic-and-props.ts-4-9.mdx     | 2 +-
 .../solid/my-component-story-basic-and-props.ts.mdx         | 2 +-
 .../solid/my-component-story-configure-viewports.js.mdx     | 2 +-
 .../solid/my-component-story-configure-viewports.ts-4-9.mdx | 2 +-
 .../solid/my-component-story-configure-viewports.ts.mdx     | 2 +-
 .../snippets/solid/my-component-story-use-globaltype.js.mdx | 4 ++--
 .../solid/my-component-story-use-globaltype.ts-4-9.mdx      | 4 ++--
 .../snippets/solid/my-component-story-use-globaltype.ts.mdx | 4 ++--
 docs/snippets/solid/my-component-story-with-nonstory.js.mdx | 2 +-
 .../solid/my-component-story-with-nonstory.ts-4-9.mdx       | 2 +-
 docs/snippets/solid/my-component-story-with-nonstory.ts.mdx | 2 +-
 docs/snippets/solid/my-component-with-env-variables.js.mdx  | 2 +-
 .../solid/my-component-with-env-variables.ts-4-9.mdx        | 2 +-
 docs/snippets/solid/my-component-with-env-variables.ts.mdx  | 2 +-
 docs/snippets/solid/page-story-slots.js.mdx                 | 4 ++--
 docs/snippets/solid/page-story-slots.ts-4-9.mdx             | 2 +-
 docs/snippets/solid/page-story-slots.ts.mdx                 | 2 +-
 docs/snippets/solid/page-story.js.mdx                       | 2 +-
 docs/snippets/solid/page-story.ts-4-9.mdx                   | 2 +-
 docs/snippets/solid/page-story.ts.mdx                       | 2 +-
 .../solid/table-story-fully-customize-controls.js.mdx       | 4 ++--
 .../solid/table-story-fully-customize-controls.ts-4-9.mdx   | 2 +-
 .../solid/table-story-fully-customize-controls.ts.mdx       | 2 +-
 docs/snippets/solid/your-component-with-decorator.js.mdx    | 2 +-
 .../your-component-with-decorator.story-function-js.js.mdx  | 2 +-
 .../your-component-with-decorator.story-function-ts.ts.mdx  | 2 +-
 .../snippets/solid/your-component-with-decorator.ts-4-9.mdx | 2 +-
 docs/snippets/solid/your-component-with-decorator.ts.mdx    | 2 +-
 docs/snippets/solid/your-component.js.mdx                   | 2 +-
 docs/snippets/solid/your-component.ts-4-9.mdx               | 2 +-
 docs/snippets/solid/your-component.ts.mdx                   | 2 +-
 129 files changed, 161 insertions(+), 161 deletions(-)

diff --git a/docs/snippets/solid/button-group-story.js.mdx b/docs/snippets/solid/button-group-story.js.mdx
index 161485da28fc..e18fee243331 100644
--- a/docs/snippets/solid/button-group-story.js.mdx
+++ b/docs/snippets/solid/button-group-story.js.mdx
@@ -8,7 +8,7 @@ import * as ButtonStories from './Button.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
diff --git a/docs/snippets/solid/button-group-story.ts-4-9.mdx b/docs/snippets/solid/button-group-story.ts-4-9.mdx
index 5bbfbce9c97c..2d969b7d4f0c 100644
--- a/docs/snippets/solid/button-group-story.ts-4-9.mdx
+++ b/docs/snippets/solid/button-group-story.ts-4-9.mdx
@@ -10,7 +10,7 @@ import * as ButtonStories from './Button.stories';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
diff --git a/docs/snippets/solid/button-group-story.ts.mdx b/docs/snippets/solid/button-group-story.ts.mdx
index c3dce785bc4b..dde961bec25b 100644
--- a/docs/snippets/solid/button-group-story.ts.mdx
+++ b/docs/snippets/solid/button-group-story.ts.mdx
@@ -10,7 +10,7 @@ import * as ButtonStories from './Button.stories';
 
 const meta: Meta<typeof ButtonGroup> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
diff --git a/docs/snippets/solid/button-story-click-handler-args.js.mdx b/docs/snippets/solid/button-story-click-handler-args.js.mdx
index 68a3262dce72..27855b9293e0 100644
--- a/docs/snippets/solid/button-story-click-handler-args.js.mdx
+++ b/docs/snippets/solid/button-story-click-handler-args.js.mdx
@@ -9,7 +9,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
index 30bf46423197..f8d73b912e35 100644
--- a/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
@@ -9,7 +9,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-click-handler-args.ts.mdx b/docs/snippets/solid/button-story-click-handler-args.ts.mdx
index 7ac81e1ca0f1..fec2ce463127 100644
--- a/docs/snippets/solid/button-story-click-handler-args.ts.mdx
+++ b/docs/snippets/solid/button-story-click-handler-args.ts.mdx
@@ -9,7 +9,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-click-handler-simplificated.js.mdx b/docs/snippets/solid/button-story-click-handler-simplificated.js.mdx
index e636636fc0f4..883e15211754 100644
--- a/docs/snippets/solid/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/solid/button-story-click-handler-simplificated.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
index eea83d553021..49fedeca557c 100644
--- a/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx
index 470fca4b1c63..f2b4efe56023 100644
--- a/docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx
+++ b/docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-click-handler.js.mdx b/docs/snippets/solid/button-story-click-handler.js.mdx
index 878887acd12e..91e0b20e428a 100644
--- a/docs/snippets/solid/button-story-click-handler.js.mdx
+++ b/docs/snippets/solid/button-story-click-handler.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
index e604923d9f33..05c1d4f3694e 100644
--- a/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
@@ -9,7 +9,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-click-handler.ts.mdx b/docs/snippets/solid/button-story-click-handler.ts.mdx
index e4e1161ed0c8..f471eebc71dd 100644
--- a/docs/snippets/solid/button-story-click-handler.ts.mdx
+++ b/docs/snippets/solid/button-story-click-handler.ts.mdx
@@ -9,7 +9,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-component-args-primary.js.mdx b/docs/snippets/solid/button-story-component-args-primary.js.mdx
index 8f82da8d91a3..eabb4eabf755 100644
--- a/docs/snippets/solid/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/solid/button-story-component-args-primary.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
index 7a317835b45b..405f71dd52f9 100644
--- a/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-component-args-primary.ts.mdx b/docs/snippets/solid/button-story-component-args-primary.ts.mdx
index 45dd2bfd582f..1f7f1c1295b2 100644
--- a/docs/snippets/solid/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/solid/button-story-component-args-primary.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-component-decorator.js.mdx b/docs/snippets/solid/button-story-component-decorator.js.mdx
index c0a42657a209..142b51099cbb 100644
--- a/docs/snippets/solid/button-story-component-decorator.js.mdx
+++ b/docs/snippets/solid/button-story-component-decorator.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
index 3541ea62f4eb..2ff4d7ebc5ab 100644
--- a/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-component-decorator.ts.mdx b/docs/snippets/solid/button-story-component-decorator.ts.mdx
index 91e67a36aada..3533e9695295 100644
--- a/docs/snippets/solid/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/solid/button-story-component-decorator.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-decorator.js.mdx b/docs/snippets/solid/button-story-decorator.js.mdx
index d6f749a6b2c0..bad4922e413a 100644
--- a/docs/snippets/solid/button-story-decorator.js.mdx
+++ b/docs/snippets/solid/button-story-decorator.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx b/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx
index 4de49f1ed016..311ce2de8ec7 100644
--- a/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
index befd2657823f..808ec0b6b9db 100644
--- a/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-decorator.ts.mdx b/docs/snippets/solid/button-story-decorator.ts.mdx
index ef89309aacef..157670f40c49 100644
--- a/docs/snippets/solid/button-story-decorator.ts.mdx
+++ b/docs/snippets/solid/button-story-decorator.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-default-export-with-component.js.mdx b/docs/snippets/solid/button-story-default-export-with-component.js.mdx
index ec47e8b6c508..d1199e97cd76 100644
--- a/docs/snippets/solid/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/solid/button-story-default-export-with-component.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
index 8dbc760aa4cd..68f045e4c3b5 100644
--- a/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-default-export-with-component.ts.mdx b/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
index 4c29bdb87a53..998dd5cb0666 100644
--- a/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/solid/button-story-default-export-with-component.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-rename-story.js.mdx b/docs/snippets/solid/button-story-rename-story.js.mdx
index d528caf02f51..4c70cf4ae287 100644
--- a/docs/snippets/solid/button-story-rename-story.js.mdx
+++ b/docs/snippets/solid/button-story-rename-story.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx b/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
index a67e0532e563..9dd5561c2f26 100644
--- a/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
@@ -6,7 +6,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Primary: Story = {
diff --git a/docs/snippets/solid/button-story-rename-story.ts.mdx b/docs/snippets/solid/button-story-rename-story.ts.mdx
index 59d81d1ede4b..e07adf5ebe39 100644
--- a/docs/snippets/solid/button-story-rename-story.ts.mdx
+++ b/docs/snippets/solid/button-story-rename-story.ts.mdx
@@ -6,7 +6,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -18,7 +18,7 @@ type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Primary: Story = {
diff --git a/docs/snippets/solid/button-story-using-args.js.mdx b/docs/snippets/solid/button-story-using-args.js.mdx
index 0bb99c2de02e..7f557ab1cb9b 100644
--- a/docs/snippets/solid/button-story-using-args.js.mdx
+++ b/docs/snippets/solid/button-story-using-args.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-using-args.ts-4-9.mdx b/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
index b1bdb9fb475c..d0a53389c9c1 100644
--- a/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-using-args.ts.mdx b/docs/snippets/solid/button-story-using-args.ts.mdx
index 03d53ddff90f..701ae1fd9104 100644
--- a/docs/snippets/solid/button-story-using-args.ts.mdx
+++ b/docs/snippets/solid/button-story-using-args.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-addon-example.js.mdx b/docs/snippets/solid/button-story-with-addon-example.js.mdx
index 6638df8e6875..dd8c9d35a9c7 100644
--- a/docs/snippets/solid/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/solid/button-story-with-addon-example.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
index f067347d3780..ff7bbea62c98 100644
--- a/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Basic: Story = {
diff --git a/docs/snippets/solid/button-story-with-addon-example.ts.mdx b/docs/snippets/solid/button-story-with-addon-example.ts.mdx
index 90d87c014d76..ed1d79cb4c8d 100644
--- a/docs/snippets/solid/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/solid/button-story-with-addon-example.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Basic: Story = {
diff --git a/docs/snippets/solid/button-story-with-args.js.mdx b/docs/snippets/solid/button-story-with-args.js.mdx
index 119f049a57cd..89d34fc639ee 100644
--- a/docs/snippets/solid/button-story-with-args.js.mdx
+++ b/docs/snippets/solid/button-story-with-args.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
index 91a9a397867a..92e1566bdbd6 100644
--- a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-args.ts.mdx b/docs/snippets/solid/button-story-with-args.ts.mdx
index 430082341bdd..37bfaa0ec4ac 100644
--- a/docs/snippets/solid/button-story-with-args.ts.mdx
+++ b/docs/snippets/solid/button-story-with-args.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-blue-args.js.mdx b/docs/snippets/solid/button-story-with-blue-args.js.mdx
index 1243258cd41f..dff6aeed748e 100644
--- a/docs/snippets/solid/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/solid/button-story-with-blue-args.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx b/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
index 93d0d85411c6..8ace598a7bde 100644
--- a/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-blue-args.ts.mdx b/docs/snippets/solid/button-story-with-blue-args.ts.mdx
index 79818ec5a2ad..fadc25603f03 100644
--- a/docs/snippets/solid/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/solid/button-story-with-blue-args.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-emojis.js.mdx b/docs/snippets/solid/button-story-with-emojis.js.mdx
index ed2f44bfe215..b359184a6879 100644
--- a/docs/snippets/solid/button-story-with-emojis.js.mdx
+++ b/docs/snippets/solid/button-story-with-emojis.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -14,7 +14,7 @@ export default {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Primary = {
diff --git a/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx b/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
index b962d022720e..decc6c7ee85b 100644
--- a/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Primary: Story = {
diff --git a/docs/snippets/solid/button-story-with-emojis.ts.mdx b/docs/snippets/solid/button-story-with-emojis.ts.mdx
index aa7e4ef34b1a..6f155ebd8a62 100644
--- a/docs/snippets/solid/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/solid/button-story-with-emojis.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Primary: Story = {
diff --git a/docs/snippets/solid/button-story-with-sample.js.mdx b/docs/snippets/solid/button-story-with-sample.js.mdx
index 3f263b53d0c2..490f2d833afa 100644
--- a/docs/snippets/solid/button-story-with-sample.js.mdx
+++ b/docs/snippets/solid/button-story-with-sample.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -14,7 +14,7 @@ export default {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Sample = {
diff --git a/docs/snippets/solid/button-story.js.mdx b/docs/snippets/solid/button-story.js.mdx
index 6a3c4c9adedb..f908db235f84 100644
--- a/docs/snippets/solid/button-story.js.mdx
+++ b/docs/snippets/solid/button-story.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -14,7 +14,7 @@ export default {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Primary = {
diff --git a/docs/snippets/solid/button-story.ts-4-9.mdx b/docs/snippets/solid/button-story.ts-4-9.mdx
index 1d7d79098192..11c531e55908 100644
--- a/docs/snippets/solid/button-story.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Primary: Story = {
diff --git a/docs/snippets/solid/button-story.ts.mdx b/docs/snippets/solid/button-story.ts.mdx
index d575f0ea368c..bcb7303b201d 100644
--- a/docs/snippets/solid/button-story.ts.mdx
+++ b/docs/snippets/solid/button-story.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const Primary: Story = {
diff --git a/docs/snippets/solid/button-story.with-hooks.js.mdx b/docs/snippets/solid/button-story.with-hooks.js.mdx
index d1d29c06cbcb..79c6f054452a 100644
--- a/docs/snippets/solid/button-story.with-hooks.js.mdx
+++ b/docs/snippets/solid/button-story.with-hooks.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
diff --git a/docs/snippets/solid/component-story-custom-args-complex.js.mdx b/docs/snippets/solid/component-story-custom-args-complex.js.mdx
index 93b40d592e7a..a661f5731586 100644
--- a/docs/snippets/solid/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/solid/component-story-custom-args-complex.js.mdx
@@ -6,7 +6,7 @@ import { YourComponent } from './your-component';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx b/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
index 0ef058f5c5ba..66c0392148de 100644
--- a/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { YourComponent } from './your-component';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/component-story-custom-args-complex.ts.mdx b/docs/snippets/solid/component-story-custom-args-complex.ts.mdx
index 710027e6df8d..8ce7252d309b 100644
--- a/docs/snippets/solid/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/solid/component-story-custom-args-complex.ts.mdx
@@ -8,7 +8,7 @@ import { YourComponent } from './your-component';
 
 const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/component-story-static-asset-cdn.js.mdx b/docs/snippets/solid/component-story-static-asset-cdn.js.mdx
index 6a5bdeeadde7..cb4f754e5825 100644
--- a/docs/snippets/solid/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/solid/component-story-static-asset-cdn.js.mdx
@@ -3,7 +3,7 @@
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
@@ -11,7 +11,7 @@ export default {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const WithAnImage = {
diff --git a/docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx b/docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx
index 57bfb86222ea..cb4c267785d2 100644
--- a/docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
diff --git a/docs/snippets/solid/component-story-static-asset-cdn.ts.mdx b/docs/snippets/solid/component-story-static-asset-cdn.ts.mdx
index 336e99a0abcb..c941d44cc415 100644
--- a/docs/snippets/solid/component-story-static-asset-cdn.ts.mdx
+++ b/docs/snippets/solid/component-story-static-asset-cdn.ts.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.js.mdx b/docs/snippets/solid/component-story-static-asset-with-import.js.mdx
index 371df1a61a1c..8fcda0fa1343 100644
--- a/docs/snippets/solid/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/solid/component-story-static-asset-with-import.js.mdx
@@ -5,7 +5,7 @@ import imageFile from './static/image.png';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
@@ -18,7 +18,7 @@ const image = {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const WithAnImage = {
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx b/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
index b98463450c01..737e40ed3ba9 100644
--- a/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
@@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
@@ -25,7 +25,7 @@ const image = {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const WithAnImage: Story = {
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx b/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
index 77064765117a..a8702bb64668 100644
--- a/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
+++ b/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
@@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
@@ -25,7 +25,7 @@ const image = {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const WithAnImage: Story = {
diff --git a/docs/snippets/solid/component-story-static-asset-without-import.js.mdx b/docs/snippets/solid/component-story-static-asset-without-import.js.mdx
index 0b35258b04b7..9fac78b10638 100644
--- a/docs/snippets/solid/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/solid/component-story-static-asset-without-import.js.mdx
@@ -3,7 +3,7 @@
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
diff --git a/docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx b/docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx
index 81fe5daf9982..87531563b84d 100644
--- a/docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
diff --git a/docs/snippets/solid/component-story-static-asset-without-import.ts.mdx b/docs/snippets/solid/component-story-static-asset-without-import.ts.mdx
index c51e1ea80737..7672b26191f3 100644
--- a/docs/snippets/solid/component-story-static-asset-without-import.ts.mdx
+++ b/docs/snippets/solid/component-story-static-asset-without-import.ts.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
diff --git a/docs/snippets/solid/component-story-with-accessibility.js.mdx b/docs/snippets/solid/component-story-with-accessibility.js.mdx
index 97b528d055b4..c2e7963b0d97 100644
--- a/docs/snippets/solid/component-story-with-accessibility.js.mdx
+++ b/docs/snippets/solid/component-story-with-accessibility.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
    */
   title: 'Accessibility testing',
   component: Button,
diff --git a/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx b/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
index 8976e325d7e2..833a006c3503 100644
--- a/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
    */
   title: 'Accessibility testing',
 
diff --git a/docs/snippets/solid/component-story-with-accessibility.ts.mdx b/docs/snippets/solid/component-story-with-accessibility.ts.mdx
index 2a743a9b9991..ba07c69bf7c1 100644
--- a/docs/snippets/solid/component-story-with-accessibility.ts.mdx
+++ b/docs/snippets/solid/component-story-with-accessibility.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
    */
   title: 'Accessibility testing',
   component: Button,
diff --git a/docs/snippets/solid/component-story-with-custom-render-function.js.mdx b/docs/snippets/solid/component-story-with-custom-render-function.js.mdx
index ab972846cb58..1b0cf09e8d74 100644
--- a/docs/snippets/solid/component-story-with-custom-render-function.js.mdx
+++ b/docs/snippets/solid/component-story-with-custom-render-function.js.mdx
@@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx b/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
index e9575b4e1cee..9318ccabf2e4 100644
--- a/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
@@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/component-story-with-custom-render-function.ts.mdx b/docs/snippets/solid/component-story-with-custom-render-function.ts.mdx
index 63416945a119..f085cbbd6fbb 100644
--- a/docs/snippets/solid/component-story-with-custom-render-function.ts.mdx
+++ b/docs/snippets/solid/component-story-with-custom-render-function.ts.mdx
@@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/histogram-story.js.mdx b/docs/snippets/solid/histogram-story.js.mdx
index 6ab90f983712..7b3c56747102 100644
--- a/docs/snippets/solid/histogram-story.js.mdx
+++ b/docs/snippets/solid/histogram-story.js.mdx
@@ -5,7 +5,7 @@ import { Histogram } from './Histogram';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Histogram',
diff --git a/docs/snippets/solid/histogram-story.ts-4-9.mdx b/docs/snippets/solid/histogram-story.ts-4-9.mdx
index 09cea6d1d778..d7e9d23470fd 100644
--- a/docs/snippets/solid/histogram-story.ts-4-9.mdx
+++ b/docs/snippets/solid/histogram-story.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Histogram } from './Histogram';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Histogram',
diff --git a/docs/snippets/solid/histogram-story.ts.mdx b/docs/snippets/solid/histogram-story.ts.mdx
index 45f142dbce0b..118e6143e87f 100644
--- a/docs/snippets/solid/histogram-story.ts.mdx
+++ b/docs/snippets/solid/histogram-story.ts.mdx
@@ -7,7 +7,7 @@ import { Histogram } from './Histogram';
 
 const meta: Meta<typeof Histogram> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Histogram',
diff --git a/docs/snippets/solid/list-story-expanded.js.mdx b/docs/snippets/solid/list-story-expanded.js.mdx
index b4c8c115d0dc..62dfad44b781 100644
--- a/docs/snippets/solid/list-story-expanded.js.mdx
+++ b/docs/snippets/solid/list-story-expanded.js.mdx
@@ -6,7 +6,7 @@ import { ListItem } from './ListItem';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -17,7 +17,7 @@ export const Empty = {};
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const OneItem = {
diff --git a/docs/snippets/solid/list-story-expanded.ts-4-9.mdx b/docs/snippets/solid/list-story-expanded.ts-4-9.mdx
index f4b90c123bde..2eb6bd163ca5 100644
--- a/docs/snippets/solid/list-story-expanded.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-expanded.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { ListItem } from './ListItem';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -23,7 +23,7 @@ export const Empty: Story = {};
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const OneItem: Story = {
diff --git a/docs/snippets/solid/list-story-expanded.ts.mdx b/docs/snippets/solid/list-story-expanded.ts.mdx
index 93ff1fbc9c07..3da14debe5bc 100644
--- a/docs/snippets/solid/list-story-expanded.ts.mdx
+++ b/docs/snippets/solid/list-story-expanded.ts.mdx
@@ -8,7 +8,7 @@ import { ListItem } from './ListItem';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -22,7 +22,7 @@ export const Empty: Story = {};
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const OneItem: Story = {
diff --git a/docs/snippets/solid/list-story-reuse-data.js.mdx b/docs/snippets/solid/list-story-reuse-data.js.mdx
index 0e42b3b28f36..a163cd935883 100644
--- a/docs/snippets/solid/list-story-reuse-data.js.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.js.mdx
@@ -9,7 +9,7 @@ import { Selected, Unselected } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -18,7 +18,7 @@ export default {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 
diff --git a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
index 0135bc33a778..3be0b56b482d 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { Selected, Unselected } from './ListItem.stories';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -24,7 +24,7 @@ type Story = StoryObj<typeof meta>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const ManyItems: Story = {
diff --git a/docs/snippets/solid/list-story-reuse-data.ts.mdx b/docs/snippets/solid/list-story-reuse-data.ts.mdx
index 32154a0444f8..4d3b52291480 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts.mdx
@@ -11,7 +11,7 @@ import { Selected, Unselected } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof List>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const ManyItems: Story = {
diff --git a/docs/snippets/solid/list-story-starter.js.mdx b/docs/snippets/solid/list-story-starter.js.mdx
index 81397e556b6a..6abf097599dc 100644
--- a/docs/snippets/solid/list-story-starter.js.mdx
+++ b/docs/snippets/solid/list-story-starter.js.mdx
@@ -5,7 +5,7 @@ import { List } from './List';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-starter.ts-4-9.mdx b/docs/snippets/solid/list-story-starter.ts-4-9.mdx
index f1a16a50d679..2b4086fb084f 100644
--- a/docs/snippets/solid/list-story-starter.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-starter.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { List } from './List';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-starter.ts.mdx b/docs/snippets/solid/list-story-starter.ts.mdx
index f795a60d12e7..ff4ba5ad8f5a 100644
--- a/docs/snippets/solid/list-story-starter.ts.mdx
+++ b/docs/snippets/solid/list-story-starter.ts.mdx
@@ -7,7 +7,7 @@ import { List } from './List';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-template.js.mdx b/docs/snippets/solid/list-story-template.js.mdx
index a9ae83d6288d..47434befaf53 100644
--- a/docs/snippets/solid/list-story-template.js.mdx
+++ b/docs/snippets/solid/list-story-template.js.mdx
@@ -9,7 +9,7 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-template.ts-4-9.mdx b/docs/snippets/solid/list-story-template.ts-4-9.mdx
index 96d61fed9a33..8dc08db6822f 100644
--- a/docs/snippets/solid/list-story-template.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-template.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * Seehttps://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * Seehttps://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-template.ts.mdx b/docs/snippets/solid/list-story-template.ts.mdx
index a2629eb9723a..89ca01efb13b 100644
--- a/docs/snippets/solid/list-story-template.ts.mdx
+++ b/docs/snippets/solid/list-story-template.ts.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * Seehttps://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * Seehttps://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-unchecked.js.mdx b/docs/snippets/solid/list-story-unchecked.js.mdx
index 12f201763c60..7945d42483ac 100644
--- a/docs/snippets/solid/list-story-unchecked.js.mdx
+++ b/docs/snippets/solid/list-story-unchecked.js.mdx
@@ -8,7 +8,7 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
index c32208a91cec..7c30f157937f 100644
--- a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
 
 export const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-unchecked.ts.mdx b/docs/snippets/solid/list-story-unchecked.ts.mdx
index 5f55cf00c503..9d34d7be40f2 100644
--- a/docs/snippets/solid/list-story-unchecked.ts.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-with-subcomponents.js.mdx b/docs/snippets/solid/list-story-with-subcomponents.js.mdx
index 7a69ea23c99c..7729092217dd 100644
--- a/docs/snippets/solid/list-story-with-subcomponents.js.mdx
+++ b/docs/snippets/solid/list-story-with-subcomponents.js.mdx
@@ -6,7 +6,7 @@ import { ListItem } from './ListItem';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx b/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
index 1f1b1091178d..d4aa27fc5b0a 100644
--- a/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { ListItem } from './ListItem';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-with-subcomponents.ts.mdx b/docs/snippets/solid/list-story-with-subcomponents.ts.mdx
index 9e37c554fc6f..b7614829357f 100644
--- a/docs/snippets/solid/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/solid/list-story-with-subcomponents.ts.mdx
@@ -8,7 +8,7 @@ import { ListItem } from './ListItem';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.js.mdx b/docs/snippets/solid/list-story-with-unchecked-children.js.mdx
index b31c1ed4b7f0..535afc6fe8e4 100644
--- a/docs/snippets/solid/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/solid/list-story-with-unchecked-children.js.mdx
@@ -8,7 +8,7 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx b/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
index 1a8d3d29f838..071f155bf142 100644
--- a/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx b/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx
index a69c4036fc9b..01d964d7b887 100644
--- a/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
diff --git a/docs/snippets/solid/loader-story.js.mdx b/docs/snippets/solid/loader-story.js.mdx
index 4ae58618b878..ad4377f5e550 100644
--- a/docs/snippets/solid/loader-story.js.mdx
+++ b/docs/snippets/solid/loader-story.js.mdx
@@ -5,7 +5,7 @@ import { TodoItem } from './TodoItem';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'Examples/Loader'
diff --git a/docs/snippets/solid/loader-story.ts-4-9.mdx b/docs/snippets/solid/loader-story.ts-4-9.mdx
index b2357c0ef1d7..67dd6b06b579 100644
--- a/docs/snippets/solid/loader-story.ts-4-9.mdx
+++ b/docs/snippets/solid/loader-story.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { TodoItem } from './TodoItem';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Examples/Loader',
diff --git a/docs/snippets/solid/loader-story.ts.mdx b/docs/snippets/solid/loader-story.ts.mdx
index f975a917532d..f582fc1e405c 100644
--- a/docs/snippets/solid/loader-story.ts.mdx
+++ b/docs/snippets/solid/loader-story.ts.mdx
@@ -7,7 +7,7 @@ import { TodoItem } from './TodoItem';
 
 const meta: Meta<typeof TodoItem> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Examples/Loader',
diff --git a/docs/snippets/solid/login-form-with-play-function.js.mdx b/docs/snippets/solid/login-form-with-play-function.js.mdx
index 34a725522948..96b63bf36ae8 100644
--- a/docs/snippets/solid/login-form-with-play-function.js.mdx
+++ b/docs/snippets/solid/login-form-with-play-function.js.mdx
@@ -9,7 +9,7 @@ import { LoginForm } from './LoginForm';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
@@ -19,7 +19,7 @@ export default {
 export const EmptyForm = {};
 
 /*
- * See https://storybook.js.org/docs/7.0/solid/writing-stories/play-function#working-with-the-canvas
+ * See https://storybook.js.org/docs/solid/writing-stories/play-function#working-with-the-canvas
  * to learn more about using the canvasElement to query the DOM
  */
 export const FilledForm = {
@@ -31,7 +31,7 @@ export const FilledForm = {
 
     await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-    // See https://storybook.js.org/docs/7.0/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(canvas.getByRole('button'));
 
     // 👇 Assert DOM structure
diff --git a/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
index 6750cf83a8cf..e2a32ba0c291 100644
--- a/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
+++ b/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { LoginForm } from './LoginForm';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
 export const EmptyForm: Story = {};
 
 /*
- * See https://storybook.js.org/docs/7.0/solid/writing-stories/play-function#working-with-the-canvas
+ * See https://storybook.js.org/docs/solid/writing-stories/play-function#working-with-the-canvas
  * to learn more about using the canvasElement to query the DOM
  */
 export const FilledForm: Story = {
@@ -37,7 +37,7 @@ export const FilledForm: Story = {
 
     await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-    // See https://storybook.js.org/docs/7.0/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(canvas.getByRole('button'));
 
     // 👇 Assert DOM structure
diff --git a/docs/snippets/solid/login-form-with-play-function.ts.mdx b/docs/snippets/solid/login-form-with-play-function.ts.mdx
index a40ab8c98757..3501b373e44e 100644
--- a/docs/snippets/solid/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/solid/login-form-with-play-function.ts.mdx
@@ -11,7 +11,7 @@ import { LoginForm } from './LoginForm';
 
 const meta: Meta<typeof LoginForm> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
@@ -24,7 +24,7 @@ type Story = StoryObj<typeof LoginForm>;
 export const EmptyForm: Story = {};
 
 /*
- * See https://storybook.js.org/docs/7.0/solid/writing-stories/play-function#working-with-the-canvas
+ * See https://storybook.js.org/docs/solid/writing-stories/play-function#working-with-the-canvas
  * to learn more about using the canvasElement to query the DOM
  */
 export const FilledForm: Story = {
@@ -36,7 +36,7 @@ export const FilledForm: Story = {
 
     await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
-    // See https://storybook.js.org/docs/7.0/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    // See https://storybook.js.org/docs/solid/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(canvas.getByRole('button'));
 
     // 👇 Assert DOM structure
diff --git a/docs/snippets/solid/mock-context-container.js.mdx b/docs/snippets/solid/mock-context-container.js.mdx
index 8640961954b0..379488e50b16 100644
--- a/docs/snippets/solid/mock-context-container.js.mdx
+++ b/docs/snippets/solid/mock-context-container.js.mdx
@@ -9,7 +9,7 @@ import { Normal as UserFriendsNormal } from './UserFriends.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ProfilePage',
diff --git a/docs/snippets/solid/my-component-story-basic-and-props.js.mdx b/docs/snippets/solid/my-component-story-basic-and-props.js.mdx
index 54856fe66196..a3e499390cbe 100644
--- a/docs/snippets/solid/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/solid/my-component-story-basic-and-props.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Path/To/MyComponent',
diff --git a/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
index 23b34e4c57db..a38ed1c68ee5 100644
--- a/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Path/To/MyComponent',
diff --git a/docs/snippets/solid/my-component-story-basic-and-props.ts.mdx b/docs/snippets/solid/my-component-story-basic-and-props.ts.mdx
index 4623fc4c2785..85081b8676be 100644
--- a/docs/snippets/solid/my-component-story-basic-and-props.ts.mdx
+++ b/docs/snippets/solid/my-component-story-basic-and-props.ts.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Path/To/MyComponent',
diff --git a/docs/snippets/solid/my-component-story-configure-viewports.js.mdx b/docs/snippets/solid/my-component-story-configure-viewports.js.mdx
index 0943f82b32b5..eefefbf7ca58 100644
--- a/docs/snippets/solid/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/solid/my-component-story-configure-viewports.js.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx b/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
index 9f41a7c20c35..90f078c20a52 100644
--- a/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
@@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/my-component-story-configure-viewports.ts.mdx b/docs/snippets/solid/my-component-story-configure-viewports.ts.mdx
index b79a8dd2da88..85b926b87d7e 100644
--- a/docs/snippets/solid/my-component-story-configure-viewports.ts.mdx
+++ b/docs/snippets/solid/my-component-story-configure-viewports.ts.mdx
@@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/my-component-story-use-globaltype.js.mdx b/docs/snippets/solid/my-component-story-use-globaltype.js.mdx
index 22a64ab1d7d8..ab68f6bdc72e 100644
--- a/docs/snippets/solid/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/solid/my-component-story-use-globaltype.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
@@ -29,7 +29,7 @@ const getCaptionForLocale = (locale) => {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const StoryWithLocale = {
diff --git a/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx b/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
index 3f828164930e..bbf41de38010 100644
--- a/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
@@ -35,7 +35,7 @@ const getCaptionForLocale = (locale) => {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const StoryWithLocale = {
diff --git a/docs/snippets/solid/my-component-story-use-globaltype.ts.mdx b/docs/snippets/solid/my-component-story-use-globaltype.ts.mdx
index fa988cc72c0c..0351a5fa34b6 100644
--- a/docs/snippets/solid/my-component-story-use-globaltype.ts.mdx
+++ b/docs/snippets/solid/my-component-story-use-globaltype.ts.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
@@ -34,7 +34,7 @@ const getCaptionForLocale = (locale) => {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const StoryWithLocale = {
diff --git a/docs/snippets/solid/my-component-story-with-nonstory.js.mdx b/docs/snippets/solid/my-component-story-with-nonstory.js.mdx
index c2ca3afcb720..c90bff2d85c7 100644
--- a/docs/snippets/solid/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/solid/my-component-story-with-nonstory.js.mdx
@@ -7,7 +7,7 @@ import someData from './data.json';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
index 6320f99fdff9..30bf19bc7f4f 100644
--- a/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
@@ -9,7 +9,7 @@ import someData from './data.json';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/my-component-story-with-nonstory.ts.mdx b/docs/snippets/solid/my-component-story-with-nonstory.ts.mdx
index 4cda99977867..343a920d2185 100644
--- a/docs/snippets/solid/my-component-story-with-nonstory.ts.mdx
+++ b/docs/snippets/solid/my-component-story-with-nonstory.ts.mdx
@@ -9,7 +9,7 @@ import someData from './data.json';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/my-component-with-env-variables.js.mdx b/docs/snippets/solid/my-component-with-env-variables.js.mdx
index 00fdd19ee49c..ba861114bb8f 100644
--- a/docs/snippets/solid/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/solid/my-component-with-env-variables.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
index 0e780ce37568..ba7ac3316694 100644
--- a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/my-component-with-env-variables.ts.mdx b/docs/snippets/solid/my-component-with-env-variables.ts.mdx
index aac9f319c808..4c2a5655db91 100644
--- a/docs/snippets/solid/my-component-with-env-variables.ts.mdx
+++ b/docs/snippets/solid/my-component-with-env-variables.ts.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
diff --git a/docs/snippets/solid/page-story-slots.js.mdx b/docs/snippets/solid/page-story-slots.js.mdx
index 0154d3490ef1..1213055be823 100644
--- a/docs/snippets/solid/page-story-slots.js.mdx
+++ b/docs/snippets/solid/page-story-slots.js.mdx
@@ -5,7 +5,7 @@ import { Page } from './Page';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
@@ -14,7 +14,7 @@ export default {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const CustomFooter = {
diff --git a/docs/snippets/solid/page-story-slots.ts-4-9.mdx b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
index 58531549e1dd..522b2ea10a1d 100644
--- a/docs/snippets/solid/page-story-slots.ts-4-9.mdx
+++ b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Page } from './Page';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
diff --git a/docs/snippets/solid/page-story-slots.ts.mdx b/docs/snippets/solid/page-story-slots.ts.mdx
index 1df829afb0da..252a0bde3e73 100644
--- a/docs/snippets/solid/page-story-slots.ts.mdx
+++ b/docs/snippets/solid/page-story-slots.ts.mdx
@@ -7,7 +7,7 @@ import { Page } from './Page';
 
 const meta: Meta<typeof Page> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
diff --git a/docs/snippets/solid/page-story.js.mdx b/docs/snippets/solid/page-story.js.mdx
index 101bb9ec3334..7745fdb789e2 100644
--- a/docs/snippets/solid/page-story.js.mdx
+++ b/docs/snippets/solid/page-story.js.mdx
@@ -8,7 +8,7 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
diff --git a/docs/snippets/solid/page-story.ts-4-9.mdx b/docs/snippets/solid/page-story.ts-4-9.mdx
index d8d277da83a1..aec0326bc473 100644
--- a/docs/snippets/solid/page-story.ts-4-9.mdx
+++ b/docs/snippets/solid/page-story.ts-4-9.mdx
@@ -10,7 +10,7 @@ import * as HeaderStories from './Header.stories';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
diff --git a/docs/snippets/solid/page-story.ts.mdx b/docs/snippets/solid/page-story.ts.mdx
index 30368768741d..1f2ed6134904 100644
--- a/docs/snippets/solid/page-story.ts.mdx
+++ b/docs/snippets/solid/page-story.ts.mdx
@@ -10,7 +10,7 @@ import * as HeaderStories from './Header.stories';
 
 const meta: Meta<typeof Page> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.js.mdx b/docs/snippets/solid/table-story-fully-customize-controls.js.mdx
index b31a8a49468c..d74266156ad5 100644
--- a/docs/snippets/solid/table-story-fully-customize-controls.js.mdx
+++ b/docs/snippets/solid/table-story-fully-customize-controls.js.mdx
@@ -7,7 +7,7 @@ import { TR } from './TableRow';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Custom Table',
@@ -16,7 +16,7 @@ export default {
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/solid/api/csf
+ * See https://storybook.js.org/docs/solid/api/csf
  * to learn how to use render functions.
  */
 export const TableStory = {
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx b/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
index aec0f53253ef..aed1ccd5036b 100644
--- a/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
+++ b/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
@@ -9,7 +9,7 @@ import { TR } from './TableRow';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Custom Table',
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx b/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx
index a1e318cb2617..2c15c85ec0e2 100644
--- a/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx
+++ b/docs/snippets/solid/table-story-fully-customize-controls.ts.mdx
@@ -9,7 +9,7 @@ import { TR } from './TableRow';
 
 const meta: Meta<typeof Table> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Custom Table',
diff --git a/docs/snippets/solid/your-component-with-decorator.js.mdx b/docs/snippets/solid/your-component-with-decorator.js.mdx
index 8c95d2870270..e6610f6679e2 100644
--- a/docs/snippets/solid/your-component-with-decorator.js.mdx
+++ b/docs/snippets/solid/your-component-with-decorator.js.mdx
@@ -5,7 +5,7 @@ import { YourComponent } from './YourComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx b/docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx
index e2b1e922bb6f..ba2047cecdd3 100644
--- a/docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx
+++ b/docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx
@@ -8,7 +8,7 @@ import { YourComponent } from './YourComponent';
 
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx b/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx
index 9a9359fb10ab..ff08d940fcf2 100644
--- a/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx
@@ -9,7 +9,7 @@ import { YourComponent } from './YourComponent';
 // Useful to prevent the full remount of the component's story.
 const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx b/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
index cf25ecef6f28..daae3e2825d3 100644
--- a/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
+++ b/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { YourComponent } from './YourComponent';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/your-component-with-decorator.ts.mdx b/docs/snippets/solid/your-component-with-decorator.ts.mdx
index ff8b91d92bef..5ff32a6db123 100644
--- a/docs/snippets/solid/your-component-with-decorator.ts.mdx
+++ b/docs/snippets/solid/your-component-with-decorator.ts.mdx
@@ -7,7 +7,7 @@ import { YourComponent } from './YourComponent';
 
 const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/your-component.js.mdx b/docs/snippets/solid/your-component.js.mdx
index de2ed47c9fb7..e73ee1aca727 100644
--- a/docs/snippets/solid/your-component.js.mdx
+++ b/docs/snippets/solid/your-component.js.mdx
@@ -6,7 +6,7 @@ import { YourComponent } from './YourComponent';
 //👇 This default export determines where your story goes in the story list
 export default {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/your-component.ts-4-9.mdx b/docs/snippets/solid/your-component.ts-4-9.mdx
index ec5027876035..101f72dce58f 100644
--- a/docs/snippets/solid/your-component.ts-4-9.mdx
+++ b/docs/snippets/solid/your-component.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { YourComponent } from './YourComponent';
 //👇 This default export determines where your story goes in the story list
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
diff --git a/docs/snippets/solid/your-component.ts.mdx b/docs/snippets/solid/your-component.ts.mdx
index 623ed78600f1..c50b8229794d 100644
--- a/docs/snippets/solid/your-component.ts.mdx
+++ b/docs/snippets/solid/your-component.ts.mdx
@@ -8,7 +8,7 @@ import { YourComponent } from './YourComponent';
 //👇 This default export determines where your story goes in the story list
 const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/solid/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',

From 297abc590c8af28033ffa4446f826cb234065f1f Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 24 Apr 2023 10:45:30 -0500
Subject: [PATCH 33/36] Improved sync docs command.

---
 scripts/tasks/sync-docs.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/scripts/tasks/sync-docs.ts b/scripts/tasks/sync-docs.ts
index c514455ecbc2..3938c9dd1575 100644
--- a/scripts/tasks/sync-docs.ts
+++ b/scripts/tasks/sync-docs.ts
@@ -20,10 +20,14 @@ export const syncDocs: Task = {
     frontpageDocsPath = path.join(rootDir, frontpagePath, frontpageDocsPath);
 
     if (!fs.existsSync(frontpageDocsPath)) {
-      logger.info(`The directory ${frontpageDocsPath} doesn't exists`);
-      process.exit(1);
+      fs.mkdirSync(frontpageDocsPath);
     }
 
+    logger.info(`Rebuilding docs at ${frontpageDocsPath}`);
+
+    fs.rmSync(frontpageDocsPath, { recursive: true });
+    fs.cpSync(docsDir, frontpageDocsPath, { recursive: true });
+
     logger.info(`Synchronizing files from: \n${docsDir} \nto: \n${frontpageDocsPath}`);
 
     fs.watch(docsDir, { recursive: true }, (_, filename) => {

From 755048bac3ec749c6ea0d6a49500f30f911c3e47 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 24 Apr 2023 11:26:14 -0500
Subject: [PATCH 34/36] Updated sync docs task documentation

---
 docs/contribute/new-snippets.md | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 48056633e039..49bd3a6c8b0a 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -107,17 +107,7 @@ Navigate to the `frontpage` directory and install the required dependencies with
 yarn
 ```
 
-Next, you'll need a way to extract the monorepo docs to the website. Execute the following:
-
-```shell
-yarn extract-monorepo-docs $branch
-```
-
-<div class="aside">
-💡 We recommend extracting documentation from the website before adding code snippets. If you've already added multiple snippets, simply copy the <code>docs</code> folder from the Storybook monorepo and paste it into the frontpage repo at <code>src/content</code> (if the <code>docs</code> folder exists, replace it) to keep your most recent changes.
-</div>
-
-And run the Storybook website with the following command:
+Next, make sure that you have running the `Synchronize documentation (sync-docs)` task from Storybook monorepo. Then, execute the following command to launch the Storybook website.
 
 ```shell
 yarn start:docs-only

From 9c4fa67d29833992ff36a20682ce7a4afa00b604 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 24 Apr 2023 14:52:23 -0500
Subject: [PATCH 35/36] Removed ts-4-9 variants empty lines.

---
 .../solid/button-group-story.ts-4-9.mdx       |  1 -
 ...button-story-click-handler-args.ts-4-9.mdx |  1 -
 ...ory-click-handler-simplificated.ts-4-9.mdx |  1 -
 .../button-story-click-handler.ts-4-9.mdx     |  1 -
 ...on-story-component-args-primary.ts-4-9.mdx |  3 ---
 ...utton-story-component-decorator.ts-4-9.mdx |  2 --
 ...n-story-decorator.story-function-ts.ts.mdx | 27 -------------------
 ....mdx => button-story-decorator.ts-4-9.mdx} |  5 ++--
 .../solid/button-story-decorator.ts.mdx       |  9 ++++---
 .../button-story-rename-story.ts-4-9.mdx      |  4 +--
 .../solid/button-story-using-args.ts-4-9.mdx  |  1 -
 ...button-story-with-addon-example.ts-4-9.mdx |  2 --
 .../solid/button-story-with-args.ts-4-9.mdx   |  1 -
 .../button-story-with-blue-args.ts-4-9.mdx    |  2 --
 .../solid/button-story-with-emojis.ts-4-9.mdx |  1 -
 docs/snippets/solid/button-story.ts-4-9.mdx   |  1 -
 ...onent-story-custom-args-complex.ts-4-9.mdx |  1 -
 ...-story-static-asset-with-import.ts-4-9.mdx |  4 +--
 ...nent-story-static-asset-with-import.ts.mdx |  4 +--
 ...ponent-story-with-accessibility.ts-4-9.mdx |  2 --
 ...ory-with-custom-render-function.ts-4-9.mdx |  1 -
 .../solid/list-story-expanded.ts-4-9.mdx      |  1 -
 .../solid/list-story-reuse-data.ts-4-9.mdx    |  3 +--
 .../solid/list-story-starter.ts-4-9.mdx       |  1 -
 .../solid/list-story-template.ts-4-9.mdx      |  1 -
 .../solid/list-story-unchecked.ts-4-9.mdx     |  1 -
 .../list-story-with-subcomponents.ts-4-9.mdx  |  2 --
 ...t-story-with-unchecked-children.ts-4-9.mdx |  1 -
 docs/snippets/solid/loader-story.ts-4-9.mdx   |  1 -
 .../login-form-with-play-function.ts-4-9.mdx  |  1 -
 ...component-story-basic-and-props.ts-4-9.mdx |  1 -
 ...onent-story-configure-viewports.ts-4-9.mdx |  2 --
 ...-component-story-use-globaltype.ts-4-9.mdx |  1 -
 ...y-component-story-with-nonstory.ts-4-9.mdx | 11 +++-----
 ...my-component-with-env-variables.ts-4-9.mdx |  1 -
 .../solid/page-story-slots.ts-4-9.mdx         |  1 -
 docs/snippets/solid/page-story.ts-4-9.mdx     |  1 -
 ...-story-fully-customize-controls.ts-4-9.mdx |  1 -
 .../your-component-with-decorator.ts-4-9.mdx  |  2 --
 docs/snippets/solid/your-component.ts-4-9.mdx |  1 -
 40 files changed, 18 insertions(+), 90 deletions(-)
 delete mode 100644 docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
 rename docs/snippets/solid/{button-story-decorator.story-function-ts.ts-4-9.mdx => button-story-decorator.ts-4-9.mdx} (89%)

diff --git a/docs/snippets/solid/button-group-story.ts-4-9.mdx b/docs/snippets/solid/button-group-story.ts-4-9.mdx
index 2d969b7d4f0c..dcfa788a4b36 100644
--- a/docs/snippets/solid/button-group-story.ts-4-9.mdx
+++ b/docs/snippets/solid/button-group-story.ts-4-9.mdx
@@ -14,7 +14,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
-
   component: ButtonGroup,
 } satisfies Meta<typeof ButtonGroup>;
 
diff --git a/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
index f8d73b912e35..51ca6fbd78ea 100644
--- a/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx
@@ -13,7 +13,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
index 49fedeca557c..198bab5e50f3 100644
--- a/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx b/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
index 05c1d4f3694e..9dd558d76c56 100644
--- a/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx
@@ -13,7 +13,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
index 405f71dd52f9..2c16d4e7528e 100644
--- a/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx
@@ -11,14 +11,11 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
-
   //👇 Creates specific argTypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-
   args: {
     //👇 Now all Button stories will be primary.
     primary: true,
diff --git a/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
index 2ff4d7ebc5ab..816cfbfe49c9 100644
--- a/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx
@@ -11,9 +11,7 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
-
   decorators: [
     (Story) => (
       <div style={{ margin: '3em' }}>
diff --git a/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
deleted file mode 100644
index 808ec0b6b9db..000000000000
--- a/docs/snippets/solid/button-story-decorator.story-function-ts.ts.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```tsx
-// Button.stories.ts|tsx
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-```
diff --git a/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx b/docs/snippets/solid/button-story-decorator.ts-4-9.mdx
similarity index 89%
rename from docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx
rename to docs/snippets/solid/button-story-decorator.ts-4-9.mdx
index 311ce2de8ec7..75508c5c2d5e 100644
--- a/docs/snippets/solid/button-story-decorator.story-function-ts.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-decorator.ts-4-9.mdx
@@ -1,6 +1,8 @@
-```tsx
+```ts
 // Button.stories.ts|tsx
 
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
 import { Button } from './Button';
 
 const meta = {
@@ -9,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story-decorator.ts.mdx b/docs/snippets/solid/button-story-decorator.ts.mdx
index 157670f40c49..65923c9eb871 100644
--- a/docs/snippets/solid/button-story-decorator.ts.mdx
+++ b/docs/snippets/solid/button-story-decorator.ts.mdx
@@ -1,11 +1,11 @@
-```js
+```ts
 // Button.stories.ts|tsx
 
-import type { StoryObj } from 'storybook-solidjs';
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -14,9 +14,10 @@ export default {
   component: Button,
 };
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
-export const Primary = {
+export const Primary: Story = {
   decorators: [
     (Story) => (
       <div style={{ margin: '3em' }}>
diff --git a/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx b/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
index 9dd5561c2f26..2a7b8dd718d0 100644
--- a/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx
@@ -1,6 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
-import { Meta, StoryObj } from 'storybook-solidjs';
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
@@ -10,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story-using-args.ts-4-9.mdx b/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
index d0a53389c9c1..689374869b03 100644
--- a/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-using-args.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
index ff7bbea62c98..849f02cfd669 100644
--- a/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
@@ -11,9 +11,7 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
-
   //👇 Creates specific parameters for the story
   parameters: {
     myAddon: {
diff --git a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
index 92e1566bdbd6..5017c3eada77 100644
--- a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx b/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
index 8ace598a7bde..6f3432754b3a 100644
--- a/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx
@@ -11,9 +11,7 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
-
   //👇 Creates specific parameters for the story
   parameters: {
     backgrounds: {
diff --git a/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx b/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
index decc6c7ee85b..e959f82d0a0b 100644
--- a/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/button-story.ts-4-9.mdx b/docs/snippets/solid/button-story.ts-4-9.mdx
index 11c531e55908..e006f2e8d46e 100644
--- a/docs/snippets/solid/button-story.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
diff --git a/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx b/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
index 66c0392148de..2e45b37edb8d 100644
--- a/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx
@@ -12,7 +12,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
-
   //👇 Creates specific argTypes with options
   argTypes: {
     propertyA: {
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx b/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
index 737e40ed3ba9..5a4c73d6e70d 100644
--- a/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx
@@ -1,10 +1,10 @@
 ```tsx
 //  MyComponent.stories.ts|tsx
 
-import imageFile from './static/image.png';
-
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
+import imageFile from './static/image.png';
+
 import { MyComponent } from './MyComponent';
 
 const meta = {
diff --git a/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx b/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
index a8702bb64668..5456329c8832 100644
--- a/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
+++ b/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx
@@ -1,10 +1,10 @@
 ```tsx
 //  MyComponent.stories.ts|tsx
 
-import imageFile from './static/image.png';
-
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
+import imageFile from './static/image.png';
+
 import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
diff --git a/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx b/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
index 833a006c3503..d0329d5a4c4f 100644
--- a/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx
@@ -10,9 +10,7 @@ const meta = {
    * See https://storybook.js.org/docs/solid/configure/overview#configure-story-loading to learn how to generate automatic titles
    */
   title: 'Accessibility testing',
-
   component: Button,
-
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx b/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
index 9318ccabf2e4..88687e8b3345 100644
--- a/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
+++ b/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx
@@ -13,7 +13,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
-
   component: MyComponent,
 } satisfies Meta<typeof MyComponent>;
 
diff --git a/docs/snippets/solid/list-story-expanded.ts-4-9.mdx b/docs/snippets/solid/list-story-expanded.ts-4-9.mdx
index 2eb6bd163ca5..e38a7d348551 100644
--- a/docs/snippets/solid/list-story-expanded.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-expanded.ts-4-9.mdx
@@ -12,7 +12,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'List',
-
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
index 3be0b56b482d..cc88cf8ea45f 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from 'storybook-solidjs';
 import { List } from './List';
 import { ListItem } from './ListItem';
 
-//👇 All ListItem stories are imported
+//👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
 const meta = {
@@ -15,7 +15,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'List',
-
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/list-story-starter.ts-4-9.mdx b/docs/snippets/solid/list-story-starter.ts-4-9.mdx
index 2b4086fb084f..2262fd761860 100644
--- a/docs/snippets/solid/list-story-starter.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-starter.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'List',
-
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/list-story-template.ts-4-9.mdx b/docs/snippets/solid/list-story-template.ts-4-9.mdx
index 8dc08db6822f..19effe0c33e6 100644
--- a/docs/snippets/solid/list-story-template.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-template.ts-4-9.mdx
@@ -15,7 +15,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'List',
-
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
index 7c30f157937f..c14cc30036ed 100644
--- a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
@@ -14,7 +14,6 @@ export const meta = {
    * to learn how to generate automatic titles
    */
   title: 'List',
-
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx b/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
index d4aa27fc5b0a..cec4c0cde35e 100644
--- a/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
@@ -12,9 +12,7 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'List',
-
   component: List,
-
   //👈 Adds the ListItem component as a subcomponent
   subcomponents: { ListItem },
 } satisfies Meta<typeof List>;
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx b/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
index 071f155bf142..efd4ac563051 100644
--- a/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
@@ -14,7 +14,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'List',
-
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/loader-story.ts-4-9.mdx b/docs/snippets/solid/loader-story.ts-4-9.mdx
index 67dd6b06b579..c29990961068 100644
--- a/docs/snippets/solid/loader-story.ts-4-9.mdx
+++ b/docs/snippets/solid/loader-story.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Examples/Loader',
-
   component: TodoItem,
   render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
 } satisfies Meta<typeof TodoItem>;
diff --git a/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
index e2a32ba0c291..6869e1adc3ed 100644
--- a/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
+++ b/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx
@@ -15,7 +15,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Form',
-
   component: LoginForm,
 } satisfies Meta<typeof LoginForm>;
 
diff --git a/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
index a38ed1c68ee5..da1756ac690d 100644
--- a/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Path/To/MyComponent',
-
   component: MyComponent,
 } satisfies Meta<typeof MyComponent>;
 
diff --git a/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx b/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
index 90f078c20a52..10406d9b5ac8 100644
--- a/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx
@@ -13,9 +13,7 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
-
   component: MyComponent,
-
   parameters: {
     //👇 The viewports object from the Essentials addon
     viewport: {
diff --git a/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx b/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
index bbf41de38010..95dc65e7d853 100644
--- a/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
-
   component: MyComponent,
 } satisfies Meta<typeof MyComponent>;
 
diff --git a/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
index 30bf19bc7f4f..8f73e4464034 100644
--- a/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
@@ -13,14 +13,9 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
-
-  component: MyComponent,
-
-  // 👈 Storybook loads these stories
-  includeStories: ['SimpleStory', 'ComplexStory'],
-
-  // 👈 Storybook ignores anything that contains Data
-  excludeStories: /.*Data$/,
+  component: MyComponent,  
+  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories  
+  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
 } satisfies Meta<typeof MyComponent>;
 
 export default meta;
diff --git a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
index ba7ac3316694..aa3f1acf0cbc 100644
--- a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
-
   component: MyComponent,
 } satisfies Meta<typeof MyComponent>;
 
diff --git a/docs/snippets/solid/page-story-slots.ts-4-9.mdx b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
index 522b2ea10a1d..9e10eeff49ea 100644
--- a/docs/snippets/solid/page-story-slots.ts-4-9.mdx
+++ b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
@@ -11,7 +11,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Page',
-
   component: Page,
 } satisfies Meta<typeof Page>;
 
diff --git a/docs/snippets/solid/page-story.ts-4-9.mdx b/docs/snippets/solid/page-story.ts-4-9.mdx
index aec0326bc473..56ca8a81dd9d 100644
--- a/docs/snippets/solid/page-story.ts-4-9.mdx
+++ b/docs/snippets/solid/page-story.ts-4-9.mdx
@@ -14,7 +14,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Page',
-
   component: Page,
 } satisfies Meta<typeof Page>;
 
diff --git a/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx b/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
index aed1ccd5036b..e18ccfe8682c 100644
--- a/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
+++ b/docs/snippets/solid/table-story-fully-customize-controls.ts-4-9.mdx
@@ -13,7 +13,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Custom Table',
-
   component: Table,
 } satisfies Meta<typeof Table>;
 
diff --git a/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx b/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
index daae3e2825d3..e759310c5a0a 100644
--- a/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
+++ b/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx
@@ -11,9 +11,7 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
-
   component: YourComponent,
-
   decorators: [
     (Story) => (
       <div style={{ margin: '3em' }}>
diff --git a/docs/snippets/solid/your-component.ts-4-9.mdx b/docs/snippets/solid/your-component.ts-4-9.mdx
index 101f72dce58f..0024158f6381 100644
--- a/docs/snippets/solid/your-component.ts-4-9.mdx
+++ b/docs/snippets/solid/your-component.ts-4-9.mdx
@@ -12,7 +12,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
-
   component: YourComponent,
 } satisfies Meta<typeof YourComponent>;
 

From f9d80b9ec0dd9b3ce5ff70abd5a790ccc9793193 Mon Sep 17 00:00:00 2001
From: Mauricio Rivera <mauriver21@gmail.com>
Date: Mon, 24 Apr 2023 15:02:42 -0500
Subject: [PATCH 36/36] Fixed prettier issue.

---
 .../solid/my-component-story-with-nonstory.ts-4-9.mdx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
index 8f73e4464034..db72f00d0431 100644
--- a/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
+++ b/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx
@@ -13,8 +13,8 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
-  component: MyComponent,  
-  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories  
+  component: MyComponent,
+  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
 } satisfies Meta<typeof MyComponent>;