Merge pull request #21207 from webblocksapp/code-snippets-for-solid

Code snippets for solid

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"

docs/api/csf.md

@@ -54,6 +54,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"
@@ -113,6 +115,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"
@@ -136,6 +140,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"
@@ -156,6 +162,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"
@@ -185,6 +193,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"
@@ -210,6 +220,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
 />
@@ -263,6 +275,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"
@@ -300,6 +314,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',
   ]}
 />
 
@@ -319,6 +335,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',
   ]}
 />
 
@@ -380,6 +397,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',
   ]}
 />
 
@@ -400,6 +419,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',
   ]}
 />
 

docs/configure/environment-variables.md

@@ -57,6 +57,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"

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         |
 
 ### What about feature support?
 

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"

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)

docs/contribute/new-snippets.md

@@ -10,9 +10,9 @@ Storybook maintains code snippets for a [variety of frameworks](../configure/fra
 
 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
 
@@ -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 inside the root folder of the Storybook monorepo, run the following command:
+
+```shell
+yarn task
+```
+
+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
 
 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`).
@@ -44,6 +52,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 +76,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.
   ]}
 />
@@ -95,13 +107,7 @@ 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:
-
-```shell
-yarn link-monorepo-docs  ./path-to-your-local-storybook
-```
-
-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

docs/essentials/controls.md

@@ -138,6 +138,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"
@@ -171,6 +173,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"

docs/essentials/toolbars-and-globals.md

@@ -115,6 +115,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"
@@ -136,6 +138,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',
   ]}
 />
 

docs/essentials/viewport.md

@@ -131,6 +131,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"

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',

docs/get-started/install.md

@@ -89,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',
   ]}
 />
 

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.

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
+  ```

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"
@@ -100,6 +102,8 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in
     'vue/storybook-preview-with-mixin-decorator.mixin-2.js.mdx',
     '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.ts.mdx',
   ]}
 />
 

docs/get-started/whats-a-story.md

@@ -25,6 +25,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"
@@ -55,6 +57,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"

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"

docs/sharing/design-integrations.md

@@ -115,6 +115,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"