diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index d4a0f1dce2d0..f3b1c0b18934 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/api/csf.md b/docs/api/csf.md index 19ea05a58605..8f517ab96c34 100644 --- a/docs/api/csf.md +++ b/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', ]} /> diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index 70af3013d94c..0ba21727a4cd 100644 --- a/docs/configure/environment-variables.md +++ b/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" diff --git a/docs/configure/frameworks.md b/docs/configure/frameworks.md index d130e27f54ef..6331d17b83b8 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 | ### What about feature support? diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index ad79170c4298..9b38f50aa1d1 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 93fea7564624..7e74c9cfd81c 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/contribute/new-snippets.md b/docs/contribute/new-snippets.md index 7a435ce1ad3a..49bd3a6c8b0a 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](../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 diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 096af4bcc89e..5266c0760f02 100644 --- a/docs/essentials/controls.md +++ b/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" diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md index bed4e8f1924d..261a73bdc0cb 100644 --- a/docs/essentials/toolbars-and-globals.md +++ b/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', ]} /> diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index c5755d29137f..ec6b7caddf45 100644 --- a/docs/essentials/viewport.md +++ b/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" diff --git a/docs/frameworks.js b/docs/frameworks.js index e39ef1275e9b..d7b4f2ec9e5c 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', diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 1d89b725936c..749705af2f98 100644 --- a/docs/get-started/install.md +++ b/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', ]} /> 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/setup.md b/docs/get-started/setup.md index 5497b0597bd8..3da5d71ad5be 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" @@ -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', ]} /> diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md index 2f5f104e9c64..513fd58c9ee4 100644 --- a/docs/get-started/whats-a-story.md +++ b/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" 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/sharing/design-integrations.md b/docs/sharing/design-integrations.md index 1d6789144fa5..1ce35fa81d05 100644 --- a/docs/sharing/design-integrations.md +++ b/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" 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..e18fee243331 --- /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/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..dcfa788a4b36 --- /dev/null +++ b/docs/snippets/solid/button-group-story.ts-4-9.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 = { + /* 👇 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: 'ButtonGroup', + component: ButtonGroup, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +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..dde961bec25b --- /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 = { + /* 👇 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: 'ButtonGroup', + component: ButtonGroup, +}; + +export default meta; +type Story = StoryObj; + +export const Pair: Story = { + args: { + buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], + orientation: 'horizontal', + }, +}; +``` 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..532a394a46eb --- /dev/null +++ b/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx @@ -0,0 +1,34 @@ +```tsx +// Button.stories.ts|tsx + +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; + +export default meta; +type Story = StoryObj; + +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..1571f4a6b22b --- /dev/null +++ b/docs/snippets/solid/button-story-auto-docs.ts.mdx @@ -0,0 +1,34 @@ +```tsx +// Button.stories.ts|tsx + +import type { Meta } from 'storybook-solidjs'; + +import { Button } from './Button'; + +const meta: Meta = { + title: 'Button', + component: Button, + //👇 Enables auto-generated documentation for the component story + tags: ['autodocs'], + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +export default meta; +type Story = StoryObj; + +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-click-handler-args.js.mdx b/docs/snippets/solid/button-story-click-handler-args.js.mdx new file mode 100644 index 000000000000..27855b9293e0 --- /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/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 }) => , +}; +``` 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..849f02cfd669 --- /dev/null +++ b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx @@ -0,0 +1,34 @@ +```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/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; + +export default meta; +type Story = StoryObj; + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/solid/api/csf + * to learn how to use render functions. + */ +export const Basic: Story = { + render: () => , +}; +``` 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..ed1d79cb4c8d --- /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 = { + /* 👇 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, + //👇 Creates specific parameters for the story + parameters: { + myAddon: { + data: 'this data is passed to the addon', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/solid/api/csf + * to learn how to use render functions. + */ +export const Basic: Story = { + render: () => , +}; +``` 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..89d34fc639ee --- /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/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..5017c3eada77 --- /dev/null +++ b/docs/snippets/solid/button-story-with-args.ts-4-9.mdx @@ -0,0 +1,26 @@ +```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/solid/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + component: Button, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +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..37bfaa0ec4ac --- /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-solidjs'; + +import { Button } from './Button'; + +const meta: Meta = { + /* 👇 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; + +export const Primary: Story = { + args: { + primary: true, + label: '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..dff6aeed748e --- /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/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..6f3432754b3a --- /dev/null +++ b/docs/snippets/solid/button-story-with-blue-args.ts-4-9.mdx @@ -0,0 +1,28 @@ +```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/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; + +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..fadc25603f03 --- /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 = { + /* 👇 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, + //👇 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..b359184a6879 --- /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/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/solid/api/csf + * to learn how to use render functions. + */ +export const Primary = { + render: () =>