diff --git a/docs/snippets/angular/add-localize-package-to-polyfills.ts.mdx b/docs/snippets/angular/add-localize-package-to-polyfills.ts.mdx deleted file mode 100644 index ba683ebcab3e..000000000000 --- a/docs/snippets/angular/add-localize-package-to-polyfills.ts.mdx +++ /dev/null @@ -1,5 +0,0 @@ -```ts -// src/polyfills.ts - -import '@angular/localize/init'; -``` diff --git a/docs/snippets/angular/addon-actions-action-function.ts.mdx b/docs/snippets/angular/addon-actions-action-function.ts.mdx deleted file mode 100644 index 49506c07f517..000000000000 --- a/docs/snippets/angular/addon-actions-action-function.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta } from '@storybook/angular'; -import { action } from '@storybook/addon-actions'; - -import Button from './button.component'; - -const meta: Meta`, - styleUrls: ['./button.css'], -}) -export class ButtonComponent { - /** - * Checks if the button should be disabled - */ - @Input() - isDisabled: boolean; - - /** - The display content of the button - */ - @Input() - content: string; -} -``` diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx deleted file mode 100644 index 818dbb88caea..000000000000 --- a/docs/snippets/angular/button-group-story.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// ButtonGroup.stories.ts - -import type { Meta, StoryObj } from '@storybook/angular'; - -import { moduleMetadata } from '@storybook/angular'; - -import { CommonModule } from '@angular/common'; - -import { ButtonGroup } from './ButtonGroup.component'; -import { Button } from './button.component'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -const meta: Meta = { - component: ButtonGroup, - decorators: [ - moduleMetadata({ - declarations: [Button], - imports: [CommonModule], - }), - ], -}; - -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/angular/button-implementation.ts.mdx b/docs/snippets/angular/button-implementation.ts.mdx deleted file mode 100644 index 09b9e94e60af..000000000000 --- a/docs/snippets/angular/button-implementation.ts.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```ts -// Button.component.ts - -import { Component, Input, Output, EventEmitter } from '@angular/core'; - -@Component({ - selector: 'button', - template: `the component implementation markup`, -}) -export class ButtonComponent { - /** - * Is this the principal call to action on the page? - */ - @Input() - primary = false; - - /** - * What background color to use - */ - @Input() - backgroundColor?: string; - - /** - * How large should the button be? - */ - @Input() - size: 'small' | 'medium' | 'large' = 'medium'; - - /** - * Button contents - * - * @required - */ - @Input() - label = 'Button'; - - /** - * Optional click handler - */ - @Output() - onClick = new EventEmitter(); -} -``` diff --git a/docs/snippets/angular/button-story-action-event-handle.ts.mdx b/docs/snippets/angular/button-story-action-event-handle.ts.mdx deleted file mode 100644 index 9196288b4bb7..000000000000 --- a/docs/snippets/angular/button-story-action-event-handle.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/angular'; - -import { withActions } from '@storybook/addon-actions/decorator'; - -import { Button } from './button.component'; - -const meta: Meta - - ); -}; -export const Tool = () => { - const [state, setState] = useAddonState('addon-unique-identifier', 'initial state'); - - return ( - setState('Example')} - > - - - ); -}; -``` diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx deleted file mode 100644 index 72f25bf46061..000000000000 --- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// my-addon/manager.js|ts - -import React, { useEffect, useCallback } from 'react'; - -import { useStorybookApi } from '@storybook/manager-api'; -import { IconButton } from '@storybook/components'; -import { ChevronDownIcon } from '@storybook/icons'; - -export const Panel = () => { - const api = useStorybookApi(); - - const toggleMyTool = useCallback(() => { - // Custom logic to toggle the addon here - }, []); - - useEffect(() => { - api.setAddonShortcut('custom-toolbar-addon', { - label: 'Enable toolbar addon', - defaultShortcut: ['G'], - actionName: 'Toggle', - showInMenu: false, - action: toggleAddon, - }); - }, [api]); - - return ( - - - - ); -}; -``` diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx deleted file mode 100644 index dd6d238d1c48..000000000000 --- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// my-addon/manager.js|ts - -import React from 'react'; - -import { AddonPanel, Button } from '@storybook/components'; - -import { STORY_CHANGED } from '@storybook/core-events'; - -import { useChannel } from '@storybook/manager-api'; - -export const Panel = () => { - // Creates a Storybook API channel and subscribes to the STORY_CHANGED event - const emit = useChannel({ - STORY_CHANGED: (...args) => console.log(...args), - }); - - return ( - - - - ); -}; -``` diff --git a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx deleted file mode 100644 index 541fefba9467..000000000000 --- a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// my-addon/manager.js|ts - -import React from 'react'; - -import { AddonPanel, Button } from '@storybook/components'; - -import { useGlobals } from '@storybook/manager-api'; - -export const Panel = () => { - const [globals, updateGlobals] = useGlobals(); - - const isActive = globals['my-param-key'] || false; // 👈 Sets visibility based on the global value. - - return ( - - - - ); -}; -``` diff --git a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx deleted file mode 100644 index 1ae5449f2ec8..000000000000 --- a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// my-addon/manager.js|ts - -import React from 'react'; - -import { AddonPanel } from '@storybook/components'; - -import { useParameter } from '@storybook/manager-api'; - -export const Panel = () => { - // Connects to Storybook's API and retrieves the value of the custom parameter for the current story - const value = useParameter('custom-parameter', 'initial value'); - - return ( - - {value === 'initial value' ? ( -

The story doesn't contain custom parameters. Defaulting to the initial value.

- ) : ( -

You've set {value} as the parameter.

- )} - - ); -}; -``` diff --git a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx deleted file mode 100644 index 1f897f7c31fe..000000000000 --- a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// my-addon/src/manager.js|ts - -import React from 'react'; - -import { AddonPanel } from '@storybook/components'; - -import { useStorybookState } from '@storybook/manager-api'; - -export const Panel = () => { - const state = useStorybookState(); - return ( - - {state.viewMode !== 'docs' ? ( -

Do something with the documentation

- ) : ( -

Show the panel when viewing the story

- )} - - ); -}; -``` diff --git a/docs/snippets/common/storybook-addons-local-preset.js.mdx b/docs/snippets/common/storybook-addons-local-preset.js.mdx deleted file mode 100644 index 02af1d762aac..000000000000 --- a/docs/snippets/common/storybook-addons-local-preset.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// example-addon/src/preset.js - -import { webpackFinal as webpack } from './webpack/webpackFinal'; -import { viteFinal as vite } from './vite/viteFinal'; -import { babelDefault as babel } from './babel/babelDefault'; - -export const webpackFinal = webpack; -export const viteFinal = vite; -export const babelDefault = babel; -``` diff --git a/docs/snippets/common/storybook-addons-local-preset.ts.mdx b/docs/snippets/common/storybook-addons-local-preset.ts.mdx deleted file mode 100644 index 4ac61204e639..000000000000 --- a/docs/snippets/common/storybook-addons-local-preset.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// example-addon/src/preset.ts - -import { webpackFinal as webpack } from './webpack/webpackFinal'; - -import { viteFinal as vite } from './vite/viteFinal'; - -import { babelDefault as babel } from './babel/babelDefault'; - -export const webpackFinal = webpack as any; - -export const viteFinal = vite as any; - -export const babelDefault = babel as any; -``` diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx deleted file mode 100644 index eb831ba140d8..000000000000 --- a/docs/snippets/common/storybook-addons-preset-babelDefault.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// example-addon/src/babel/babelDefault.js - -export function babelDefault(config) { - return { - ...config, - plugins: [ - ...config.plugins, - [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], - ], - }; -} -``` diff --git a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx b/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx deleted file mode 100644 index 85f9b7e01c74..000000000000 --- a/docs/snippets/common/storybook-addons-preset-babelDefault.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// example-addon/src/babel/babelDefault.ts - -import { TransformOptions } from '@babel/core'; - -export function babelDefault(config: TransformOptions) { - return { - ...config, - plugins: [ - ...config.plugins, - [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'], - ], - }; -} -``` diff --git a/docs/snippets/common/storybook-addons-preset-preview.js.mdx b/docs/snippets/common/storybook-addons-preset-preview.js.mdx deleted file mode 100644 index dcf618e5b884..000000000000 --- a/docs/snippets/common/storybook-addons-preset-preview.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// example-addon/src/preview.js - -import { PARAM_KEY } from './constants'; - -import { CustomDecorator } from './decorators'; - -const preview = { - decorators: [CustomDecorator], - globals: { - [PARAM_KEY]: false, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-addons-preset-preview.ts.mdx b/docs/snippets/common/storybook-addons-preset-preview.ts.mdx deleted file mode 100644 index d12ef155f0cb..000000000000 --- a/docs/snippets/common/storybook-addons-preset-preview.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// example-addon/src/preview.ts - -import type { Renderer, ProjectAnnotations } from '@storybook/types'; -import { PARAM_KEY } from './constants'; -import { CustomDecorator } from './decorators'; - -const preview: ProjectAnnotations = { - decorators: [CustomDecorator], - globals: { - [PARAM_KEY]: false, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-addons-preset-viteFinal.js.mdx b/docs/snippets/common/storybook-addons-preset-viteFinal.js.mdx deleted file mode 100644 index 0e2efe423b5a..000000000000 --- a/docs/snippets/common/storybook-addons-preset-viteFinal.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// example-addon/src/vite/viteFinal.js - -export function ViteFinal(config, options = {}) { - config.plugins.push( - new MyCustomPlugin({ - someOption: true, - }), - ); - - return config; -} -``` diff --git a/docs/snippets/common/storybook-addons-preset-viteFinal.ts.mdx b/docs/snippets/common/storybook-addons-preset-viteFinal.ts.mdx deleted file mode 100644 index 5ea297016313..000000000000 --- a/docs/snippets/common/storybook-addons-preset-viteFinal.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// example-addon/src/vite/viteFinal.ts - -export function ViteFinal(config: any, options: any = {}) { - config.plugins.push( - new MyCustomPlugin({ - someOption: true, - }), - ); - - return config; -} -``` diff --git a/docs/snippets/common/storybook-addons-preset-webpackFinal.js.mdx b/docs/snippets/common/storybook-addons-preset-webpackFinal.js.mdx deleted file mode 100644 index d1174811ae69..000000000000 --- a/docs/snippets/common/storybook-addons-preset-webpackFinal.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// example-addon/src/webpack/webpackFinal.js - -export function webpackFinal(config, options = {}) { - const rules = [ - ...(config.module?.rules || []), - { - test: /\.custom-file-extension$/, - loader: require.resolve(`custom-loader`), - }, - ]; - config.module.rules = rules; - - return config; -} -``` diff --git a/docs/snippets/common/storybook-addons-preset-webpackFinal.ts.mdx b/docs/snippets/common/storybook-addons-preset-webpackFinal.ts.mdx deleted file mode 100644 index bce57149a35e..000000000000 --- a/docs/snippets/common/storybook-addons-preset-webpackFinal.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// example-addon/src/webpack/webpackFinal.ts - -import type { Configuration as WebpackConfig } from 'webpack'; - -export function webpackFinal(config: WebpackConfig, options: any = {}) { - const rules = [ - ...(config.module?.rules || []), - { - test: /\.custom-file$/, - loader: require.resolve(`custom-loader`), - }, - ]; - config.module.rules = rules; - - return config; -} -``` diff --git a/docs/snippets/common/storybook-addons-preset.root-preset.js.mdx b/docs/snippets/common/storybook-addons-preset.root-preset.js.mdx deleted file mode 100644 index f6357949c067..000000000000 --- a/docs/snippets/common/storybook-addons-preset.root-preset.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// preset.js - -export const previewAnnotations = (entry = [], options) => { - return [...entry, require.resolve('./dist/preview')]; -}; -``` diff --git a/docs/snippets/common/storybook-addons-preset.root-preset.ts.mdx b/docs/snippets/common/storybook-addons-preset.root-preset.ts.mdx deleted file mode 100644 index f6357949c067..000000000000 --- a/docs/snippets/common/storybook-addons-preset.root-preset.ts.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// preset.js - -export const previewAnnotations = (entry = [], options) => { - return [...entry, require.resolve('./dist/preview')]; -}; -``` diff --git a/docs/snippets/common/storybook-addons-root-preset-manager-entries.js.mdx b/docs/snippets/common/storybook-addons-root-preset-manager-entries.js.mdx deleted file mode 100644 index 199408a5c8c4..000000000000 --- a/docs/snippets/common/storybook-addons-root-preset-manager-entries.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -//example-addon/preset.js - -export const managerEntries = (entry = []) => { - return [...entry, require.resolve('path-to-third-party-addon')]; -}; -``` diff --git a/docs/snippets/common/storybook-addons-root-preset-preview-annotations.js.mdx b/docs/snippets/common/storybook-addons-root-preset-preview-annotations.js.mdx deleted file mode 100644 index f6357949c067..000000000000 --- a/docs/snippets/common/storybook-addons-root-preset-preview-annotations.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// preset.js - -export const previewAnnotations = (entry = [], options) => { - return [...entry, require.resolve('./dist/preview')]; -}; -``` diff --git a/docs/snippets/common/storybook-addons-root-preset.js.mdx b/docs/snippets/common/storybook-addons-root-preset.js.mdx deleted file mode 100644 index 8c82ae3c80ac..000000000000 --- a/docs/snippets/common/storybook-addons-root-preset.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// example-addon/preset.js - -export const previewAnnotations = [require.resolve('./dist/preview')]; - -export const managerEntries = [require.resolve('./dist/manager')]; - -export * from './dist/preset'; -``` diff --git a/docs/snippets/common/storybook-args-url-params-converted.js.mdx b/docs/snippets/common/storybook-args-url-params-converted.js.mdx deleted file mode 100644 index 49154fc5e7e2..000000000000 --- a/docs/snippets/common/storybook-args-url-params-converted.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -{ - obj: { key: 'val' }, - arr: ['one', 'two'], - nil: null -} -``` diff --git a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx deleted file mode 100644 index 279a8c601df5..000000000000 --- a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// .storybook/my-addon/manager.js - -import { useArgTypes } from '@storybook/manager-api'; - -// inside your panel -const { argTypes } = useArgTypes(); -``` diff --git a/docs/snippets/common/storybook-auto-docs-baseline-example.custom-title.mdx.mdx b/docs/snippets/common/storybook-auto-docs-baseline-example.custom-title.mdx.mdx deleted file mode 100644 index d4bfbc9992e6..000000000000 --- a/docs/snippets/common/storybook-auto-docs-baseline-example.custom-title.mdx.mdx +++ /dev/null @@ -1,26 +0,0 @@ - -```mdx -{/* Button.mdx */} - -import { Meta, Controls } from '@storybook/blocks'; - - - -# Definition - -Button is a clickable interactive element that triggers a response. - -You can place text and icons inside of a button. - -Buttons are often used for form submissions and to toggle elements into view. - -## Usage - -The component comes in different variants such as `primary`, `secondary`, `large` and `small` which you can use to alter the look and feel of the button. - -## Inputs - -Button has the following properties: - - -``` diff --git a/docs/snippets/common/storybook-auto-docs-baseline-example.mdx.mdx b/docs/snippets/common/storybook-auto-docs-baseline-example.mdx.mdx deleted file mode 100644 index 6097bd0a6da8..000000000000 --- a/docs/snippets/common/storybook-auto-docs-baseline-example.mdx.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```mdx -{/* Button.mdx */} - -import { Meta } from '@storybook/blocks'; - - - -# Definition - -Button is a clickable interactive element that triggers a response. - -You can place text and icons inside of a button. - -Buttons are often used for form submissions and to toggle elements into view. - -## Usage - -The component comes in different variants such as `primary`, `secondary`, `large` and `small` which you can use to alter the look and feel of the button. - -## Inputs - -Button has the following properties: - -- `primary` - If `true`, the button will have a primary style. -- `size` - The size of the button. -- `label` - The label of the button. -- `backgroundColor` - The background color of the button. -- `onClick` - Callback function when clicked. -``` diff --git a/docs/snippets/common/storybook-auto-docs-baseline-example.of-prop.mdx.mdx b/docs/snippets/common/storybook-auto-docs-baseline-example.of-prop.mdx.mdx deleted file mode 100644 index 458e0e181aef..000000000000 --- a/docs/snippets/common/storybook-auto-docs-baseline-example.of-prop.mdx.mdx +++ /dev/null @@ -1,28 +0,0 @@ - -```mdx -{/* Button.mdx */} - -import { Meta, Controls } from '@storybook/blocks'; - -import * as ButtonStories from './Button.stories'; - - - -# Definition - -Button is a clickable interactive element that triggers a response. - -You can place text and icons inside of a button. - -Buttons are often used for form submissions and to toggle elements into view. - -## Usage - -The component comes in different variants such as `primary`, `secondary`, `large` and `small` which you can use to alter the look and feel of the button. - -## Inputs - -Button has the following properties: - - -``` diff --git a/docs/snippets/common/storybook-auto-docs-custom-file.mdx.mdx b/docs/snippets/common/storybook-auto-docs-custom-file.mdx.mdx deleted file mode 100644 index d68ae8bfbce2..000000000000 --- a/docs/snippets/common/storybook-auto-docs-custom-file.mdx.mdx +++ /dev/null @@ -1,25 +0,0 @@ - -```mdx -{/* src/components/Select.mdx */} - -# Select - -Select is a type of input that allows users to choose one or more options from a list of choices. - -The options are hidden by default and revealed when a user interacts with an element. - -It shows the currently selected option in its default collapsed state. - -## Design implementation - -To help users get acquainted with the existing UI elements, it is recommended to use check the Figma file to see how the select input is implemented. - -### When to use? - -In a select input where there are less than 3-4 items, consider using radio boxes, or radio inputs instead. - -### How to use? - -To help users understand the options available in a select input, include a default option that is unselectable and acts as a label. - -``` diff --git a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx deleted file mode 100644 index a186d08bc021..000000000000 --- a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-essentials'], - docs: { - //👇 See the table below for the list of supported options - defaultName: 'Documentation', - }, -}; -``` diff --git a/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx b/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx deleted file mode 100644 index 50a44e682f07..000000000000 --- a/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-essentials'], - docs: { - //👇 See the table below for the list of supported options - defaultName: 'Documentation', - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx b/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx deleted file mode 100644 index d4a801158196..000000000000 --- a/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: [ - //👇 Your documentation written in MDX along with your stories goes here - '../src/**/*.mdx', - '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], -}; -``` diff --git a/docs/snippets/common/storybook-auto-docs-main-mdx-config.ts.mdx b/docs/snippets/common/storybook-auto-docs-main-mdx-config.ts.mdx deleted file mode 100644 index 37014b66e0ff..000000000000 --- a/docs/snippets/common/storybook-auto-docs-main-mdx-config.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: [ - //👇 Your documentation written in MDX along with your stories goes here - '../src/**/*.mdx', - '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', - ], - addons: ['@storybook/addon-essentials'], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-auto-docs-mdx-docs-definition.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-docs-definition.mdx.mdx deleted file mode 100644 index 79113bbeea0c..000000000000 --- a/docs/snippets/common/storybook-auto-docs-mdx-docs-definition.mdx.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```md -# Checkbox - -A checkbox is a square box that can be activated or deactivated when ticked. - -Use checkboxes to select one or more options from a list of choices. -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-auto-docs-mdx-docs-docs-only-page.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-docs-docs-only-page.mdx.mdx deleted file mode 100644 index 41d014f82e6d..000000000000 --- a/docs/snippets/common/storybook-auto-docs-mdx-docs-docs-only-page.mdx.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```mdx -{/* ExampleDocumentation.mdx */} - -import { Meta } from '@storybook/blocks'; - -import * as ExampleComponentStories from './ExampleComponent.stories'; - -{/* 👇 Documentation-only page */} - - - -{/* 👇 Component documentation page */} - - -``` diff --git a/docs/snippets/common/storybook-auto-docs-mdx-docs-dos-donts.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-docs-dos-donts.mdx.mdx deleted file mode 100644 index 8bae143ed716..000000000000 --- a/docs/snippets/common/storybook-auto-docs-mdx-docs-dos-donts.mdx.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```mdx -{/* Guideline.mdx */} - - - - - Use buttons for the main actions on your page - - Identify the primary action and make it `primary` - - - - Use a button when a link will do (e.g., for navigation-only actions) - - Use multiple `primary` buttons in a single UI state - - -``` diff --git a/docs/snippets/common/storybook-auto-docs-mdx-docs-imports.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-docs-imports.mdx.mdx deleted file mode 100644 index e452558f504b..000000000000 --- a/docs/snippets/common/storybook-auto-docs-mdx-docs-imports.mdx.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```mdx -{/* Checkbox.mdx */} - -import { Canvas, Meta } from '@storybook/blocks'; - -import * as CheckboxStories from './Checkbox.stories'; -``` diff --git a/docs/snippets/common/storybook-auto-docs-mdx-docs-meta-block.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-docs-meta-block.mdx.mdx deleted file mode 100644 index f636aa823906..000000000000 --- a/docs/snippets/common/storybook-auto-docs-mdx-docs-meta-block.mdx.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```mdx -{/* Checkbox.mdx */} - -import { Meta } from '@storybook/blocks'; - -import * as CheckboxStories from './Checkbox.stories'; - - -``` diff --git a/docs/snippets/common/storybook-auto-docs-mdx-docs-story.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-docs-story.mdx.mdx deleted file mode 100644 index 2be41d5707f9..000000000000 --- a/docs/snippets/common/storybook-auto-docs-mdx-docs-story.mdx.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```mdx -{/* Checkbox.mdx */} - -import { Canvas } from '@storybook/blocks'; - -import * as CheckboxStories from './Checkbox.stories'; - - -``` diff --git a/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx deleted file mode 100644 index 499b7f22a570..000000000000 --- a/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```mdx -{/* Page.mdx */} - -import { Canvas, Meta, Story } from '@storybook/blocks'; - -import * as ListStories from './List.stories'; - -import * as ListItemStories from './ListItem.stories'; - -import * as PageStories from './Page.stories'; - - - -# Page - -Page is a layout container that is used to position children in predetermined areas. - -It's often used to apply consistent positioning for content across pages in an application - -## Usage - - - -# List - -List is a grouping of related items. List can be ordered with multiple levels of nesting. - -## Usage - - - -# List Item - -List items are used to group related content in a list. They must be nested within a List component. - -## Usage - - -``` diff --git a/docs/snippets/common/storybook-auto-docs-standalone-page.mdx.mdx b/docs/snippets/common/storybook-auto-docs-standalone-page.mdx.mdx deleted file mode 100644 index 1ea13eddc788..000000000000 --- a/docs/snippets/common/storybook-auto-docs-standalone-page.mdx.mdx +++ /dev/null @@ -1,63 +0,0 @@ -```mdx -{/* src/GettingStarted.mdx */} - -# Getting Started - -Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need. - -## Table of Contents - -- [Design Resources](#design-resources) - - [Figma](#figma) - - [UI/UX Design Guidelines](#uiux-design-guidelines) - - [Design Assets](#design-assets) - -- [Development Resources](#development-resources) - - [Coding Standards](#coding-standards) - - [Version Control](#version-control) - - [Development Tools](#development-tools) - ---- - -## Design Resources - -### Figma - -[Figma](https://www.figma.com/) is a collaborative design and prototyping tool. It's the heart of the design process, allowing designers to work together seamlessly. - -- **Get Access**: If you're not already part of the Figma project, request access from the project lead or manager. - -### UI/UX Design Guidelines - -Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards. - -- [UI/UX Guidelines Document](https://your-design-guidelines-link.com) - -### Design Assets - -All the essential design assets like logos, icons, and brand guidelines can be found in the Figma project. Ensure you have access and familiarize yourself with these assets for consistency. - ---- - -## Development Resources - -### Coding Standards - -Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices. - -- [Coding Standards Document](https://your-coding-standards-link.com) - -### Version Control - -We use Git for version control. Make sure you have Git installed and are familiar with its basics. - -### Development Tools - -Your development environment is critical. Here are some tools and resources to help you set up your workspace: - -- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions. - -- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for JavaScript projects. Install it to manage project dependencies. - ---- -``` diff --git a/docs/snippets/common/storybook-auto-docs-starter-example.mdx.mdx b/docs/snippets/common/storybook-auto-docs-starter-example.mdx.mdx deleted file mode 100644 index 4b6380e622af..000000000000 --- a/docs/snippets/common/storybook-auto-docs-starter-example.mdx.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```mdx -{/* Button.mdx */} - -import { Meta, Story } from '@storybook/blocks'; - -import * as ButtonStories from './Button.stories'; - - - -# Button - -Button is a clickable interactive element that triggers a response. - -You can place text and icons inside of a button. - -Buttons are often used for form submissions and to toggle elements into view. - -## Usage - - -``` diff --git a/docs/snippets/common/storybook-automigrate.npm.js.mdx b/docs/snippets/common/storybook-automigrate.npm.js.mdx deleted file mode 100644 index 6a5f7ebdbd5b..000000000000 --- a/docs/snippets/common/storybook-automigrate.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@latest automigrate -``` diff --git a/docs/snippets/common/storybook-automigrate.pnpm.js.mdx b/docs/snippets/common/storybook-automigrate.pnpm.js.mdx deleted file mode 100644 index 375ba9755861..000000000000 --- a/docs/snippets/common/storybook-automigrate.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest automigrate -``` diff --git a/docs/snippets/common/storybook-automigrate.yarn.js.mdx b/docs/snippets/common/storybook-automigrate.yarn.js.mdx deleted file mode 100644 index 67d30472ba9c..000000000000 --- a/docs/snippets/common/storybook-automigrate.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@latest automigrate -``` diff --git a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx deleted file mode 100644 index 97ac9cef1919..000000000000 --- a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```ts -import { TransformOptions } from '@babel/core'; - -export function babelDefault(config: TransformOptions) { - return { - plugins: [[require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset']], - }; -} -``` diff --git a/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx b/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx deleted file mode 100644 index fc480d188ee2..000000000000 --- a/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// addons/backgrounds/src/preset/addParameter.tsx - -export default { - parameters: { - backgrounds: { - values: [ - { name: 'light', value: '#F8F8F8' }, - { name: 'dark', value: '#333333' }, - ], - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx b/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx deleted file mode 100644 index 4bf557bd8792..000000000000 --- a/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// preset.js - -export function config(entry = []) { - return [...entry, require.resolve('./defaultParameters')]; -} -``` diff --git a/docs/snippets/common/storybook-build-test-flag.npm.js.mdx b/docs/snippets/common/storybook-build-test-flag.npm.js.mdx deleted file mode 100644 index 202b2cdb3188..000000000000 --- a/docs/snippets/common/storybook-build-test-flag.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run build-storybook -- --test -``` diff --git a/docs/snippets/common/storybook-build-test-flag.pnpm.js.mdx b/docs/snippets/common/storybook-build-test-flag.pnpm.js.mdx deleted file mode 100644 index ae1a481577d1..000000000000 --- a/docs/snippets/common/storybook-build-test-flag.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run build-storybook --test -``` diff --git a/docs/snippets/common/storybook-build-test-flag.yarn.js.mdx b/docs/snippets/common/storybook-build-test-flag.yarn.js.mdx deleted file mode 100644 index cb2007d3e8b8..000000000000 --- a/docs/snippets/common/storybook-build-test-flag.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn build-storybook --test -``` diff --git a/docs/snippets/common/storybook-builder-api-build-server.ts.mdx b/docs/snippets/common/storybook-builder-api-build-server.ts.mdx deleted file mode 100644 index 4746d62352cd..000000000000 --- a/docs/snippets/common/storybook-builder-api-build-server.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// build.ts - -import { build as viteBuild } from 'vite'; -import { stringifyProcessEnvs } from './envs'; -import { commonConfig } from './vite-config'; - -import type { EnvsRaw, ExtendedOptions } from './types'; - -export async function build(options: ExtendedOptions) { - const { presets } = options; - - const baseConfig = await commonConfig(options, 'build'); - const config = { - ...baseConfig, - build: { - outDir: options.outputDir, - emptyOutDir: false, - sourcemap: true, - }, - }; - - const finalConfig = await presets.apply('viteFinal', config, options); - - const envsRaw = await presets.apply>('env'); - // Stringify env variables after getting `envPrefix` from the final config - const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix); - // Update `define` - finalConfig.define = { - ...finalConfig.define, - ...envs, - }; - - await viteBuild(finalConfig); -} -``` diff --git a/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx deleted file mode 100644 index cc1e3c84629f..000000000000 --- a/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// vite-server.ts - -import { stringifyProcessEnvs } from './envs'; -import { getOptimizeDeps } from './optimizeDeps'; -import { commonConfig } from './vite-config'; - -import type { EnvsRaw, ExtendedOptions } from './types'; - -export async function createViteServer(options: ExtendedOptions, devServer: Server) { - const { port, presets } = options; - - // Defines the baseline config. - const baseConfig = await commonConfig(options, 'development'); - const defaultConfig = { - ...baseConfig, - server: { - middlewareMode: true, - hmr: { - port, - server: devServer, - }, - fs: { - strict: true, - }, - }, - optimizeDeps: await getOptimizeDeps(baseConfig, options), - }; - - const finalConfig = await presets.apply('viteFinal', defaultConfig, options); - - const envsRaw = await presets.apply>('env'); - - // Remainder implementation -} -``` diff --git a/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx b/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx deleted file mode 100644 index 4f37414bf9fa..000000000000 --- a/docs/snippets/common/storybook-builder-api-dev-server.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// server.ts - -import { createServer } from 'vite'; - -export async function createViteServer(options: ExtendedOptions, devServer: Server) { - const { port } = options; - // Remainder server configuration - - // Creates the server. - return createServer({ - // The server configuration goes here - server: { - middlewareMode: true, - hmr: { - port, - server: devServer, - }, - }, - }); -} -``` diff --git a/docs/snippets/common/storybook-builder-api-interface.ts.mdx b/docs/snippets/common/storybook-builder-api-interface.ts.mdx deleted file mode 100644 index ddab935cefdd..000000000000 --- a/docs/snippets/common/storybook-builder-api-interface.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -export interface Builder { - start: (args: { - options: Options; - startTime: ReturnType; - router: Router; - server: Server; - }) => Promise; - bail: (e?: Error) => Promise; - }>; - build: (arg: { - options: Options; - startTime: ReturnType; - }) => Promise; - bail: (e?: Error) => Promise; - getConfig: (options: Options) => Promise; - corePresets?: string[]; - overridePresets?: string[]; -} -``` diff --git a/docs/snippets/common/storybook-builder-api-mdx.ts.mdx b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx deleted file mode 100644 index ccefa98f75e8..000000000000 --- a/docs/snippets/common/storybook-builder-api-mdx.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// mdx-plugin.ts - -import mdx from 'vite-plugin-mdx'; - -import { createCompiler } from '@storybook/csf-tools/mdx'; - -export function mdxPlugin() { - return mdx((filename) => { - const compilers = []; - - if (filename.endsWith('stories.mdx') || filename.endsWith('story.mdx')) { - compilers.push(createCompiler({})); - } - return { - compilers, - }; - }); -} -``` diff --git a/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx b/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx deleted file mode 100644 index 2d5562727ede..000000000000 --- a/docs/snippets/common/storybook-builder-api-preview-exports.ts.mdx +++ /dev/null @@ -1,80 +0,0 @@ -```ts -import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names'; -import { transformAbsPath } from './utils/transform-abs-path'; -import type { ExtendedOptions } from './types'; - -export async function generateIframeScriptCode(options: ExtendedOptions) { - const { presets, frameworkPath, framework } = options; - const frameworkImportPath = frameworkPath || `@storybook/${framework}`; - - const presetEntries = await presets.apply('config', [], options); - const configEntries = [...presetEntries].filter(Boolean); - - const absoluteFilesToImport = (files: string[], name: string) => - files - .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformAbsPath(el)}'`) - .join('\n'); - - const importArray = (name: string, length: number) => - new Array(length).fill(0).map((_, i) => `${name}_${i}`); - - const code = ` - // Ensure that the client API is initialized by the framework before any other iframe code - // is loaded. That way our client-apis can assume the existence of the API+store - import { configure } from '${frameworkImportPath}'; - - import { - addDecorator, - addParameters, - addArgTypesEnhancer, - addArgsEnhancer, - setGlobalRender - } from '@storybook/preview-api'; - import { logger } from '@storybook/client-logger'; - ${absoluteFilesToImport(configEntries, 'config')} - import * as preview from '${virtualPreviewFile}'; - import { configStories } from '${virtualStoriesFile}'; - - const configs = [${importArray('config', configEntries.length) - .concat('preview.default') - .join(',')}].filter(Boolean) - - configs.forEach(config => { - Object.keys(config).forEach((key) => { - const value = config[key]; - switch (key) { - case 'args': - case 'argTypes': { - return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value)); - } - case 'decorators': { - return value.forEach((decorator) => addDecorator(decorator, false)); - } - case 'parameters': { - return addParameters({ ...value }, false); - } - case 'render': { - return setGlobalRender(value) - } - case 'globals': - case 'globalTypes': { - const v = {}; - v[key] = value; - return addParameters(v, false); - } - case 'decorateStory': - case 'renderToCanvas': { - return null; - } - default: { - // eslint-disable-next-line prefer-template - return console.log(key + ' was not supported :( !'); - } - } - }); - }) - configStories(configure); - `.trim(); - return code; -} -``` diff --git a/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx deleted file mode 100644 index e3ed5b7fac1b..000000000000 --- a/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// index.ts - -import { createViteServer } from './vite-server'; - -let server: ViteDevServer; -export async function bail(): Promise { - return server?.close(); -} - -export const start: ViteBuilder['start'] = async ({ options, server: devServer }) => { - // Remainder implementation goes here - server = await createViteServer(options as ExtendedOptions, devServer); - - return { - bail, - totalTime: process.hrtime(startTime), - }; -}; -``` diff --git a/docs/snippets/common/storybook-canvas-doc-block-story.js.mdx b/docs/snippets/common/storybook-canvas-doc-block-story.js.mdx deleted file mode 100644 index fbd25cb54807..000000000000 --- a/docs/snippets/common/storybook-canvas-doc-block-story.js.mdx +++ /dev/null @@ -1,52 +0,0 @@ -```jsx -// MyComponent.stories.js|jsx - -import { ColorItem, ColorPalette } from '@storybook/blocks'; - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -const theme = { - colors: { - primaryDark: { - value: '#1C1C1C', - }, - primaryRegular: { - value: '#363636', - }, - primaryLight1: { - value: '#4D4D4D', - }, - primaryLight2: { - value: '#878787', - }, - primaryLight3: { - value: '#D1D1D1', - }, - primaryLight4: { - value: '#EDEDED', - }, - }, -}; - -// ❌ Don't use the Doc Blocks inside your stories. It will break Storybook with a cryptic error. -export const Colors = { - render: () => ( - - {Object.entries(theme.colors).map(([key, { value }]) => ( - - ))} - - ), -}; -``` diff --git a/docs/snippets/common/storybook-canvas-doc-block-story.ts-4-9.mdx b/docs/snippets/common/storybook-canvas-doc-block-story.ts-4-9.mdx deleted file mode 100644 index 41f68c189683..000000000000 --- a/docs/snippets/common/storybook-canvas-doc-block-story.ts-4-9.mdx +++ /dev/null @@ -1,58 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta } from '@storybook/your-framework'; - -import { ColorItem, ColorPalette } from '@storybook/blocks'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -const theme = { - colors: { - primaryDark: { - value: '#1C1C1C', - }, - primaryRegular: { - value: '#363636', - }, - primaryLight1: { - value: '#4D4D4D', - }, - primaryLight2: { - value: '#878787', - }, - primaryLight3: { - value: '#D1D1D1', - }, - primaryLight4: { - value: '#EDEDED', - }, - }, -}; - -// ❌ Don't use the Doc Blocks inside your stories. It will break Storybook with a cryptic error. -export const Colors: Story = { - render: () => ( - - {Object.entries(theme.colors).map(([key, { value }]) => ( - - ))} - - ), -}; -``` diff --git a/docs/snippets/common/storybook-canvas-doc-block-story.ts.mdx b/docs/snippets/common/storybook-canvas-doc-block-story.ts.mdx deleted file mode 100644 index 32387321d3dd..000000000000 --- a/docs/snippets/common/storybook-canvas-doc-block-story.ts.mdx +++ /dev/null @@ -1,58 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { ColorItem, ColorPalette } from '@storybook/blocks'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj; - -const theme = { - colors: { - primaryDark: { - value: '#1C1C1C', - }, - primaryRegular: { - value: '#363636', - }, - primaryLight1: { - value: '#4D4D4D', - }, - primaryLight2: { - value: '#878787', - }, - primaryLight3: { - value: '#D1D1D1', - }, - primaryLight4: { - value: '#EDEDED', - }, - }, -}; - -// ❌ Don't use the Doc Blocks inside your stories. It will break Storybook with a cryptic error. -export const Colors: Story = { - render: () => ( - - {Object.entries(theme.colors).map(([key, { value }]) => ( - - ))} - - ), -}; -``` diff --git a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx b/docs/snippets/common/storybook-client-globals-example-file.ts.mdx deleted file mode 100644 index 4d240f124ceb..000000000000 --- a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```ts -// vue/src/client/preview/globals.ts - -import { global } from '@storybook/global'; - -const { window: globalWindow } = global; - -globalWindow.STORYBOOK_ENV = 'vue'; -``` diff --git a/docs/snippets/common/storybook-client-preview.ts.mdx b/docs/snippets/common/storybook-client-preview.ts.mdx deleted file mode 100644 index 301fb4d52d8f..000000000000 --- a/docs/snippets/common/storybook-client-preview.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// your-framework/src/client/preview/index.ts - -import { start } from '@storybook/preview-api'; - -import './globals'; - -import render from './render'; - -const api = start(render); - -// the boilerplate code -``` diff --git a/docs/snippets/common/storybook-component-layout-param.js.mdx b/docs/snippets/common/storybook-component-layout-param.js.mdx deleted file mode 100644 index 86550543e676..000000000000 --- a/docs/snippets/common/storybook-component-layout-param.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, - // Sets the layout parameter component wide. - parameters: { - layout: 'centered', - }, -}; -``` diff --git a/docs/snippets/common/storybook-component-layout-param.ts-4-9.mdx b/docs/snippets/common/storybook-component-layout-param.ts-4-9.mdx deleted file mode 100644 index ec50f99bcd5b..000000000000 --- a/docs/snippets/common/storybook-component-layout-param.ts-4-9.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta = { - component: Button, - // Sets the layout parameter component wide. - parameters: { - layout: 'centered', - }, -} satisfies Meta; - -export default meta; -``` diff --git a/docs/snippets/common/storybook-component-layout-param.ts.mdx b/docs/snippets/common/storybook-component-layout-param.ts.mdx deleted file mode 100644 index 8044c2b779fc..000000000000 --- a/docs/snippets/common/storybook-component-layout-param.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta: Meta = { - component: Button, - // Sets the layout parameter component wide. - parameters: { - layout: 'centered', - }, -}; - -export default meta; -``` diff --git a/docs/snippets/common/storybook-config-layout.js.mdx b/docs/snippets/common/storybook-config-layout.js.mdx deleted file mode 100644 index f3c66ad4267d..000000000000 --- a/docs/snippets/common/storybook-config-layout.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// .storybook/manager.js - -import { addons } from '@storybook/manager-api'; - -addons.setConfig({ - navSize: 300, - bottomPanelHeight: 300, - rightPanelWidth: 300, - panelPosition: 'bottom', - enableShortcuts: true, - showToolbar: true, - theme: undefined, - selectedPanel: undefined, - initialActive: 'sidebar', - sidebar: { - showRoots: false, - collapsedRoots: ['other'], - }, - toolbar: { - title: { hidden: false }, - zoom: { hidden: false }, - eject: { hidden: false }, - copy: { hidden: false }, - fullscreen: { hidden: false }, - }, -}); -``` diff --git a/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx b/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx deleted file mode 100644 index aa5b784e31a6..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// .storybook/main.js - -export default { - stories: [], - addons: [ - // Other Storybook addons - { - name: '@storybook/addon-coverage', - options: { - istanbul: { - include: ['**/stories/**'], - exclude: ['**/exampleDirectory/**'], - }, - }, - }, - ], -}; -``` diff --git a/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx b/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx deleted file mode 100644 index b01135499e3a..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-config-options.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// .storybook/main.ts - -// For Vite support add the following import -// import type { AddonOptionsVite } from '@storybook/addon-coverage'; - -import type { AddonOptionsWebpack } from '@storybook/addon-coverage'; - -// Replace your-framework with the framework and builder you are using (e.g., react-webpack5, vue3-webpack5) -import type { StorybookConfig } from '@storybook/your-framework'; - -const coverageConfig: AddonOptionsWebpack = { - istanbul: { - include: ['**/stories/**'], - exclude: ['**/exampleDirectory/**'], - }, -}; - -const config: StorybookConfig = { - stories: [], - addons: [ - // Other Storybook addons - { - name: '@storybook/addon-coverage', - options: coverageConfig, - }, - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-coverage-addon-install.npm.js.mdx b/docs/snippets/common/storybook-coverage-addon-install.npm.js.mdx deleted file mode 100644 index 26de5e24dae7..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install @storybook/addon-coverage --save-dev -``` diff --git a/docs/snippets/common/storybook-coverage-addon-install.pnpm.js.mdx b/docs/snippets/common/storybook-coverage-addon-install.pnpm.js.mdx deleted file mode 100644 index 12a1db30b3ef..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/addon-coverage -``` diff --git a/docs/snippets/common/storybook-coverage-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-coverage-addon-install.yarn.js.mdx deleted file mode 100644 index eeadbb49e99d..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/addon-coverage -``` diff --git a/docs/snippets/common/storybook-coverage-addon-optimized-config.js.mdx b/docs/snippets/common/storybook-coverage-addon-optimized-config.js.mdx deleted file mode 100644 index 0948f1e6132e..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-optimized-config.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-coverage', - ], - build: { - test: { - disabledAddons: ['@storybook/addon-docs', '@storybook/addon-essentials/docs'], - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-coverage-addon-optimized-config.ts.mdx b/docs/snippets/common/storybook-coverage-addon-optimized-config.ts.mdx deleted file mode 100644 index de1aa91b5071..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-optimized-config.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-coverage', - ], - build: { - test: { - disabledAddons: ['@storybook/addon-docs', '@storybook/addon-essentials/docs'], - }, - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-coverage-addon-registration.js.mdx b/docs/snippets/common/storybook-coverage-addon-registration.js.mdx deleted file mode 100644 index 48bcba201457..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-registration.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/main.js - -export default { - stories: [], - addons: [ - // Other Storybook addons - '@storybook/addon-coverage', //👈 Registers the addon - ], -}; -``` diff --git a/docs/snippets/common/storybook-coverage-addon-registration.ts.mdx b/docs/snippets/common/storybook-coverage-addon-registration.ts.mdx deleted file mode 100644 index 37f40dbb1a2d..000000000000 --- a/docs/snippets/common/storybook-coverage-addon-registration.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework and builder you are using (e.g., react-webpack5, vue3-webpack5) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - stories: [], - addons: [ - // Other Storybook addons - '@storybook/addon-coverage', //👈 Registers the addon - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-coverage-report-lcov.js.mdx b/docs/snippets/common/storybook-coverage-report-lcov.js.mdx deleted file mode 100644 index 02df9e6bde9d..000000000000 --- a/docs/snippets/common/storybook-coverage-report-lcov.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook -``` diff --git a/docs/snippets/common/storybook-coverage-report-vue.js.mdx b/docs/snippets/common/storybook-coverage-report-vue.js.mdx deleted file mode 100644 index ba28ca0562d9..000000000000 --- a/docs/snippets/common/storybook-coverage-report-vue.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// .nyc.config.js - -export default { - // Other configuration options - extension: ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue'], -}; -``` diff --git a/docs/snippets/common/storybook-coverage-report-vue.json.mdx b/docs/snippets/common/storybook-coverage-report-vue.json.mdx deleted file mode 100644 index 4e85a9c0e626..000000000000 --- a/docs/snippets/common/storybook-coverage-report-vue.json.mdx +++ /dev/null @@ -1,5 +0,0 @@ -```json -{ - "extension": [".js", ".cjs", ".mjs", ".ts", ".tsx", ".jsx", ".vue"] -} -``` diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx deleted file mode 100644 index be6ca000038b..000000000000 --- a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// components/MyComponent/MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, - title: 'components/MyComponent/MyComponent', -}; - -export const Default = { - args: { - something: 'Something else', - }, -}; -``` diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts-4-9.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts-4-9.mdx deleted file mode 100644 index 21845238edcf..000000000000 --- a/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts-4-9.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// components/MyComponent/MyComponent.stories.js|jsx - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { MyComponent } from './MyComponent'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - component: MyComponent, - title: 'components/MyComponent/MyComponent', -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - something: 'Something else', - }, -}; -``` diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts.mdx deleted file mode 100644 index 3dba50a3fa85..000000000000 --- a/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// components/MyComponent/MyComponent.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - component: MyComponent, - title: 'components/MyComponent/MyComponent', -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - something: 'Something else', - }, -}; -``` diff --git a/docs/snippets/common/storybook-custom-docs-markdown.mdx.mdx b/docs/snippets/common/storybook-custom-docs-markdown.mdx.mdx deleted file mode 100644 index a6e80d46e413..000000000000 --- a/docs/snippets/common/storybook-custom-docs-markdown.mdx.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```mdx -{/* Changelog.mdx */} - -import { Meta, Markdown } from "@storybook/blocks"; - -import Readme from "../../Changelog.md?raw"; - - - -# Changelog - -{Readme} -``` diff --git a/docs/snippets/common/storybook-custom-manager-head.js.mdx b/docs/snippets/common/storybook-custom-manager-head.js.mdx deleted file mode 100644 index 1ee1111d1602..000000000000 --- a/docs/snippets/common/storybook-custom-manager-head.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// .storybook/main.js - -export default { - managerHead: (head) => ` - ${head} - - `, -}; -``` diff --git a/docs/snippets/common/storybook-custom-manager-head.ts.mdx b/docs/snippets/common/storybook-custom-manager-head.ts.mdx deleted file mode 100644 index 3437c2b451db..000000000000 --- a/docs/snippets/common/storybook-custom-manager-head.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - managerHead: (head) => ` - ${head} - - `, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx deleted file mode 100644 index 6e7c8fc36ed2..000000000000 --- a/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run storybook -- --debug-webpack -``` diff --git a/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx deleted file mode 100644 index cd009ecbc073..000000000000 --- a/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn storybook --debug-webpack -``` diff --git a/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx deleted file mode 100644 index 7ff32dc52425..000000000000 --- a/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run build-storybook -- --debug-webpack -``` diff --git a/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx deleted file mode 100644 index a54aff6dd9aa..000000000000 --- a/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn build-storybook --debug-webpack -``` diff --git a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx deleted file mode 100644 index b1dd42907b68..000000000000 --- a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook -``` diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx deleted file mode 100644 index 81212a40c93a..000000000000 --- a/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run storybook -- --disable-telemetry -``` diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.pnpm.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.pnpm.js.mdx deleted file mode 100644 index 2b2daec36347..000000000000 --- a/docs/snippets/common/storybook-disable-telemetry-flag.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run storybook --disable-telemetry -``` diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx deleted file mode 100644 index c9e70448cefa..000000000000 --- a/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn storybook --disable-telemetry -``` diff --git a/docs/snippets/common/storybook-doctor.npm.js.mdx b/docs/snippets/common/storybook-doctor.npm.js.mdx deleted file mode 100644 index be4a25ea91b2..000000000000 --- a/docs/snippets/common/storybook-doctor.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@latest doctor -``` diff --git a/docs/snippets/common/storybook-doctor.pnpm.js.mdx b/docs/snippets/common/storybook-doctor.pnpm.js.mdx deleted file mode 100644 index 5db6170cc994..000000000000 --- a/docs/snippets/common/storybook-doctor.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest doctor -``` diff --git a/docs/snippets/common/storybook-doctor.yarn.js.mdx b/docs/snippets/common/storybook-doctor.yarn.js.mdx deleted file mode 100644 index 4561789bee6b..000000000000 --- a/docs/snippets/common/storybook-doctor.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@latest doctor -``` diff --git a/docs/snippets/common/storybook-extract-specific-version.npx.js.mdx b/docs/snippets/common/storybook-extract-specific-version.npx.js.mdx deleted file mode 100644 index 828643a532c0..000000000000 --- a/docs/snippets/common/storybook-extract-specific-version.npx.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@7.5.3 extract -``` diff --git a/docs/snippets/common/storybook-extract-specific-version.pnpm.js.mdx b/docs/snippets/common/storybook-extract-specific-version.pnpm.js.mdx deleted file mode 100644 index 55b882441147..000000000000 --- a/docs/snippets/common/storybook-extract-specific-version.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@7.5.3 extract -``` diff --git a/docs/snippets/common/storybook-extract-specific-version.yarn.js.mdx b/docs/snippets/common/storybook-extract-specific-version.yarn.js.mdx deleted file mode 100644 index b821fcd2357a..000000000000 --- a/docs/snippets/common/storybook-extract-specific-version.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@7.5.3 extract -``` diff --git a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx deleted file mode 100644 index 8b4450fcfbeb..000000000000 --- a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/addon-designs -``` diff --git a/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx deleted file mode 100644 index 84611d606fb0..000000000000 --- a/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/addon-designs -``` diff --git a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx deleted file mode 100644 index 188862d539f0..000000000000 --- a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/addon-designs -``` diff --git a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.js.mdx b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.js.mdx deleted file mode 100644 index 05a2e7581f8e..000000000000 --- a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -// ❌ Don't use the package's index file to import the component. -import { MyComponent } from '@component-package'; - -// ✅ Use the component's export to import it directly. -import { MyComponent } from '@component-package/src/MyComponent'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'MyComponent', - component: MyComponent, -}; -``` diff --git a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts-4-9.mdx b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts-4-9.mdx deleted file mode 100644 index 61d61fc048a3..000000000000 --- a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta } from '@storybook/your-framework'; - -// ❌ Don't use the package's index file to import the component. -import { MyComponent } from '@component-package'; - -// ✅ Use the component's export to import it directly. -import { MyComponent } from '@component-package/src/MyComponent'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'MyComponent', - component: MyComponent, -} satisfies Meta; - -export default meta; -``` diff --git a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts.mdx b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts.mdx deleted file mode 100644 index 8354f893ae6d..000000000000 --- a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta } from '@storybook/your-framework'; - -// ❌ Don't use the package's index file to import the component. -import { MyComponent } from '@component-package'; - -// ✅ Use the component's export to import it directly. -import { MyComponent } from '@component-package/src/MyComponent'; - -const meta: Meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'MyComponent', - component: MyComponent, -}; - -export default meta; -``` diff --git a/docs/snippets/common/storybook-framework-render-function.js.mdx b/docs/snippets/common/storybook-framework-render-function.js.mdx deleted file mode 100644 index 980e46be94ee..000000000000 --- a/docs/snippets/common/storybook-framework-render-function.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// your-framework/src/client/preview/render.ts - -const rootElement = document.getElementById('root'); - -export default function renderMain({ storyFn }: RenderMainArgs) { - const storyObj = storyFn(); - const html = fn(storyObj); - rootElement.innerHTML = html; -} -``` diff --git a/docs/snippets/common/storybook-generated-argtypes.js.mdx b/docs/snippets/common/storybook-generated-argtypes.js.mdx deleted file mode 100644 index 15a1f2054e5c..000000000000 --- a/docs/snippets/common/storybook-generated-argtypes.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -const argTypes = { - label: { - name: 'label', - type: { name: 'string', required: false }, - defaultValue: 'Hello', - description: 'demo description', - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'Hello' }, - }, - control: { - type: 'text', - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-init-v7.npx.js.mdx b/docs/snippets/common/storybook-init-v7.npx.js.mdx deleted file mode 100644 index 33a0a5b19737..000000000000 --- a/docs/snippets/common/storybook-init-v7.npx.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@^7 init -``` diff --git a/docs/snippets/common/storybook-init-v7.pnpm.js.mdx b/docs/snippets/common/storybook-init-v7.pnpm.js.mdx deleted file mode 100644 index 19ae54c8d049..000000000000 --- a/docs/snippets/common/storybook-init-v7.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@^7 init -``` diff --git a/docs/snippets/common/storybook-init-v7.yarn.js.mdx b/docs/snippets/common/storybook-init-v7.yarn.js.mdx deleted file mode 100644 index 8001609fe3ca..000000000000 --- a/docs/snippets/common/storybook-init-v7.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@^7 init -``` diff --git a/docs/snippets/common/storybook-interactions-addon-registration.js.mdx b/docs/snippets/common/storybook-interactions-addon-registration.js.mdx deleted file mode 100644 index cec3e7796484..000000000000 --- a/docs/snippets/common/storybook-interactions-addon-registration.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - // Other Storybook addons - '@storybook/addon-interactions', // 👈 Register the addon - ], -}; -``` diff --git a/docs/snippets/common/storybook-interactions-addon-registration.ts.mdx b/docs/snippets/common/storybook-interactions-addon-registration.ts.mdx deleted file mode 100644 index 25a5d322873e..000000000000 --- a/docs/snippets/common/storybook-interactions-addon-registration.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - // Other Storybook addons - '@storybook/addon-interactions', // 👈 Register the addon - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-interactions-play-function.js.mdx b/docs/snippets/common/storybook-interactions-play-function.js.mdx deleted file mode 100644 index f361017bc992..000000000000 --- a/docs/snippets/common/storybook-interactions-play-function.js.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```js -// Form.stories.js|jsx - -import { userEvent, waitFor, within, expect, fn } from '@storybook/test'; - -import { Form } from './Form'; - -export default { - component: Form, - args: { - // 👇 Use `fn` to spy on the onSubmit arg - onSubmit: fn(), - }, -}; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted = { - play: async ({ args, canvasElement, step }) => { - // Starts querying the component from its root element - const canvas = within(canvasElement); - - await step('Enter credentials', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - - // 👇 Now we can assert that the onSubmit arg was called - await waitFor(() => expect(args.onSubmit).toHaveBeenCalled()); - }, -}; -``` diff --git a/docs/snippets/common/storybook-interactions-play-function.ts-4-9.mdx b/docs/snippets/common/storybook-interactions-play-function.ts-4-9.mdx deleted file mode 100644 index a3049100d569..000000000000 --- a/docs/snippets/common/storybook-interactions-play-function.ts-4-9.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```ts -// Form.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { userEvent, waitFor, within, expect, fn } from '@storybook/test'; - -import { Form } from './Form'; - -const meta = { - component: Form, - args: { - // 👇 Use `fn` to spy on the onSubmit arg - onSubmit: fn(), - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted: Story = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter credentials', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - - // 👇 Now we can assert that the onSubmit arg was called - await waitFor(() => expect(args.onSubmit).toHaveBeenCalled()); - }, -}; -``` diff --git a/docs/snippets/common/storybook-interactions-play-function.ts.mdx b/docs/snippets/common/storybook-interactions-play-function.ts.mdx deleted file mode 100644 index bb5aca654e6d..000000000000 --- a/docs/snippets/common/storybook-interactions-play-function.ts.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```ts -// Form.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { userEvent, waitFor, within, expect, fn } from '@storybook/test'; - -import { Form } from './Form'; - -const meta: Meta = { - component: Form, - args: { - // 👇 Use `fn` to spy on the onSubmit arg - onSubmit: fn(), - }, -}; - -export default meta; -type Story = StoryObj; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted: Story = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter credentials', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - - // 👇 Now we can assert that the onSubmit arg was called - await waitFor(() => expect(args.onSubmit).toHaveBeenCalled()); - }, -}; -``` diff --git a/docs/snippets/common/storybook-interactions-step-function.js.mdx b/docs/snippets/common/storybook-interactions-step-function.js.mdx deleted file mode 100644 index 1d2ab56d23f0..000000000000 --- a/docs/snippets/common/storybook-interactions-step-function.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { userEvent, within } from '@storybook/test'; - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter email and password', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - }, -}; -``` diff --git a/docs/snippets/common/storybook-interactions-step-function.ts-4-9.mdx b/docs/snippets/common/storybook-interactions-step-function.ts-4-9.mdx deleted file mode 100644 index 115b6169c53d..000000000000 --- a/docs/snippets/common/storybook-interactions-step-function.ts-4-9.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// MyComponent.stories.ts - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { userEvent, within } from '@storybook/test'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted: Story = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter email and password', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - }, -}; -``` diff --git a/docs/snippets/common/storybook-interactions-step-function.ts.mdx b/docs/snippets/common/storybook-interactions-step-function.ts.mdx deleted file mode 100644 index 3540c7aedaa2..000000000000 --- a/docs/snippets/common/storybook-interactions-step-function.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// MyComponent.stories.ts - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { userEvent, within } from '@storybook/test'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted: Story = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter email and password', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-advanced-config-example.js.mdx b/docs/snippets/common/storybook-main-advanced-config-example.js.mdx deleted file mode 100644 index 375ac6f6e7dc..000000000000 --- a/docs/snippets/common/storybook-main-advanced-config-example.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// .storybook/main.js - -export default { - viteFinal: async (config, options) => { - // Update config here - return config; - }, - webpackFinal: async (config, options) => { - // Change webpack config - return config; - }, - babel: async (config, options) => { - return config; - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-advanced-config-example.ts.mdx b/docs/snippets/common/storybook-main-advanced-config-example.ts.mdx deleted file mode 100644 index a18f54d7178b..000000000000 --- a/docs/snippets/common/storybook-main-advanced-config-example.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - viteFinal: async (config, options) => { - // Update config here - return config; - }, - webpackFinal: async (config, options) => { - // Change webpack config - return config; - }, - babel: async (config, options) => { - return config; - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx deleted file mode 100644 index b60850e5ab00..000000000000 --- a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: [ - { - directory: '../src', - titlePrefix: 'Custom', // 👈 Configure the title prefix - }, - ], -}; -``` diff --git a/docs/snippets/common/storybook-main-auto-title-custom.ts.mdx b/docs/snippets/common/storybook-main-auto-title-custom.ts.mdx deleted file mode 100644 index 63fa32d33149..000000000000 --- a/docs/snippets/common/storybook-main-auto-title-custom.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: [ - { - directory: '../src', - titlePrefix: 'Custom', // 👈 Configure the title prefix - }, - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-config-remark-options.js.mdx b/docs/snippets/common/storybook-main-config-remark-options.js.mdx deleted file mode 100644 index f8cf30c06a14..000000000000 --- a/docs/snippets/common/storybook-main-config-remark-options.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// .storybook/main.js - -import remarkGfm from 'remark-gfm'; - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - // Other addons go here - { - name: '@storybook/addon-docs', - options: { - mdxPluginOptions: { - mdxCompileOptions: { - remarkPlugins: [remarkGfm], - }, - }, - }, - }, - ], -}; -``` diff --git a/docs/snippets/common/storybook-main-config-remark-options.ts.mdx b/docs/snippets/common/storybook-main-config-remark-options.ts.mdx deleted file mode 100644 index 00dba480a139..000000000000 --- a/docs/snippets/common/storybook-main-config-remark-options.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// .storybook/main.ts - -import remarkGfm from 'remark-gfm'; - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - // Other addons go here - { - name: '@storybook/addon-docs', - options: { - mdxPluginOptions: { - mdxCompileOptions: { - remarkPlugins: [remarkGfm], - }, - }, - }, - }, - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx deleted file mode 100644 index 408623d70a69..000000000000 --- a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// ./storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src'], -}; -``` diff --git a/docs/snippets/common/storybook-main-configuration-src-dir.main-ts.ts.mdx b/docs/snippets/common/storybook-main-configuration-src-dir.main-ts.ts.mdx deleted file mode 100644 index 32018a354594..000000000000 --- a/docs/snippets/common/storybook-main-configuration-src-dir.main-ts.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src'], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-disable-addon.js.mdx b/docs/snippets/common/storybook-main-disable-addon.js.mdx deleted file mode 100644 index 4940a5b604da..000000000000 --- a/docs/snippets/common/storybook-main-disable-addon.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - { - name: '@storybook/addon-essentials', - options: { - backgrounds: false, // 👈 disable the backgrounds addon - }, - }, - ], -}; -``` diff --git a/docs/snippets/common/storybook-main-disable-addon.ts.mdx b/docs/snippets/common/storybook-main-disable-addon.ts.mdx deleted file mode 100644 index 16b51553b473..000000000000 --- a/docs/snippets/common/storybook-main-disable-addon.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - { - name: '@storybook/addon-essentials', - options: { - backgrounds: false, // 👈 disable the backgrounds addon - }, - }, - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx deleted file mode 100644 index 88304ed3dbbc..000000000000 --- a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - core: { - disableTelemetry: true, // 👈 Disables telemetry - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx deleted file mode 100644 index c155d3a0142d..000000000000 --- a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - core: { - disableTelemetry: true, // 👈 Disables telemetry - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx b/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx deleted file mode 100644 index 7884f8a4724a..000000000000 --- a/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - check: false, - checkOptions: {}, - skipCompiler: false, - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx deleted file mode 100644 index 9550e34d64dc..000000000000 --- a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/main.js - -export default { - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - // Other Storybook addons - '@storybook/addon-designs', // 👈 Addon is registered here - ], -}; -``` diff --git a/docs/snippets/common/storybook-main-figma-addon-register.ts.mdx b/docs/snippets/common/storybook-main-figma-addon-register.ts.mdx deleted file mode 100644 index be1188d84598..000000000000 --- a/docs/snippets/common/storybook-main-figma-addon-register.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - // Other Storybook addons - '@storybook/addon-designs', // 👈 Addon is registered here - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx deleted file mode 100644 index 02b1a55356a7..000000000000 --- a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs. - reactDocgen: 'react-docgen', - check: false, - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx deleted file mode 100644 index 775d8341be77..000000000000 --- a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs. - reactDocgen: 'react-docgen', - check: false, - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx deleted file mode 100644 index 0c11bf383b6f..000000000000 --- a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-actions', - '@storybook/addon-viewport', - { - name: '@storybook/addon-docs', - options: { - csfPluginOptions: null, - mdxPluginOptions: { - mdxCompileOptions: { - remarkPlugins: [], - }, - }, - }, - }, - '@storybook/addon-controls', - '@storybook/addon-backgrounds', - '@storybook/addon-toolbars', - '@storybook/addon-measure', - '@storybook/addon-outline', - ], -}; -``` diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx deleted file mode 100644 index 5ddd5f067d6b..000000000000 --- a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-actions', - '@storybook/addon-viewport', - { - name: '@storybook/addon-docs', - options: { - csfPluginOptions: null, - mdxPluginOptions: { - mdxCompileOptions: { - remarkPlugins: [], - }, - }, - }, - }, - '@storybook/addon-controls', - '@storybook/addon-backgrounds', - '@storybook/addon-toolbars', - '@storybook/addon-measure', - '@storybook/addon-outline', - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-js-md-files.js.mdx b/docs/snippets/common/storybook-main-js-md-files.js.mdx deleted file mode 100644 index 259ae63b8712..000000000000 --- a/docs/snippets/common/storybook-main-js-md-files.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../my-project/src/components/*.@(js|md)'], -}; -``` diff --git a/docs/snippets/common/storybook-main-js-md-files.ts.mdx b/docs/snippets/common/storybook-main-js-md-files.ts.mdx deleted file mode 100644 index 0be00e3e0583..000000000000 --- a/docs/snippets/common/storybook-main-js-md-files.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../my-project/src/components/*.@(js|md)'], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx deleted file mode 100644 index 4ffa05ad3ff6..000000000000 --- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// .storybook/main.js - -import path from 'path'; - -const getAbsolutePath = (packageName) => - path.dirname(require.resolve(path.join(packageName, 'package.json'))); - -export default { - framework: { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - name: getAbsolutePath('@storybook/your-framework'), - options: {}, - }, - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - //👇 Use getAbsolutePath when referencing Storybook's addons and frameworks - getAbsolutePath('@storybook/addon-essentials'), - ], -}; -``` diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx deleted file mode 100644 index a7e750975b3d..000000000000 --- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -import path from 'path'; - -const getAbsolutePath = (packageName: string): any => - path.dirname(require.resolve(path.join(packageName, 'package.json'))); - -const config: StorybookConfig = { - framework: { - // Replace your-framework with the same one you've imported above. - name: getAbsolutePath('@storybook/your-framework'), - options: {}, - }, - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: [ - //👇 Use getAbsolutePath when referencing Storybook's addons and frameworks - getAbsolutePath('@storybook/addon-essentials'), - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-preview-head.js.mdx b/docs/snippets/common/storybook-main-preview-head.js.mdx deleted file mode 100644 index 481694046a1c..000000000000 --- a/docs/snippets/common/storybook-main-preview-head.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/main.js - -export default { - previewHead: (head) => (` - ${head} - - `); -}; -``` diff --git a/docs/snippets/common/storybook-main-ref-local.js.mdx b/docs/snippets/common/storybook-main-ref-local.js.mdx deleted file mode 100644 index 6cb230e0d9fe..000000000000 --- a/docs/snippets/common/storybook-main-ref-local.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - refs: { - react: { - title: 'React', - url: 'http://localhost:7007', - }, - angular: { - title: 'Angular', - url: 'http://localhost:7008', - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-ref-local.ts.mdx b/docs/snippets/common/storybook-main-ref-local.ts.mdx deleted file mode 100644 index 561050b14aa5..000000000000 --- a/docs/snippets/common/storybook-main-ref-local.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - refs: { - react: { - title: 'React', - url: 'http://localhost:7007', - }, - angular: { - title: 'Angular', - url: 'http://localhost:7008', - }, - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-register-addon.js.mdx b/docs/snippets/common/storybook-main-register-addon.js.mdx deleted file mode 100644 index 573ccd826920..000000000000 --- a/docs/snippets/common/storybook-main-register-addon.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/main.js - -export default { - addons: ['path/to/manager.js'], -}; -``` diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx deleted file mode 100644 index ee4ecfbd706c..000000000000 --- a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/main.js - -export default { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials -}; -``` diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx deleted file mode 100644 index 88f505b62b7b..000000000000 --- a/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-register-example-addon.js.mdx b/docs/snippets/common/storybook-main-register-example-addon.js.mdx deleted file mode 100644 index 825e02ecd719..000000000000 --- a/docs/snippets/common/storybook-main-register-example-addon.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// .storybook/main.js - -export default { - addons: [ - // Other Storybook addons - '@storybook/addon-a11y', - ], -}; -``` diff --git a/docs/snippets/common/storybook-main-register-example-addon.ts.mdx b/docs/snippets/common/storybook-main-register-example-addon.ts.mdx deleted file mode 100644 index d81ba1231da3..000000000000 --- a/docs/snippets/common/storybook-main-register-example-addon.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - addons: [ - // Other Storybook addons - '@storybook/addon-a11y', - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx b/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx deleted file mode 100644 index 7a84d97d9606..000000000000 --- a/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-actions'], -}; -``` diff --git a/docs/snippets/common/storybook-main-register-individual-actions-addon.ts.mdx b/docs/snippets/common/storybook-main-register-individual-actions-addon.ts.mdx deleted file mode 100644 index f2ca23b47431..000000000000 --- a/docs/snippets/common/storybook-main-register-individual-actions-addon.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-actions'], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx deleted file mode 100644 index d9c06d745d56..000000000000 --- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/main.js - -export default { - addons: [ - '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon. - ], -}; -``` diff --git a/docs/snippets/common/storybook-main-simplified-config.js.mdx b/docs/snippets/common/storybook-main-simplified-config.js.mdx deleted file mode 100644 index 4e10ee8faaf3..000000000000 --- a/docs/snippets/common/storybook-main-simplified-config.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - webpackFinal: async (config) => { - config.plugins.push(...); - return config; - }, -} -``` diff --git a/docs/snippets/common/storybook-main-simplified-config.ts.mdx b/docs/snippets/common/storybook-main-simplified-config.ts.mdx deleted file mode 100644 index 8fe2fee95565..000000000000 --- a/docs/snippets/common/storybook-main-simplified-config.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - webpackFinal: async (config) => { - config.plugins.push(...); - return config; - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx deleted file mode 100644 index f939a55bc21b..000000000000 --- a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// .storybook/main.js -import path from 'path'; - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - webpackFinal: async (config) => { - if (config.resolve) { - config.resolve.alias = { - ...config.resolve.alias, - '@': path.resolve(__dirname, '../src'), - }; - } - return config; - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx deleted file mode 100644 index 4aaff2dec353..000000000000 --- a/docs/snippets/common/storybook-main-ts-module-resolution-atsign-import.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// .storybook/main.ts -import path from 'path'; -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - webpackFinal: async (config) => { - if (config.resolve) { - config.resolve.alias = { - ...config.resolve.alias, - '@': path.resolve(__dirname, '../src'), - }; - } - return config; - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx deleted file mode 100644 index dea7293b4f81..000000000000 --- a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// .storybook/main.js - -import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - webpackFinal: async (config) => { - if (config.resolve) { - config.resolve.plugins = [ - ...(config.resolve.plugins || []), - new TsconfigPathsPlugin({ - extensions: config.resolve.extensions, - }), - ]; - } - return config; - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx deleted file mode 100644 index ab865ed2fcdb..000000000000 --- a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - webpackFinal: async (config) => { - if (config.resolve) { - config.resolve.plugins = [ - ...(config.resolve.plugins || []), - new TsconfigPathsPlugin({ - extensions: config.resolve.extensions, - }), - ]; - } - return config; - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx deleted file mode 100644 index 207d9f08cd05..000000000000 --- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/main.js - -export default { - managerEntries: ['some-storybook-addon/entry-point.js'], -}; -``` diff --git a/docs/snippets/common/storybook-main-using-existing-config.js.mdx b/docs/snippets/common/storybook-main-using-existing-config.js.mdx deleted file mode 100644 index f2b5b4a659ea..000000000000 --- a/docs/snippets/common/storybook-main-using-existing-config.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// .storybook/main.js - -import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported. - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - webpackFinal: async (config) => { - return { - ...config, - module: { ...config.module, rules: [...config.module.rules, ...custom.module.rules] }, - }; - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-using-existing-config.ts.mdx b/docs/snippets/common/storybook-main-using-existing-config.ts.mdx deleted file mode 100644 index fcd34d2ab296..000000000000 --- a/docs/snippets/common/storybook-main-using-existing-config.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration being imported. - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - webpackFinal: async (config) => { - return { - ...config, - module: { ...config.module, rules: [...config.module.rules, ...custom.module.rules] }, - }; - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-versioned-webpack.js.mdx b/docs/snippets/common/storybook-main-versioned-webpack.js.mdx deleted file mode 100644 index 5de97b1343e1..000000000000 --- a/docs/snippets/common/storybook-main-versioned-webpack.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/main.js - -export function webpackFinal(config, { presets }) { - const version = await presets.apply('webpackVersion'); - const instance = (await presets.apply('webpackInstance'))?.default; - - logger.info(`=> Running in webpack ${version}: ${instance}`); - return config; -} -``` diff --git a/docs/snippets/common/storybook-main-webpack-options.js.mdx b/docs/snippets/common/storybook-main-webpack-options.js.mdx deleted file mode 100644 index 2f51daba2e36..000000000000 --- a/docs/snippets/common/storybook-main-webpack-options.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - core: { - builder: { - name: '@storybook/builder-webpack5', - options: { - fsCache: true, - lazyCompilation: true, - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-webpack-options.ts.mdx b/docs/snippets/common/storybook-main-webpack-options.ts.mdx deleted file mode 100644 index 74431ff33453..000000000000 --- a/docs/snippets/common/storybook-main-webpack-options.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - core: { - builder: { - name: '@storybook/builder-webpack5', - options: { - fsCache: true, - lazyCompilation: true, - }, - }, - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx b/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx deleted file mode 100644 index abaf008c02a0..000000000000 --- a/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// .storybook/main.js - -export async function webpack(baseConfig, options) { - // Modify or replace config. - // Mutating the original reference object can cause unexpected bugs, - // so in this example we replace. - const { module = {} } = baseConfig; - - return { - ...baseConfig, - module: { - ...module, - rules: [ - ...(module.rules || []), - { - /* some new loader */ - }, - ], - }, - }; -} -``` diff --git a/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx deleted file mode 100644 index b2c443796797..000000000000 --- a/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/main.js - -export default { - core: { - builder: { - name: 'webpack5', - options: { - fsCache: true, - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx b/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx deleted file mode 100644 index b20fbf2264f7..000000000000 --- a/docs/snippets/common/storybook-main-webpack5-lazyCompilation.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/main.js - -export default { - core: { - builder: { - name: 'webpack5', - options: { - lazyCompilation: true, - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-webpack5.js.mdx b/docs/snippets/common/storybook-main-webpack5.js.mdx deleted file mode 100644 index 25a1ed70e7bf..000000000000 --- a/docs/snippets/common/storybook-main-webpack5.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/main.js - -export default { - core: { - builder: '@storybook/builder-webpack5', - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx b/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx deleted file mode 100644 index 4d940deb84c6..000000000000 --- a/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/main.js - -export function webpackFinal(config, { configDir }) { - if (!isReactScriptsInstalled()) { - logger.info('=> Using base config because react-scripts is not installed.'); - return config; - } - - logger.info('=> Loading create-react-app config.'); - return applyCRAWebpackConfig(config, configDir); -} -``` diff --git a/docs/snippets/common/storybook-manager-custom-theme.js.mdx b/docs/snippets/common/storybook-manager-custom-theme.js.mdx deleted file mode 100644 index f1c8ba7fad4d..000000000000 --- a/docs/snippets/common/storybook-manager-custom-theme.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// .storybook/manager.js - -import { addons } from '@storybook/manager-api'; -import yourTheme from './YourTheme'; - -addons.setConfig({ - theme: yourTheme, -}); -``` diff --git a/docs/snippets/common/storybook-manager-dark-theme.js.mdx b/docs/snippets/common/storybook-manager-dark-theme.js.mdx deleted file mode 100644 index b7667afc4444..000000000000 --- a/docs/snippets/common/storybook-manager-dark-theme.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// .storybook/manager.js - -import { addons } from '@storybook/manager-api'; -import { themes } from '@storybook/theming'; - -addons.setConfig({ - theme: themes.dark, -}); -``` diff --git a/docs/snippets/common/storybook-manager-disable-roots.js.mdx b/docs/snippets/common/storybook-manager-disable-roots.js.mdx deleted file mode 100644 index 2ad4a99a4490..000000000000 --- a/docs/snippets/common/storybook-manager-disable-roots.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// ./storybook/manager.js - -import { addons } from '@storybook/manager-api'; - -addons.setConfig({ - sidebar: { - showRoots: false, - }, -}); -``` diff --git a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx deleted file mode 100644 index b5ea56ba10af..000000000000 --- a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/manager.js - -import { addons } from '@storybook/manager-api'; - -import startCase from 'lodash/startCase.js'; - -addons.setConfig({ - sidebar: { - renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)), - }, -}); -``` diff --git a/docs/snippets/common/storybook-mdx-template-with-prop.mdx.mdx b/docs/snippets/common/storybook-mdx-template-with-prop.mdx.mdx deleted file mode 100644 index d4cf4b108780..000000000000 --- a/docs/snippets/common/storybook-mdx-template-with-prop.mdx.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```mdx -{/* DocumentationTemplate.mdx */} - -import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks'; - -{/* - * 👇 The isTemplate property is required to tell Storybook that this is a template - * See https://storybook.js.org/docs/api/doc-block-meta - * to learn how to use -*/} - - - - - -# Default implementation - -<Primary /> - -## Inputs - -The component accepts the following inputs (props): - -<Controls /> - ---- - -## Additional variations - -Listed below are additional variations of the component. - -<Stories /> - -``` diff --git a/docs/snippets/common/storybook-merged-argtypes.js.mdx b/docs/snippets/common/storybook-merged-argtypes.js.mdx deleted file mode 100644 index a3927647152f..000000000000 --- a/docs/snippets/common/storybook-merged-argtypes.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -const argTypes = { - label: { - name: 'label', - type: { name: 'string', required: false }, - defaultValue: 'Hello', - description: 'overwritten description', - table: { - type: { - summary: 'something short', - detail: 'something really really long', - }, - defaultValue: { summary: 'Hello' }, - }, - control: { - type: null, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-migrate-csf-2-to-3.npm.js.mdx b/docs/snippets/common/storybook-migrate-csf-2-to-3.npm.js.mdx deleted file mode 100644 index 4230622bf322..000000000000 --- a/docs/snippets/common/storybook-migrate-csf-2-to-3.npm.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```sh -# Convert CSF 2 to CSF 3 -npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx -``` diff --git a/docs/snippets/common/storybook-migrate-csf-2-to-3.pnpm.js.mdx b/docs/snippets/common/storybook-migrate-csf-2-to-3.pnpm.js.mdx deleted file mode 100644 index ce067877f99f..000000000000 --- a/docs/snippets/common/storybook-migrate-csf-2-to-3.pnpm.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```sh -# Convert CSF 2 to CSF 3 -pnpm dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx -``` diff --git a/docs/snippets/common/storybook-migrate-csf-2-to-3.yarn.js.mdx b/docs/snippets/common/storybook-migrate-csf-2-to-3.yarn.js.mdx deleted file mode 100644 index b38ff0b53c4f..000000000000 --- a/docs/snippets/common/storybook-migrate-csf-2-to-3.yarn.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```sh -# Convert CSF 2 to CSF 3 -yarn dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx -``` diff --git a/docs/snippets/common/storybook-migrate-mdx-to-csf.npm.js.mdx b/docs/snippets/common/storybook-migrate-mdx-to-csf.npm.js.mdx deleted file mode 100644 index 1058c451d943..000000000000 --- a/docs/snippets/common/storybook-migrate-mdx-to-csf.npm.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```shell -# Convert stories in MDX to CSF -npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx" -``` diff --git a/docs/snippets/common/storybook-migrate-mdx-to-csf.pnpm.js.mdx b/docs/snippets/common/storybook-migrate-mdx-to-csf.pnpm.js.mdx deleted file mode 100644 index 21b956b0fd2a..000000000000 --- a/docs/snippets/common/storybook-migrate-mdx-to-csf.pnpm.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```sh -# Convert stories in MDX to CSF -pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx" -``` diff --git a/docs/snippets/common/storybook-migrate-mdx-to-csf.yarn.js.mdx b/docs/snippets/common/storybook-migrate-mdx-to-csf.yarn.js.mdx deleted file mode 100644 index 93dca5ba3158..000000000000 --- a/docs/snippets/common/storybook-migrate-mdx-to-csf.yarn.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```sh -# Convert stories in MDX to CSF -yarn dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx" -``` diff --git a/docs/snippets/common/storybook-migrate-stories-of-to-csf.npm.js.mdx b/docs/snippets/common/storybook-migrate-stories-of-to-csf.npm.js.mdx deleted file mode 100644 index 2dc6519eab1e..000000000000 --- a/docs/snippets/common/storybook-migrate-stories-of-to-csf.npm.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```sh -# Convert storiesOf to CSF 1 -npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx -``` diff --git a/docs/snippets/common/storybook-migrate-stories-of-to-csf.pnpm.js.mdx b/docs/snippets/common/storybook-migrate-stories-of-to-csf.pnpm.js.mdx deleted file mode 100644 index 67b7aab64a03..000000000000 --- a/docs/snippets/common/storybook-migrate-stories-of-to-csf.pnpm.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```sh -# Convert storiesOf to CSF 1 -pnpm dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx -``` diff --git a/docs/snippets/common/storybook-migrate-stories-of-to-csf.yarn.js.mdx b/docs/snippets/common/storybook-migrate-stories-of-to-csf.yarn.js.mdx deleted file mode 100644 index 29da3a384fa7..000000000000 --- a/docs/snippets/common/storybook-migrate-stories-of-to-csf.yarn.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```sh -# Convert storiesOf to CSF 1 -yarn dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx -``` diff --git a/docs/snippets/common/storybook-preset-full-config-object.js.mdx b/docs/snippets/common/storybook-preset-full-config-object.js.mdx deleted file mode 100644 index ffb4bd523d51..000000000000 --- a/docs/snippets/common/storybook-preset-full-config-object.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// .storybook/my-preset.js - -export default { - managerWebpack: async (config, options) => { - // Update config here - return config; - }, - webpackFinal: async (config, options) => { - return config; - }, - babel: async (config, options) => { - return config; - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-custom-docs-container.js.mdx b/docs/snippets/common/storybook-preview-auto-docs-custom-docs-container.js.mdx deleted file mode 100644 index d9994555b9bd..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-custom-docs-container.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// .storybook/preview.js - -import * as React from 'react'; - -import { DocsContainer } from '@storybook/blocks'; - -const ExampleContainer = ({ children, ...props }) => { - return <DocsContainer {...props}>{children}</DocsContainer>; -}; - -export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - container: ExampleContainer, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-custom-docs-container.ts.mdx b/docs/snippets/common/storybook-preview-auto-docs-custom-docs-container.ts.mdx deleted file mode 100644 index 0e9cafc0b5b0..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-custom-docs-container.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// .storybook/preview.ts - -import * as React from 'react'; - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { DocsContainer } from '@storybook/blocks'; - -const ExampleContainer = ({ children, ...props }) => { - return <DocsContainer {...props}>{children}</DocsContainer>; -}; - -const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - container: ExampleContainer, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-custom-mdx-template.js.mdx b/docs/snippets/common/storybook-preview-auto-docs-custom-mdx-template.js.mdx deleted file mode 100644 index 1fa06bba1a59..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-custom-mdx-template.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```jsx -// .storybook/preview.jsx - -import DocumentationTemplate from './DocumentationTemplate.mdx'; - -export default { - parameters: { - docs: { - page: DocumentationTemplate, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-custom-template-function.js.mdx b/docs/snippets/common/storybook-preview-auto-docs-custom-template-function.js.mdx deleted file mode 100644 index a6d6bdabe757..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-custom-template-function.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```jsx -// .storybook/preview.jsx - -import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks'; - -export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - page: () => ( - <> - <Title /> - <Subtitle /> - <Description /> - <Primary /> - <Controls /> - <Stories /> - </> - ), - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-custom-template-function.ts.mdx b/docs/snippets/common/storybook-preview-auto-docs-custom-template-function.ts.mdx deleted file mode 100644 index 266f5d817a58..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-custom-template-function.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// .storybook/preview.tsx - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks'; - -const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - page: () => ( - <> - <Title /> - <Subtitle /> - <Description /> - <Primary /> - <Controls /> - <Stories /> - </> - ), - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-override-mdx-container.js.mdx b/docs/snippets/common/storybook-preview-auto-docs-override-mdx-container.js.mdx deleted file mode 100644 index 4e7d17405e26..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-override-mdx-container.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```js -// .storybook/preview.js - -import { MDXProvider } from '@mdx-js/react'; - -import { DocsContainer } from '@storybook/blocks'; - -import * as DesignSystem from 'your-design-system'; - -export const MyDocsContainer = (props) => ( - <MDXProvider - components={{ - h1: DesignSystem.H1, - h2: DesignSystem.H2, - }} - > - <DocsContainer {...props} /> - </MDXProvider> -); - -export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - container: MyDocsContainer, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-override-mdx-container.ts.mdx b/docs/snippets/common/storybook-preview-auto-docs-override-mdx-container.ts.mdx deleted file mode 100644 index 3104f8ec496a..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-override-mdx-container.ts.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { MDXProvider } from '@mdx-js/react'; - -import { DocsContainer } from '@storybook/blocks'; - -import * as DesignSystem from 'your-design-system'; - -export const MyDocsContainer = (props) => ( - <MDXProvider - components={{ - h1: DesignSystem.H1, - h2: DesignSystem.H2, - }} - > - <DocsContainer {...props} /> - </MDXProvider> -); - -const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - container: MyDocsContainer, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-override-theme.js.mdx b/docs/snippets/common/storybook-preview-auto-docs-override-theme.js.mdx deleted file mode 100644 index b83c8a74e140..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-override-theme.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// .storybook/preview.js - -import { themes, ensure } from '@storybook/theming'; - -export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - theme: ensure(themes.dark), // The replacement theme to use - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-auto-docs-override-theme.ts.mdx b/docs/snippets/common/storybook-preview-auto-docs-override-theme.ts.mdx deleted file mode 100644 index f96caa22d4cd..000000000000 --- a/docs/snippets/common/storybook-preview-auto-docs-override-theme.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { themes, ensure } from '@storybook/theming'; - -const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { - theme: ensure(themes.dark), // The replacement theme to use - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-body-example.html.mdx b/docs/snippets/common/storybook-preview-body-example.html.mdx deleted file mode 100644 index 4f79639f44f8..000000000000 --- a/docs/snippets/common/storybook-preview-body-example.html.mdx +++ /dev/null @@ -1,5 +0,0 @@ -```html -{/* .storybook/preview-body.html */} - -<div id="custom-root"></div> -``` diff --git a/docs/snippets/common/storybook-preview-body-font-size.html.mdx b/docs/snippets/common/storybook-preview-body-font-size.html.mdx deleted file mode 100644 index 3ed9a299519a..000000000000 --- a/docs/snippets/common/storybook-preview-body-font-size.html.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```html -{/* .storybook/preview-body.html */} - -<style> - html { - font-size: 15px; - } -</style> -``` diff --git a/docs/snippets/common/storybook-preview-change-viewports.js.mdx b/docs/snippets/common/storybook-preview-change-viewports.js.mdx deleted file mode 100644 index a16a7f52bef9..000000000000 --- a/docs/snippets/common/storybook-preview-change-viewports.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - viewport: { - viewports: newViewports, // newViewports would be an ViewportMap. (see below for examples) - defaultViewport: 'someDefault', - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-change-viewports.ts.mdx b/docs/snippets/common/storybook-preview-change-viewports.ts.mdx deleted file mode 100644 index 27ae81b8f717..000000000000 --- a/docs/snippets/common/storybook-preview-change-viewports.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - viewport: { - viewports: newViewports, // newViewports would be an ViewportMap. (see below for examples) - defaultViewport: 'someDefault', - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx b/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx deleted file mode 100644 index 678b01cd64d8..000000000000 --- a/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - backgrounds: { - default: 'twitter', - values: [ - { - name: 'twitter', - value: '#00aced', - }, - { - name: 'facebook', - value: '#3b5998', - }, - ], - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-configure-background-colors.ts.mdx b/docs/snippets/common/storybook-preview-configure-background-colors.ts.mdx deleted file mode 100644 index 123f12ac1732..000000000000 --- a/docs/snippets/common/storybook-preview-configure-background-colors.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - backgrounds: { - default: 'twitter', - values: [ - { - name: 'twitter', - value: '#00aced', - }, - { - name: 'facebook', - value: '#3b5998', - }, - ], - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx deleted file mode 100644 index a17aca32981f..000000000000 --- a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// .storybook/preview.js - -const preview = { - globalTypes: { - theme: { - description: 'Global theme for components', - defaultValue: 'light', - toolbar: { - // The label to show for this toolbar item - title: 'Theme', - icon: 'circlehollow', - // Array of plain string values or MenuItem shape (see below) - items: ['light', 'dark'], - // Change title based on selected value - dynamicTitle: true, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-configure-globaltypes.ts-4-9.mdx b/docs/snippets/common/storybook-preview-configure-globaltypes.ts-4-9.mdx deleted file mode 100644 index 6ecce07c4599..000000000000 --- a/docs/snippets/common/storybook-preview-configure-globaltypes.ts-4-9.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - globalTypes: { - theme: { - description: 'Global theme for components', - defaultValue: 'light', - toolbar: { - // The label to show for this toolbar item - title: 'Theme', - icon: 'circlehollow', - // Array of plain string values or MenuItem shape (see below) - items: ['light', 'dark'], - // Change title based on selected value - dynamicTitle: true, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-configure-globaltypes.ts.mdx b/docs/snippets/common/storybook-preview-configure-globaltypes.ts.mdx deleted file mode 100644 index 6ecce07c4599..000000000000 --- a/docs/snippets/common/storybook-preview-configure-globaltypes.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - globalTypes: { - theme: { - description: 'Global theme for components', - defaultValue: 'light', - toolbar: { - // The label to show for this toolbar item - title: 'Theme', - icon: 'circlehollow', - // Array of plain string values or MenuItem shape (see below) - items: ['light', 'dark'], - // Change title based on selected value - dynamicTitle: true, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-custom-canvas.js.mdx b/docs/snippets/common/storybook-preview-custom-canvas.js.mdx deleted file mode 100644 index dfa6bf61b705..000000000000 --- a/docs/snippets/common/storybook-preview-custom-canvas.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// .storybook/preview.js - -import { MyCanvas } from './MyCanvas'; - -export default { - parameters: { - docs: { - components: { - Canvas: MyCanvas, - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-custom-canvas.ts.mdx b/docs/snippets/common/storybook-preview-custom-canvas.ts.mdx deleted file mode 100644 index 133310debf0e..000000000000 --- a/docs/snippets/common/storybook-preview-custom-canvas.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { MyCanvas } from './MyCanvas'; - -const preview: Preview = { - parameters: { - docs: { - components: { - Canvas: MyCanvas, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx b/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx deleted file mode 100644 index 25534f4ac632..000000000000 --- a/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// .storybook/preview.js - -import { CodeBlock } from './CodeBlock'; - -export default { - parameters: { - docs: { - components: { - code: CodeBlock, - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-custom-code-renderer.ts.mdx b/docs/snippets/common/storybook-preview-custom-code-renderer.ts.mdx deleted file mode 100644 index 0d7d3c96bc9d..000000000000 --- a/docs/snippets/common/storybook-preview-custom-code-renderer.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { CodeBlock } from './CodeBlock'; - -const preview: Preview = { - parameters: { - docs: { - components: { - code: CodeBlock, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-custom-params.js.mdx b/docs/snippets/common/storybook-preview-custom-params.js.mdx deleted file mode 100644 index 0e3cc3898516..000000000000 --- a/docs/snippets/common/storybook-preview-custom-params.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - backgrounds: { - values: [ - { name: 'red', value: '#f00' }, - { name: 'green', value: '#0f0' }, - ], - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-custom-params.ts.mdx b/docs/snippets/common/storybook-preview-custom-params.ts.mdx deleted file mode 100644 index ad8e18426b6c..000000000000 --- a/docs/snippets/common/storybook-preview-custom-params.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - backgrounds: { - values: [ - { name: 'red', value: '#f00' }, - { name: 'green', value: '#0f0' }, - ], - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-custom-toc.js.mdx b/docs/snippets/common/storybook-preview-custom-toc.js.mdx deleted file mode 100644 index 0d326085ae03..000000000000 --- a/docs/snippets/common/storybook-preview-custom-toc.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - docs: { - toc: { - contentsSelector: '.sbdocs-content', - headingSelector: 'h1, h2, h3', - ignoreSelector: '#primary', - title: 'Table of Contents', - disable: false, - unsafeTocbotOptions: { - orderedList: false, - }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-custom-toc.ts.mdx b/docs/snippets/common/storybook-preview-custom-toc.ts.mdx deleted file mode 100644 index 366447ac9772..000000000000 --- a/docs/snippets/common/storybook-preview-custom-toc.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - docs: { - toc: { - contentsSelector: '.sbdocs-content', - headingSelector: 'h1, h2, h3', - ignoreSelector: '#primary', - title: 'Table of Contents', - disable: false, - unsafeTocbotOptions: { - orderedList: false, - }, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-doc-blocks-controls-exclude-prop.js.mdx b/docs/snippets/common/storybook-preview-doc-blocks-controls-exclude-prop.js.mdx deleted file mode 100644 index c092c948e444..000000000000 --- a/docs/snippets/common/storybook-preview-doc-blocks-controls-exclude-prop.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - docs: { - controls: { exclude: ['style'] }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-doc-blocks-controls-exclude-prop.ts.mdx b/docs/snippets/common/storybook-preview-doc-blocks-controls-exclude-prop.ts.mdx deleted file mode 100644 index d5fd2e3aa29d..000000000000 --- a/docs/snippets/common/storybook-preview-doc-blocks-controls-exclude-prop.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - docs: { - controls: { exclude: ['style'] }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx b/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx deleted file mode 100644 index f8c3a6f5ae98..000000000000 --- a/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/preview.js - -import { themes } from '@storybook/theming'; - -export default { - parameters: { - docs: { - theme: themes.dark, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-docs-dark-theme.ts.mdx b/docs/snippets/common/storybook-preview-docs-dark-theme.ts.mdx deleted file mode 100644 index 38fcbad99dcb..000000000000 --- a/docs/snippets/common/storybook-preview-docs-dark-theme.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { themes } from '@storybook/theming'; - -const preview: Preview = { - parameters: { - docs: { - theme: themes.dark, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx b/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx deleted file mode 100644 index 2ca126267f65..000000000000 --- a/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - options: { - storySort: { - method: '', - order: [], - locales: '', - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-empty-sort-object.ts.mdx b/docs/snippets/common/storybook-preview-empty-sort-object.ts.mdx deleted file mode 100644 index 7c73a58d9ac9..000000000000 --- a/docs/snippets/common/storybook-preview-empty-sort-object.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - options: { - storySort: { - method: '', - order: [], - locales: '', - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-enable-toc.js.mdx b/docs/snippets/common/storybook-preview-enable-toc.js.mdx deleted file mode 100644 index 42b7a5a00d49..000000000000 --- a/docs/snippets/common/storybook-preview-enable-toc.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - docs: { - toc: true, // 👈 Enables the table of contents - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-enable-toc.ts.mdx b/docs/snippets/common/storybook-preview-enable-toc.ts.mdx deleted file mode 100644 index 83adea500cf5..000000000000 --- a/docs/snippets/common/storybook-preview-enable-toc.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - docs: { - toc: true, // 👈 Enables the table of contents - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-expanded-controls.js.mdx b/docs/snippets/common/storybook-preview-expanded-controls.js.mdx deleted file mode 100644 index b37dc06705e3..000000000000 --- a/docs/snippets/common/storybook-preview-expanded-controls.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - controls: { expanded: true }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-expanded-controls.ts.mdx b/docs/snippets/common/storybook-preview-expanded-controls.ts.mdx deleted file mode 100644 index b3ff227d9872..000000000000 --- a/docs/snippets/common/storybook-preview-expanded-controls.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - controls: { expanded: true }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx b/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx deleted file mode 100644 index 339d1bf8395c..000000000000 --- a/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -addonActionsTheme: { - ...chromeLight, - BASE_FONT_FAMILY: typography.fonts.mono, - BASE_BACKGROUND_COLOR: 'transparent', -} -``` diff --git a/docs/snippets/common/storybook-preview-global-loader.js.mdx b/docs/snippets/common/storybook-preview-global-loader.js.mdx deleted file mode 100644 index 278d81003d54..000000000000 --- a/docs/snippets/common/storybook-preview-global-loader.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/preview.js - -import fetch from 'node-fetch'; - -export default { - loaders: [ - async () => ({ - currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(), - }), - ], -}; -``` diff --git a/docs/snippets/common/storybook-preview-global-loader.ts.mdx b/docs/snippets/common/storybook-preview-global-loader.ts.mdx deleted file mode 100644 index dd926dbd9090..000000000000 --- a/docs/snippets/common/storybook-preview-global-loader.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - loaders: [ - async () => ({ - currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(), - }), - ], -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-global-parameters.js.mdx b/docs/snippets/common/storybook-preview-global-parameters.js.mdx deleted file mode 100644 index 0e3cc3898516..000000000000 --- a/docs/snippets/common/storybook-preview-global-parameters.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - backgrounds: { - values: [ - { name: 'red', value: '#f00' }, - { name: 'green', value: '#0f0' }, - ], - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-global-parameters.ts.mdx b/docs/snippets/common/storybook-preview-global-parameters.ts.mdx deleted file mode 100644 index ad8e18426b6c..000000000000 --- a/docs/snippets/common/storybook-preview-global-parameters.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - backgrounds: { - values: [ - { name: 'red', value: '#f00' }, - { name: 'green', value: '#0f0' }, - ], - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-granular-viewports.js.mdx b/docs/snippets/common/storybook-preview-granular-viewports.js.mdx deleted file mode 100644 index 21a22001661c..000000000000 --- a/docs/snippets/common/storybook-preview-granular-viewports.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// .storybook/preview.js - -import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; - -export default { - parameters: { - viewport: { - viewports: { - ...INITIAL_VIEWPORTS, - ...MINIMAL_VIEWPORTS, - }, - defaultViewport: 'iphone14promax', - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-granular-viewports.ts.mdx b/docs/snippets/common/storybook-preview-granular-viewports.ts.mdx deleted file mode 100644 index 41ed2781987c..000000000000 --- a/docs/snippets/common/storybook-preview-granular-viewports.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; - -const preview: Preview = { - parameters: { - viewport: { - viewports: { - ...INITIAL_VIEWPORTS, - ...MINIMAL_VIEWPORTS, - }, - defaultViewport: 'iphone14promax', - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-head-example.html.mdx b/docs/snippets/common/storybook-preview-head-example.html.mdx deleted file mode 100644 index e6201fbd7902..000000000000 --- a/docs/snippets/common/storybook-preview-head-example.html.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```html -{/* .storybook/preview-head.html */} - -{/* Pull in static files served from your Static directory or the internet */} -{/* Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory */} -<link rel="preload" href="/fonts/my-font.woff2" /> - -{/* Or you can load custom head-tag JavaScript: */} - -<script src="https://use.typekit.net/xxxyyy.js"></script> -<script> - try { - Typekit.load(); - } catch (e) {} -</script> -``` diff --git a/docs/snippets/common/storybook-preview-head-import-global-styles.html.mdx b/docs/snippets/common/storybook-preview-head-import-global-styles.html.mdx deleted file mode 100644 index 0417d5cc7cc6..000000000000 --- a/docs/snippets/common/storybook-preview-head-import-global-styles.html.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```html -{/* .storybook/preview-head.html */} - -{/* Loads a font from a CDN */} -<link rel="preconnect" href="https://fonts.googleapis.com" /> -<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> -<link - href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" - rel="stylesheet" -/> -{/* Load your CSS file */} -<link rel="stylesheet" href="path/to/your/styles.css" /> -``` diff --git a/docs/snippets/common/storybook-preview-import-global-styles.js.mdx b/docs/snippets/common/storybook-preview-import-global-styles.js.mdx deleted file mode 100644 index e38fa4503ef9..000000000000 --- a/docs/snippets/common/storybook-preview-import-global-styles.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/preview.js - -import '../src/styles/global.css'; - -export default { - parameters: {}, -}; -``` diff --git a/docs/snippets/common/storybook-preview-import-global-styles.ts.mdx b/docs/snippets/common/storybook-preview-import-global-styles.ts.mdx deleted file mode 100644 index 2d7d4f642bf9..000000000000 --- a/docs/snippets/common/storybook-preview-import-global-styles.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import '../src/styles/global.css'; - -const preview: Preview = { - parameters: {}, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-layout-param.js.mdx b/docs/snippets/common/storybook-preview-layout-param.js.mdx deleted file mode 100644 index 537624b80583..000000000000 --- a/docs/snippets/common/storybook-preview-layout-param.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - layout: 'centered', - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-layout-param.ts.mdx b/docs/snippets/common/storybook-preview-layout-param.ts.mdx deleted file mode 100644 index dbbf91403e33..000000000000 --- a/docs/snippets/common/storybook-preview-layout-param.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - layout: 'centered', - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx b/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx deleted file mode 100644 index 454f2e69f4bf..000000000000 --- a/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// .storybook/preview.js - -const preview = { - globalTypes: { - locale: { - description: 'Internationalization locale', - defaultValue: 'en', - toolbar: { - icon: 'globe', - items: [ - { value: 'en', right: '🇺🇸', title: 'English' }, - { value: 'fr', right: '🇫🇷', title: 'Français' }, - { value: 'es', right: '🇪🇸', title: 'Español' }, - { value: 'zh', right: '🇨🇳', title: '中文' }, - { value: 'kr', right: '🇰🇷', title: '한국어' }, - ], - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-locales-globaltype.ts-4-9.mdx b/docs/snippets/common/storybook-preview-locales-globaltype.ts-4-9.mdx deleted file mode 100644 index 1d4ae918aa19..000000000000 --- a/docs/snippets/common/storybook-preview-locales-globaltype.ts-4-9.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - globalTypes: { - locale: { - description: 'Internationalization locale', - defaultValue: 'en', - toolbar: { - icon: 'globe', - items: [ - { value: 'en', right: '🇺🇸', title: 'English' }, - { value: 'fr', right: '🇫🇷', title: 'Français' }, - { value: 'es', right: '🇪🇸', title: 'Español' }, - { value: 'zh', right: '🇨🇳', title: '中文' }, - { value: 'kr', right: '🇰🇷', title: '한국어' }, - ], - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-locales-globaltype.ts.mdx b/docs/snippets/common/storybook-preview-locales-globaltype.ts.mdx deleted file mode 100644 index 1d4ae918aa19..000000000000 --- a/docs/snippets/common/storybook-preview-locales-globaltype.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - globalTypes: { - locale: { - description: 'Internationalization locale', - defaultValue: 'en', - toolbar: { - icon: 'globe', - items: [ - { value: 'en', right: '🇺🇸', title: 'English' }, - { value: 'fr', right: '🇫🇷', title: 'Français' }, - { value: 'es', right: '🇪🇸', title: 'Español' }, - { value: 'zh', right: '🇨🇳', title: '中文' }, - { value: 'kr', right: '🇰🇷', title: '한국어' }, - ], - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx b/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx deleted file mode 100644 index 5ead0775b847..000000000000 --- a/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - actions: { argTypesRegex: '^on.*' }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-matching-argtypes.ts.mdx b/docs/snippets/common/storybook-preview-matching-argtypes.ts.mdx deleted file mode 100644 index 50d08d6bc068..000000000000 --- a/docs/snippets/common/storybook-preview-matching-argtypes.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - actions: { argTypesRegex: '^on.*' }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-merge-viewports.js.mdx b/docs/snippets/common/storybook-preview-merge-viewports.js.mdx deleted file mode 100644 index 36342c07b710..000000000000 --- a/docs/snippets/common/storybook-preview-merge-viewports.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// .storybook/preview.js - -import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; - -const customViewports = { - kindleFire2: { - name: 'Kindle Fire 2', - styles: { - width: '600px', - height: '963px', - }, - }, - kindleFireHD: { - name: 'Kindle Fire HD', - styles: { - width: '533px', - height: '801px', - }, - }, -}; - -export default { - parameters: { - viewport: { - viewports: { - ...MINIMAL_VIEWPORTS, - ...customViewports, - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-merge-viewports.ts.mdx b/docs/snippets/common/storybook-preview-merge-viewports.ts.mdx deleted file mode 100644 index 2cdb6be05e29..000000000000 --- a/docs/snippets/common/storybook-preview-merge-viewports.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; - -const customViewports = { - kindleFire2: { - name: 'Kindle Fire 2', - styles: { - width: '600px', - height: '963px', - }, - }, - kindleFireHD: { - name: 'Kindle Fire HD', - styles: { - width: '533px', - height: '801px', - }, - }, -}; - -const preview: Preview = { - parameters: { - viewport: { - viewports: { - ...MINIMAL_VIEWPORTS, - ...customViewports, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-optout-inline.js.mdx b/docs/snippets/common/storybook-preview-optout-inline.js.mdx deleted file mode 100644 index 65d02282d934..000000000000 --- a/docs/snippets/common/storybook-preview-optout-inline.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - docs: { - // Opt-out of inline rendering - story: { inline: false }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-optout-inline.ts.mdx b/docs/snippets/common/storybook-preview-optout-inline.ts.mdx deleted file mode 100644 index 1e2c22a060c6..000000000000 --- a/docs/snippets/common/storybook-preview-optout-inline.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - docs: { - // Opt-out of inline rendering - story: { inline: false }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx b/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx deleted file mode 100644 index 08aa7760fe69..000000000000 --- a/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - controls: { - presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'], - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-parameters-color-swatches.ts.mdx b/docs/snippets/common/storybook-preview-parameters-color-swatches.ts.mdx deleted file mode 100644 index 222c9ac6c06c..000000000000 --- a/docs/snippets/common/storybook-preview-parameters-color-swatches.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - controls: { - presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'], - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-prepareforinline.js.mdx b/docs/snippets/common/storybook-preview-prepareforinline.js.mdx deleted file mode 100644 index c346d67d902e..000000000000 --- a/docs/snippets/common/storybook-preview-prepareforinline.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// .storybook/preview.js - -import React from 'react'; -import { render } from 'react-dom'; -import toReact from '@egoist/vue-to-react'; - -export default { - parameters: { - docs: { - // deprecated do not use - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-register-language-globally.js.mdx b/docs/snippets/common/storybook-preview-register-language-globally.js.mdx deleted file mode 100644 index 4c32c55845df..000000000000 --- a/docs/snippets/common/storybook-preview-register-language-globally.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// .storybook/preview.js - -import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; -import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; - -// Registers and enables scss language support -SyntaxHighlighter.registerLanguage('scss', scss); - -export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-register-language-globally.ts.mdx b/docs/snippets/common/storybook-preview-register-language-globally.ts.mdx deleted file mode 100644 index 781e17c1d01c..000000000000 --- a/docs/snippets/common/storybook-preview-register-language-globally.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; -import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; - -// Registers and enables scss language support -SyntaxHighlighter.registerLanguage('scss', scss); - -const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-sort-function.js.mdx b/docs/snippets/common/storybook-preview-sort-function.js.mdx deleted file mode 100644 index 322d9abce360..000000000000 --- a/docs/snippets/common/storybook-preview-sort-function.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - options: { - storySort: (a, b) => - a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }), - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-sort-function.ts.mdx b/docs/snippets/common/storybook-preview-sort-function.ts.mdx deleted file mode 100644 index a0054ba7b8cd..000000000000 --- a/docs/snippets/common/storybook-preview-sort-function.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - options: { - // The `a` and `b` arguments in this function have a type of `import('@storybook/types').IndexEntry`. Remember that the function is executed in a JavaScript environment, so use JSDoc for IntelliSense to introspect it. - storySort: (a, b) => - a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }), - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-use-global-type.js.mdx b/docs/snippets/common/storybook-preview-use-global-type.js.mdx deleted file mode 100644 index a7381764ae23..000000000000 --- a/docs/snippets/common/storybook-preview-use-global-type.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// .storybook/preview.js - -import { MyThemes } from '../my-theme-folder/my-theme-file'; - -const preview = { - decorators: [ - (story, context) => { - const selectedTheme = context.globals.theme || 'light'; - const theme = MyThemes[selectedTheme]; - return ( - // Your theme provider and other context providers go here - ) - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-use-global-type.ts-4-9.mdx b/docs/snippets/common/storybook-preview-use-global-type.ts-4-9.mdx deleted file mode 100644 index 62e7f268b696..000000000000 --- a/docs/snippets/common/storybook-preview-use-global-type.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., solid, qwik) -import { Preview } from '@storybook/your-framework'; - -import { MyThemes } from '../my-theme-folder/my-theme-file'; - -const preview: Preview = { - decorators: [ - (story, context) => { - const selectedTheme = context.globals.theme || 'light'; - const theme = MyThemes[selectedTheme]; - return ( - // Your theme provider and other context providers go here - ) - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-use-global-type.ts.mdx b/docs/snippets/common/storybook-preview-use-global-type.ts.mdx deleted file mode 100644 index 62e7f268b696..000000000000 --- a/docs/snippets/common/storybook-preview-use-global-type.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., solid, qwik) -import { Preview } from '@storybook/your-framework'; - -import { MyThemes } from '../my-theme-folder/my-theme-file'; - -const preview: Preview = { - decorators: [ - (story, context) => { - const selectedTheme = context.globals.theme || 'light'; - const theme = MyThemes[selectedTheme]; - return ( - // Your theme provider and other context providers go here - ) - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx b/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx deleted file mode 100644 index 4816ef7b87af..000000000000 --- a/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// .storybook/preview.js|ts - -const customViewports = { - kindleFire2: { - name: 'Kindle Fire 2', - styles: { - width: '600px', - height: '963px', - }, - }, - kindleFireHD: { - name: 'Kindle Fire HD', - styles: { - width: '533px', - height: '801px', - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx b/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx deleted file mode 100644 index 7dcb462b9144..000000000000 --- a/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - viewport: { viewports: customViewports }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-viewport-use-new-devices.ts.mdx b/docs/snippets/common/storybook-preview-viewport-use-new-devices.ts.mdx deleted file mode 100644 index b9a7335ccf6b..000000000000 --- a/docs/snippets/common/storybook-preview-viewport-use-new-devices.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - viewport: { viewports: customViewports }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx deleted file mode 100644 index a1ccd7017694..000000000000 --- a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - options: { - storySort: { - order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'], - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.ts.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.ts.mdx deleted file mode 100644 index c61243dd9a16..000000000000 --- a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - options: { - storySort: { - order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components', '*', 'WIP'], - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx deleted file mode 100644 index 21384a2fea98..000000000000 --- a/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/preview.js - -export default { - parameters: { - options: { - storySort: { - order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'], - }, - }, - }, -}; -``` diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages.ts.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages.ts.mdx deleted file mode 100644 index 7f92948b3a42..000000000000 --- a/docs/snippets/common/storybook-preview-with-ordered-pages.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/preview.ts - -// Replace your-framework with the framework you are using (e.g., react, vue3) -import { Preview } from '@storybook/your-framework'; - -const preview: Preview = { - parameters: { - options: { - storySort: { - order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'], - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/common/storybook-read-environment-variables.node-env.js.mdx b/docs/snippets/common/storybook-read-environment-variables.node-env.js.mdx deleted file mode 100644 index 0ad4b9994e29..000000000000 --- a/docs/snippets/common/storybook-read-environment-variables.node-env.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```js -console.log(process.env.STORYBOOK_THEME); -console.log(process.env.STORYBOOK_DATA_KEY); -``` diff --git a/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx b/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx deleted file mode 100644 index 6f99f3972ce9..000000000000 --- a/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```js -console.log(import.meta.env.STORYBOOK_THEME); -console.log(import.meta.env.STORYBOOK_DATA_KEY); -``` diff --git a/docs/snippets/common/storybook-remove-command.npm.js.mdx b/docs/snippets/common/storybook-remove-command.npm.js.mdx deleted file mode 100644 index f27bdc549fd3..000000000000 --- a/docs/snippets/common/storybook-remove-command.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@latest remove @storybook/addon-a11y -``` diff --git a/docs/snippets/common/storybook-remove-command.pnpm.js.mdx b/docs/snippets/common/storybook-remove-command.pnpm.js.mdx deleted file mode 100644 index 98734283c8a1..000000000000 --- a/docs/snippets/common/storybook-remove-command.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest remove @storybook/addon-a11y -``` diff --git a/docs/snippets/common/storybook-remove-command.yarn.js.mdx b/docs/snippets/common/storybook-remove-command.yarn.js.mdx deleted file mode 100644 index a3cff8c18bd9..000000000000 --- a/docs/snippets/common/storybook-remove-command.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@latest remove @storybook/addon-a11y -``` diff --git a/docs/snippets/common/storybook-run-dev.npm.js.mdx b/docs/snippets/common/storybook-run-dev.npm.js.mdx deleted file mode 100644 index f6ae41091af1..000000000000 --- a/docs/snippets/common/storybook-run-dev.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run storybook -``` diff --git a/docs/snippets/common/storybook-run-dev.pnpm.js.mdx b/docs/snippets/common/storybook-run-dev.pnpm.js.mdx deleted file mode 100644 index 97613e1d7158..000000000000 --- a/docs/snippets/common/storybook-run-dev.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run storybook -``` diff --git a/docs/snippets/common/storybook-run-dev.yarn.js.mdx b/docs/snippets/common/storybook-run-dev.yarn.js.mdx deleted file mode 100644 index 471455e3e66e..000000000000 --- a/docs/snippets/common/storybook-run-dev.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn storybook -``` diff --git a/docs/snippets/common/storybook-server-framework-options.ts.mdx b/docs/snippets/common/storybook-server-framework-options.ts.mdx deleted file mode 100644 index 687df16d3090..000000000000 --- a/docs/snippets/common/storybook-server-framework-options.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// my-framework/src/server/options.ts - -import { sync } from 'read-pkg-up'; - -export default { - packageJson: sync({ cwd: __dirname }).packageJson, - framework: 'my-framework', - frameworkPath: '@my-framework/storybook', - frameworkPresets: [require.resolve('./framework-preset-my-framework.js')], -}; -``` diff --git a/docs/snippets/common/storybook-server-options.ts.mdx b/docs/snippets/common/storybook-server-options.ts.mdx deleted file mode 100644 index 6a91e2a9a0c3..000000000000 --- a/docs/snippets/common/storybook-server-options.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// vue/src/server/options.ts - -import { sync } from 'read-pkg-up'; - -export default { - packageJson: sync({ cwd: __dirname }).packageJson, - framework: 'vue', - frameworkPresets: [require.resolve('./framework-preset-vue.js')], -}; -``` diff --git a/docs/snippets/common/storybook-start-dev-server.ts.mdx b/docs/snippets/common/storybook-start-dev-server.ts.mdx deleted file mode 100644 index f200f1cf44c7..000000000000 --- a/docs/snippets/common/storybook-start-dev-server.ts.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```ts -// your-framework/src/server/index.ts - -import { buildDev } from '@storybook/core/server'; - -import options from './options'; - -buildDev(options); -``` diff --git a/docs/snippets/common/storybook-story-layout-param.js.mdx b/docs/snippets/common/storybook-story-layout-param.js.mdx deleted file mode 100644 index cd0f1963d270..000000000000 --- a/docs/snippets/common/storybook-story-layout-param.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button': - -export default { - component: Button, -} - -export const WithLayout = { - parameters: { - layout: 'centered', - }, -}; -``` diff --git a/docs/snippets/common/storybook-story-layout-param.ts-4-9.mdx b/docs/snippets/common/storybook-story-layout-param.ts-4-9.mdx deleted file mode 100644 index cb347dbe90a9..000000000000 --- a/docs/snippets/common/storybook-story-layout-param.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const WithLayout: Story = { - parameters: { - layout: 'centered', - }, -}; -``` diff --git a/docs/snippets/common/storybook-story-layout-param.ts.mdx b/docs/snippets/common/storybook-story-layout-param.ts.mdx deleted file mode 100644 index eeaac88af3e3..000000000000 --- a/docs/snippets/common/storybook-story-layout-param.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts|tsx - -// Replace your-framework with the name of your framework -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const WithLayout: Story = { - parameters: { - layout: 'centered', - }, -}; -``` diff --git a/docs/snippets/common/storybook-storyloading-with-directory.js.mdx b/docs/snippets/common/storybook-storyloading-with-directory.js.mdx deleted file mode 100644 index b9451bf46d6c..000000000000 --- a/docs/snippets/common/storybook-storyloading-with-directory.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - // 👇 Storybook will load all existing stories within the MyStories folder - stories: ['../packages/MyStories'], -}; -``` diff --git a/docs/snippets/common/storybook-storyloading-with-directory.ts.mdx b/docs/snippets/common/storybook-storyloading-with-directory.ts.mdx deleted file mode 100644 index a7993195d5ec..000000000000 --- a/docs/snippets/common/storybook-storyloading-with-directory.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - // 👇 Storybook will load all existing stories within the MyStories folder - stories: ['../packages/MyStories'], -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx deleted file mode 100644 index 548639d4eaa4..000000000000 --- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx +++ /dev/null @@ -1,5 +0,0 @@ -```js -// storysource/preset.js - -/* nothing needed */ -``` diff --git a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx deleted file mode 100644 index 47954752399e..000000000000 --- a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -{ - stack: 'Error: Your button is not working\n' + - ' at Object.<anonymous> ($SNIP/test.js:39:27)\n' + - ' at Module._compile (node:internal/modules/cjs/loader:1103:14)\n' + - ' at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)\n' + - ' at Module.load (node:internal/modules/cjs/loader:981:32)\n' + - ' at Function.Module._load (node:internal/modules/cjs/loader:822:12)\n' + - ' at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)\n' + - ' at node:internal/main/run_main_module:17:47', - message: 'Your button is not working' -} -``` diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx deleted file mode 100644 index b79e8f384cfe..000000000000 --- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - core: { - enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events - }, -}; -``` diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx deleted file mode 100644 index ceabd58ad8b9..000000000000 --- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - core: { - enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx deleted file mode 100644 index 3d98a737fc3e..000000000000 --- a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook -``` diff --git a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx deleted file mode 100644 index c3a554760375..000000000000 --- a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook -``` diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx deleted file mode 100644 index 77f6e1ba81c7..000000000000 --- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook -``` diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx deleted file mode 100644 index 16028ba64c3a..000000000000 --- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run storybook -- --enable-crash-reports -``` diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.pnpm.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.pnpm.js.mdx deleted file mode 100644 index bfb082b3fa97..000000000000 --- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run storybook --enable-crash-reports -``` diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx deleted file mode 100644 index 1c3ce803c9e1..000000000000 --- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn storybook --enable-crash-reports -``` diff --git a/docs/snippets/common/storybook-test-fn-mock-spy.js.mdx b/docs/snippets/common/storybook-test-fn-mock-spy.js.mdx deleted file mode 100644 index e9d26c1b36c4..000000000000 --- a/docs/snippets/common/storybook-test-fn-mock-spy.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// NoteUI.stories.js -import { expect, userEvent, within } from '@storybook/test'; - -import { saveNote } from '#app/actions.mock'; -import { createNotes } from '#mocks/notes'; -import NoteUI from './note-ui'; - -export default { - title: 'Mocked/NoteUI', - component: NoteUI, -}; - -const notes = createNotes(); - -export const SaveFlow = { - name: 'Save Flow ▶', - args: { - isEditing: true, - note: notes[0], - }, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - const saveButton = canvas.getByRole('menuitem', { name: /done/i }); - await userEvent.click(saveButton); - // 👇 This is the mock function, so you can assert its behavior - await expect(saveNote).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/common/storybook-test-fn-mock-spy.ts-4-9.mdx b/docs/snippets/common/storybook-test-fn-mock-spy.ts-4-9.mdx deleted file mode 100644 index a081b0f00883..000000000000 --- a/docs/snippets/common/storybook-test-fn-mock-spy.ts-4-9.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// NoteUI.stories.ts -// Replace your-renderer with the name of your renderer (e.g. react, vue3) -import type { Meta, StoryObj } from '@storybook/your-renderer'; -import { expect, userEvent, within } from '@storybook/test'; - -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { saveNote } from '#app/actions.mock'; -import { createNotes } from '#mocks/notes'; -import NoteUI from './note-ui'; - -const meta = { - title: 'Mocked/NoteUI', - component: NoteUI, -} satisfies Meta<typeof NoteUI>; -export default meta; - -type Story = StoryObj<typeof meta>; - -const notes = createNotes(); - -export const SaveFlow: Story = { - name: 'Save Flow ▶', - args: { - isEditing: true, - note: notes[0], - }, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - const saveButton = canvas.getByRole('menuitem', { name: /done/i }); - await userEvent.click(saveButton); - // 👇 This is the mock function, so you can assert its behavior - await expect(saveNote).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/common/storybook-test-fn-mock-spy.ts.mdx b/docs/snippets/common/storybook-test-fn-mock-spy.ts.mdx deleted file mode 100644 index 3e2418789d6c..000000000000 --- a/docs/snippets/common/storybook-test-fn-mock-spy.ts.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// NoteUI.stories.ts -// Replace your-renderer with the name of your renderer (e.g. react, vue3) -import type { Meta, StoryObj } from '@storybook/your-renderer'; -import { expect, userEvent, within } from '@storybook/test'; - -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { saveNote } from '#app/actions.mock'; -import { createNotes } from '#mocks/notes'; -import NoteUI from './note-ui'; - -const meta: Meta<typeof NoteUI> = { - title: 'Mocked/NoteUI', - component: NoteUI, -}; -export default meta; - -type Story = StoryObj<typeof NoteUI>; - -const notes = createNotes(); - -export const SaveFlow: Story = { - name: 'Save Flow ▶', - args: { - isEditing: true, - note: notes[0], - }, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - const saveButton = canvas.getByRole('menuitem', { name: /done/i }); - await userEvent.click(saveButton); - // 👇 This is the mock function, so you can assert its behavior - await expect(saveNote).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/common/storybook-test-mock-file-example.ts.mdx b/docs/snippets/common/storybook-test-mock-file-example.ts.mdx deleted file mode 100644 index f2810db9ee78..000000000000 --- a/docs/snippets/common/storybook-test-mock-file-example.ts.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```ts -// lib/session.mock.ts -import { fn } from '@storybook/test'; -import * as actual from './session'; - -export * from './session'; -export const getUserFromSession = fn(actual.getUserFromSession).mockName('getUserFromSession'); -``` diff --git a/docs/snippets/common/storybook-test-mock-return-value.js.mdx b/docs/snippets/common/storybook-test-mock-return-value.js.mdx deleted file mode 100644 index 40359fae8522..000000000000 --- a/docs/snippets/common/storybook-test-mock-return-value.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Page.stories.js -import { getUserFromSession } from '#api/session.mock'; -import { Page } from './Page'; - -export default { - component: Page, -}; - -export const Default = { - async beforeEach() { - // 👇 Set the return value for the getUserFromSession function - getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' }); - }, -}; -``` diff --git a/docs/snippets/common/storybook-test-mock-return-value.ts-4-9.mdx b/docs/snippets/common/storybook-test-mock-return-value.ts-4-9.mdx deleted file mode 100644 index 8db3429a8bfa..000000000000 --- a/docs/snippets/common/storybook-test-mock-return-value.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Page.stories.ts -// Replace your-renderer with the name of your renderer (e.g. react, vue3) -import type { Meta, StoryObj } from '@storybook/your-renderer'; - -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { getUserFromSession } from '#api/session.mock'; -import { Page } from './Page'; - -const meta = { - component: Page, -} satisfies Meta<typeof Page>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Default: Story = { - async beforeEach() { - // 👇 Set the return value for the getUserFromSession function - getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' }); - }, -}; -``` diff --git a/docs/snippets/common/storybook-test-mock-return-value.ts.mdx b/docs/snippets/common/storybook-test-mock-return-value.ts.mdx deleted file mode 100644 index bf7c4164992b..000000000000 --- a/docs/snippets/common/storybook-test-mock-return-value.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Page.stories.ts -// Replace your-renderer with the name of your renderer (e.g. react, vue3) -import type { Meta, StoryObj } from '@storybook/your-renderer'; - -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { getUserFromSession } from '#api/session.mock'; -import { Page } from './Page'; - -const meta: Meta<typeof Page> = { - component: Page, -}; -export default meta; - -type Story = StoryObj<typeof Page>; - -export const Default: Story = { - async beforeEach() { - // 👇 Set the return value for the getUserFromSession function - getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' }); - }, -}; -``` diff --git a/docs/snippets/common/storybook-test-with-storyname.js.mdx b/docs/snippets/common/storybook-test-with-storyname.js.mdx deleted file mode 100644 index 3e7cc4273e6c..000000000000 --- a/docs/snippets/common/storybook-test-with-storyname.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// MyComponent-test.js - -it('should format CSF exports with sensible defaults', () => { - const testCases = { - name: 'Name', - someName: 'Some Name', - someNAME: 'Some NAME', - some_custom_NAME: 'Some Custom NAME', - someName1234: 'Some Name 1234', - someName1_2_3_4: 'Some Name 1 2 3 4', - }; - Object.entries(testCases).forEach(([key, val]) => { - expect(storyNameFromExport(key)).toBe(val); - }); -}); -``` diff --git a/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx deleted file mode 100644 index 59206715f039..000000000000 --- a/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/testing-( react | vue | vue3 | angular) -``` diff --git a/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx deleted file mode 100644 index ab3abc41ea12..000000000000 --- a/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/testing-( react | vue | vue3 | angular ) -``` diff --git a/docs/snippets/common/storybook-theme-example-variables.js.mdx b/docs/snippets/common/storybook-theme-example-variables.js.mdx deleted file mode 100644 index c438b957216a..000000000000 --- a/docs/snippets/common/storybook-theme-example-variables.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/YourTheme.js - -import { create } from '@storybook/theming/create'; - -export default create({ - base: 'light', - brandTitle: 'My custom Storybook', - brandUrl: 'https://example.com', - brandImage: 'https://storybook.js.org/images/placeholders/350x150.png', - brandTarget: '_self', -}); -``` diff --git a/docs/snippets/common/storybook-theming-packages-install.npm.js.mdx b/docs/snippets/common/storybook-theming-packages-install.npm.js.mdx deleted file mode 100644 index d92511b02c0a..000000000000 --- a/docs/snippets/common/storybook-theming-packages-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/manager-api @storybook/theming -``` diff --git a/docs/snippets/common/storybook-theming-packages-install.pnpm.js.mdx b/docs/snippets/common/storybook-theming-packages-install.pnpm.js.mdx deleted file mode 100644 index f076e92feccd..000000000000 --- a/docs/snippets/common/storybook-theming-packages-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/manager-api @storybook/theming -``` diff --git a/docs/snippets/common/storybook-theming-packages-install.yarn.js.mdx b/docs/snippets/common/storybook-theming-packages-install.yarn.js.mdx deleted file mode 100644 index c5ad61d41946..000000000000 --- a/docs/snippets/common/storybook-theming-packages-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/manager-api @storybook/theming -``` diff --git a/docs/snippets/common/storybook-theming-styled-import.js.mdx b/docs/snippets/common/storybook-theming-styled-import.js.mdx deleted file mode 100644 index e06dba71de8a..000000000000 --- a/docs/snippets/common/storybook-theming-styled-import.js.mdx +++ /dev/null @@ -1,5 +0,0 @@ -```js -// YourTheme.js - -import { styled } from '@storybook/theming'; -``` diff --git a/docs/snippets/common/storybook-upgrade-prerelease.npm.js.mdx b/docs/snippets/common/storybook-upgrade-prerelease.npm.js.mdx deleted file mode 100644 index 2627dd4df0f9..000000000000 --- a/docs/snippets/common/storybook-upgrade-prerelease.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@next upgrade -``` diff --git a/docs/snippets/common/storybook-upgrade-prerelease.pnpm.js.mdx b/docs/snippets/common/storybook-upgrade-prerelease.pnpm.js.mdx deleted file mode 100644 index 0992b91d603b..000000000000 --- a/docs/snippets/common/storybook-upgrade-prerelease.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@next upgrade -``` diff --git a/docs/snippets/common/storybook-upgrade-prerelease.yarn.js.mdx b/docs/snippets/common/storybook-upgrade-prerelease.yarn.js.mdx deleted file mode 100644 index 97f21c53a131..000000000000 --- a/docs/snippets/common/storybook-upgrade-prerelease.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@next upgrade -``` diff --git a/docs/snippets/common/storybook-upgrade-to-prior-major.npm.js.mdx b/docs/snippets/common/storybook-upgrade-to-prior-major.npm.js.mdx deleted file mode 100644 index 018344d7529d..000000000000 --- a/docs/snippets/common/storybook-upgrade-to-prior-major.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@^7 upgrade -``` diff --git a/docs/snippets/common/storybook-upgrade-to-prior-major.pnpm.js.mdx b/docs/snippets/common/storybook-upgrade-to-prior-major.pnpm.js.mdx deleted file mode 100644 index 2c37f1c83620..000000000000 --- a/docs/snippets/common/storybook-upgrade-to-prior-major.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@^7 upgrade -``` diff --git a/docs/snippets/common/storybook-upgrade-to-prior-major.yarn.js.mdx b/docs/snippets/common/storybook-upgrade-to-prior-major.yarn.js.mdx deleted file mode 100644 index 5698651a4244..000000000000 --- a/docs/snippets/common/storybook-upgrade-to-prior-major.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@^7 upgrade -``` diff --git a/docs/snippets/common/storybook-upgrade.npm.js.mdx b/docs/snippets/common/storybook-upgrade.npm.js.mdx deleted file mode 100644 index 1778af1b3968..000000000000 --- a/docs/snippets/common/storybook-upgrade.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@latest upgrade -``` diff --git a/docs/snippets/common/storybook-upgrade.pnpm.js.mdx b/docs/snippets/common/storybook-upgrade.pnpm.js.mdx deleted file mode 100644 index 0490b332dcb7..000000000000 --- a/docs/snippets/common/storybook-upgrade.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest upgrade -``` diff --git a/docs/snippets/common/storybook-upgrade.yarn.js.mdx b/docs/snippets/common/storybook-upgrade.yarn.js.mdx deleted file mode 100644 index 78d4fe86efd9..000000000000 --- a/docs/snippets/common/storybook-upgrade.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@latest upgrade -``` diff --git a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx deleted file mode 100644 index c6dfb19d7581..000000000000 --- a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// .storybook/main.js|ts - -export default { - stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'], - core: { - builder: '@storybook/builder-vite', - }, - async viteFinal(config) { - // Merge custom configuration into the default config - const { mergeConfig } = await import('vite'); - - return mergeConfig(config, { - // Add dependencies to pre-optimization - optimizeDeps: { - include: ['storybook-dark-mode'], - }, - }); - }, -}; -``` diff --git a/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx deleted file mode 100644 index 957029319197..000000000000 --- a/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install @storybook/builder-vite --save-dev -``` diff --git a/docs/snippets/common/storybook-vite-builder-install.pnpm.js.mdx b/docs/snippets/common/storybook-vite-builder-install.pnpm.js.mdx deleted file mode 100644 index d9a19eb5601e..000000000000 --- a/docs/snippets/common/storybook-vite-builder-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/builder-vite -``` diff --git a/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx deleted file mode 100644 index db7837fda8f0..000000000000 --- a/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/builder-vite -``` diff --git a/docs/snippets/common/storybook-vite-builder-jest-mock.html.mdx b/docs/snippets/common/storybook-vite-builder-jest-mock.html.mdx deleted file mode 100644 index 04ef6d664eb6..000000000000 --- a/docs/snippets/common/storybook-vite-builder-jest-mock.html.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```html -{/* .storybook/preview-head.html */} - -<script> - window.global = window; -</script> -``` diff --git a/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx deleted file mode 100644 index 84d035998c63..000000000000 --- a/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// .storybook/main.js|ts - -export default { - stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'], - core: { - builder: '@storybook/builder-vite', - }, - typescript: { - // Enables the `react-docgen-typescript` parser. - // See https://storybook.js.org/docs/api/main-config-typescript for more information about this option. - reactDocgen: 'react-docgen-typescript', - }, -}; -``` diff --git a/docs/snippets/common/storybook-vite-builder-register.js.mdx b/docs/snippets/common/storybook-vite-builder-register.js.mdx deleted file mode 100644 index ecd1a215c3dc..000000000000 --- a/docs/snippets/common/storybook-vite-builder-register.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/main.js|ts - -export default { - stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'], - core: { - builder: '@storybook/builder-vite', // 👈 The builder enabled here. - }, -}; -``` diff --git a/docs/snippets/common/storybook-vite-builder-ts-configure.ts-4-9.mdx b/docs/snippets/common/storybook-vite-builder-ts-configure.ts-4-9.mdx deleted file mode 100644 index 397e526c0b0a..000000000000 --- a/docs/snippets/common/storybook-vite-builder-ts-configure.ts-4-9.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - async viteFinal(config, options) { - // Add your configuration here - return config; - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx deleted file mode 100644 index 397e526c0b0a..000000000000 --- a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - async viteFinal(config, options) { - // Add your configuration here - return config; - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/subpath-imports-config.json.mdx b/docs/snippets/common/subpath-imports-config.json.mdx deleted file mode 100644 index 5450344f1178..000000000000 --- a/docs/snippets/common/subpath-imports-config.json.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```jsonc -// package.json -{ - "imports": { - "#api": { - // storybook condition applies to Storybook - "storybook": "./api.mock.ts", - "default": "./api.ts" - }, - "#app/actions": { - "storybook": "./app/actions.mock.ts", - "default": "./app/actions.ts" - }, - "#lib/session": { - "storybook": "./lib/session.mock.ts", - "default": "./lib/session.ts" - }, - "#lib/db": { - // test condition applies to test environments *and* Storybook - "test": "./lib/db.mock.ts", - "default": "./lib/db.ts" - }, - "#*": ["./*", "./*.ts", "./*.tsx"] - } -} -``` diff --git a/docs/snippets/common/tags-autodocs-in-meta.js.mdx b/docs/snippets/common/tags-autodocs-in-meta.js.mdx deleted file mode 100644 index 2c9e2c8cfcef..000000000000 --- a/docs/snippets/common/tags-autodocs-in-meta.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// Button.stories.js -import { Button } from './Button'; - -export default { - component: Button, - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -}; -``` diff --git a/docs/snippets/common/tags-autodocs-in-meta.ts-4-9.mdx b/docs/snippets/common/tags-autodocs-in-meta.ts-4-9.mdx deleted file mode 100644 index c9e29ff65944..000000000000 --- a/docs/snippets/common/tags-autodocs-in-meta.ts-4-9.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta = { - component: Button, - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -} satisfies Meta<typeof Button>; -export default meta; -``` diff --git a/docs/snippets/common/tags-autodocs-in-meta.ts.mdx b/docs/snippets/common/tags-autodocs-in-meta.ts.mdx deleted file mode 100644 index 65a0a970da47..000000000000 --- a/docs/snippets/common/tags-autodocs-in-meta.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -}; -export default meta; -``` diff --git a/docs/snippets/common/tags-autodocs-in-preview.js.mdx b/docs/snippets/common/tags-autodocs-in-preview.js.mdx deleted file mode 100644 index 16c126846bbb..000000000000 --- a/docs/snippets/common/tags-autodocs-in-preview.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// .storybook/preview.js -export default { - // ...rest of preview - //👇 Enables auto-generated documentation for all stories - tags: ['autodocs'], -}; -``` diff --git a/docs/snippets/common/tags-autodocs-in-preview.ts.mdx b/docs/snippets/common/tags-autodocs-in-preview.ts.mdx deleted file mode 100644 index 65ec88121ab1..000000000000 --- a/docs/snippets/common/tags-autodocs-in-preview.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// .storybook/preview.ts -// Replace your-renderer with the renderer you are using (e.g., react, vue3) -import type { Preview } from '@storybook/your-renderer'; - -const preview: Preview = { - // ...rest of preview - //👇 Enables auto-generated documentation for all stories - tags: ['autodocs'], -}; - -export default preview; -``` diff --git a/docs/snippets/common/tags-autodocs-remove-component.js.mdx b/docs/snippets/common/tags-autodocs-remove-component.js.mdx deleted file mode 100644 index 650cedc359d5..000000000000 --- a/docs/snippets/common/tags-autodocs-remove-component.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// Page.stories.js -import { Page } from './Page'; - -export default { - component: Page, - // 👇 Disable auto-generated documentation for this component - tags: ['!autodocs'], -}; -``` diff --git a/docs/snippets/common/tags-autodocs-remove-component.ts-4-9.mdx b/docs/snippets/common/tags-autodocs-remove-component.ts-4-9.mdx deleted file mode 100644 index 35db4e3e0606..000000000000 --- a/docs/snippets/common/tags-autodocs-remove-component.ts-4-9.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Page.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Page } from './Page'; - -const meta = { - component: Page, - // 👇 Disable auto-generated documentation for this component - tags: ['!autodocs'], -} satisfies Meta<typeof Page>; -export default meta; -``` diff --git a/docs/snippets/common/tags-autodocs-remove-component.ts.mdx b/docs/snippets/common/tags-autodocs-remove-component.ts.mdx deleted file mode 100644 index 82f93e9e4fca..000000000000 --- a/docs/snippets/common/tags-autodocs-remove-component.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Page.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Page } from './Page'; - -const meta: Meta<typeof Page> = { - component: Page, - // 👇 Disable auto-generated documentation for this component - tags: ['!autodocs'], -}; -export default meta; -``` diff --git a/docs/snippets/common/tags-autodocs-remove-story.js.mdx b/docs/snippets/common/tags-autodocs-remove-story.js.mdx deleted file mode 100644 index ad8db3ec45cd..000000000000 --- a/docs/snippets/common/tags-autodocs-remove-story.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js -import { Button } from './Button'; - -export default { - component: Button, - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -}; - -export const UndocumentedStory = { - // 👇 Removes this story from auto-generated documentation - tags: ['!autodocs'], -}; -``` diff --git a/docs/snippets/common/tags-autodocs-remove-story.ts-4-9.mdx b/docs/snippets/common/tags-autodocs-remove-story.ts-4-9.mdx deleted file mode 100644 index 008103a8f7ab..000000000000 --- a/docs/snippets/common/tags-autodocs-remove-story.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta = { - component: Button, - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -} satisfies Meta<typeof Button>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const UndocumentedStory: Story = { - // 👇 Removes this story from auto-generated documentation - tags: ['!autodocs'], -}; -``` diff --git a/docs/snippets/common/tags-autodocs-remove-story.ts.mdx b/docs/snippets/common/tags-autodocs-remove-story.ts.mdx deleted file mode 100644 index df76e38e6683..000000000000 --- a/docs/snippets/common/tags-autodocs-remove-story.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -}; -export default meta; - -type Story = StoryObj<typeof Button>; - -export const UndocumentedStory: Story = { - // 👇 Removes this story from auto-generated documentation - tags: ['!autodocs'], -}; -``` diff --git a/docs/snippets/common/tags-docs-only-in-meta.js.mdx b/docs/snippets/common/tags-docs-only-in-meta.js.mdx deleted file mode 100644 index e2c36420e943..000000000000 --- a/docs/snippets/common/tags-docs-only-in-meta.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// Button.stories.js -import { Button } from './Button'; - -export default { - component: Button, - /** - * 👇 All stories in this file will: - * - Be included in the docs page - * - Not appear in Storybook's sidebar - */ - tags: ['autodocs', '!dev'], -}; -``` diff --git a/docs/snippets/common/tags-docs-only-in-meta.ts-4-9.mdx b/docs/snippets/common/tags-docs-only-in-meta.ts-4-9.mdx deleted file mode 100644 index 4671c491cf53..000000000000 --- a/docs/snippets/common/tags-docs-only-in-meta.ts-4-9.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta = { - component: Button, - /** - * 👇 All stories in this file will: - * - Be included in the docs page - * - Not appear in Storybook's sidebar - */ - tags: ['autodocs', '!dev'], -} satisfies Meta<typeof Button>; -export default meta; -``` diff --git a/docs/snippets/common/tags-docs-only-in-meta.ts.mdx b/docs/snippets/common/tags-docs-only-in-meta.ts.mdx deleted file mode 100644 index d1ec280838e3..000000000000 --- a/docs/snippets/common/tags-docs-only-in-meta.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, - /** - * 👇 All stories in this file will: - * - Be included in the docs page - * - Not appear in Storybook's sidebar - */ - tags: ['autodocs', '!dev'], -}; -export default meta; -``` diff --git a/docs/snippets/common/tags-in-meta-and-story.js.mdx b/docs/snippets/common/tags-in-meta-and-story.js.mdx deleted file mode 100644 index 60eea072dd93..000000000000 --- a/docs/snippets/common/tags-in-meta-and-story.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// Button.stories.js -import { Button } from './Button'; - -export default { - component: Button, - /** - * 👇 All stories in this file will have these tags applied: - * - autodocs - * - dev (implicit default, inherited from preview) - * - test (implicit default, inherited from preview) - */ - tags: ['autodocs'], -}; - -export const ExperimentalFeatureStory = { - /** - * 👇 This particular story will have these tags applied: - * - experimental - * - autodocs (inherited from meta) - * - dev (inherited from meta) - * - test (inherited from meta) - */ - tags: ['experimental'], -}; -``` diff --git a/docs/snippets/common/tags-in-meta-and-story.ts-4-9.mdx b/docs/snippets/common/tags-in-meta-and-story.ts-4-9.mdx deleted file mode 100644 index b984c2ed8697..000000000000 --- a/docs/snippets/common/tags-in-meta-and-story.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta = { - component: Button, - /** - * 👇 All stories in this file will have these tags applied: - * - autodocs - * - dev (implicit default, inherited from preview) - * - test (implicit default, inherited from preview) - */ - tags: ['autodocs'], -} satisfies Meta<typeof Button>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const ExperimentalFeatureStory: Story = { - /** - * 👇 This particular story will have these tags applied: - * - experimental - * - autodocs (inherited from meta) - * - dev (inherited from meta) - * - test (inherited from meta) - */ - tags: ['experimental'], -}; -``` diff --git a/docs/snippets/common/tags-in-meta-and-story.ts.mdx b/docs/snippets/common/tags-in-meta-and-story.ts.mdx deleted file mode 100644 index 7a3cbeae8207..000000000000 --- a/docs/snippets/common/tags-in-meta-and-story.ts.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, - /** - * 👇 All stories in this file will have these tags applied: - * - autodocs - * - dev (implicit default, inherited from preview) - * - test (implicit default, inherited from preview) - */ - tags: ['autodocs'], -}; -export default meta; - -type Story = StoryObj<typeof Button>; - -export const ExperimentalFeatureStory: Story = { - /** - * 👇 This particular story will have these tags applied: - * - experimental - * - autodocs (inherited from meta) - * - dev (inherited from meta) - * - test (inherited from meta) - */ - tags: ['experimental'], -}; -``` diff --git a/docs/snippets/common/tags-in-preview.js.mdx b/docs/snippets/common/tags-in-preview.js.mdx deleted file mode 100644 index f66c9a1214f4..000000000000 --- a/docs/snippets/common/tags-in-preview.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/preview.js -export default { - // ...rest of preview - /** - * 👇 All stories in your project will have these tags applied: - * - autodocs - * - dev (implicit default) - * - test (implicit default) - */ - tags: ['autodocs'], -}; -``` diff --git a/docs/snippets/common/tags-in-preview.ts.mdx b/docs/snippets/common/tags-in-preview.ts.mdx deleted file mode 100644 index 0f1629c0e92d..000000000000 --- a/docs/snippets/common/tags-in-preview.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// .storybook/preview.ts -// Replace your-renderer with the renderer you are using (e.g., react, vue3) -import type { Preview } from '@storybook/your-renderer'; - -const preview: Preview = { - // ...rest of preview - /** - * 👇 All stories in your project will have these tags applied: - * - autodocs - * - dev (implicit default) - * - test (implicit default) - */ - tags: ['autodocs'], -}; - -export default preview; -``` diff --git a/docs/snippets/common/tags-remove-in-story.js.mdx b/docs/snippets/common/tags-remove-in-story.js.mdx deleted file mode 100644 index b6d4466e8a31..000000000000 --- a/docs/snippets/common/tags-remove-in-story.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Button.stories.js -import { Button } from './Button'; - -export default { - component: Button, - // 👇 Applies to all stories in this file - tags: ['stable'], -}; - -export const ExperimentalFeatureStory = { - /** - * 👇 For this particular story, remove the inherited - * `stable` tag and apply the `experimental` tag - */ - tags: ['!stable', 'experimental'], -}; -``` diff --git a/docs/snippets/common/tags-remove-in-story.ts-4-9.mdx b/docs/snippets/common/tags-remove-in-story.ts-4-9.mdx deleted file mode 100644 index b4b41b056993..000000000000 --- a/docs/snippets/common/tags-remove-in-story.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta = { - component: Button, - // 👇 Applies to all stories in this file - tags: ['stable'], -} satisfies Meta<typeof Button>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const ExperimentalFeatureStory: Story = { - /** - * 👇 For this particular story, remove the inherited - * `stable` tag and apply the `experimental` tag - */ - tags: ['!stable', 'experimental'], -}; -``` diff --git a/docs/snippets/common/tags-remove-in-story.ts.mdx b/docs/snippets/common/tags-remove-in-story.ts.mdx deleted file mode 100644 index 18c20c9089b9..000000000000 --- a/docs/snippets/common/tags-remove-in-story.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.stories.ts -// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite) -import type { Meta, StoryObj } from '@storybook/your-framework'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, - // 👇 Applies to all stories in this file - tags: ['stable'], -}; -export default meta; - -type Story = StoryObj<typeof Button>; - -export const ExperimentalFeatureStory: Story = { - /** - * 👇 For this particular story, remove the inherited - * `stable` tag and apply the `experimental` tag - */ - tags: ['!stable', 'experimental'], -}; -``` diff --git a/docs/snippets/common/test-runner-a11y-config.js.mdx b/docs/snippets/common/test-runner-a11y-config.js.mdx deleted file mode 100644 index 15d5b412e6c8..000000000000 --- a/docs/snippets/common/test-runner-a11y-config.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// .storybook/test-runner.js - -const { injectAxe, checkA11y } = require('axe-playwright'); - -/* - * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api - * to learn more about the test-runner hooks API. - */ -module.exports = { - async preVisit(page) { - await injectAxe(page); - }, - async postVisit(page) { - await checkA11y(page, '#storybook-root', { - detailedReport: true, - detailedReportOptions: { - html: true, - }, - }); - }, -}; -``` diff --git a/docs/snippets/common/test-runner-a11y-config.ts.mdx b/docs/snippets/common/test-runner-a11y-config.ts.mdx deleted file mode 100644 index 3edfa111a4f0..000000000000 --- a/docs/snippets/common/test-runner-a11y-config.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; -import { injectAxe, checkA11y } from 'axe-playwright'; - -/* - * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api - * to learn more about the test-runner hooks API. - */ -const config: TestRunnerConfig = { - async preVisit(page) { - await injectAxe(page); - }, - async postVisit(page) { - await checkA11y(page, '#storybook-root', { - detailedReport: true, - detailedReportOptions: { - html: true, - }, - }); - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-a11y-configure.js.mdx b/docs/snippets/common/test-runner-a11y-configure.js.mdx deleted file mode 100644 index 5a81a3345e1f..000000000000 --- a/docs/snippets/common/test-runner-a11y-configure.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// .storybook/test-runner.js - -const { injectAxe, checkA11y, configureAxe } = require('axe-playwright'); - -const { getStoryContext } = require('@storybook/test-runner'); - -/* - * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api - * to learn more about the test-runner hooks API. - */ -module.exports = { - async preVisit(page) { - await injectAxe(page); - }, - async postVisit(page, context) { - // Get the entire context of a story, including parameters, args, argTypes, etc. - const storyContext = await getStoryContext(page, context); - - // Apply story-level a11y rules - await configureAxe(page, { - rules: storyContext.parameters?.a11y?.config?.rules, - }); - - await checkA11y(page, '#storybook-root', { - detailedReport: true, - detailedReportOptions: { - html: true, - }, - }); - }, -}; -``` diff --git a/docs/snippets/common/test-runner-a11y-configure.ts.mdx b/docs/snippets/common/test-runner-a11y-configure.ts.mdx deleted file mode 100644 index 48987f89d7c1..000000000000 --- a/docs/snippets/common/test-runner-a11y-configure.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; -import { getStoryContext } from '@storybook/test-runner'; - -import { injectAxe, checkA11y, configureAxe } from 'axe-playwright'; - -/* - * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api - * to learn more about the test-runner hooks API. - */ -const config: TestRunnerConfig = { - async preVisit(page) { - await injectAxe(page); - }, - async postVisit(page, context) { - // Get the entire context of a story, including parameters, args, argTypes, etc. - const storyContext = await getStoryContext(page, context); - - // Apply story-level a11y rules - await configureAxe(page, { - rules: storyContext.parameters?.a11y?.config?.rules, - }); - - await checkA11y(page, '#storybook-root', { - detailedReport: true, - detailedReportOptions: { - html: true, - }, - }); - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-a11y-disable.js.mdx b/docs/snippets/common/test-runner-a11y-disable.js.mdx deleted file mode 100644 index 32f1d48dd397..000000000000 --- a/docs/snippets/common/test-runner-a11y-disable.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// .storybook/test-runner.js - -const { getStoryContext } = require('@storybook/test-runner'); - -const { injectAxe, checkA11y } = require('axe-playwright'); -/* - * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api - * to learn more about the test-runner hooks API. - */ -module.exports = { - async preVisit(page) { - await injectAxe(page); - }, - async postVisit(page, context) { - // Get the entire context of a story, including parameters, args, argTypes, etc. - const storyContext = await getStoryContext(page, context); - - // Do not run a11y tests on disabled stories. - if (storyContext.parameters?.a11y?.disable) { - return; - } - await checkA11y(page, '#storybook-root', { - detailedReport: true, - detailedReportOptions: { - html: true, - }, - }); - }, -}; -``` diff --git a/docs/snippets/common/test-runner-a11y-disable.ts.mdx b/docs/snippets/common/test-runner-a11y-disable.ts.mdx deleted file mode 100644 index 3a3730073422..000000000000 --- a/docs/snippets/common/test-runner-a11y-disable.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; -import { getStoryContext } from '@storybook/test-runner'; - -import { injectAxe, checkA11y } from 'axe-playwright'; - -/* - * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api - * to learn more about the test-runner hooks API. - */ -const config: TestRunnerConfig = { - async preVisit(page) { - await injectAxe(page); - }, - async postVisit(page, context) { - // Get the entire context of a story, including parameters, args, argTypes, etc. - const storyContext = await getStoryContext(page, context); - - // Do not run a11y tests on disabled stories. - if (storyContext.parameters?.a11y?.disable) { - return; - } - await checkA11y(page, '#storybook-root', { - detailedReport: true, - detailedReportOptions: { - html: true, - }, - }); - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-auth.js.mdx b/docs/snippets/common/test-runner-auth.js.mdx deleted file mode 100644 index d4858de23165..000000000000 --- a/docs/snippets/common/test-runner-auth.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/test-runner.js - -module.exports = { - getHttpHeaders: async (url) => { - const token = url.includes('prod') ? 'XYZ' : 'ABC'; - return { - Authorization: `Bearer ${token}`, - }; - }, -}; -``` diff --git a/docs/snippets/common/test-runner-auth.ts.mdx b/docs/snippets/common/test-runner-auth.ts.mdx deleted file mode 100644 index c4fd82d8726e..000000000000 --- a/docs/snippets/common/test-runner-auth.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; - -const config: TestRunnerConfig = { - getHttpHeaders: async (url) => { - const token = url.includes('prod') ? 'prod-token' : 'dev-token'; - return { - Authorization: `Bearer ${token}`, - }; - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-axe-playwright.npm.js.mdx b/docs/snippets/common/test-runner-axe-playwright.npm.js.mdx deleted file mode 100644 index 291cbd8486eb..000000000000 --- a/docs/snippets/common/test-runner-axe-playwright.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install axe-playwright --save-dev -``` diff --git a/docs/snippets/common/test-runner-axe-playwright.pnpm.js.mdx b/docs/snippets/common/test-runner-axe-playwright.pnpm.js.mdx deleted file mode 100644 index 4140e97d621e..000000000000 --- a/docs/snippets/common/test-runner-axe-playwright.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev axe-playwright -``` diff --git a/docs/snippets/common/test-runner-axe-playwright.yarn.js.mdx b/docs/snippets/common/test-runner-axe-playwright.yarn.js.mdx deleted file mode 100644 index f8a3893f9510..000000000000 --- a/docs/snippets/common/test-runner-axe-playwright.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev axe-playwright -``` diff --git a/docs/snippets/common/test-runner-config-serializer.js.mdx b/docs/snippets/common/test-runner-config-serializer.js.mdx deleted file mode 100644 index 8ae8598f186e..000000000000 --- a/docs/snippets/common/test-runner-config-serializer.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// ./test-runner-jest.config.js - -import { getJestConfig } from '@storybook/test-runner'; - -const defaultConfig = getJestConfig(); - -const config = { - ...defaultConfig, - snapshotSerializers: [ - // Sets up the custom serializer to preprocess the HTML before it's passed onto the test-runner - './snapshot-serializer.js', - ...defaultConfig.snapshotSerializers, - ], -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-config-snapshot-resolver.js.mdx b/docs/snippets/common/test-runner-config-snapshot-resolver.js.mdx deleted file mode 100644 index 0406476a4055..000000000000 --- a/docs/snippets/common/test-runner-config-snapshot-resolver.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// ./test-runner-jest.config.js - -import { getJestConfig } from '@storybook/test-runner'; - -const defaultConfig = getJestConfig(); - -const config = { - // The default Jest configuration comes from @storybook/test-runner - ...defaultConfig, - snapshotResolver: './snapshot-resolver.js', -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-coverage.npm.js.mdx b/docs/snippets/common/test-runner-coverage.npm.js.mdx deleted file mode 100644 index 78940f481512..000000000000 --- a/docs/snippets/common/test-runner-coverage.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run test-storybook -- --coverage -``` diff --git a/docs/snippets/common/test-runner-coverage.pnpm.js.mdx b/docs/snippets/common/test-runner-coverage.pnpm.js.mdx deleted file mode 100644 index 968b4abf8d66..000000000000 --- a/docs/snippets/common/test-runner-coverage.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run test-storybook --coverage -``` diff --git a/docs/snippets/common/test-runner-coverage.yarn.js.mdx b/docs/snippets/common/test-runner-coverage.yarn.js.mdx deleted file mode 100644 index 6aee09060561..000000000000 --- a/docs/snippets/common/test-runner-coverage.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn test-storybook --coverage -``` diff --git a/docs/snippets/common/test-runner-custom-page-viewport.js.mdx b/docs/snippets/common/test-runner-custom-page-viewport.js.mdx deleted file mode 100644 index ec7e341928ef..000000000000 --- a/docs/snippets/common/test-runner-custom-page-viewport.js.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```js -// .storybook/test-runner.js - -const { getStoryContext } = require('@storybook/test-runner'); -const { MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport'); - -const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 }; - -module.exports = { - async preVisit(page, story) { - // Accesses the story's parameters and retrieves the viewport used to render it - const context = await getStoryContext(page, story); - const viewportName = context.parameters?.viewport?.defaultViewport; - const viewportParameter = MINIMAL_VIEWPORTS[viewportName]; - - if (viewportParameter) { - const viewportSize = Object.entries(viewportParameter.styles).reduce( - (acc, [screen, size]) => ({ - ...acc, - // Converts the viewport size from percentages to numbers - [screen]: parseInt(size), - }), - {}, - ); - // Configures the Playwright page to use the viewport size - page.setViewportSize(viewportSize); - } else { - page.setViewportSize(DEFAULT_VIEWPORT_SIZE); - } - }, -}; -``` diff --git a/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx b/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx deleted file mode 100644 index 20a2f0102f6f..000000000000 --- a/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// .storybook/test-runner.js - -import type { TestRunnerConfig } from '@storybook/test-runner'; -import { getStoryContext } from '@storybook/test-runner'; - -const { MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport'); - -const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 }; - -const config: TestRunnerConfig = { - async preVisit(page, story) { - // Accesses the story's parameters and retrieves the viewport used to render it - const context = await getStoryContext(page, story); - const viewportName = context.parameters?.viewport?.defaultViewport; - const viewportParameter = MINIMAL_VIEWPORTS[viewportName]; - - if (viewportParameter) { - const viewportSize = Object.entries(viewportParameter.styles).reduce( - (acc, [screen, size]) => ({ - ...acc, - // Converts the viewport size from percentages to numbers - [screen]: parseInt(size), - }), - {}, - ); - // Configures the Playwright page to use the viewport size - page.setViewportSize(viewportSize); - } else { - page.setViewportSize(DEFAULT_VIEWPORT_SIZE); - } - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-custom-snapshot-resolver.js.mdx b/docs/snippets/common/test-runner-custom-snapshot-resolver.js.mdx deleted file mode 100644 index 06bf8b04f346..000000000000 --- a/docs/snippets/common/test-runner-custom-snapshot-resolver.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// ./snapshot-resolver.js - -import path from 'path'; - -export default { - resolveSnapshotPath: (testPath) => { - const fileName = path.basename(testPath); - const fileNameWithoutExtension = fileName.replace(/\.[^/.]+$/, ''); - const modifiedFileName = `${fileNameWithoutExtension}.storyshot`; - - // Configure Jest to generate snapshot files using the following naming convention (__snapshots__/Button.storyshot) - return path.join(path.dirname(testPath), '__snapshots__', modifiedFileName); - }, - resolveTestPath: (snapshotFilePath, snapshotExtension) => - path.basename(snapshotFilePath, snapshotExtension), - testPathForConsistencyCheck: 'example.storyshot', -}; -``` diff --git a/docs/snippets/common/test-runner-custom-snapshot-serializer.js.mdx b/docs/snippets/common/test-runner-custom-snapshot-serializer.js.mdx deleted file mode 100644 index 490a2eae02c8..000000000000 --- a/docs/snippets/common/test-runner-custom-snapshot-serializer.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// ./snapshot-serializer.js - -// The jest-serializer-html package is available as a dependency of the test-runner -const jestSerializerHtml = require('jest-serializer-html'); - -const DYNAMIC_ID_PATTERN = /"react-aria-\d+(\.\d+)?"/g; - -module.exports = { - /* - * The test-runner calls the serialize function when the test reaches the expect(SomeHTMLElement).toMatchSnapshot(). - * It will replace all dynamic IDs with a static ID so that the snapshot is consistent. - * For instance, from <label id="react-aria970235672-:rl:" for="react-aria970235672-:rk:">Favorite color</label> to <label id="react-mocked_id" for="react-mocked_id">Favorite color</label> - */ - serialize(val) { - const withFixedIds = val.replace(DYNAMIC_ID_PATTERN, 'mocked_id'); - return jestSerializerHtml.print(withFixedIds); - }, - test(val) { - return jestSerializerHtml.test(val); - }, -}; -``` diff --git a/docs/snippets/common/test-runner-dom-snapshot-testing.js.mdx b/docs/snippets/common/test-runner-dom-snapshot-testing.js.mdx deleted file mode 100644 index 1633fb5db4f3..000000000000 --- a/docs/snippets/common/test-runner-dom-snapshot-testing.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/test-runner.js - -module.exports = { - async postVisit(page, context) { - // the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root - const elementHandler = await page.$('#storybook-root'); - const innerHTML = await elementHandler.innerHTML(); - expect(innerHTML).toMatchSnapshot(); - }, -}; -``` diff --git a/docs/snippets/common/test-runner-dom-snapshot-testing.ts.mdx b/docs/snippets/common/test-runner-dom-snapshot-testing.ts.mdx deleted file mode 100644 index 47b781b0512a..000000000000 --- a/docs/snippets/common/test-runner-dom-snapshot-testing.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; - -const config: TestRunnerConfig = { - async postVisit(page, context) { - // the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root - const elementHandler = await page.$('#storybook-root'); - const innerHTML = await elementHandler.innerHTML(); - expect(innerHTML).toMatchSnapshot(); - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-eject-config.npm.js.mdx b/docs/snippets/common/test-runner-eject-config.npm.js.mdx deleted file mode 100644 index a0a5d35e286f..000000000000 --- a/docs/snippets/common/test-runner-eject-config.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npm run test-storybook -- --eject -``` diff --git a/docs/snippets/common/test-runner-eject-config.pnpm.js.mdx b/docs/snippets/common/test-runner-eject-config.pnpm.js.mdx deleted file mode 100644 index b9f227ec214c..000000000000 --- a/docs/snippets/common/test-runner-eject-config.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run test-storybook --eject -``` diff --git a/docs/snippets/common/test-runner-eject-config.yarn.js.mdx b/docs/snippets/common/test-runner-eject-config.yarn.js.mdx deleted file mode 100644 index 44d5bf8bb222..000000000000 --- a/docs/snippets/common/test-runner-eject-config.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -yarn test-storybook --eject -``` diff --git a/docs/snippets/common/test-runner-execute-with-flags.npm.js.mdx b/docs/snippets/common/test-runner-execute-with-flags.npm.js.mdx deleted file mode 100644 index 6754d8375f7a..000000000000 --- a/docs/snippets/common/test-runner-execute-with-flags.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run test-storybook -- --watch -``` diff --git a/docs/snippets/common/test-runner-execute-with-flags.pnpm.js.mdx b/docs/snippets/common/test-runner-execute-with-flags.pnpm.js.mdx deleted file mode 100644 index 75fa90ee7388..000000000000 --- a/docs/snippets/common/test-runner-execute-with-flags.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run test-storybook --watch -``` diff --git a/docs/snippets/common/test-runner-execute-with-flags.yarn.js.mdx b/docs/snippets/common/test-runner-execute-with-flags.yarn.js.mdx deleted file mode 100644 index e877ac67a8a1..000000000000 --- a/docs/snippets/common/test-runner-execute-with-flags.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn test-storybook --watch -``` diff --git a/docs/snippets/common/test-runner-execute-with-url.env-var.js.mdx b/docs/snippets/common/test-runner-execute-with-url.env-var.js.mdx deleted file mode 100644 index 217b72ec8a07..000000000000 --- a/docs/snippets/common/test-runner-execute-with-url.env-var.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -TARGET_URL=https://the-storybook-url-here.com yarn test-storybook -``` diff --git a/docs/snippets/common/test-runner-execute-with-url.npm.js.mdx b/docs/snippets/common/test-runner-execute-with-url.npm.js.mdx deleted file mode 100644 index b9430e5aa326..000000000000 --- a/docs/snippets/common/test-runner-execute-with-url.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run test-storybook -- --url https://the-storybook-url-here.com -``` diff --git a/docs/snippets/common/test-runner-execute-with-url.pnpm.js.mdx b/docs/snippets/common/test-runner-execute-with-url.pnpm.js.mdx deleted file mode 100644 index 542098002ea6..000000000000 --- a/docs/snippets/common/test-runner-execute-with-url.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run test-storybook --url https://the-storybook-url-here.com -``` diff --git a/docs/snippets/common/test-runner-execute-with-url.yarn.js.mdx b/docs/snippets/common/test-runner-execute-with-url.yarn.js.mdx deleted file mode 100644 index c6d395dbff81..000000000000 --- a/docs/snippets/common/test-runner-execute-with-url.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn test-storybook --url https://the-storybook-url-here.com -``` diff --git a/docs/snippets/common/test-runner-execute.npm.js.mdx b/docs/snippets/common/test-runner-execute.npm.js.mdx deleted file mode 100644 index 0ef2e8439783..000000000000 --- a/docs/snippets/common/test-runner-execute.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run test-storybook -``` diff --git a/docs/snippets/common/test-runner-execute.pnpm.js.mdx b/docs/snippets/common/test-runner-execute.pnpm.js.mdx deleted file mode 100644 index 087235243eda..000000000000 --- a/docs/snippets/common/test-runner-execute.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run test-storybook -``` diff --git a/docs/snippets/common/test-runner-execute.yarn.js.mdx b/docs/snippets/common/test-runner-execute.yarn.js.mdx deleted file mode 100644 index 2ab91535dd8a..000000000000 --- a/docs/snippets/common/test-runner-execute.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn test-storybook -``` diff --git a/docs/snippets/common/test-runner-helper-function.js.mdx b/docs/snippets/common/test-runner-helper-function.js.mdx deleted file mode 100644 index 9e7827f029ab..000000000000 --- a/docs/snippets/common/test-runner-helper-function.js.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```js -// .storybook/test-runner.js - -const { getStoryContext, waitForPageReady } = require('@storybook/test-runner'); - -module.exports = { - // Hook that is executed before the test runner starts running tests - setup() { - // Add your configuration here. - }, - /* Hook to execute before a story is initially visited before being rendered in the browser. - * The page argument is the Playwright's page object for the story. - * The context argument is a Storybook object containing the story's id, title, and name. - */ - async preVisit(page, context) { - // Add your configuration here. - }, - /* Hook to execute after a story is visited and fully rendered. - * The page argument is the Playwright's page object for the story - * The context argument is a Storybook object containing the story's id, title, and name. - */ - async postVisit(page, context) { - // Get the entire context of a story, including parameters, args, argTypes, etc. - const storyContext = await getStoryContext(page, context); - - // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.). - await waitForPageReady(page); - - // Add your configuration here. - }, -}; -``` diff --git a/docs/snippets/common/test-runner-helper-function.ts.mdx b/docs/snippets/common/test-runner-helper-function.ts.mdx deleted file mode 100644 index af40e58b2dee..000000000000 --- a/docs/snippets/common/test-runner-helper-function.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; -import { getStoryContext, waitForPageReady } from '@storybook/test-runner'; - -const config: TestRunnerConfig = { - // Hook that is executed before the test runner starts running tests - setup() { - // Add your configuration here. - }, - /* Hook to execute before a story is initially visited before being rendered in the browser. - * The page argument is the Playwright's page object for the story. - * The context argument is a Storybook object containing the story's id, title, and name. - */ - async preVisit(page, context) { - // Add your configuration here. - }, - /* Hook to execute after a story is visited and fully rendered. - * The page argument is the Playwright's page object for the story - * The context argument is a Storybook object containing the story's id, title, and name. - */ - async postVisit(page, context) { - // Get the entire context of a story, including parameters, args, argTypes, etc. - const storyContext = await getStoryContext(page, context); - - // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.). - await waitForPageReady(page); - - // Add your configuration here. - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-hooks-example.js.mdx b/docs/snippets/common/test-runner-hooks-example.js.mdx deleted file mode 100644 index 18876266bf31..000000000000 --- a/docs/snippets/common/test-runner-hooks-example.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// .storybook/test-runner.js - -module.exports = { - // Hook that is executed before the test runner starts running tests - setup() { - // Add your configuration here. - }, - /* Hook to execute before a story is initially visited before being rendered in the browser. - * The page argument is the Playwright's page object for the story. - * The context argument is a Storybook object containing the story's id, title, and name. - */ - async preVisit(page, context) { - // Add your configuration here. - }, - /* Hook to execute after a story is visited and fully rendered. - * The page argument is the Playwright's page object for the story - * The context argument is a Storybook object containing the story's id, title, and name. - */ - async postVisit(page, context) { - // Add your configuration here. - }, -}; -``` diff --git a/docs/snippets/common/test-runner-hooks-example.ts.mdx b/docs/snippets/common/test-runner-hooks-example.ts.mdx deleted file mode 100644 index f06d4c71b063..000000000000 --- a/docs/snippets/common/test-runner-hooks-example.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; - -const config: TestRunnerConfig = { - // Hook that is executed before the test runner starts running tests - setup() { - // Add your configuration here. - }, - /* Hook to execute before a story is initially visited before being rendered in the browser. - * The page argument is the Playwright's page object for the story. - * The context argument is a Storybook object containing the story's id, title, and name. - */ - async preVisit(page, context) { - // Add your configuration here. - }, - /* Hook to execute after a story is visited and fully rendered. - * The page argument is the Playwright's page object for the story - * The context argument is a Storybook object containing the story's id, title, and name. - */ - async postVisit(page, context) { - // Add your configuration here. - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-image-snapshot-testing.js.mdx b/docs/snippets/common/test-runner-image-snapshot-testing.js.mdx deleted file mode 100644 index 4056d2a3cded..000000000000 --- a/docs/snippets/common/test-runner-image-snapshot-testing.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// .storybook/test-runner.js - -const { waitForPageReady } = require('@storybook/test-runner'); - -const { toMatchImageSnapshot } = require('jest-image-snapshot'); - -const customSnapshotsDir = `${process.cwd()}/__snapshots__`; - -/** @type { import('@storybook/test-runner').TestRunnerConfig } */ -module.exports = { - setup() { - expect.extend({ toMatchImageSnapshot }); - }, - async postVisit(page, context) { - // Waits for the page to be ready before taking a screenshot to ensure consistent results - await waitForPageReady(page); - - // To capture a screenshot for different browsers, add page.context().browser().browserType().name() to get the browser name to prefix the file name - const image = await page.screenshot(); - expect(image).toMatchImageSnapshot({ - customSnapshotsDir, - customSnapshotIdentifier: context.id, - }); - }, -}; -``` diff --git a/docs/snippets/common/test-runner-image-snapshot-testing.ts.mdx b/docs/snippets/common/test-runner-image-snapshot-testing.ts.mdx deleted file mode 100644 index 1cbde72f0475..000000000000 --- a/docs/snippets/common/test-runner-image-snapshot-testing.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import { TestRunnerConfig, waitForPageReady } from '@storybook/test-runner'; - -import { toMatchImageSnapshot } from 'jest-image-snapshot'; - -const customSnapshotsDir = `${process.cwd()}/__snapshots__`; - -const config: TestRunnerConfig = { - setup() { - expect.extend({ toMatchImageSnapshot }); - }, - async postVisit(page, context) { - // Waits for the page to be ready before taking a screenshot to ensure consistent results - await waitForPageReady(page); - - // To capture a screenshot for for different browsers, add page.context().browser().browserType().name() to get the browser name to prefix the file name - const image = await page.screenshot(); - expect(image).toMatchImageSnapshot({ - customSnapshotsDir, - customSnapshotIdentifier: context.id, - }); - }, -}; -export default config; -``` diff --git a/docs/snippets/common/test-runner-install.npm.js.mdx b/docs/snippets/common/test-runner-install.npm.js.mdx deleted file mode 100644 index 3d0adeb617dd..000000000000 --- a/docs/snippets/common/test-runner-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install @storybook/test-runner --save-dev -``` diff --git a/docs/snippets/common/test-runner-install.pnpm.js.mdx b/docs/snippets/common/test-runner-install.pnpm.js.mdx deleted file mode 100644 index 8129240a7741..000000000000 --- a/docs/snippets/common/test-runner-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/test-runner -``` diff --git a/docs/snippets/common/test-runner-install.yarn.js.mdx b/docs/snippets/common/test-runner-install.yarn.js.mdx deleted file mode 100644 index 21e4620e8113..000000000000 --- a/docs/snippets/common/test-runner-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/test-runner -``` diff --git a/docs/snippets/common/test-runner-local-build-workflow.yml.mdx b/docs/snippets/common/test-runner-local-build-workflow.yml.mdx deleted file mode 100644 index 0d066c05c066..000000000000 --- a/docs/snippets/common/test-runner-local-build-workflow.yml.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```yml -# .github/workflows/storybook-tests.yml - -name: 'Storybook Tests' -on: push -jobs: - test: - timeout-minutes: 60 - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version-file: '.nvmrc' - - name: Install dependencies - run: yarn - - name: Install Playwright - run: npx playwright install --with-deps - - name: Build Storybook - run: yarn build-storybook --quiet - - name: Serve Storybook and run tests - run: | - npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \ - "npx http-server storybook-static --port 6006 --silent" \ - "npx wait-on tcp:6006 && yarn test-storybook" -``` diff --git a/docs/snippets/common/test-runner-no-index-json.npm.js.mdx b/docs/snippets/common/test-runner-no-index-json.npm.js.mdx deleted file mode 100644 index eec0635b27e8..000000000000 --- a/docs/snippets/common/test-runner-no-index-json.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run test-storybook -- --no-index-json -``` diff --git a/docs/snippets/common/test-runner-no-index-json.pnpm.js.mdx b/docs/snippets/common/test-runner-no-index-json.pnpm.js.mdx deleted file mode 100644 index 326202bcc218..000000000000 --- a/docs/snippets/common/test-runner-no-index-json.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run test-storybook --no-index-json -``` diff --git a/docs/snippets/common/test-runner-no-index-json.yarn.js.mdx b/docs/snippets/common/test-runner-no-index-json.yarn.js.mdx deleted file mode 100644 index f53c2b82672a..000000000000 --- a/docs/snippets/common/test-runner-no-index-json.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn test-storybook --no-index-json -``` diff --git a/docs/snippets/common/test-runner-snapshot-resolver-custom-directory.js.mdx b/docs/snippets/common/test-runner-snapshot-resolver-custom-directory.js.mdx deleted file mode 100644 index 203c8d30cbb2..000000000000 --- a/docs/snippets/common/test-runner-snapshot-resolver-custom-directory.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// ./snapshot-resolver.js -import path from 'path'; - -export default { - resolveSnapshotPath: (testPath) => { - const fileName = path.basename(testPath); - const fileNameWithoutExtension = fileName.replace(/\.[^/.]+$/, ''); - // Defines the file extension for the snapshot file - const modifiedFileName = `${fileNameWithoutExtension}.snap`; - - // Configure Jest to generate snapshot files using the following convention (./src/test/__snapshots__/Button.stories.snap) - return path.join('./src/test/__snapshots__', modifiedFileName); - }, - resolveTestPath: (snapshotFilePath, snapshotExtension) => - path.basename(snapshotFilePath, snapshotExtension), - testPathForConsistencyCheck: 'example', -}; -``` diff --git a/docs/snippets/common/test-runner-tags-config.js.mdx b/docs/snippets/common/test-runner-tags-config.js.mdx deleted file mode 100644 index 6ebfbb6c9fb4..000000000000 --- a/docs/snippets/common/test-runner-tags-config.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/test-runner.js - -module.exports = { - tags: { - include: ['test-only', 'pages'], - exclude: ['no-tests', 'tokens'], - skip: ['skip-test', 'layout'], - }, -}; -``` diff --git a/docs/snippets/common/test-runner-tags-config.ts.mdx b/docs/snippets/common/test-runner-tags-config.ts.mdx deleted file mode 100644 index 023b13e77cc9..000000000000 --- a/docs/snippets/common/test-runner-tags-config.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; - -const config: TestRunnerConfig = { - tags: { - include: ['test-only', 'pages'], - exclude: ['no-tests', 'tokens'], - skip: ['skip-test', 'layout'], - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-tags-exclude.config.js.mdx b/docs/snippets/common/test-runner-tags-exclude.config.js.mdx deleted file mode 100644 index 5b73bb9bdf60..000000000000 --- a/docs/snippets/common/test-runner-tags-exclude.config.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/test-runner.js - -module.exports = { - tags: { - exclude: ['no-tests'], - }, -}; -``` diff --git a/docs/snippets/common/test-runner-tags-exclude.config.ts.mdx b/docs/snippets/common/test-runner-tags-exclude.config.ts.mdx deleted file mode 100644 index 9712292fe33c..000000000000 --- a/docs/snippets/common/test-runner-tags-exclude.config.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; - -const config: TestRunnerConfig = { - tags: { - exclude: ['no-tests'], - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-tags-include.config.js.mdx b/docs/snippets/common/test-runner-tags-include.config.js.mdx deleted file mode 100644 index 2b51222fed40..000000000000 --- a/docs/snippets/common/test-runner-tags-include.config.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/test-runner.js - -module.exports = { - tags: { - include: ['test-only'], - }, -}; -``` diff --git a/docs/snippets/common/test-runner-tags-include.config.ts.mdx b/docs/snippets/common/test-runner-tags-include.config.ts.mdx deleted file mode 100644 index b69e402aff92..000000000000 --- a/docs/snippets/common/test-runner-tags-include.config.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; - -const config: TestRunnerConfig = { - tags: { - include: ['test-only'], - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-tags-skip.config.js.mdx b/docs/snippets/common/test-runner-tags-skip.config.js.mdx deleted file mode 100644 index bc82ef46d752..000000000000 --- a/docs/snippets/common/test-runner-tags-skip.config.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/test-runner.js - -module.exports = { - tags: { - skip: ['skip-test'], - }, -}; -``` diff --git a/docs/snippets/common/test-runner-tags-skip.config.ts.mdx b/docs/snippets/common/test-runner-tags-skip.config.ts.mdx deleted file mode 100644 index 37a03bf7b1c4..000000000000 --- a/docs/snippets/common/test-runner-tags-skip.config.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; - -const config: TestRunnerConfig = { - tags: { - skip: ['skip-test'], - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-waitpageready.js.mdx b/docs/snippets/common/test-runner-waitpageready.js.mdx deleted file mode 100644 index 42e1f36d3338..000000000000 --- a/docs/snippets/common/test-runner-waitpageready.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// .storybook/test-runner.js - -const { waitForPageReady } = require('@storybook/test-runner'); - -const { toMatchImageSnapshot } = require('jest-image-snapshot'); - -const customSnapshotsDir = `${process.cwd()}/__snapshots__`; - -module.exports = { - setup() { - expect.extend({ toMatchImageSnapshot }); - }, - async postVisit(page, context) { - // Awaits for the page to be loaded and available including assets (e.g., fonts) - await waitForPageReady(page); - - // Generates a snapshot file based on the story identifier - const image = await page.screenshot(); - expect(image).toMatchImageSnapshot({ - customSnapshotsDir, - customSnapshotIdentifier: context.id, - }); - }, -}; -``` diff --git a/docs/snippets/common/test-runner-waitpageready.ts.mdx b/docs/snippets/common/test-runner-waitpageready.ts.mdx deleted file mode 100644 index d017273d9f96..000000000000 --- a/docs/snippets/common/test-runner-waitpageready.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// .storybook/test-runner.ts - -import type { TestRunnerConfig } from '@storybook/test-runner'; - -import { waitForPageReady } from '@storybook/test-runner'; - -import { toMatchImageSnapshot } from 'jest-image-snapshot'; - -const customSnapshotsDir = `${process.cwd()}/__snapshots__`; - -const config: TestRunnerConfig = { - setup() { - expect.extend({ toMatchImageSnapshot }); - }, - async postVisit(page, context) { - // Awaits for the page to be loaded and available including assets (e.g., fonts) - await waitForPageReady(page); - - // Generates a snapshot file based on the story identifier - const image = await page.screenshot(); - expect(image).toMatchImageSnapshot({ - customSnapshotsDir, - customSnapshotIdentifier: context.id, - }); - }, -}; - -export default config; -``` diff --git a/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx b/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx deleted file mode 100644 index 731bbee8baff..000000000000 --- a/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```yml -# .github/workflows/storybook-tests.yml - -name: Storybook Tests -on: deployment_status -jobs: - test: - timeout-minutes: 60 - runs-on: ubuntu-latest - if: github.event.deployment_status.state == 'success' - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version-file: '.nvmrc' - - name: Install dependencies - run: yarn - - name: Install Playwright - run: npx playwright install --with-deps - - name: Run Storybook tests - run: yarn test-storybook - env: - TARGET_URL: '${{ github.event.deployment_status.target_url }}' -``` diff --git a/docs/snippets/common/test-runner-with-index-json.npm.js.mdx b/docs/snippets/common/test-runner-with-index-json.npm.js.mdx deleted file mode 100644 index e0cc8c5cfd76..000000000000 --- a/docs/snippets/common/test-runner-with-index-json.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm run test-storybook -- --index-json -``` diff --git a/docs/snippets/common/test-runner-with-index-json.pnpm.js.mdx b/docs/snippets/common/test-runner-with-index-json.pnpm.js.mdx deleted file mode 100644 index d008d5bc5e0a..000000000000 --- a/docs/snippets/common/test-runner-with-index-json.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm run test-storybook --index-json -``` diff --git a/docs/snippets/common/test-runner-with-index-json.yarn.js.mdx b/docs/snippets/common/test-runner-with-index-json.yarn.js.mdx deleted file mode 100644 index b852aa053dc7..000000000000 --- a/docs/snippets/common/test-runner-with-index-json.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn test-storybook --index-json -``` diff --git a/docs/snippets/common/typed-csf-file.ts-4-9.mdx b/docs/snippets/common/typed-csf-file.ts-4-9.mdx deleted file mode 100644 index 103c3317cd41..000000000000 --- a/docs/snippets/common/typed-csf-file.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Button.stories.ts - -// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.) -import type { Meta, StoryObj } from '@storybook/your-renderer'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Basic = {} satisfies Story; - -export const Primary = { - args: { - primary: true, - }, -} satisfies Story; -``` diff --git a/docs/snippets/common/typed-csf-file.ts.mdx b/docs/snippets/common/typed-csf-file.ts.mdx deleted file mode 100644 index 1380398b0ac7..000000000000 --- a/docs/snippets/common/typed-csf-file.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Button.stories.ts - -// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.) -import type { Meta, StoryObj } from '@storybook/your-renderer'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; -export default meta; - -type Story = StoryObj<typeof Button>; - -export const Basic: Story = {}; - -export const Primary: Story = { - args: { - primary: true, - }, -}; -``` diff --git a/docs/snippets/common/upgrade-command-specific-version.npx.js.mdx b/docs/snippets/common/upgrade-command-specific-version.npx.js.mdx deleted file mode 100644 index 519145719c5c..000000000000 --- a/docs/snippets/common/upgrade-command-specific-version.npx.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@7.6.6 upgrade -``` diff --git a/docs/snippets/common/upgrade-command-specific-version.pnpm.js.mdx b/docs/snippets/common/upgrade-command-specific-version.pnpm.js.mdx deleted file mode 100644 index 344c5e97120b..000000000000 --- a/docs/snippets/common/upgrade-command-specific-version.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@7.6.6 upgrade -``` diff --git a/docs/snippets/common/upgrade-command-specific-version.yarn.js.mdx b/docs/snippets/common/upgrade-command-specific-version.yarn.js.mdx deleted file mode 100644 index d4f7ac06314a..000000000000 --- a/docs/snippets/common/upgrade-command-specific-version.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@7.6.6 upgrade -``` diff --git a/docs/snippets/common/your-theme.js.mdx b/docs/snippets/common/your-theme.js.mdx deleted file mode 100644 index 1e596e518813..000000000000 --- a/docs/snippets/common/your-theme.js.mdx +++ /dev/null @@ -1,44 +0,0 @@ -```js -// .storybook/YourTheme.js - -import { create } from '@storybook/theming/create'; - -export default create({ - base: 'light', - // Typography - fontBase: '"Open Sans", sans-serif', - fontCode: 'monospace', - - brandTitle: 'My custom Storybook', - brandUrl: 'https://example.com', - brandImage: 'https://storybook.js.org/images/placeholders/350x150.png', - brandTarget: '_self', - - // - colorPrimary: '#3A10E5', - colorSecondary: '#585C6D', - - // UI - appBg: '#ffffff', - appContentBg: '#ffffff', - appPreviewBg: '#ffffff', - appBorderColor: '#585C6D', - appBorderRadius: 4, - - // Text colors - textColor: '#10162F', - textInverseColor: '#ffffff', - - // Toolbar default and active colors - barTextColor: '#9E9E9E', - barSelectedColor: '#585C6D', - barHoverColor: '#585C6D', - barBg: '#ffffff', - - // Form colors - inputBg: '#ffffff', - inputBorder: '#10162F', - inputTextColor: '#10162F', - inputBorderRadius: 2, -}); -``` diff --git a/docs/snippets/ember/button-story-default-export-with-component.js.mdx b/docs/snippets/ember/button-story-default-export-with-component.js.mdx deleted file mode 100644 index c1e6396ad3e1..000000000000 --- a/docs/snippets/ember/button-story-default-export-with-component.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'button', -}; -``` diff --git a/docs/snippets/ember/storybook-ember-cli-build.js.mdx b/docs/snippets/ember/storybook-ember-cli-build.js.mdx deleted file mode 100644 index 426e63872b82..000000000000 --- a/docs/snippets/ember/storybook-ember-cli-build.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// ember-cli-build.js - -'use strict'; - -const EmberApp = require('ember-cli/lib/broccoli/ember-app'); - -module.exports = function (defaults) { - const app = new EmberApp(defaults, { - '@storybook/ember-cli-storybook': { - enableAddonDocsIntegration: true, - }, - }); - - return app.toTree(); -}; -``` diff --git a/docs/snippets/ember/storybook-preview-custom-metadata.js.mdx b/docs/snippets/ember/storybook-preview-custom-metadata.js.mdx deleted file mode 100644 index ec446d1559ab..000000000000 --- a/docs/snippets/ember/storybook-preview-custom-metadata.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// .storybook/preview.js - -import { setJSONDoc } from '@storybook/addon-docs/ember'; - -import docJson from '../dist/storybook-docgen/index.json'; -setJSONDoc(docJson); - -export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - }, -}; -``` diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx deleted file mode 100644 index 0e8bb5daf5e9..000000000000 --- a/docs/snippets/html/button-story-component-decorator.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// Button.stories.js - -import { createButton } from './Button'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - decorators: [ - (story) => { - const decorator = document.createElement('div'); - decorator.style.margin = '3em'; - decorator.appendChild(story()); - return decorator; - }, - ], -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args) => createButton(args), -}; -``` diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx deleted file mode 100644 index d848aa88e5b0..000000000000 --- a/docs/snippets/html/button-story-component-decorator.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; - -import { createButton, ButtonArgs } from './Button'; - -const meta: Meta<ButtonArgs> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - decorators: [ - (story) => { - const decorator = document.createElement('div'); - decorator.style.margin = '3em'; - decorator.appendChild(story()); - return decorator; - }, - ], -}; - -export default meta; -type Story = StoryObj<ButtonArgs>; - -export const Primary: Story = { - render: (args) => createButton(args), -}; -``` diff --git a/docs/snippets/html/button-story-default-export.js.mdx b/docs/snippets/html/button-story-default-export.js.mdx deleted file mode 100644 index 115570702af3..000000000000 --- a/docs/snippets/html/button-story-default-export.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -import { createButton } from './Button'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; -``` diff --git a/docs/snippets/html/button-story-default-export.ts.mdx b/docs/snippets/html/button-story-default-export.ts.mdx deleted file mode 100644 index 43f7e6277789..000000000000 --- a/docs/snippets/html/button-story-default-export.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/html'; - -import { createButton, ButtonArgs } from './Button'; - -const meta: Meta<ButtonArgs> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -export default meta; -``` diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx deleted file mode 100644 index 7c29bde7f844..000000000000 --- a/docs/snippets/html/button-story-rename-story.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js -import { createButton } from './Button'; - -export default { - render: (args) => createButton(args), -}; - -export const Primary = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx deleted file mode 100644 index 3ec9bac27f69..000000000000 --- a/docs/snippets/html/button-story-rename-story.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/html'; - -import { createButton, ButtonArgs } from './Button'; - -const meta: Meta<ButtonArgs> = { - render: (args) => createButton(args), -}; - -export default meta; -type Story = StoryObj<ButtonArgs>; - -export const Primary: Story = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx deleted file mode 100644 index 5a898b52020d..000000000000 --- a/docs/snippets/html/button-story-using-args.js.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```js -// Button.stories.js - -import { createButton } from './Button'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args) => createButton(args), - args: { - primary: true, - label: 'Button', - }, -}; - -export const Secondary = { - render: (args) => createButton(args), - args: { - ...Primary.args, - label: '😄👍😍💯', - }, -}; - -export const Tertiary = { - render: (args) => createButton(args), - args: { - ...Primary.args, - label: '📚📕📈🤓', - }, -}; -``` diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx deleted file mode 100644 index 3fc7abe1feb4..000000000000 --- a/docs/snippets/html/button-story-using-args.ts.mdx +++ /dev/null @@ -1,46 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; -import { createButton, ButtonArgs } from './Button'; - -const meta: Meta<ButtonArgs> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -export default meta; -type Story = StoryObj<ButtonArgs>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => createButton(args), - args: { - primary: true, - label: 'Button', - }, -}; - -export const Secondary: Story = { - render: (args) => createButton(args), - args: { - ...Primary.args, - label: '😄👍😍💯', - }, -}; - -export const Tertiary: Story = { - render: (args) => createButton(args), - args: { - ...Primary.args, - label: '📚📕📈🤓', - }, -}; -``` diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx deleted file mode 100644 index a1d1d6f14fa9..000000000000 --- a/docs/snippets/html/button-story-with-args.js.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```js -// Button.stories.js - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args) => { - const btn = document.createElement('button'); - btn.innerText = args.label; - - const mode = args.primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - btn.className = ['storybook-button', 'storybook-button--medium', mode].join(' '); - - return btn; - }, - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx deleted file mode 100644 index ae7e68a8a292..000000000000 --- a/docs/snippets/html/button-story-with-args.ts.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; - -type ButtonArgs = { - primary: boolean; - label: string; -}; - -const meta: Meta<ButtonArgs> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -export default meta; -type Story = StoryObj<ButtonArgs>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => { - const btn = document.createElement('button'); - btn.innerText = args.label; - - const mode = args.primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - btn.className = ['storybook-button', 'storybook-button--medium', mode].join(' '); - - return btn; - }, - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx deleted file mode 100644 index ffe9a4107d39..000000000000 --- a/docs/snippets/html/button-story-with-emojis.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// Button.stories.js - -import { createButton } from './Button'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args) => createButton({ backgroundColor: '#ff0', label: 'Button' }), -}; - -export const Secondary = { - render: (args) => createButton({ backgroundColor: '#ff0', label: '😄👍😍💯' }), -}; - -export const Tertiary = { - render: (args) => createButton({ backgroundColor: '#ff0', label: '📚📕📈🤓' }), -}; -``` diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx deleted file mode 100644 index 70bee5864170..000000000000 --- a/docs/snippets/html/button-story-with-emojis.ts.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; -import { createButton, ButtonArgs } from './Button'; - -const meta: Meta<ButtonArgs> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -export default meta; -type Story = StoryObj<ButtonArgs>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => createButton({ backgroundColor: '#ff0', label: 'Button' }), -}; - -export const Secondary: Story = { - render: (args) => createButton({ backgroundColor: '#ff0', label: '😄👍😍💯' }), -}; - -export const Tertiary: Story = { - render: (args) => createButton({ backgroundColor: '#ff0', label: '📚📕📈🤓' }), -}; -``` diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx deleted file mode 100644 index 79ff94bc096d..000000000000 --- a/docs/snippets/html/button-story.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// Button.stories.js - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => { - const btn = document.createElement('button'); - btn.innerText = 'Button'; - - btn.className = [ - 'storybook-button', - 'storybook-button--medium', - 'storybook-button--primary', - ].join(' '); - - return btn; - }, -}; -``` diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx deleted file mode 100644 index 14407b055400..000000000000 --- a/docs/snippets/html/button-story.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; - -const meta: Meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', -}; - -export default meta; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: StoryObj = { - render: () => { - const btn = document.createElement('button'); - btn.innerText = 'Button'; - - btn.className = [ - 'storybook-button', - 'storybook-button--medium', - 'storybook-button--primary', - ].join(' '); - - return btn; - }, -}; -``` diff --git a/docs/snippets/html/histogram-story.js.mdx b/docs/snippets/html/histogram-story.js.mdx deleted file mode 100644 index ae18d8b59870..000000000000 --- a/docs/snippets/html/histogram-story.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// Histogram.stories.js - -import { createHistogram } from './Histogram'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Histogram', -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Default = { - render: (args) => createHistogram(args), - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/html/histogram-story.ts.mdx b/docs/snippets/html/histogram-story.ts.mdx deleted file mode 100644 index 94104c16aba0..000000000000 --- a/docs/snippets/html/histogram-story.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// Histogram.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; - -import { createHistogram, HistogramProps } from './Histogram'; - -const meta: Meta<HistogramProps> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Histogram', -}; - -export default meta; -type Story = StoryObj<HistogramProps>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Default: Story = { - render: (args) => createHistogram(args), - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx deleted file mode 100644 index d665e8b05312..000000000000 --- a/docs/snippets/html/list-story-expanded.js.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```js -// List.stories.js - -import { createList } from './List'; -import { createListItem } from './ListItem'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Empty = { - render: () => createList(args), -}; - -export const OneItem = { - render: (args) => { - const list = createList(args); - list.appendChild(createListItem()); - return list; - }, -}; - -export const ManyItems = { - render: (args) => { - const list = createList(args); - list.appendChild(createListItem()); - list.appendChild(createListItem()); - list.appendChild(createListItem()); - return list; - }, -}; -``` diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx deleted file mode 100644 index 610fbee6dc08..000000000000 --- a/docs/snippets/html/list-story-expanded.ts.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; - -import { createList, ListArgs } from './List'; -import { createListItem } from './ListItem'; - -const meta: Meta<ListArgs> = { - title: 'List', -}; - -export default meta; -type Story = StoryObj<ListArgs>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Empty: Story = { - render: () => createList(args), -}; - -export const OneItem: Story = { - render: (args) => { - const list = createList(args); - list.appendChild(createListItem()); - return list; - }, -}; - -export const ManyItems: Story = { - render: (args) => { - const list = createList(args); - list.appendChild(createListItem()); - list.appendChild(createListItem()); - list.appendChild(createListItem()); - return list; - }, -}; -``` diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx deleted file mode 100644 index fe46d1a44f71..000000000000 --- a/docs/snippets/html/list-story-reuse-data.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// List.stories.js - -import { createList } from './List'; -import { createListItem } from './ListItem'; - -// 👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -export default { - title: 'List', -}; - -export const ManyItems = { - render: (args) => { - const list = createList(args); - list.appendChild(createListItem(Selected.args)); - list.appendChild(createListItem(Unselected.args)); - list.appendChild(createListItem(Unselected.args)); - return list; - }, -}; -``` diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx deleted file mode 100644 index 50f984c0bb85..000000000000 --- a/docs/snippets/html/list-story-reuse-data.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; - -import { createList, ListArgs } from './List'; -import { createListItem } from './ListItem'; - -// 👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -const meta: Meta<ListArgs> = { - title: 'List', -}; - -export default meta; -type Story = StoryObj<ListArgs>; - -export const ManyItems: Story = { - render: (args) => { - const list = createList(args); - list.appendChild(createListItem(Selected.args)); - list.appendChild(createListItem(Unselected.args)); - list.appendChild(createListItem(Unselected.args)); - return list; - }, -}; -``` diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx deleted file mode 100644 index c76cb0c5accf..000000000000 --- a/docs/snippets/html/list-story-starter.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// List.stories.js - -import { createList } from './List'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', -}; - -// Always an empty list, not super interesting -export const Empty = { - render: (args) => createList(args), -}; -``` diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx deleted file mode 100644 index db510c19e30a..000000000000 --- a/docs/snippets/html/list-story-starter.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; - -import { createList, ListArgs } from './List'; - -const meta: Meta<ListArgs> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', -}; - -export default meta; -type Story = StoryObj<ListArgs>; - -// Always an empty list, not super interesting -export const Empty: Story = { - render: (args) => createList(args), -}; -``` diff --git a/docs/snippets/html/your-component.js.mdx b/docs/snippets/html/your-component.js.mdx deleted file mode 100644 index 8d9015cefd60..000000000000 --- a/docs/snippets/html/your-component.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// YourComponent.stories.js - -import { createYourComponent } 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/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'YourComponent', -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const FirstStory = { - render: (args) => createYourComponent(args), - args: { - // 👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/html/your-component.ts.mdx b/docs/snippets/html/your-component.ts.mdx deleted file mode 100644 index ff68c505d294..000000000000 --- a/docs/snippets/html/your-component.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/html'; - -import { createYourComponent, ComponentProps } from './YourComponent'; - -//👇 This default export determines where your story goes in the story list -const meta: Meta<ComponentProps> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'YourComponent', -}; - -export default meta; -type Story = StoryObj<ComponentProps>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const FirstStory: Story = { - render: (args) => createYourComponent(args), - args: { - // 👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/preact/button-story-default-export-with-component.js.mdx b/docs/snippets/preact/button-story-default-export-with-component.js.mdx deleted file mode 100644 index dfffb5de27e3..000000000000 --- a/docs/snippets/preact/button-story-default-export-with-component.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; -``` diff --git a/docs/snippets/preact/button-story-with-args.js.mdx b/docs/snippets/preact/button-story-with-args.js.mdx deleted file mode 100644 index b304f65ce09b..000000000000 --- a/docs/snippets/preact/button-story-with-args.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// Button.stories.js|jsx - -/** @jsx h */ -import { h } from 'preact'; - -import { Button } from './Button'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args) => <Button {...args} />, - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/preact/button-story.js.mdx b/docs/snippets/preact/button-story.js.mdx deleted file mode 100644 index ada4a996d2b1..000000000000 --- a/docs/snippets/preact/button-story.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// Button.stories.js|jsx - -/** @jsx h */ -import { h } from 'preact'; - -import { Button } from './Button'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => <Button primary label="Button" />, -}; -``` diff --git a/docs/snippets/preact/component-story-with-custom-render-function.js.mdx b/docs/snippets/preact/component-story-with-custom-render-function.js.mdx deleted file mode 100644 index c7d710a67622..000000000000 --- a/docs/snippets/preact/component-story-with-custom-render-function.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -/** @jsx h */ -import { h } from 'preact'; - -import { Layout } from './Layout'; - -import { MyComponent } from './MyComponent'; - -export default { - 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/preact/component-test-with-testing-library.js.mdx b/docs/snippets/preact/component-test-with-testing-library.js.mdx deleted file mode 100644 index 9e50eedd2dbe..000000000000 --- a/docs/snippets/preact/component-test-with-testing-library.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// Form.test.js - -import '@testing-library/jest-dom/extend-expect'; - -import { h } from 'preact'; - -import { render, fireEvent } from '@testing-library/preact'; - -import { InvalidForm } from './LoginForm.stories'; //👈 Our stories imported here. - -it('Checks if the form is valid', () => { - const { getByTestId, getByText } = render(<InvalidForm {...InvalidForm.args} />); - - fireEvent.click(getByText('Submit')); - - const isFormValid = getByTestId('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/preact/histogram-story.js.mdx b/docs/snippets/preact/histogram-story.js.mdx deleted file mode 100644 index 781dc6fe53ac..000000000000 --- a/docs/snippets/preact/histogram-story.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// Histogram.stories.js|jsx - -/** @jsx h */ -import { h } from 'preact'; - -import { Histogram } from './Histogram'; - -export default { - component: Histogram, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Default = { - render: (args) => <Histogram {...args} />, - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/preact/your-component.js.mdx b/docs/snippets/preact/your-component.js.mdx deleted file mode 100644 index a7c557d4afed..000000000000 --- a/docs/snippets/preact/your-component.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// YourComponent.stories.js|jsx - -/** @jsx h */ -import { h } from 'preact'; - -import { YourComponent } from './YourComponent'; - -//👇 This default export determines where your story goes in the story list -export default { - component: YourComponent, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const FirstStory = { - render: (args) => <YourComponent {...args} />, - args: { - //👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/react/addon-highlight-reset.js.mdx b/docs/snippets/react/addon-highlight-reset.js.mdx deleted file mode 100644 index f969cce998a4..000000000000 --- a/docs/snippets/react/addon-highlight-reset.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -export const ResetHighlight = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements - emit(HIGHLIGHT, { - elements: ['header', 'section', 'footer'], - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/addon-highlight-reset.ts-4-9.mdx b/docs/snippets/react/addon-highlight-reset.ts-4-9.mdx deleted file mode 100644 index 07e9f341c064..000000000000 --- a/docs/snippets/react/addon-highlight-reset.ts-4-9.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ResetHighlight: Story = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements - emit(HIGHLIGHT, { - elements: ['header', 'section', 'footer'], - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/addon-highlight-reset.ts.mdx b/docs/snippets/react/addon-highlight-reset.ts.mdx deleted file mode 100644 index 7ff20b0a39e5..000000000000 --- a/docs/snippets/react/addon-highlight-reset.ts.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const ResetHighlight: Story = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements - emit(HIGHLIGHT, { - elements: ['header', 'section', 'footer'], - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/button-component-with-proptypes.js.mdx b/docs/snippets/react/button-component-with-proptypes.js.mdx deleted file mode 100644 index a951fadea90e..000000000000 --- a/docs/snippets/react/button-component-with-proptypes.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// Button.js|jsx - -import React from 'react'; - -import PropTypes from 'prop-types'; - -export function Button({ isDisabled, content }) { - return ( - <button type="button" disabled={isDisabled}> - {content} - </button> - ); -} - -Button.propTypes = { - /** - Checks if the button should be disabled - */ - isDisabled: PropTypes.bool.isRequired, - /** - The display content of the button - */ - content: PropTypes.string.isRequired, -}; -``` diff --git a/docs/snippets/react/button-component-with-proptypes.ts.mdx b/docs/snippets/react/button-component-with-proptypes.ts.mdx deleted file mode 100644 index 8e52ba8e6545..000000000000 --- a/docs/snippets/react/button-component-with-proptypes.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```tsx -// Button.ts|tsx - -export interface ButtonProps { - /** - * Checks if the button should be disabled - */ - isDisabled: boolean; - /** - The display content of the button - */ - content: string; -} - -export const Button: React.FC<ButtonProps> = ({ isDisabled = false, content = '' }) => { - return ( - <button type="button" disabled={isDisabled}> - {content} - </button> - ); -}; -``` diff --git a/docs/snippets/react/button-group-story.js.mdx b/docs/snippets/react/button-group-story.js.mdx deleted file mode 100644 index bb82e5ac2e3a..000000000000 --- a/docs/snippets/react/button-group-story.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// ButtonGroup.stories.js|jsx - -import { ButtonGroup } from '../ButtonGroup'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -export default { - component: ButtonGroup, -}; - -export const Pair = { - args: { - buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], - orientation: 'horizontal', - }, -}; -``` diff --git a/docs/snippets/react/button-group-story.ts-4-9.mdx b/docs/snippets/react/button-group-story.ts-4-9.mdx deleted file mode 100644 index d3f99052a66e..000000000000 --- a/docs/snippets/react/button-group-story.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// ButtonGroup.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { ButtonGroup } from '../ButtonGroup'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -const meta = { - 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/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx deleted file mode 100644 index 6311bc0e54ec..000000000000 --- a/docs/snippets/react/button-group-story.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// ButtonGroup.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { ButtonGroup } from '../ButtonGroup'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -const meta: Meta<typeof 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/react/button-implementation.js.mdx b/docs/snippets/react/button-implementation.js.mdx deleted file mode 100644 index 91030e82f69b..000000000000 --- a/docs/snippets/react/button-implementation.js.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```js -// Button.js|jsx - -import React from 'react'; - -import PropTypes from 'prop-types'; - -/** - * Primary UI component for user interaction - */ -export const Button = ({ primary, backgroundColor, size, label, ...props }) => { - // the component implementation -}; - -Button.propTypes = { - /** - * Is this the principal call to action on the page? - */ - primary: PropTypes.bool, - /** - * What background color to use - */ - backgroundColor: PropTypes.string, - /** - * How large should the button be? - */ - size: PropTypes.oneOf(['small', 'medium', 'large']), - /** - * Button contents - */ - label: PropTypes.string.isRequired, - /** - * Optional click handler - */ - onClick: PropTypes.func, -}; -``` diff --git a/docs/snippets/react/button-implementation.ts.mdx b/docs/snippets/react/button-implementation.ts.mdx deleted file mode 100644 index 3f910d601105..000000000000 --- a/docs/snippets/react/button-implementation.ts.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.ts|tsx - -export interface ButtonProps { - /** - * Is this the principal call to action on the page? - */ - primary?: boolean; - /** - * What background color to use - */ - backgroundColor?: string; - /** - * How large should the button be? - */ - size?: 'small' | 'medium' | 'large'; - /** - * Button contents - */ - label: string; - /** - * Optional click handler - */ - onClick?: () => void; -} - -/** - * Primary UI component for user interaction - */ -export const Button: React.FC<ButtonProps> = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}) => { - // the component implementation -}; -``` diff --git a/docs/snippets/react/button-snapshot-test-portable-stories.jest.js.mdx b/docs/snippets/react/button-snapshot-test-portable-stories.jest.js.mdx deleted file mode 100644 index 335eb461d736..000000000000 --- a/docs/snippets/react/button-snapshot-test-portable-stories.jest.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// test/Button.test.js|ts -import { render } from '@testing-library/react'; - -import { composeStories } from '@storybook/react'; - -import * as stories from '../stories/Button.stories'; - -const { Primary } = composeStories(stories); -test('Button snapshot', async () => { - const mounted = render(<Primary />); - expect(mounted.container).toMatchSnapshot(); -}); -``` diff --git a/docs/snippets/react/button-snapshot-test-portable-stories.vitest.js.mdx b/docs/snippets/react/button-snapshot-test-portable-stories.vitest.js.mdx deleted file mode 100644 index 982992cc65aa..000000000000 --- a/docs/snippets/react/button-snapshot-test-portable-stories.vitest.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// test/Button.test.js|ts -// @vitest-environment jsdom - -import { expect, test } from 'vitest'; - -import { render } from '@testing-library/react'; - -import { composeStories } from '@storybook/react'; - -import * as stories from '../stories/Button.stories'; - -const { Primary } = composeStories(stories); -test('Button snapshot', async () => { - const mounted = render(Primary()); - expect(mounted.container).toMatchSnapshot(); -}); -``` diff --git a/docs/snippets/react/button-story-click-handler-args.js.mdx b/docs/snippets/react/button-story-click-handler-args.js.mdx deleted file mode 100644 index e8ed7a43a215..000000000000 --- a/docs/snippets/react/button-story-click-handler-args.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// Button.stories.js|jsx - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Text = { - args: { - label: 'Hello', - onClick: action('clicked'), - }, - render: ({ label, onClick }) => <Button label={label} onClick={onClick} />, -}; -``` diff --git a/docs/snippets/react/button-story-click-handler-args.ts-4-9.mdx b/docs/snippets/react/button-story-click-handler-args.ts-4-9.mdx deleted file mode 100644 index b8e1da1f4f08..000000000000 --- a/docs/snippets/react/button-story-click-handler-args.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -const meta = { - 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/react/button-story-click-handler-args.ts.mdx b/docs/snippets/react/button-story-click-handler-args.ts.mdx deleted file mode 100644 index ac26677e7d4f..000000000000 --- a/docs/snippets/react/button-story-click-handler-args.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -const meta: Meta<typeof 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/react/button-story-click-handler-simple-docs.js.mdx b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx deleted file mode 100644 index 15bb26911238..000000000000 --- a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js|jsx - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Text = { - render: ({ label, onClick }) => <Button label={label} onClick={onClick} />, -}; -``` diff --git a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx deleted file mode 100644 index 7737407e7aeb..000000000000 --- a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -} - -export const Text = { - args: {...}, -}; -``` diff --git a/docs/snippets/react/button-story-click-handler-simplificated.ts-4-9.mdx b/docs/snippets/react/button-story-click-handler-simplificated.ts-4-9.mdx deleted file mode 100644 index e5c5ad5be29c..000000000000 --- a/docs/snippets/react/button-story-click-handler-simplificated.ts-4-9.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Text: Story = { - args: {}, -}; -``` diff --git a/docs/snippets/react/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/react/button-story-click-handler-simplificated.ts.mdx deleted file mode 100644 index 3c3f0eeb0eb1..000000000000 --- a/docs/snippets/react/button-story-click-handler-simplificated.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Text: Story = { - args: {}, -}; -``` diff --git a/docs/snippets/react/button-story-click-handler.js.mdx b/docs/snippets/react/button-story-click-handler.js.mdx deleted file mode 100644 index 062a1cbaa7a8..000000000000 --- a/docs/snippets/react/button-story-click-handler.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js|jsx - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Text = { - render: () => <Button label="Hello" onClick={action('clicked')} />, -}; -``` diff --git a/docs/snippets/react/button-story-click-handler.ts-4-9.mdx b/docs/snippets/react/button-story-click-handler.ts-4-9.mdx deleted file mode 100644 index 8102c71db99a..000000000000 --- a/docs/snippets/react/button-story-click-handler.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -const meta = { - 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/react/button-story-click-handler.ts.mdx b/docs/snippets/react/button-story-click-handler.ts.mdx deleted file mode 100644 index ee1c106af89e..000000000000 --- a/docs/snippets/react/button-story-click-handler.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -const meta: Meta<typeof 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/react/button-story-component-args-primary.js.mdx b/docs/snippets/react/button-story-component-args-primary.js.mdx deleted file mode 100644 index fff9e33773a2..000000000000 --- a/docs/snippets/react/button-story-component-args-primary.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, - //👇 Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - args: { - //👇 Now all Button stories will be primary. - primary: true, - }, -}; -``` diff --git a/docs/snippets/react/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/react/button-story-component-args-primary.ts-4-9.mdx deleted file mode 100644 index cef596a5b4fb..000000000000 --- a/docs/snippets/react/button-story-component-args-primary.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - 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/react/button-story-component-args-primary.ts.mdx b/docs/snippets/react/button-story-component-args-primary.ts.mdx deleted file mode 100644 index c9a88021fd50..000000000000 --- a/docs/snippets/react/button-story-component-args-primary.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof 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/react/button-story-component-decorator.js.mdx b/docs/snippets/react/button-story-component-decorator.js.mdx deleted file mode 100644 index c565eabe4b30..000000000000 --- a/docs/snippets/react/button-story-component-decorator.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, - 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/react/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/react/button-story-component-decorator.ts-4-9.mdx deleted file mode 100644 index 7483aa1f61b9..000000000000 --- a/docs/snippets/react/button-story-component-decorator.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - component: Button, - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */} - <Story /> - </div> - ), - ], -} satisfies Meta<typeof Button>; - -export default meta; -``` diff --git a/docs/snippets/react/button-story-component-decorator.ts.mdx b/docs/snippets/react/button-story-component-decorator.ts.mdx deleted file mode 100644 index 658181e8c9e1..000000000000 --- a/docs/snippets/react/button-story-component-decorator.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */} - <Story /> - </div> - ), - ], -}; - -export default meta; -``` diff --git a/docs/snippets/react/button-story-decorator.js.mdx b/docs/snippets/react/button-story-decorator.js.mdx deleted file mode 100644 index 20a4568d5a56..000000000000 --- a/docs/snippets/react/button-story-decorator.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Primary = { - 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/react/button-story-decorator.ts-4-9.mdx b/docs/snippets/react/button-story-decorator.ts-4-9.mdx deleted file mode 100644 index 22bd11b258df..000000000000 --- a/docs/snippets/react/button-story-decorator.ts-4-9.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - 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/react/button-story-decorator.ts.mdx b/docs/snippets/react/button-story-decorator.ts.mdx deleted file mode 100644 index a4ee539203aa..000000000000 --- a/docs/snippets/react/button-story-decorator.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Primary: Story = { - 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/react/button-story-default-export-with-component.js.mdx b/docs/snippets/react/button-story-default-export-with-component.js.mdx deleted file mode 100644 index dfffb5de27e3..000000000000 --- a/docs/snippets/react/button-story-default-export-with-component.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; -``` diff --git a/docs/snippets/react/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/react/button-story-default-export-with-component.ts-4-9.mdx deleted file mode 100644 index baf8ce395ad5..000000000000 --- a/docs/snippets/react/button-story-default-export-with-component.ts-4-9.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -``` diff --git a/docs/snippets/react/button-story-default-export-with-component.ts.mdx b/docs/snippets/react/button-story-default-export-with-component.ts.mdx deleted file mode 100644 index c9bf040b6352..000000000000 --- a/docs/snippets/react/button-story-default-export-with-component.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -``` diff --git a/docs/snippets/react/button-story-rename-story.js.mdx b/docs/snippets/react/button-story-rename-story.js.mdx deleted file mode 100644 index 2f7129b1f52e..000000000000 --- a/docs/snippets/react/button-story-rename-story.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js|jsx -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Primary = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/react/button-story-rename-story.ts-4-9.mdx b/docs/snippets/react/button-story-rename-story.ts-4-9.mdx deleted file mode 100644 index 2de6072ba00b..000000000000 --- a/docs/snippets/react/button-story-rename-story.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts|tsx -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx deleted file mode 100644 index 7868d342afe2..000000000000 --- a/docs/snippets/react/button-story-rename-story.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts|tsx -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Primary: Story = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/react/button-story-using-args.js.mdx b/docs/snippets/react/button-story-using-args.js.mdx deleted file mode 100644 index 65cfeddc8fa2..000000000000 --- a/docs/snippets/react/button-story-using-args.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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/react/button-story-using-args.ts-4-9.mdx b/docs/snippets/react/button-story-using-args.ts-4-9.mdx deleted file mode 100644 index d819292ca985..000000000000 --- a/docs/snippets/react/button-story-using-args.ts-4-9.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -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: { - 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/react/button-story-using-args.ts.mdx b/docs/snippets/react/button-story-using-args.ts.mdx deleted file mode 100644 index ca6c78f78b35..000000000000 --- a/docs/snippets/react/button-story-using-args.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Primary: Story = { - args: { - 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/react/button-story-with-addon-example.js.mdx b/docs/snippets/react/button-story-with-addon-example.js.mdx deleted file mode 100644 index ad4d5c006460..000000000000 --- a/docs/snippets/react/button-story-with-addon-example.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// Button.stories.js|jsx - -import React from 'react'; - -import { Button } from './Button'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: '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/react/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/react/button-story-with-addon-example.ts-4-9.mdx deleted file mode 100644 index 27dcc0fc7f8f..000000000000 --- a/docs/snippets/react/button-story-with-addon-example.ts-4-9.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: '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/api/csf - * to learn how to use render functions. - */ -export const Basic: Story = { - render: () => <Button>Hello</Button>, -}; -``` diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx deleted file mode 100644 index 35e185179709..000000000000 --- a/docs/snippets/react/button-story-with-addon-example.ts.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#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/api/csf - * to learn how to use render functions. - */ -export const Basic: Story = { - render: () => <Button>Hello</Button>, -}; -``` diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx deleted file mode 100644 index b185421f6c95..000000000000 --- a/docs/snippets/react/button-story-with-args.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Primary = { - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/react/button-story-with-args.ts-4-9.mdx b/docs/snippets/react/button-story-with-args.ts-4-9.mdx deleted file mode 100644 index ddf531e2e8a8..000000000000 --- a/docs/snippets/react/button-story-with-args.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -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, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx deleted file mode 100644 index bc92ada612e2..000000000000 --- a/docs/snippets/react/button-story-with-args.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -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, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/react/button-story-with-emojis.js.mdx b/docs/snippets/react/button-story-with-emojis.js.mdx deleted file mode 100644 index 87e328b8a841..000000000000 --- a/docs/snippets/react/button-story-with-emojis.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const 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/react/button-story-with-emojis.ts-4-9.mdx b/docs/snippets/react/button-story-with-emojis.ts-4-9.mdx deleted file mode 100644 index 31847c8be69f..000000000000 --- a/docs/snippets/react/button-story-with-emojis.ts-4-9.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - 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/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/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx deleted file mode 100644 index a2aae6b70359..000000000000 --- a/docs/snippets/react/button-story-with-emojis.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof 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/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/react/button-story-with-parameters.js.mdx b/docs/snippets/react/button-story-with-parameters.js.mdx deleted file mode 100644 index b377745e8dbf..000000000000 --- a/docs/snippets/react/button-story-with-parameters.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// Button.stories.js|jsx - -import React from 'react'; - -import { Button } from './Button'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - component: Button, - //👇 Creates specific parameters for the story - parameters: { - backgrounds: { - values: [ - { name: 'red', value: '#f00' }, - { name: 'green', value: '#0f0' }, - ], - }, - }, -}; -``` diff --git a/docs/snippets/react/button-story-with-parameters.ts-4-9.mdx b/docs/snippets/react/button-story-with-parameters.ts-4-9.mdx deleted file mode 100644 index fc5fd7bd0bab..000000000000 --- a/docs/snippets/react/button-story-with-parameters.ts-4-9.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import { Button } from './Button'; - -import type { Meta } from '@storybook/react'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - component: Button, - //👇 Creates specific parameters for the story - parameters: { - backgrounds: { - values: [ - { name: 'red', value: '#f00' }, - { name: 'green', value: '#0f0' }, - ], - }, - }, -} satisfies Meta<typeof Button>; - -export default meta; -``` diff --git a/docs/snippets/react/button-story-with-parameters.ts.mdx b/docs/snippets/react/button-story-with-parameters.ts.mdx deleted file mode 100644 index 3c0f72dc2ca5..000000000000 --- a/docs/snippets/react/button-story-with-parameters.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import { Button } from './Button'; - -import type { Meta } from '@storybook/react'; - -const meta: Meta<typeof Button> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#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' }, - ], - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/react/button-story-with-sample.js.mdx b/docs/snippets/react/button-story-with-sample.js.mdx deleted file mode 100644 index 64fd26d83463..000000000000 --- a/docs/snippets/react/button-story-with-sample.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Sample = { - render: () => <Button label="hello button" />, -}; -``` diff --git a/docs/snippets/react/button-story.js.mdx b/docs/snippets/react/button-story.js.mdx deleted file mode 100644 index 4cbc51dd0f99..000000000000 --- a/docs/snippets/react/button-story.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => <Button primary label="Button" />, -}; -``` diff --git a/docs/snippets/react/button-story.ts-4-9.mdx b/docs/snippets/react/button-story.ts-4-9.mdx deleted file mode 100644 index 40c042c6e254..000000000000 --- a/docs/snippets/react/button-story.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => <Button primary label="Button" />, -}; -``` diff --git a/docs/snippets/react/button-story.ts.mdx b/docs/snippets/react/button-story.ts.mdx deleted file mode 100644 index 6682973932a4..000000000000 --- a/docs/snippets/react/button-story.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => <Button primary label="Button" />, -}; -``` diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx deleted file mode 100644 index 98b87256271b..000000000000 --- a/docs/snippets/react/button-story.with-hooks.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```js -// Button.stories.js|jsx - -import React, { useState } from 'react'; - -import { Button } from './Button'; - -export default { - component: Button, -}; - -/* - * Example Button story with React Hooks. - * See note below related to this example. - */ -const ButtonWithHooks = () => { - // Sets the hooks for both the label and primary props - const [value, setValue] = useState('Secondary'); - const [isPrimary, setIsPrimary] = useState(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/react/button-story.with-hooks.ts-4-9.mdx b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx deleted file mode 100644 index bbe75ff837b2..000000000000 --- a/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import React, { useState } from 'react'; - -import { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -/* - * Example Button story with React Hooks. - * See note below related to this example. - */ -const ButtonWithHooks = () => { - // Sets the hooks for both the label and primary props - const [value, setValue] = useState('Secondary'); - const [isPrimary, setIsPrimary] = useState(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 />, -} satisfies Story; -``` diff --git a/docs/snippets/react/button-story.with-hooks.ts.mdx b/docs/snippets/react/button-story.with-hooks.ts.mdx deleted file mode 100644 index 338480ef0749..000000000000 --- a/docs/snippets/react/button-story.with-hooks.ts.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import React, { useState } from 'react'; - -import { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -/* - * Example Button story with React Hooks. - * See note below related to this example. - */ -const ButtonWithHooks = () => { - // Sets the hooks for both the label and primary props - const [value, setValue] = useState('Secondary'); - const [isPrimary, setIsPrimary] = useState(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: Story = { - render: () => <ButtonWithHooks />, -}; -``` diff --git a/docs/snippets/react/checkbox-story.mdx.mdx b/docs/snippets/react/checkbox-story.mdx.mdx deleted file mode 100644 index 6b4fc0e83264..000000000000 --- a/docs/snippets/react/checkbox-story.mdx.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```md -{/* Checkbox.mdx */} - -import { Canvas, Meta, Story } from '@storybook/blocks'; -import * as CheckboxStories from './Checkbox.stories'; - -<Meta of={CheckboxStories} /> - -# Checkbox - -With `MDX` we can compose Markdown documentation with `Checkbox` stories and interactive controls. - -<Canvas> - <Story of={CheckboxStories.Unchecked} /> -</Canvas> -``` diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx deleted file mode 100644 index 3f2303040abf..000000000000 --- a/docs/snippets/react/component-story-custom-args-complex.js.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```js -// YourComponent.stories.js|jsx - -import { YourComponent } from './your-component'; - -export default { - 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'], - }, - }, -}; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export const ExampleStory = { - render: (args) => { - const { propertyA, propertyB } = args; - //👇 Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - - return <YourComponent {...args} someProperty={someFunctionResult} />; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/react/component-story-custom-args-complex.ts-4-9.mdx b/docs/snippets/react/component-story-custom-args-complex.ts-4-9.mdx deleted file mode 100644 index 72c253704303..000000000000 --- a/docs/snippets/react/component-story-custom-args-complex.ts-4-9.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// YourComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { YourComponent } from './your-component'; - -const meta = { - 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'], - }, - }, -} satisfies Meta<typeof YourComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export const ExampleStory: Story = { - render: (args) => { - const { propertyA, propertyB } = args; - //👇 Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - - return <YourComponent {...args} someProperty={someFunctionResult} />; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx deleted file mode 100644 index 8e19f0a717e1..000000000000 --- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```tsx -// YourComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { YourComponent } from './your-component'; - -const meta: Meta<typeof 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'], - }, - }, -}; - -export default meta; -type Story = StoryObj<typeof YourComponent>; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export const ExampleStory: Story = { - render: (args) => { - const { propertyA, propertyB } = args; - //👇 Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - - return <YourComponent {...args} someProperty={someFunctionResult} />; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/react/component-story-figma-integration.js.mdx b/docs/snippets/react/component-story-figma-integration.js.mdx deleted file mode 100644 index 1809162364d9..000000000000 --- a/docs/snippets/react/component-story-figma-integration.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -export default { - component: MyComponent, -}; - -export const Example = { - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/Sample-File', - }, - }, -}; -``` diff --git a/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx deleted file mode 100644 index 357684c4b586..000000000000 --- a/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -const meta = { - component: MyComponent, -} 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/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx deleted file mode 100644 index efdfd192fac9..000000000000 --- a/docs/snippets/react/component-story-figma-integration.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -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/react/component-story-highlight-addon.js.mdx b/docs/snippets/react/component-story-highlight-addon.js.mdx deleted file mode 100644 index 9d0f8b146d17..000000000000 --- a/docs/snippets/react/component-story-highlight-addon.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -export const Highlighted = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx deleted file mode 100644 index 1d43de9ca1c6..000000000000 --- a/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Highlighted: Story = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/component-story-highlight-addon.ts.mdx b/docs/snippets/react/component-story-highlight-addon.ts.mdx deleted file mode 100644 index bed23c3c4ba2..000000000000 --- a/docs/snippets/react/component-story-highlight-addon.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const Highlighted: Story = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/component-story-static-asset-cdn.js.mdx b/docs/snippets/react/component-story-static-asset-cdn.js.mdx deleted file mode 100644 index d4cec49790ec..000000000000 --- a/docs/snippets/react/component-story-static-asset-cdn.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -export const WithAnImage = { - render: () => ( - <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" /> - ), -}; -``` diff --git a/docs/snippets/react/component-story-static-asset-cdn.ts-4-9.mdx b/docs/snippets/react/component-story-static-asset-cdn.ts-4-9.mdx deleted file mode 100644 index 4af9db90d2ac..000000000000 --- a/docs/snippets/react/component-story-static-asset-cdn.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} 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/react/component-story-static-asset-cdn.ts.mdx b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx deleted file mode 100644 index d5ac81e22c70..000000000000 --- a/docs/snippets/react/component-story-static-asset-cdn.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -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/react/component-story-static-asset-with-import.js.mdx b/docs/snippets/react/component-story-static-asset-with-import.js.mdx deleted file mode 100644 index b3a7aaa175cd..000000000000 --- a/docs/snippets/react/component-story-static-asset-with-import.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -import imageFile from './static/image.png'; - -export default { - component: MyComponent, -}; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export const WithAnImage = { - render: () => <img src={image.src} alt={image.alt} />, -}; -``` diff --git a/docs/snippets/react/component-story-static-asset-with-import.ts-4-9.mdx b/docs/snippets/react/component-story-static-asset-with-import.ts-4-9.mdx deleted file mode 100644 index e0646f871914..000000000000 --- a/docs/snippets/react/component-story-static-asset-with-import.ts-4-9.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import imageFile from './static/image.png'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export const WithAnImage: Story = { - render: () => <img src={image.src} alt={image.alt} />, -}; -``` diff --git a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx deleted file mode 100644 index ebc35a334ea3..000000000000 --- a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import imageFile from './static/image.png'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export const WithAnImage: Story = { - render: () => <img src={image.src} alt={image.alt} />, -}; -``` diff --git a/docs/snippets/react/component-story-static-asset-without-import.js.mdx b/docs/snippets/react/component-story-static-asset-without-import.js.mdx deleted file mode 100644 index 4dcb30e21c0b..000000000000 --- a/docs/snippets/react/component-story-static-asset-without-import.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -// 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/react/component-story-static-asset-without-import.ts-4-9.mdx b/docs/snippets/react/component-story-static-asset-without-import.ts-4-9.mdx deleted file mode 100644 index ce6a73cbc6da..000000000000 --- a/docs/snippets/react/component-story-static-asset-without-import.ts-4-9.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} 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/react/component-story-static-asset-without-import.ts.mdx b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx deleted file mode 100644 index 1996030fe2f7..000000000000 --- a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -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/react/component-story-with-accessibility.js.mdx b/docs/snippets/react/component-story-with-accessibility.js.mdx deleted file mode 100644 index 31766b3e6b15..000000000000 --- a/docs/snippets/react/component-story-with-accessibility.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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/react/component-story-with-accessibility.ts-4-9.mdx b/docs/snippets/react/component-story-with-accessibility.ts-4-9.mdx deleted file mode 100644 index c4d1ce0a5856..000000000000 --- a/docs/snippets/react/component-story-with-accessibility.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - 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/react/component-story-with-accessibility.ts.mdx b/docs/snippets/react/component-story-with-accessibility.ts.mdx deleted file mode 100644 index fc54e6e0fcce..000000000000 --- a/docs/snippets/react/component-story-with-accessibility.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - 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/react/component-story-with-custom-render-function.js.mdx b/docs/snippets/react/component-story-with-custom-render-function.js.mdx deleted file mode 100644 index 1d725864532a..000000000000 --- a/docs/snippets/react/component-story-with-custom-render-function.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { Layout } from './Layout'; - -import { MyComponent } from './MyComponent'; - -export default { - 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/react/component-story-with-custom-render-function.ts-4-9.mdx b/docs/snippets/react/component-story-with-custom-render-function.ts-4-9.mdx deleted file mode 100644 index 04d947c414f6..000000000000 --- a/docs/snippets/react/component-story-with-custom-render-function.ts-4-9.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Layout } from './Layout'; - -import { MyComponent } from './MyComponent'; - -const meta = { - 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/react/component-story-with-custom-render-function.ts.mdx b/docs/snippets/react/component-story-with-custom-render-function.ts.mdx deleted file mode 100644 index e9f4ddbb5e5b..000000000000 --- a/docs/snippets/react/component-story-with-custom-render-function.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Layout } from './Layout'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof 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/react/component-styled-variables-object-notation.js.mdx b/docs/snippets/react/component-styled-variables-object-notation.js.mdx deleted file mode 100644 index 2019425b9df8..000000000000 --- a/docs/snippets/react/component-styled-variables-object-notation.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// MyComponent.js|jsx - -const Component = styled.div(({ theme }) => ({ - background: theme.background.app, - width: 0, -})); -``` diff --git a/docs/snippets/react/component-styled-variables-template-literals.js.mdx b/docs/snippets/react/component-styled-variables-template-literals.js.mdx deleted file mode 100644 index 6f3019037a90..000000000000 --- a/docs/snippets/react/component-styled-variables-template-literals.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// MyComponent.js|jsx - -const Component = styled.div` - background: `${props => props.theme.background.app}` - width: 0; -`; -``` diff --git a/docs/snippets/react/component-test-with-testing-library.js.mdx b/docs/snippets/react/component-test-with-testing-library.js.mdx deleted file mode 100644 index 856327c6ad3a..000000000000 --- a/docs/snippets/react/component-test-with-testing-library.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// Form.test.js|jsx - -import { fireEvent, render, screen } from '@testing-library/react'; - -import { composeStory } from '@storybook/react'; - -import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here. - -const FormError = composeStory(InvalidFormStory, Meta); - -test('Checks if the form is valid', () => { - render(<FormError />); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/react/component-test-with-testing-library.ts.mdx b/docs/snippets/react/component-test-with-testing-library.ts.mdx deleted file mode 100644 index bf798e1f97eb..000000000000 --- a/docs/snippets/react/component-test-with-testing-library.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Form.test.ts|tsx - -import { fireEvent, render, screen } from '@testing-library/react'; - -import { composeStory } from '@storybook/react'; - -import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here. - -const FormError = composeStory(InvalidFormStory, Meta); - -test('Checks if the form is valid', () => { - render(<FormError />); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/react/configure-mock-provider-with-story-parameter.js.mdx b/docs/snippets/react/configure-mock-provider-with-story-parameter.js.mdx deleted file mode 100644 index b0d07bb65756..000000000000 --- a/docs/snippets/react/configure-mock-provider-with-story-parameter.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Button.stories.js -import { Button } from './Button'; - -export default { - component: Button, -}; - -// Wrapped in light theme -export const Default = {}; - -// Wrapped in dark theme -export const Dark = { - parameters: { - theme: 'dark', - }, -}; -``` diff --git a/docs/snippets/react/configure-mock-provider-with-story-parameter.ts-4-9.mdx b/docs/snippets/react/configure-mock-provider-with-story-parameter.ts-4-9.mdx deleted file mode 100644 index d164216f0994..000000000000 --- a/docs/snippets/react/configure-mock-provider-with-story-parameter.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; -export default meta; - -type Story = StoryObj<typeof meta>; - -// Wrapped in light theme -export const Default: Story = {}; - -// Wrapped in dark theme -export const Dark: Story = { - parameters: { - theme: 'dark', - }, -}; -``` diff --git a/docs/snippets/react/configure-mock-provider-with-story-parameter.ts.mdx b/docs/snippets/react/configure-mock-provider-with-story-parameter.ts.mdx deleted file mode 100644 index 0668941b5fdd..000000000000 --- a/docs/snippets/react/configure-mock-provider-with-story-parameter.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; -export default meta; - -type Story = StoryObj<typeof Button>; - -// Wrapped in light theme -export const Default: Story = {}; - -// Wrapped in dark theme -export const Dark: Story = { - parameters: { - theme: 'dark', - }, -}; -``` diff --git a/docs/snippets/react/csf-2-example-starter.js.mdx b/docs/snippets/react/csf-2-example-starter.js.mdx deleted file mode 100644 index 6af95a68753d..000000000000 --- a/docs/snippets/react/csf-2-example-starter.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```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/react/csf-2-example-starter.ts.mdx b/docs/snippets/react/csf-2-example-starter.ts.mdx deleted file mode 100644 index 66dd6986a465..000000000000 --- a/docs/snippets/react/csf-2-example-starter.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```tsx -// CSF 2 - -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -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/react/csf-2-example-story.js.mdx b/docs/snippets/react/csf-2-example-story.js.mdx deleted file mode 100644 index dd37c0c366ca..000000000000 --- a/docs/snippets/react/csf-2-example-story.js.mdx +++ /dev/null @@ -1,6 +0,0 @@ -```js -// CSF 2 - -// Other imports and story implementation -export const Default = (args) => <Button {...args} />; -``` diff --git a/docs/snippets/react/csf-2-example-story.ts.mdx b/docs/snippets/react/csf-2-example-story.ts.mdx deleted file mode 100644 index c874f9a0e2dc..000000000000 --- a/docs/snippets/react/csf-2-example-story.ts.mdx +++ /dev/null @@ -1,6 +0,0 @@ -```ts -// CSF 2 - -// Other imports and story implementation -export const Default: ComponentStory<typeof Button> = (args) => <Button {...args} />; -``` diff --git a/docs/snippets/react/csf-3-example-render.js.mdx b/docs/snippets/react/csf-3-example-render.js.mdx deleted file mode 100644 index 335954d99d51..000000000000 --- a/docs/snippets/react/csf-3-example-render.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// CSF 3 - explicit render function - -// Other imports and story implementation -export const Default = { - render: (args) => <Button {...args} />, -}; -``` diff --git a/docs/snippets/react/csf-3-example-render.ts.mdx b/docs/snippets/react/csf-3-example-render.ts.mdx deleted file mode 100644 index 3ea134d0e043..000000000000 --- a/docs/snippets/react/csf-3-example-render.ts.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```ts -// CSF 3 - explicit render function - -// Other imports and story implementation -export const Default: Story = { - render: (args) => <Button {...args} />, -}; -``` diff --git a/docs/snippets/react/csf-3-example-starter.ts-4-9.mdx b/docs/snippets/react/csf-3-example-starter.ts-4-9.mdx deleted file mode 100644 index 42efe569accf..000000000000 --- a/docs/snippets/react/csf-3-example-starter.ts-4-9.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// CSF 3 - -import type { Meta, StoryObj } from '@storybook/react'; - -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/react/csf-3-example-starter.ts.mdx b/docs/snippets/react/csf-3-example-starter.ts.mdx deleted file mode 100644 index c72486fb7071..000000000000 --- a/docs/snippets/react/csf-3-example-starter.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// CSF 3 - -import type { Meta, StoryObj } from '@storybook/react'; - -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/react/decorator-parameterized-in-preview.js.mdx b/docs/snippets/react/decorator-parameterized-in-preview.js.mdx deleted file mode 100644 index 123175807b18..000000000000 --- a/docs/snippets/react/decorator-parameterized-in-preview.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// .storybook/preview.jsx -import React from 'react'; - -export default { - decorators: [ - // 👇 Defining the decorator in the preview file applies it to all stories - (Story, { parameters }) => { - // 👇 Make it configurable by reading from parameters - const { pageLayout } = parameters; - switch (pageLayout) { - case 'page': - return ( - // Your page layout is probably a little more complex than this ;) - <div className="page-layout"><Story /></div> - ); - case 'page-mobile': - return ( - <div className="page-mobile-layout"><Story /></div> - ); - case default: - // In the default case, don't apply a layout - return <Story />; - } - }, - ], -}; -``` diff --git a/docs/snippets/react/decorator-parameterized-in-preview.ts.mdx b/docs/snippets/react/decorator-parameterized-in-preview.ts.mdx deleted file mode 100644 index 9475198340d6..000000000000 --- a/docs/snippets/react/decorator-parameterized-in-preview.ts.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```tsx -// .storybook/preview.tsx -import React from 'react'; - -import type { Preview } from '@storybook/react'; - -const preview: Preview = { - decorators: [ - // 👇 Defining the decorator in the preview file applies it to all stories - (Story, { parameters }) => { - // 👇 Make it configurable by reading from parameters - const { pageLayout } = parameters; - switch (pageLayout) { - case 'page': - return ( - // Your page layout is probably a little more complex than this ;) - <div className="page-layout"><Story /></div> - ); - case 'page-mobile': - return ( - <div className="page-mobile-layout"><Story /></div> - ); - case default: - // In the default case, don't apply a layout - return <Story />; - } - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/react/document-screen-fetch.js.mdx b/docs/snippets/react/document-screen-fetch.js.mdx deleted file mode 100644 index ca98cd83e4ae..000000000000 --- a/docs/snippets/react/document-screen-fetch.js.mdx +++ /dev/null @@ -1,55 +0,0 @@ -```js -// YourPage.js|jsx|mjs|ts|tsx - -import React, { useState, useEffect } from 'react'; - -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] = useState('idle'); - const [data, setData] = useState([]); - useEffect(() => { - 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; - - if (status === 'loading') { - return <p>Loading...</p>; - } - if (status === 'error') { - return <p>There was an error fetching the data!</p>; - } - return ( - <PageLayout user={user}> - <DocumentHeader document={document} /> - <DocumentList documents={subdocuments} /> - </PageLayout> - ); -} -``` diff --git a/docs/snippets/react/document-screen-fetch.ts.mdx b/docs/snippets/react/document-screen-fetch.ts.mdx deleted file mode 100644 index f0e9a4d233d8..000000000000 --- a/docs/snippets/react/document-screen-fetch.ts.mdx +++ /dev/null @@ -1,57 +0,0 @@ -```ts -// YourPage.tsx - -import React, { useState, useEffect } from 'react'; - -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] = useState<string>('idle'); - const [data, setData] = useState<any[]>([]); - useEffect(() => { - 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; - - if (status === 'loading') { - return <p>Loading...</p>; - } - if (status === 'error') { - return <p>There was an error fetching the data!</p>; - } - return ( - <PageLayout user={user}> - <DocumentHeader document={document} /> - <DocumentList documents={subdocuments} /> - </PageLayout> - ); -} -``` diff --git a/docs/snippets/react/document-screen-with-graphql.js.mdx b/docs/snippets/react/document-screen-with-graphql.js.mdx deleted file mode 100644 index 28a7e3a336dd..000000000000 --- a/docs/snippets/react/document-screen-with-graphql.js.mdx +++ /dev/null @@ -1,57 +0,0 @@ -```js -// YourPage.js|jsx - -import { useQuery, gql } from '@apollo/client'; - -import { PageLayout } from './PageLayout'; -import { DocumentHeader } from './DocumentHeader'; -import { DocumentList } from './DocumentList'; - -const AllInfoQuery = gql` - query AllInfo { - user { - userID - name - } - document { - id - userID - title - brief - status - } - subdocuments { - id - userID - title - content - status - } - } -`; - -function useFetchInfo() { - const { loading, error, data } = useQuery(AllInfoQuery); - - return { loading, error, data }; -} - -export function DocumentScreen() { - const { loading, error, data } = useFetchInfo(); - - if (loading) { - return <p>Loading...</p>; - } - - if (error) { - return <p>There was an error fetching the data!</p>; - } - - return ( - <PageLayout user={data.user}> - <DocumentHeader document={data.document} /> - <DocumentList documents={data.subdocuments} /> - </PageLayout> - ); -} -``` diff --git a/docs/snippets/react/document-screen-with-graphql.ts.mdx b/docs/snippets/react/document-screen-with-graphql.ts.mdx deleted file mode 100644 index 56f5a24cdcc0..000000000000 --- a/docs/snippets/react/document-screen-with-graphql.ts.mdx +++ /dev/null @@ -1,81 +0,0 @@ -```ts -// YourPage.ts|tsx - -import { useQuery, gql } from '@apollo/client'; - -import { PageLayout } from './PageLayout'; -import { DocumentHeader } from './DocumentHeader'; -import { DocumentList } from './DocumentList'; - -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 { loading, error, data } = useQuery<Data>(AllInfoQuery); - - return { loading, error, data }; -} - -export function DocumentScreen() { - const { loading, error, data } = useFetchInfo(); - - if (loading) { - return <p>Loading...</p>; - } - - if (error) { - return <p>There was an error fetching the data!</p>; - } - - return ( - <PageLayout user={data.user}> - <DocumentHeader document={data.document} /> - <DocumentList documents={data.subdocuments} /> - </PageLayout> - ); -} -``` diff --git a/docs/snippets/react/highlight-addon-custom-style.js.mdx b/docs/snippets/react/highlight-addon-custom-style.js.mdx deleted file mode 100644 index 18e410be4e1d..000000000000 --- a/docs/snippets/react/highlight-addon-custom-style.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -export const StyledHighlight = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - color: 'blue', - style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx deleted file mode 100644 index 969e2ea13e6e..000000000000 --- a/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const StyledHighlight: Story = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - color: 'blue', - style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/highlight-addon-custom-style.ts.mdx b/docs/snippets/react/highlight-addon-custom-style.ts.mdx deleted file mode 100644 index ea4534dd16a5..000000000000 --- a/docs/snippets/react/highlight-addon-custom-style.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const StyledHighlight: Story = { - decorators: [ - (storyFn) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - color: 'blue', - style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' - }); - return storyFn(); - }, - ], -}; -``` diff --git a/docs/snippets/react/histogram-story.js.mdx b/docs/snippets/react/histogram-story.js.mdx deleted file mode 100644 index a84781630fc6..000000000000 --- a/docs/snippets/react/histogram-story.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Histogram.stories.js|jsx - -import { Histogram } from './Histogram'; - -export default { - component: Histogram, -}; - -export const Default = { - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/react/histogram-story.ts-4-9.mdx b/docs/snippets/react/histogram-story.ts-4-9.mdx deleted file mode 100644 index 2091dcde597f..000000000000 --- a/docs/snippets/react/histogram-story.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Histogram.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Histogram } from './Histogram'; - -const meta = { - 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/react/histogram-story.ts.mdx b/docs/snippets/react/histogram-story.ts.mdx deleted file mode 100644 index eb5dcc4729c3..000000000000 --- a/docs/snippets/react/histogram-story.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Histogram.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Histogram } from './Histogram'; - -const meta: Meta<typeof 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', - }, -}; -``` diff --git a/docs/snippets/react/list-story-expanded.js.mdx b/docs/snippets/react/list-story-expanded.js.mdx deleted file mode 100644 index 58a768ce8a99..000000000000 --- a/docs/snippets/react/list-story-expanded.js.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```js -// List.stories.js|jsx - -import { List } from './List'; -import { ListItem } from './ListItem'; - -export default { - 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/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/react/list-story-expanded.ts-4-9.mdx b/docs/snippets/react/list-story-expanded.ts-4-9.mdx deleted file mode 100644 index e878e6792ca7..000000000000 --- a/docs/snippets/react/list-story-expanded.ts-4-9.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -const meta = { - 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/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/react/list-story-expanded.ts.mdx b/docs/snippets/react/list-story-expanded.ts.mdx deleted file mode 100644 index b2a467cbd773..000000000000 --- a/docs/snippets/react/list-story-expanded.ts.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -const meta: Meta<typeof 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/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/react/list-story-reuse-data.js.mdx b/docs/snippets/react/list-story-reuse-data.js.mdx deleted file mode 100644 index 6f99fad942ef..000000000000 --- a/docs/snippets/react/list-story-reuse-data.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// List.stories.js|jsx - -import React from 'react'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -//👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -export default { - component: List, -}; - -export const ManyItems = { - render: (args) => ( - <List {...args}> - <ListItem {...Selected.args} /> - <ListItem {...Unselected.args} /> - <ListItem {...Unselected.args} /> - </List> - ), -}; -``` diff --git a/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx deleted file mode 100644 index 6fbee90aa76a..000000000000 --- a/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -//👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -const meta = { - component: List, -} satisfies Meta<typeof List>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ManyItems: Story = { - render: (args) => ( - <List {...args}> - <ListItem {...Selected.args} /> - <ListItem {...Unselected.args} /> - <ListItem {...Unselected.args} /> - </List> - ), -}; -``` diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx deleted file mode 100644 index 5e8382162d6a..000000000000 --- a/docs/snippets/react/list-story-reuse-data.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -//👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -const meta: Meta<typeof List> = { - component: List, -}; - -export default meta; -type Story = StoryObj<typeof List>; - -export const ManyItems: Story = { - render: (args) => ( - <List {...args}> - <ListItem {...Selected.args} /> - <ListItem {...Unselected.args} /> - <ListItem {...Unselected.args} /> - </List> - ), -}; -``` diff --git a/docs/snippets/react/list-story-starter.js.mdx b/docs/snippets/react/list-story-starter.js.mdx deleted file mode 100644 index b6443261d408..000000000000 --- a/docs/snippets/react/list-story-starter.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// List.stories.js|jsx - -import { List } from './List'; - -export default { - component: List, -}; - -// Always an empty list, not super interesting - -export const Empty = {}; -``` diff --git a/docs/snippets/react/list-story-starter.ts-4-9.mdx b/docs/snippets/react/list-story-starter.ts-4-9.mdx deleted file mode 100644 index 1eebe1586c3f..000000000000 --- a/docs/snippets/react/list-story-starter.ts-4-9.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; - -const meta = { - 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/react/list-story-starter.ts.mdx b/docs/snippets/react/list-story-starter.ts.mdx deleted file mode 100644 index 28c03dd8fb36..000000000000 --- a/docs/snippets/react/list-story-starter.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; - -const meta: Meta<typeof 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/react/list-story-template.js.mdx b/docs/snippets/react/list-story-template.js.mdx deleted file mode 100644 index 36c09aa21c0c..000000000000 --- a/docs/snippets/react/list-story-template.js.mdx +++ /dev/null @@ -1,49 +0,0 @@ -```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/configure/#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/react/list-story-template.ts-4-9.mdx b/docs/snippets/react/list-story-template.ts-4-9.mdx deleted file mode 100644 index d0b1d658dcb7..000000000000 --- a/docs/snippets/react/list-story-template.ts-4-9.mdx +++ /dev/null @@ -1,50 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -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/configure/#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/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx deleted file mode 100644 index 65a42d46921a..000000000000 --- a/docs/snippets/react/list-story-template.ts.mdx +++ /dev/null @@ -1,50 +0,0 @@ -```ts -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -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/configure/#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/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx deleted file mode 100644 index e9df70ee1467..000000000000 --- a/docs/snippets/react/list-story-unchecked.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```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/configure/#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/react/list-story-unchecked.ts-4-9.mdx b/docs/snippets/react/list-story-unchecked.ts-4-9.mdx deleted file mode 100644 index e3664a92818f..000000000000 --- a/docs/snippets/react/list-story-unchecked.ts-4-9.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; - -//👇 Instead of importing ListItem, we import the stories -import { Unchecked } from './ListItem.stories'; - -export const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', - component: List, -} satisfies Meta<typeof List>; - -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/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx deleted file mode 100644 index 8ff062ecc89f..000000000000 --- a/docs/snippets/react/list-story-unchecked.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; - -//👇 Instead of importing ListItem, we import the stories -import { Unchecked } from './ListItem.stories'; - -export const meta: Meta<typeof List> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', - component: List, -}; - -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/react/list-story-with-subcomponents.js.mdx b/docs/snippets/react/list-story-with-subcomponents.js.mdx deleted file mode 100644 index 4edaa677c3f5..000000000000 --- a/docs/snippets/react/list-story-with-subcomponents.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```jsx -// List.stories.js|jsx -import React from 'react'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -export default { - 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/react/list-story-with-subcomponents.ts-4-9.mdx b/docs/snippets/react/list-story-with-subcomponents.ts-4-9.mdx deleted file mode 100644 index d527fe149fac..000000000000 --- a/docs/snippets/react/list-story-with-subcomponents.ts-4-9.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```tsx -// List.stories.ts|tsx -import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -const meta = { - component: List, - subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent -} 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/react/list-story-with-subcomponents.ts.mdx b/docs/snippets/react/list-story-with-subcomponents.ts.mdx deleted file mode 100644 index 71a08b1fe6bb..000000000000 --- a/docs/snippets/react/list-story-with-subcomponents.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```tsx -// List.stories.ts|tsx -import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -const meta: Meta<typeof 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/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx deleted file mode 100644 index 9f523a3a8130..000000000000 --- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```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/configure/#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/react/list-story-with-unchecked-children.ts-4-9.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts-4-9.mdx deleted file mode 100644 index fbd3670d9fa1..000000000000 --- a/docs/snippets/react/list-story-with-unchecked-children.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; - -//👇 Instead of importing ListItem, we import the stories -import { Unchecked } from './ListItem.stories'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', - component: List, -} satisfies Meta<typeof List>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const OneItem: Story = { - args: { - children: <Unchecked {...Unchecked.args} />, - }, -}; -``` diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx deleted file mode 100644 index f41a03cb4b23..000000000000 --- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// List.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { List } from './List'; - -//👇 Instead of importing ListItem, we import the stories -import { Unchecked } from './ListItem.stories'; - -const meta: Meta<typeof List> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', - component: List, -}; - -export default meta; -type Story = StoryObj<typeof List>; - -export const OneItem: Story = { - args: { - children: <Unchecked {...Unchecked.args} />, - }, -}; -``` diff --git a/docs/snippets/react/loader-story.js.mdx b/docs/snippets/react/loader-story.js.mdx deleted file mode 100644 index a039b802b936..000000000000 --- a/docs/snippets/react/loader-story.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// TodoItem.stories.js|jsx - -import fetch from 'node-fetch'; - -import { TodoItem } from './TodoItem'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export default { - 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/react/loader-story.ts-4-9.mdx b/docs/snippets/react/loader-story.ts-4-9.mdx deleted file mode 100644 index 268bd6e26447..000000000000 --- a/docs/snippets/react/loader-story.ts-4-9.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import fetch from 'node-fetch'; - -import { TodoItem } from './TodoItem'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -const meta = { - 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/react/loader-story.ts.mdx b/docs/snippets/react/loader-story.ts.mdx deleted file mode 100644 index 8867bbee7adf..000000000000 --- a/docs/snippets/react/loader-story.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import fetch from 'node-fetch'; - -import { TodoItem } from './TodoItem'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -const meta: Meta<typeof TodoItem> = { - 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/snippets/react/login-form-with-play-function.js.mdx b/docs/snippets/react/login-form-with-play-function.js.mdx deleted file mode 100644 index 3768779d10a3..000000000000 --- a/docs/snippets/react/login-form-with-play-function.js.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```js -// LoginForm.stories.js|jsx - -import { userEvent, within, expect } from '@storybook/test'; - -import { LoginForm } from './LoginForm'; - -export default { - component: LoginForm, -}; - -export const EmptyForm = {}; - -/* - * See https://storybook.js.org/docs/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/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/react/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/react/login-form-with-play-function.ts-4-9.mdx deleted file mode 100644 index 84dffad550b1..000000000000 --- a/docs/snippets/react/login-form-with-play-function.ts-4-9.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```ts -// LoginForm.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { userEvent, within, expect } from '@storybook/test'; - -import { LoginForm } from './LoginForm'; - -const meta = { - component: LoginForm, -} satisfies Meta<typeof LoginForm>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const EmptyForm: Story = {}; - -/* - * See https://storybook.js.org/docs/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/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/react/login-form-with-play-function.ts.mdx b/docs/snippets/react/login-form-with-play-function.ts.mdx deleted file mode 100644 index de6854f0e180..000000000000 --- a/docs/snippets/react/login-form-with-play-function.ts.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```ts -// LoginForm.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { userEvent, within, expect } from '@storybook/test'; - -import { LoginForm } from './LoginForm'; - -const meta: Meta<typeof LoginForm> = { - component: LoginForm, -}; - -export default meta; -type Story = StoryObj<typeof LoginForm>; - -export const EmptyForm: Story = {}; - -/* - * See https://storybook.js.org/docs/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/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/react/main-config-typescript-react-docgen-typescript-options.ts.mdx b/docs/snippets/react/main-config-typescript-react-docgen-typescript-options.ts.mdx deleted file mode 100644 index 77319b608505..000000000000 --- a/docs/snippets/react/main-config-typescript-react-docgen-typescript-options.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - reactDocgen: 'react-docgen-typescript', - reactDocgenTypescriptOptions: { - shouldExtractLiteralValuesFromEnum: true, - // 👇 Default prop filter, which excludes props from node_modules - propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), - }, - }, -}; - -export default config; -``` diff --git a/docs/snippets/react/main-config-typescript-react-docgen.ts.mdx b/docs/snippets/react/main-config-typescript-react-docgen.ts.mdx deleted file mode 100644 index c96821c5a7ce..000000000000 --- a/docs/snippets/react/main-config-typescript-react-docgen.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - reactDocgen: 'react-docgen', - }, -}; - -export default config; -``` diff --git a/docs/snippets/react/mock-context-container-global.js.mdx b/docs/snippets/react/mock-context-container-global.js.mdx deleted file mode 100644 index 84df340cd6cd..000000000000 --- a/docs/snippets/react/mock-context-container-global.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// .storybook/preview.js - -import React from 'react'; - -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 default { decorators: [AppDecorator] }; -``` diff --git a/docs/snippets/react/mock-context-container-global.ts.mdx b/docs/snippets/react/mock-context-container-global.ts.mdx deleted file mode 100644 index a2a075b54b73..000000000000 --- a/docs/snippets/react/mock-context-container-global.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// .storybook/preview.ts - -import React from 'react'; - -// 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/snippets/react/mock-context-container-provider.js.mdx b/docs/snippets/react/mock-context-container-provider.js.mdx deleted file mode 100644 index 546ef0d9038d..000000000000 --- a/docs/snippets/react/mock-context-container-provider.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// pages/profile.js|jsx - -import React from 'react'; - -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/react/mock-context-container.js.mdx b/docs/snippets/react/mock-context-container.js.mdx deleted file mode 100644 index 650bb5b29370..000000000000 --- a/docs/snippets/react/mock-context-container.js.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```js -// ProfilePage.stories.js|jsx - -import React from 'react'; - -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 { - 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/react/mock-context-create.js.mdx b/docs/snippets/react/mock-context-create.js.mdx deleted file mode 100644 index 99ffef5afe1b..000000000000 --- a/docs/snippets/react/mock-context-create.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// ProfilePageContext.js|jsx - -import { createContext } from 'react'; - -const ProfilePageContext = createContext(); - -export default ProfilePageContext; -``` diff --git a/docs/snippets/react/mock-context-in-use.js.mdx b/docs/snippets/react/mock-context-in-use.js.mdx deleted file mode 100644 index eb5f8940a30a..000000000000 --- a/docs/snippets/react/mock-context-in-use.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// ProfilePage.js|jsx - -import { useContext } from 'react'; - -import ProfilePageContext from './ProfilePageContext'; - -export const ProfilePage = ({ name, userId }) => { - const { UserPostsContainer, UserFriendsContainer } = useContext(ProfilePageContext); - - return ( - <div> - <h1>{name}</h1> - <UserPostsContainer userId={userId} /> - <UserFriendsContainer userId={userId} /> - </div> - ); -}; -``` diff --git a/docs/snippets/react/mock-provider-in-preview.js.mdx b/docs/snippets/react/mock-provider-in-preview.js.mdx deleted file mode 100644 index e16bdcef8bcf..000000000000 --- a/docs/snippets/react/mock-provider-in-preview.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```jsx -// .storybook/preview.jsx -import React from 'react'; - -import { ThemeProvider } from 'styled-components'; - -// themes = { light, dark } -import * as themes from '../src/themes'; - -export default { - decorators: [ - // 👇 Defining the decorator in the preview file applies it to all stories - (Story, { parameters }) => { - // 👇 Make it configurable by reading the theme value from parameters - const { theme = 'light' } = parameters; - return ( - <ThemeProvider theme={themes[theme]}> - <Story /> - </ThemeProvider> - ); - }, - ], -}; -``` diff --git a/docs/snippets/react/mock-provider-in-preview.ts.mdx b/docs/snippets/react/mock-provider-in-preview.ts.mdx deleted file mode 100644 index 1dbdcdac969f..000000000000 --- a/docs/snippets/react/mock-provider-in-preview.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```tsx -// .storybook/preview.tsx -import React from 'react'; - -import type { Preview } from '@storybook/react'; -import { ThemeProvider } from 'styled-components'; - -// themes = { light, dark } -import * as themes from '../src/themes'; - -const preview: Preview = { - decorators: [ - // 👇 Defining the decorator in the preview file applies it to all stories - (Story, { parameters }) => { - // 👇 Make it configurable by reading the theme value from parameters - const { theme = 'light' } = parameters; - return ( - <ThemeProvider theme={themes[theme]}> - <Story /> - </ThemeProvider> - ); - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx deleted file mode 100644 index f8aa36d87880..000000000000 --- a/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx +++ /dev/null @@ -1,95 +0,0 @@ -```js -// YourPage.stories.js|jsx -import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; -import { graphql, HttpResponse, delay } from 'msw'; - -import { DocumentScreen } from './YourPage'; - -const mockedClient = new ApolloClient({ - uri: 'https://your-graphql-endpoint', - cache: new InMemoryCache(), - defaultOptions: { - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - }, -}); - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export default { - component: DocumentScreen, - decorators: [ - (Story) => ( - <ApolloProvider client={mockedClient}> - <Story /> - </ApolloProvider> - ), - ], -}; - -export const MockedSuccess = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - }, - }); - }), - ], - }, - }, -}; - -export const MockedError = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx deleted file mode 100644 index 5d1047b2a30a..000000000000 --- a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx +++ /dev/null @@ -1,99 +0,0 @@ -```ts -// YourPage.stories.ts|tsx -import type { Meta, StoryObj } from '@storybook/react'; - -import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; -import { graphql, HttpResponse, delay } from 'msw'; - -import { DocumentScreen } from './YourPage'; - -const mockedClient = new ApolloClient({ - uri: 'https://your-graphql-endpoint', - cache: new InMemoryCache(), - defaultOptions: { - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - }, -}); - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; -const meta = { - component: DocumentScreen, - decorators: [ - (Story) => ( - <ApolloProvider client={mockedClient}> - <Story /> - </ApolloProvider> - ), - ], -} satisfies Meta<typeof DocumentScreen>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const MockedSuccess: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - } - }); - }), - ], - }, - }, -}; - -export const MockedError: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx deleted file mode 100644 index 7e28c12fb043..000000000000 --- a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx +++ /dev/null @@ -1,99 +0,0 @@ -```ts -// YourPage.stories.ts|tsx -import type { Meta, StoryObj } from '@storybook/react'; - -import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; -import { graphql, HttpResponse, delay } from 'msw'; - -import { DocumentScreen } from './YourPage'; - -const mockedClient = new ApolloClient({ - uri: 'https://your-graphql-endpoint', - cache: new InMemoryCache(), - defaultOptions: { - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - }, -}); - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; -const meta: Meta<typeof DocumentScreen> = { - component: DocumentScreen, - decorators: [ - (Story) => ( - <ApolloProvider client={mockedClient}> - <Story /> - </ApolloProvider> - ), - ], -}; - -export default meta; -type Story = StoryObj<typeof SampleComponent>; - -export const MockedSuccess: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - } - }); - }), - ], - }, - }, -}; - -export const MockedError: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/react/multiple-stories-test.js.mdx b/docs/snippets/react/multiple-stories-test.js.mdx deleted file mode 100644 index cf80fd785237..000000000000 --- a/docs/snippets/react/multiple-stories-test.js.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```js -// Form.test.js|jsx - -import { fireEvent, render, screen } from '@testing-library/react'; - -import { composeStories } from '@storybook/react'; - -import * as FormStories from './LoginForm.stories'; - -const { InvalidForm, ValidForm } = composeStories(FormStories); - -test('Tests invalid form state', () => { - render(<InvalidForm />); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); - -test('Tests filled form', () => { - render(<ValidForm />); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).not.toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/react/multiple-stories-test.ts.mdx b/docs/snippets/react/multiple-stories-test.ts.mdx deleted file mode 100644 index 1dee14b27732..000000000000 --- a/docs/snippets/react/multiple-stories-test.ts.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// Form.test.ts|tsx - -import { fireEvent, render, screen } from '@testing-library/react'; - -import { composeStories } from '@storybook/react'; - -import * as FormStories from './LoginForm.stories'; - -const { InvalidForm, ValidForm } = composeStories(FormStories); - -test('Tests invalid form state', () => { - render(<InvalidForm />); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); - -test('Tests filled form', () => { - render(<ValidForm />); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).not.toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/react/my-component-story-basic-and-props.js.mdx b/docs/snippets/react/my-component-story-basic-and-props.js.mdx deleted file mode 100644 index 8d63bbf2ed9f..000000000000 --- a/docs/snippets/react/my-component-story-basic-and-props.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -export const Basic = {}; - -export const WithProp = { - render: () => <MyComponent prop="value" />, -}; -``` diff --git a/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx deleted file mode 100644 index 86957338d89e..000000000000 --- a/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta = { - 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/react/my-component-story-basic-and-props.ts.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx deleted file mode 100644 index f93e8cb280f3..000000000000 --- a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof 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/react/my-component-story-configure-viewports.js.mdx b/docs/snippets/react/my-component-story-configure-viewports.js.mdx deleted file mode 100644 index 3034db56937c..000000000000 --- a/docs/snippets/react/my-component-story-configure-viewports.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import { MyComponent } from './MyComponent'; - -export default { - 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/react/my-component-story-configure-viewports.ts-4-9.mdx b/docs/snippets/react/my-component-story-configure-viewports.ts-4-9.mdx deleted file mode 100644 index 6d1510b1d231..000000000000 --- a/docs/snippets/react/my-component-story-configure-viewports.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import { MyComponent } from './MyComponent'; - -const meta = { - 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/react/my-component-story-configure-viewports.ts.mdx b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx deleted file mode 100644 index 9325ed705c8c..000000000000 --- a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof 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/react/my-component-story-use-globaltype.js.mdx b/docs/snippets/react/my-component-story-use-globaltype.js.mdx deleted file mode 100644 index c8d0f82b2c54..000000000000 --- a/docs/snippets/react/my-component-story-use-globaltype.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -const getCaptionForLocale = (locale) => { - switch (locale) { - case 'es': - return 'Hola!'; - case 'fr': - return 'Bonjour!'; - case 'kr': - return '안녕하세요!'; - case 'zh': - return '你好!'; - default: - return 'Hello!'; - } -}; - -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return <p>{caption}</p>; - }, -}; -``` diff --git a/docs/snippets/react/my-component-story-use-globaltype.ts-4-9.mdx b/docs/snippets/react/my-component-story-use-globaltype.ts-4-9.mdx deleted file mode 100644 index 70fd88a3329e..000000000000 --- a/docs/snippets/react/my-component-story-use-globaltype.ts-4-9.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta = { - 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!'; - } -}; - -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return <p>{caption}</p>; - }, -}; -``` diff --git a/docs/snippets/react/my-component-story-use-globaltype.ts.mdx b/docs/snippets/react/my-component-story-use-globaltype.ts.mdx deleted file mode 100644 index fba8d1fdf9af..000000000000 --- a/docs/snippets/react/my-component-story-use-globaltype.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof 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!'; - } -}; - -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return <p>{caption}</p>; - }, -}; -``` diff --git a/docs/snippets/react/my-component-story-with-nonstory.js.mdx b/docs/snippets/react/my-component-story-with-nonstory.js.mdx deleted file mode 100644 index 51bbcdc7bc1a..000000000000 --- a/docs/snippets/react/my-component-story-with-nonstory.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -import someData from './data.json'; - -export default { - 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/react/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/react/my-component-story-with-nonstory.ts-4-9.mdx deleted file mode 100644 index 15e87f4a8a1e..000000000000 --- a/docs/snippets/react/my-component-story-with-nonstory.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -import someData from './data.json'; - -const meta = { - component: MyComponent, - includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories - excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains 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/react/my-component-story-with-nonstory.ts.mdx b/docs/snippets/react/my-component-story-with-nonstory.ts.mdx deleted file mode 100644 index 156971af0c6d..000000000000 --- a/docs/snippets/react/my-component-story-with-nonstory.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -import someData from './data.json'; - -const meta: Meta<typeof 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, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-add-framework.js.mdx b/docs/snippets/react/nextjs-add-framework.js.mdx deleted file mode 100644 index 620630a1322a..000000000000 --- a/docs/snippets/react/nextjs-add-framework.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - // framework: '@storybook/react-webpack5', 👈 Remove this - framework: '@storybook/nextjs', // 👈 Add this -}; -``` diff --git a/docs/snippets/react/nextjs-add-framework.ts.mdx b/docs/snippets/react/nextjs-add-framework.ts.mdx deleted file mode 100644 index 945bc22217b3..000000000000 --- a/docs/snippets/react/nextjs-add-framework.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/nextjs'; - -const config: StorybookConfig = { - // ... - // framework: '@storybook/react-webpack5', 👈 Remove this - framework: '@storybook/nextjs', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/react/nextjs-app-directory-in-meta.js.mdx b/docs/snippets/react/nextjs-app-directory-in-meta.js.mdx deleted file mode 100644 index a941df07394e..000000000000 --- a/docs/snippets/react/nextjs-app-directory-in-meta.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// NavigationBasedComponent.stories.js -import NavigationBasedComponent from './NavigationBasedComponent'; - -export default { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, // 👈 Set this - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-app-directory-in-meta.ts-4-9.mdx b/docs/snippets/react/nextjs-app-directory-in-meta.ts-4-9.mdx deleted file mode 100644 index fb8adee4caf8..000000000000 --- a/docs/snippets/react/nextjs-app-directory-in-meta.ts-4-9.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// NavigationBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import NavigationBasedComponent from './NavigationBasedComponent'; - -const meta = { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, // 👈 Set this - }, - }, -} satisfies Meta<typeof NavigationBasedComponent>; -export default meta; -``` diff --git a/docs/snippets/react/nextjs-app-directory-in-meta.ts.mdx b/docs/snippets/react/nextjs-app-directory-in-meta.ts.mdx deleted file mode 100644 index 5489423e8336..000000000000 --- a/docs/snippets/react/nextjs-app-directory-in-meta.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// NavigationBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import NavigationBasedComponent from './NavigationBasedComponent'; - -const meta: Meta<typeof NavigationBasedComponent> = { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, // 👈 Set this - }, - }, -}; -export default meta; -``` diff --git a/docs/snippets/react/nextjs-app-directory-in-preview.js.mdx b/docs/snippets/react/nextjs-app-directory-in-preview.js.mdx deleted file mode 100644 index 94eb1afc548e..000000000000 --- a/docs/snippets/react/nextjs-app-directory-in-preview.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/preview.js - -export default { - // ... - parameters: { - // ... - nextjs: { - appDirectory: true, - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-app-directory-in-preview.ts.mdx b/docs/snippets/react/nextjs-app-directory-in-preview.ts.mdx deleted file mode 100644 index 13f567e3899d..000000000000 --- a/docs/snippets/react/nextjs-app-directory-in-preview.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/preview.ts -import { Preview } from '@storybook/react'; - -const preview: Preview = { - // ... - parameters: { - // ... - nextjs: { - appDirectory: true, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/react/nextjs-cache-mock.js.mdx b/docs/snippets/react/nextjs-cache-mock.js.mdx deleted file mode 100644 index b8e00ac1b414..000000000000 --- a/docs/snippets/react/nextjs-cache-mock.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// MyForm.stories.js -import { expect, userEvent, within } from '@storybook/test'; -import { revalidatePath } from '@storybook/nextjs/cache.mock'; - -import MyForm from './my-form'; - -export default { - component: MyForm, -}; - -export const Submitted = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - - const submitButton = canvas.getByRole('button', { name: /submit/i }); - await userEvent.click(saveButton); - // 👇 Use any mock assertions on the function - await expect(revalidatePath).toHaveBeenCalledWith('/'); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-cache-mock.ts-4-9.mdx b/docs/snippets/react/nextjs-cache-mock.ts-4-9.mdx deleted file mode 100644 index 8ba5741224f7..000000000000 --- a/docs/snippets/react/nextjs-cache-mock.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyForm.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { revalidatePath } from '@storybook/nextjs/cache.mock'; - -import MyForm from './my-form'; - -const meta = { - component: MyForm, -} satisfies Meta<typeof MyForm>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Submitted: Story = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - - const submitButton = canvas.getByRole('button', { name: /submit/i }); - await userEvent.click(saveButton); - // 👇 Use any mock assertions on the function - await expect(revalidatePath).toHaveBeenCalledWith('/'); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-cache-mock.ts.mdx b/docs/snippets/react/nextjs-cache-mock.ts.mdx deleted file mode 100644 index 068bcd526700..000000000000 --- a/docs/snippets/react/nextjs-cache-mock.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyForm.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { revalidatePath } from '@storybook/nextjs/cache.mock'; - -import MyForm from './my-form'; - -const meta: Meta<typeof MyForm> = { - component: MyForm, -}; - -export default meta; - -type Story = StoryObj<typeof MyForm>; - -export const Submitted: Story = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - - const submitButton = canvas.getByRole('button', { name: /submit/i }); - await userEvent.click(saveButton); - // 👇 Use any mock assertions on the function - await expect(revalidatePath).toHaveBeenCalledWith('/'); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-configure-svgr.js.mdx b/docs/snippets/react/nextjs-configure-svgr.js.mdx deleted file mode 100644 index 11bb4a508913..000000000000 --- a/docs/snippets/react/nextjs-configure-svgr.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - webpackFinal: async (config) => { - config.module = config.module || {}; - config.module.rules = config.module.rules || []; - - // This modifies the existing image rule to exclude .svg files - // since you want to handle those files with @svgr/webpack - const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg')); - if (imageRule) { - imageRule['exclude'] = /\.svg$/; - } - - // Configure .svg files to be loaded with @svgr/webpack - config.module.rules.push({ - test: /\.svg$/, - use: ['@svgr/webpack'], - }); - - return config; - }, -}; -``` diff --git a/docs/snippets/react/nextjs-configure-svgr.ts.mdx b/docs/snippets/react/nextjs-configure-svgr.ts.mdx deleted file mode 100644 index 7d3ddab95264..000000000000 --- a/docs/snippets/react/nextjs-configure-svgr.ts.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/nextjs'; - -const config: StorybookConfig = { - // ... - webpackFinal: async (config) => { - config.module = config.module || {}; - config.module.rules = config.module.rules || []; - - // This modifies the existing image rule to exclude .svg files - // since you want to handle those files with @svgr/webpack - const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg')); - if (imageRule) { - imageRule['exclude'] = /\.svg$/; - } - - // Configure .svg files to be loaded with @svgr/webpack - config.module.rules.push({ - test: /\.svg$/, - use: ['@svgr/webpack'], - }); - - return config; - }, -}; - -export default config; -``` diff --git a/docs/snippets/react/nextjs-headers-mock.js.mdx b/docs/snippets/react/nextjs-headers-mock.js.mdx deleted file mode 100644 index 1fed8238ceeb..000000000000 --- a/docs/snippets/react/nextjs-headers-mock.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// MyForm.stories.js -import { expect, userEvent, within } from '@storybook/test'; -import { cookies, headers } from '@storybook/nextjs/headers.mock'; - -import MyForm from './my-form'; - -export default { - component: MyForm, -}; - -export const LoggedInEurope = { - async beforeEach() { - // 👇 Set mock cookies and headers ahead of rendering - cookies().set('username', 'Sol'); - headers().set('timezone', 'Central European Summer Time'); - }, - async play() { - // 👇 Assert that your component called the mocks - await expect(cookies().get).toHaveBeenCalledOnce(); - await expect(cookies().get).toHaveBeenCalledWith('username'); - await expect(headers().get).toHaveBeenCalledOnce(); - await expect(cookies().get).toHaveBeenCalledWith('timezone'); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-headers-mock.ts-4-9.mdx b/docs/snippets/react/nextjs-headers-mock.ts-4-9.mdx deleted file mode 100644 index bd2bc78bb121..000000000000 --- a/docs/snippets/react/nextjs-headers-mock.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// MyForm.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { cookies, headers } from '@storybook/nextjs/headers.mock'; - -import MyForm from './my-form'; - -const meta = { - component: MyForm, -} satisfies Meta<typeof MyForm>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const LoggedInEurope: Story = { - async beforeEach() { - // 👇 Set mock cookies and headers ahead of rendering - cookies().set('username', 'Sol'); - headers().set('timezone', 'Central European Summer Time'); - }, - async play() { - // 👇 Assert that your component called the mocks - await expect(cookies().get).toHaveBeenCalledOnce(); - await expect(cookies().get).toHaveBeenCalledWith('username'); - await expect(headers().get).toHaveBeenCalledOnce(); - await expect(cookies().get).toHaveBeenCalledWith('timezone'); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-headers-mock.ts.mdx b/docs/snippets/react/nextjs-headers-mock.ts.mdx deleted file mode 100644 index 88b994890cea..000000000000 --- a/docs/snippets/react/nextjs-headers-mock.ts.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// MyForm.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { cookies, headers } from '@storybook/nextjs/headers.mock'; - -import MyForm from './my-form'; - -const meta: Meta<typeof MyForm> = { - component: MyForm, -}; - -export default meta; - -type Story = StoryObj<typeof MyForm>; - -export const LoggedInEurope: Story = { - async beforeEach() { - // 👇 Set mock cookies and headers ahead of rendering - cookies().set('username', 'Sol'); - headers().set('timezone', 'Central European Summer Time'); - }, - async play() { - // 👇 Assert that your component called the mocks - await expect(cookies().get).toHaveBeenCalledOnce(); - await expect(cookies().get).toHaveBeenCalledWith('username'); - await expect(headers().get).toHaveBeenCalledOnce(); - await expect(cookies().get).toHaveBeenCalledWith('timezone'); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-image-static-dirs.js.mdx b/docs/snippets/react/nextjs-image-static-dirs.js.mdx deleted file mode 100644 index 66d2f8b7e7cc..000000000000 --- a/docs/snippets/react/nextjs-image-static-dirs.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - staticDirs: [ - { - from: '../src/components/fonts', - to: 'src/components/fonts', - }, - ], -}; -``` diff --git a/docs/snippets/react/nextjs-image-static-dirs.ts.mdx b/docs/snippets/react/nextjs-image-static-dirs.ts.mdx deleted file mode 100644 index cec45e42c964..000000000000 --- a/docs/snippets/react/nextjs-image-static-dirs.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/nextjs'; - -const config: StorybookConfig = { - // ... - staticDirs: [ - { - from: '../src/components/fonts', - to: 'src/components/fonts', - }, - ], -}; - -export default config; -``` diff --git a/docs/snippets/react/nextjs-install.npm.js.mdx b/docs/snippets/react/nextjs-install.npm.js.mdx deleted file mode 100644 index 28b66be2c17e..000000000000 --- a/docs/snippets/react/nextjs-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/nextjs -``` diff --git a/docs/snippets/react/nextjs-install.pnpm.js.mdx b/docs/snippets/react/nextjs-install.pnpm.js.mdx deleted file mode 100644 index 246d8c3d4faa..000000000000 --- a/docs/snippets/react/nextjs-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/nextjs -``` diff --git a/docs/snippets/react/nextjs-install.yarn.js.mdx b/docs/snippets/react/nextjs-install.yarn.js.mdx deleted file mode 100644 index 48cd296d98b8..000000000000 --- a/docs/snippets/react/nextjs-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/nextjs -``` diff --git a/docs/snippets/react/nextjs-navigation-mock.js.mdx b/docs/snippets/react/nextjs-navigation-mock.js.mdx deleted file mode 100644 index ed5bf26a99f5..000000000000 --- a/docs/snippets/react/nextjs-navigation-mock.js.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```js -// MyForm.stories.js -import { expect, fireEvent, userEvent, within } from '@storybook/test'; -import { redirect, getRouter } from '@storybook/nextjs/navigation.mock'; - -import MyForm from './my-form'; - -export default { - component: MyForm, - parameters: { - nextjs: { - // 👇 As in the Next.js application, next/navigation only works using App Router - appDirectory: true, - }, - }, -}; - -export const Unauthenticated = { - async play() => { - // 👇 Assert that your component called redirect() - await expect(redirect).toHaveBeenCalledWith('/login', 'replace'); - }, -}; - -export const GoBack = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - const backBtn = await canvas.findByText('Go back'); - - await userEvent.click(backBtn); - // 👇 Assert that your component called back() - await expect(getRouter().back).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-navigation-mock.ts-4-9.mdx b/docs/snippets/react/nextjs-navigation-mock.ts-4-9.mdx deleted file mode 100644 index 3a77a9a0ea16..000000000000 --- a/docs/snippets/react/nextjs-navigation-mock.ts-4-9.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```ts -// MyForm.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { redirect, getRouter } from '@storybook/nextjs/navigation.mock'; - -import MyForm from './my-form'; - -const meta = { - component: MyForm, - parameters: { - nextjs: { - // 👇 As in the Next.js application, next/navigation only works using App Router - appDirectory: true, - }, - }, -} satisfies Meta<typeof MyForm>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Unauthenticated: Story = { - async play() => { - // 👇 Assert that your component called redirect() - await expect(redirect).toHaveBeenCalledWith('/login', 'replace'); - }, -}; - -export const GoBack: Story = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - const backBtn = await canvas.findByText('Go back'); - - await userEvent.click(backBtn); - // 👇 Assert that your component called back() - await expect(getRouter().back).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-navigation-mock.ts.mdx b/docs/snippets/react/nextjs-navigation-mock.ts.mdx deleted file mode 100644 index 8520b7928693..000000000000 --- a/docs/snippets/react/nextjs-navigation-mock.ts.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```ts -// MyForm.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { redirect, getRouter } from '@storybook/nextjs/navigation.mock'; - -import MyForm from './my-form'; - -const meta: Meta<typeof MyForm> = { - component: MyForm, - parameters: { - nextjs: { - // 👇 As in the Next.js application, next/navigation only works using App Router - appDirectory: true, - }, - }, -}; - -export default meta; - -type Story = StoryObj<typeof MyForm>; - -export const Unauthenticated: Story = { - async play() => { - // 👇 Assert that your component called redirect() - await expect(redirect).toHaveBeenCalledWith('/login', 'replace'); - }, -}; - -export const GoBack: Story = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - const backBtn = await canvas.findByText('Go back'); - - await userEvent.click(backBtn); - // 👇 Assert that your component called back() - await expect(getRouter().back).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-navigation-override-in-story.js.mdx b/docs/snippets/react/nextjs-navigation-override-in-story.js.mdx deleted file mode 100644 index 49af21318d60..000000000000 --- a/docs/snippets/react/nextjs-navigation-override-in-story.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// NavigationBasedComponent.stories.js -import NavigationBasedComponent from './NavigationBasedComponent'; - -export default { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - }, - }, -}; - -// If you have the actions addon, -// you can interact with the links and see the route change events there -export const Example = { - parameters: { - nextjs: { - navigation: { - pathname: '/profile', - query: { - user: '1', - }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-navigation-override-in-story.ts-4-9.mdx b/docs/snippets/react/nextjs-navigation-override-in-story.ts-4-9.mdx deleted file mode 100644 index 07aec86243d4..000000000000 --- a/docs/snippets/react/nextjs-navigation-override-in-story.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// NavigationBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import NavigationBasedComponent from './NavigationBasedComponent'; - -const meta = { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - }, - }, -} satisfies Meta<typeof NavigationBasedComponent>; -export default meta; - -type Story = StoryObj<typeof Meta>; - -// If you have the actions addon, -// you can interact with the links and see the route change events there -export const Example: Story = { - parameters: { - nextjs: { - navigation: { - pathname: '/profile', - query: { - user: '1', - }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-navigation-override-in-story.ts.mdx b/docs/snippets/react/nextjs-navigation-override-in-story.ts.mdx deleted file mode 100644 index 7b854c9bf8f3..000000000000 --- a/docs/snippets/react/nextjs-navigation-override-in-story.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// NavigationBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import NavigationBasedComponent from './NavigationBasedComponent'; - -const meta: Meta<typeof NavigationBasedComponent> = { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - }, - }, -}; -export default meta; - -type Story = StoryObj<typeof NavigationBasedComponent>; - -// If you have the actions addon, -// you can interact with the links and see the route change events there -export const Example: Story = { - parameters: { - nextjs: { - navigation: { - pathname: '/profile', - query: { - user: '1', - }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.js.mdx b/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.js.mdx deleted file mode 100644 index 1f7e5406db30..000000000000 --- a/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// NavigationBasedComponent.stories.js -import NavigationBasedComponent from './NavigationBasedComponent'; - -export default { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - navigation: { - segments: [ - ['slug', 'hello'], - ['framework', 'nextjs'], - ], - }, - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.ts-4-9.mdx b/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.ts-4-9.mdx deleted file mode 100644 index cae936cb0817..000000000000 --- a/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// NavigationBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import NavigationBasedComponent from './NavigationBasedComponent'; - -const meta = { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - navigation: { - segments: [ - ['slug', 'hello'], - ['framework', 'nextjs'], - ], - }, - }, - }, -} satisfies Meta<typeof NavigationBasedComponent>; -export default meta; -``` diff --git a/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.ts.mdx b/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.ts.mdx deleted file mode 100644 index ff779e2a26f6..000000000000 --- a/docs/snippets/react/nextjs-navigation-segments-for-use-params-override-in-meta.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// NavigationBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import NavigationBasedComponent from './NavigationBasedComponent'; - -const meta: Meta<typeof NavigationBasedComponent> = { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - navigation: { - segments: [ - ['slug', 'hello'], - ['framework', 'nextjs'], - ], - }, - }, - }, -}; -export default meta; -``` diff --git a/docs/snippets/react/nextjs-navigation-segments-override-in-meta.js.mdx b/docs/snippets/react/nextjs-navigation-segments-override-in-meta.js.mdx deleted file mode 100644 index ae72d38b5b6a..000000000000 --- a/docs/snippets/react/nextjs-navigation-segments-override-in-meta.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// NavigationBasedComponent.stories.js -import NavigationBasedComponent from './NavigationBasedComponent'; - -export default { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - navigation: { - segments: ['dashboard', 'analytics'], - }, - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-navigation-segments-override-in-meta.ts-4-9.mdx b/docs/snippets/react/nextjs-navigation-segments-override-in-meta.ts-4-9.mdx deleted file mode 100644 index 28ef22f5ba8f..000000000000 --- a/docs/snippets/react/nextjs-navigation-segments-override-in-meta.ts-4-9.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// NavigationBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import NavigationBasedComponent from './NavigationBasedComponent'; - -const meta = { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - navigation: { - segments: ['dashboard', 'analytics'], - }, - }, - }, -} satisfies Meta<typeof NavigationBasedComponent>; -export default meta; -``` diff --git a/docs/snippets/react/nextjs-navigation-segments-override-in-meta.ts.mdx b/docs/snippets/react/nextjs-navigation-segments-override-in-meta.ts.mdx deleted file mode 100644 index 7621ca48ff34..000000000000 --- a/docs/snippets/react/nextjs-navigation-segments-override-in-meta.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// NavigationBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import NavigationBasedComponent from './NavigationBasedComponent'; - -const meta: Meta<typeof NavigationBasedComponent> = { - component: NavigationBasedComponent, - parameters: { - nextjs: { - appDirectory: true, - navigation: { - segments: ['dashboard', 'analytics'], - }, - }, - }, -}; -export default meta; -``` diff --git a/docs/snippets/react/nextjs-remove-addons.js.mdx b/docs/snippets/react/nextjs-remove-addons.js.mdx deleted file mode 100644 index 51a0c7a29902..000000000000 --- a/docs/snippets/react/nextjs-remove-addons.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - addons: [ - // ... - // 👇 These can both be removed - // 'storybook-addon-next', - // 'storybook-addon-next-router', - ], -}; -``` diff --git a/docs/snippets/react/nextjs-remove-addons.ts.mdx b/docs/snippets/react/nextjs-remove-addons.ts.mdx deleted file mode 100644 index 5cc33f78e218..000000000000 --- a/docs/snippets/react/nextjs-remove-addons.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/nextjs'; - -const config: StorybookConfig = { - // ... - addons: [ - // ... - // 👇 These can both be removed - // 'storybook-addon-next', - // 'storybook-addon-next-router', - ], -}; - -export default config; -``` diff --git a/docs/snippets/react/nextjs-router-mock.js.mdx b/docs/snippets/react/nextjs-router-mock.js.mdx deleted file mode 100644 index e38a1f0d37cc..000000000000 --- a/docs/snippets/react/nextjs-router-mock.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// MyForm.stories.js -import { expect, fireEvent, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { getRouter } from '@storybook/nextjs/router.mock'; - -import MyForm from './my-form'; - -export default { - component: MyForm, -}; - -export const GoBack = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - const backBtn = await canvas.findByText('Go back'); - - await userEvent.click(backBtn); - // 👇 Assert that your component called back() - await expect(getRouter().back).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-router-mock.ts-4-9.mdx b/docs/snippets/react/nextjs-router-mock.ts-4-9.mdx deleted file mode 100644 index d7183ad25dae..000000000000 --- a/docs/snippets/react/nextjs-router-mock.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyForm.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { getRouter } from '@storybook/nextjs/router.mock'; - -import MyForm from './my-form'; - -const meta = { - component: MyForm, -} satisfies Meta<typeof MyForm>; - -export default meta; - -type Story = StoryObj<typeof meta>; - -export const GoBack: Story = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - const backBtn = await canvas.findByText('Go back'); - - await userEvent.click(backBtn); - // 👇 Assert that your component called back() - await expect(getRouter().back).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-router-mock.ts.mdx b/docs/snippets/react/nextjs-router-mock.ts.mdx deleted file mode 100644 index 5be7cd2406e9..000000000000 --- a/docs/snippets/react/nextjs-router-mock.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyForm.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, userEvent, within } from '@storybook/test'; -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { getRouter } from '@storybook/nextjs/router.mock'; - -import MyForm from './my-form'; - -const meta: Meta<typeof MyForm> = { - component: MyForm, -}; - -export default meta; - -type Story = StoryObj<typeof MyForm>; - -export const GoBack: Story = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - const backBtn = await canvas.findByText('Go back'); - - await userEvent.click(backBtn); - // 👇 Assert that your component called back() - await expect(getRouter().back).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/react/nextjs-router-override-in-story.js.mdx b/docs/snippets/react/nextjs-router-override-in-story.js.mdx deleted file mode 100644 index d631f61cbc8c..000000000000 --- a/docs/snippets/react/nextjs-router-override-in-story.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// RouterBasedComponent.stories.js -import RouterBasedComponent from './RouterBasedComponent'; - -export default { - component: RouterBasedComponent, -}; - -// If you have the actions addon, -// you can interact with the links and see the route change events there -export const Example = { - parameters: { - nextjs: { - router: { - pathname: '/profile/[id]', - asPath: '/profile/1', - query: { - id: '1', - }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-router-override-in-story.ts-4-9.mdx b/docs/snippets/react/nextjs-router-override-in-story.ts-4-9.mdx deleted file mode 100644 index 649fc74cf357..000000000000 --- a/docs/snippets/react/nextjs-router-override-in-story.ts-4-9.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```ts -// RouterBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import RouterBasedComponent from './RouterBasedComponent'; - -const meta = { - component: RouterBasedComponent, -} satisfies Meta<typeof RouterBasedComponent>; -export default meta; - -type Story = StoryObj<typeof Meta>; - -// If you have the actions addon, -// you can interact with the links and see the route change events there -export const Example: Story = { - parameters: { - nextjs: { - router: { - pathname: '/profile/[id]', - asPath: '/profile/1', - query: { - id: '1', - }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/react/nextjs-router-override-in-story.ts.mdx b/docs/snippets/react/nextjs-router-override-in-story.ts.mdx deleted file mode 100644 index 3cdf5037ab4f..000000000000 --- a/docs/snippets/react/nextjs-router-override-in-story.ts.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```ts -// RouterBasedComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import RouterBasedComponent from './RouterBasedComponent'; - -const meta: Meta<typeof RouterBasedComponent> = { - component: RouterBasedComponent, -}; -export default meta; - -type Story = StoryObj<typeof RouterBasedComponent>; - -// If you have the actions addon, -// you can interact with the links and see the route change events there -export const Example: Story = { - parameters: { - nextjs: { - router: { - pathname: '/profile/[id]', - asPath: '/profile/1', - query: { - id: '1', - }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/react/override-compose-story-test.compose-stories.js.mdx b/docs/snippets/react/override-compose-story-test.compose-stories.js.mdx deleted file mode 100644 index 32dec5d22b7a..000000000000 --- a/docs/snippets/react/override-compose-story-test.compose-stories.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// Form.test.js|jsx - -import { composeStories } from '@storybook/react'; - -import * as FormStories from './LoginForm.stories'; - -const { ValidForm } = composeStories(FormStories, { - decorators: [ - // Define your story-level decorators here - ], - globalTypes: { - // Define your global types here - }, - parameters: { - // Define your story-level parameters here - }, -}); -``` diff --git a/docs/snippets/react/override-compose-story-test.compose-stories.ts.mdx b/docs/snippets/react/override-compose-story-test.compose-stories.ts.mdx deleted file mode 100644 index 51682febcb5f..000000000000 --- a/docs/snippets/react/override-compose-story-test.compose-stories.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Form.test.ts|tsx - -import { composeStories } from '@storybook/react'; - -import * as FormStories from './LoginForm.stories'; - -const { ValidForm } = composeStories(FormStories, { - decorators: [ - // Define your story-level decorators here - ], - globalTypes: { - // Define your global types here - }, - parameters: { - // Define your story-level parameters here - }, -}); -``` diff --git a/docs/snippets/react/override-compose-story-test.compose-story.js.mdx b/docs/snippets/react/override-compose-story-test.compose-story.js.mdx deleted file mode 100644 index 726d814a9909..000000000000 --- a/docs/snippets/react/override-compose-story-test.compose-story.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// Form.test.js|jsx - -import { composeStory } from '@storybook/react'; - -import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories'; - -const FormValidation = composeStory(ValidFormStory, Meta, { - decorators: [ - // Define your story-level decorators here - ], - globalTypes: { - // Define your global types here - }, - parameters: { - // Define your story-level parameters here - }, -}); -``` diff --git a/docs/snippets/react/override-compose-story-test.compose-story.ts.mdx b/docs/snippets/react/override-compose-story-test.compose-story.ts.mdx deleted file mode 100644 index a1b5eb71012d..000000000000 --- a/docs/snippets/react/override-compose-story-test.compose-story.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Form.test.ts|tsx - -import { composeStory } from '@storybook/react'; - -import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories'; - -const FormValidation = composeStory(ValidFormStory, Meta, { - decorators: [ - // Define your story-level decorators here - ], - globalTypes: { - // Define your global types here - }, - parameters: { - // Define your story-level parameters here - }, -}); -``` diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx deleted file mode 100644 index 282e81f79cf7..000000000000 --- a/docs/snippets/react/page-story-args-within-story.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// my-component/component.stories.js|jsx - -import { useArgs } from '@storybook/preview-api'; -import { Checkbox } from './checkbox'; - -export default { - title: 'Inputs/Checkbox', - component: Checkbox, -}; - -export const Example = { - args: { - isChecked: false, - label: 'Try Me!', - }, - /** - * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. - * If you are not concerned with linting, you may use an arrow function. - */ - render: function Render(args) { - const [{ isChecked }, updateArgs] = useArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />; - }, -}; -``` diff --git a/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx deleted file mode 100644 index 5a23cb8f523e..000000000000 --- a/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// my-component/component.stories.ts|tsx - -import { StoryObj, Meta } from '@storybook/react'; -import { useArgs } from '@storybook/preview-api'; -import { Checkbox } from './checkbox'; - -const meta = { - title: 'Inputs/Checkbox', - component: Checkbox, -} satisfies Meta<typeof Checkbox>; -export default meta; - -type Story = StoryObj<typeof Checkbox>; - -export const Example = { - args: { - isChecked: false, - label: 'Try Me!', - }, - /** - * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. - * If you are not concerned with linting, you may use an arrow function. - */ - render: function Render(args) { - const [{ isChecked }, updateArgs] = useArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />; - }, -} satisfies Story; -``` diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx deleted file mode 100644 index 137e37cbf3d6..000000000000 --- a/docs/snippets/react/page-story-args-within-story.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// my-component/component.stories.ts|tsx - -import { StoryObj, Meta } from '@storybook/react'; -import { useArgs } from '@storybook/preview-api'; -import { Checkbox } from './checkbox'; - -const meta: Meta<typeof Checkbox> = { - title: 'Inputs/Checkbox', - component: Checkbox, -}; -export default meta; - -type Story = StoryObj<typeof Checkbox>; - -export const Example: Story = { - args: { - isChecked: false, - label: 'Try Me!', - }, - /** - * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. - * If you are not concerned with linting, you may use an arrow function. - */ - render: function Render(args) { - const [{ isChecked }, updateArgs] = useArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />; - }, -}; -``` diff --git a/docs/snippets/react/page-story-slots.js.mdx b/docs/snippets/react/page-story-slots.js.mdx deleted file mode 100644 index 18b06c59a907..000000000000 --- a/docs/snippets/react/page-story-slots.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// Page.stories.js|jsx - -import { Page } from './Page'; - -export default { - component: Page, - render: ({ footer, ...args }) => ( - <Page {...args}> - <footer>{footer}</footer> - </Page> - ), -}; - -export const CustomFooter = { - args: { - footer: 'Built with Storybook', - }, -}; -``` diff --git a/docs/snippets/react/page-story-slots.ts-4-9.mdx b/docs/snippets/react/page-story-slots.ts-4-9.mdx deleted file mode 100644 index d67486842a2e..000000000000 --- a/docs/snippets/react/page-story-slots.ts-4-9.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```tsx -// Page.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Page } from './Page'; - -type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & { footer?: string }; - -const meta = { - component: Page, - render: ({ footer, ...args }) => ( - <Page {...args}> - <footer>{footer}</footer> - </Page> - ), -} satisfies Meta<PagePropsAndCustomArgs>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const CustomFooter = { - args: { - footer: 'Built with Storybook', - }, -} satisfies Story; -``` diff --git a/docs/snippets/react/page-story-slots.ts.mdx b/docs/snippets/react/page-story-slots.ts.mdx deleted file mode 100644 index d28aadf26523..000000000000 --- a/docs/snippets/react/page-story-slots.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```tsx -// Page.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Page } from './Page'; - -type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & { footer?: string }; - -const meta: Meta<PagePropsAndCustomArgs> = { - component: Page, - render: ({ footer, ...args }) => ( - <Page {...args}> - <footer>{footer}</footer> - </Page> - ), -}; -export default meta; - -type Story = StoryObj<PagePropsAndCustomArgs>; - -export const CustomFooter: Story = { - args: { - footer: 'Built with Storybook', - }, -}; -``` diff --git a/docs/snippets/react/page-story.js.mdx b/docs/snippets/react/page-story.js.mdx deleted file mode 100644 index 49c2f8297eb9..000000000000 --- a/docs/snippets/react/page-story.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Page.stories.js|jsx - -import { Page } from './Page'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -export default { - component: Page, -}; - -export const LoggedIn = { - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/react/page-story.ts-4-9.mdx b/docs/snippets/react/page-story.ts-4-9.mdx deleted file mode 100644 index 63d162e2baf3..000000000000 --- a/docs/snippets/react/page-story.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Page.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Page } from './Page'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -const meta = { - 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/react/page-story.ts.mdx b/docs/snippets/react/page-story.ts.mdx deleted file mode 100644 index 72fe76c4bcc7..000000000000 --- a/docs/snippets/react/page-story.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Page.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { Page } from './Page'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -const meta: Meta<typeof Page> = { - component: Page, -}; - -export default meta; -type Story = StoryObj<typeof Page>; - -export const LoggedIn: Story = { - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx b/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx deleted file mode 100644 index 0def520867b3..000000000000 --- a/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```tsx -// Button.test.tsx -import { test, expect } from '@jest/globals'; -import { render, screen } from '@testing-library/react'; -// 👉 Using Next.js? Import from @storybook/nextjs instead -import { composeStories } from '@storybook/react'; - -// Import all stories and the component annotations from the stories file -import * as stories from './Button.stories'; - -// Every component that is returned maps 1:1 with the stories, -// but they already contain all annotations from story, meta, and project levels -const { Primary, Secondary } = composeStories(stories); - -test('renders primary button with default args', () => { - render(<Primary />); - const buttonElement = screen.getByText('Text coming from args in stories file!'); - expect(buttonElement).not.toBeNull(); -}); - -test('renders primary button with overridden props', () => { - // You can override props and they will get merged with values from the story's args - render(<Primary>Hello world</Primary>); - const buttonElement = screen.getByText(/Hello world/i); - expect(buttonElement).not.toBeNull(); -}); -``` diff --git a/docs/snippets/react/portable-stories-jest-compose-story.ts.mdx b/docs/snippets/react/portable-stories-jest-compose-story.ts.mdx deleted file mode 100644 index 9fca7e760b83..000000000000 --- a/docs/snippets/react/portable-stories-jest-compose-story.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// Button.test.tsx -import { jest, test, expect } from '@jest/globals'; -import { render, screen } from '@testing-library/react'; -// 👉 Using Next.js? Import from @storybook/nextjs instead -import { composeStory } from '@storybook/react'; - -import meta, { Primary } from './Button.stories'; - -test('onclick handler is called', () => { - // Returns a story which already contains all annotations from story, meta and global levels - const PrimaryStory = composeStory(Primary, meta); - - const onClickSpy = jest.fn(); - render(<PrimaryStory onClick={onClickSpy} />); - const buttonElement = screen.getByRole('button'); - buttonElement.click(); - expect(onClickSpy).toHaveBeenCalled(); -}); -``` diff --git a/docs/snippets/react/portable-stories-jest-override-globals.ts.mdx b/docs/snippets/react/portable-stories-jest-override-globals.ts.mdx deleted file mode 100644 index 3f9cfb1287fe..000000000000 --- a/docs/snippets/react/portable-stories-jest-override-globals.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```tsx -// Button.test.tsx -import { test } from '@jest/globals'; -import { render } from '@testing-library/react'; -// 👉 Using Next.js? Import from @storybook/nextjs instead -import { composeStory } from '@storybook/react'; - -import meta, { Primary } from './Button.stories'; - -test('renders in English', async () => { - const PrimaryStory = composeStory( - Primary, - meta, - { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale - ); - - render(<PrimaryStory />); -}); - -test('renders in Spanish', async () => { - const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } }); - - render(<PrimaryStory />); -}); -``` diff --git a/docs/snippets/react/portable-stories-jest-with-loaders.ts.mdx b/docs/snippets/react/portable-stories-jest-with-loaders.ts.mdx deleted file mode 100644 index 5c902b2ece14..000000000000 --- a/docs/snippets/react/portable-stories-jest-with-loaders.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```tsx -// Button.test.tsx -import { test } from '@jest/globals'; -import { render } from '@testing-library/react'; -// 👉 Using Next.js? Import from @storybook/nextjs instead -import { composeStory } from '@storybook/react'; - -import meta, { Primary } from './Button.stories'; - -test('applies the loaders and renders', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, load the data for the story - await PrimaryStory.load(); - - // Then, render the story - render(<PrimaryStory />); -}); -``` diff --git a/docs/snippets/react/portable-stories-jest-with-play-function.ts.mdx b/docs/snippets/react/portable-stories-jest-with-play-function.ts.mdx deleted file mode 100644 index de0ee6bedd63..000000000000 --- a/docs/snippets/react/portable-stories-jest-with-play-function.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```tsx -// Button.test.tsx -import { test } from '@jest/globals'; -import { render } from '@testing-library/react'; -// 👉 Using Next.js? Import from @storybook/nextjs instead -import { composeStory } from '@storybook/react'; - -import meta, { Primary } from './Button.stories'; - -test('renders and executes the play function', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, render the story - render(<PrimaryStory />); - - // Then, execute the play function - await PrimaryStory.play(); -}); -``` diff --git a/docs/snippets/react/portable-stories-playwright-ct.ts.mdx b/docs/snippets/react/portable-stories-playwright-ct.ts.mdx deleted file mode 100644 index cc8f5c031e56..000000000000 --- a/docs/snippets/react/portable-stories-playwright-ct.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```tsx -// Button.playwright.test.tsx -import { createTest } from '@storybook/react/experimental-playwright'; -import { test as base } from '@playwright/experimental-ct-react'; - -// See explanation below for `.portable` stories file -import stories from './Button.stories.portable'; - -const test = createTest(base); - -test('renders primary button', async ({ mount }) => { - // The mount function will execute all the necessary steps in the story, - // such as loaders, render, and play function - await mount(<stories.Primary />); -}); - -test('renders primary button with overridden props', async ({ mount }) => { - // You can pass custom props to your component via JSX - const component = await mount(<stories.Primary label="label from test" />); - await expect(component).toContainText('label from test'); - await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/); -}); -``` diff --git a/docs/snippets/react/portable-stories-vitest-compose-stories.ts.mdx b/docs/snippets/react/portable-stories-vitest-compose-stories.ts.mdx deleted file mode 100644 index d876298105a3..000000000000 --- a/docs/snippets/react/portable-stories-vitest-compose-stories.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```tsx -// Button.test.tsx -import { test, expect } from 'vitest'; -import { render, screen } from '@testing-library/react'; -import { composeStories } from '@storybook/react'; - -// Import all stories and the component annotations from the stories file -import * as stories from './Button.stories'; - -// Every component that is returned maps 1:1 with the stories, -// but they already contain all annotations from story, meta, and project levels -const { Primary, Secondary } = composeStories(stories); - -test('renders primary button with default args', () => { - render(<Primary />); - const buttonElement = screen.getByText('Text coming from args in stories file!'); - expect(buttonElement).not.toBeNull(); -}); - -test('renders primary button with overridden props', () => { - // You can override props and they will get merged with values from the story's args - render(<Primary>Hello world</Primary>); - const buttonElement = screen.getByText(/Hello world/i); - expect(buttonElement).not.toBeNull(); -}); -``` diff --git a/docs/snippets/react/portable-stories-vitest-compose-story.ts.mdx b/docs/snippets/react/portable-stories-vitest-compose-story.ts.mdx deleted file mode 100644 index 04733bab89ee..000000000000 --- a/docs/snippets/react/portable-stories-vitest-compose-story.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```tsx -// Button.test.tsx -import { vi, test, expect } from 'vitest'; -import { render, screen } from '@testing-library/react'; -import { composeStory } from '@storybook/react'; - -import meta, { Primary } from './Button.stories'; - -test('onclick handler is called', () => { - // Returns a story which already contains all annotations from story, meta and global levels - const PrimaryStory = composeStory(Primary, meta); - - const onClickSpy = vi.fn(); - render(<PrimaryStory onClick={onClickSpy} />); - const buttonElement = screen.getByRole('button'); - buttonElement.click(); - expect(onClickSpy).toHaveBeenCalled(); -}); -``` diff --git a/docs/snippets/react/portable-stories-vitest-override-globals.ts.mdx b/docs/snippets/react/portable-stories-vitest-override-globals.ts.mdx deleted file mode 100644 index b5f3c27f41a0..000000000000 --- a/docs/snippets/react/portable-stories-vitest-override-globals.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```tsx -// Button.test.tsx -import { test } from 'vitest'; -import { render } from '@testing-library/react'; -import { composeStory } from '@storybook/react'; - -import meta, { Primary } from './Button.stories'; - -test('renders in English', async () => { - const PrimaryStory = composeStory( - Primary, - meta, - { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale - ); - - render(<PrimaryStory />); -}); - -test('renders in Spanish', async () => { - const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } }); - - render(<PrimaryStory />); -}); -``` diff --git a/docs/snippets/react/portable-stories-vitest-with-loaders.ts.mdx b/docs/snippets/react/portable-stories-vitest-with-loaders.ts.mdx deleted file mode 100644 index 97d8f25cf19e..000000000000 --- a/docs/snippets/react/portable-stories-vitest-with-loaders.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```tsx -// Button.test.tsx -import { test } from 'vitest'; -import { render } from '@testing-library/react'; -import { composeStory } from '@storybook/react'; - -import meta, { Primary } from './Button.stories'; - -test('applies the loaders and renders', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, load the data for the story - await PrimaryStory.load(); - - // Then, render the story - render(<PrimaryStory />); -}); -``` diff --git a/docs/snippets/react/portable-stories-vitest-with-play-function.ts.mdx b/docs/snippets/react/portable-stories-vitest-with-play-function.ts.mdx deleted file mode 100644 index 708d5c038050..000000000000 --- a/docs/snippets/react/portable-stories-vitest-with-play-function.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```tsx -// Button.test.tsx -import { test } from 'vitest'; -import { render } from '@testing-library/react'; -import { composeStory } from '@storybook/react'; - -import meta, { Primary } from './Button.stories'; - -test('renders and executes the play function', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, render the story - render(<PrimaryStory />); - - // Then, execute the play function - await PrimaryStory.play(); -}); -``` diff --git a/docs/snippets/react/react-test-scripts-optional-config-scripts.json.mdx b/docs/snippets/react/react-test-scripts-optional-config-scripts.json.mdx deleted file mode 100644 index 6c3798a8f329..000000000000 --- a/docs/snippets/react/react-test-scripts-optional-config-scripts.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "test": "react-scripts test --setupFiles ./setupFile.js" - } -} -``` diff --git a/docs/snippets/react/react-vite-add-framework.js.mdx b/docs/snippets/react/react-vite-add-framework.js.mdx deleted file mode 100644 index 7a268b5768f0..000000000000 --- a/docs/snippets/react/react-vite-add-framework.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - // framework: '@storybook/react-webpack5', 👈 Remove this - framework: '@storybook/react-vite', // 👈 Add this -}; -``` diff --git a/docs/snippets/react/react-vite-add-framework.ts.mdx b/docs/snippets/react/react-vite-add-framework.ts.mdx deleted file mode 100644 index c407f12cc0a7..000000000000 --- a/docs/snippets/react/react-vite-add-framework.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/react-vite'; - -const config: StorybookConfig = { - // ... - // framework: '@storybook/react-webpack5', 👈 Remove this - framework: '@storybook/react-vite', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/react/react-vite-install.npm.js.mdx b/docs/snippets/react/react-vite-install.npm.js.mdx deleted file mode 100644 index 6a9b052c19bb..000000000000 --- a/docs/snippets/react/react-vite-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/react-vite -``` diff --git a/docs/snippets/react/react-vite-install.pnpm.js.mdx b/docs/snippets/react/react-vite-install.pnpm.js.mdx deleted file mode 100644 index 60141fbb62ed..000000000000 --- a/docs/snippets/react/react-vite-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/react-vite -``` diff --git a/docs/snippets/react/react-vite-install.yarn.js.mdx b/docs/snippets/react/react-vite-install.yarn.js.mdx deleted file mode 100644 index a566adef61ba..000000000000 --- a/docs/snippets/react/react-vite-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/react-vite -``` diff --git a/docs/snippets/react/react-webpack5-add-framework.js.mdx b/docs/snippets/react/react-webpack5-add-framework.js.mdx deleted file mode 100644 index cbacf99bd80a..000000000000 --- a/docs/snippets/react/react-webpack5-add-framework.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - framework: '@storybook/react-webpack5', // 👈 Add this -}; -``` diff --git a/docs/snippets/react/react-webpack5-add-framework.ts.mdx b/docs/snippets/react/react-webpack5-add-framework.ts.mdx deleted file mode 100644 index 2417fd5ea98a..000000000000 --- a/docs/snippets/react/react-webpack5-add-framework.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/react-webpack5'; - -const config: StorybookConfig = { - // ... - framework: '@storybook/react-webpack5', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/react/react-webpack5-install.npm.js.mdx b/docs/snippets/react/react-webpack5-install.npm.js.mdx deleted file mode 100644 index 8b54052f3f28..000000000000 --- a/docs/snippets/react/react-webpack5-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/react-webpack5 -``` diff --git a/docs/snippets/react/react-webpack5-install.pnpm.js.mdx b/docs/snippets/react/react-webpack5-install.pnpm.js.mdx deleted file mode 100644 index c954303256ac..000000000000 --- a/docs/snippets/react/react-webpack5-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/react-webpack5 -``` diff --git a/docs/snippets/react/react-webpack5-install.yarn.js.mdx b/docs/snippets/react/react-webpack5-install.yarn.js.mdx deleted file mode 100644 index b4f143c8a120..000000000000 --- a/docs/snippets/react/react-webpack5-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/react-webpack5 -``` diff --git a/docs/snippets/react/reuse-args-test.js.mdx b/docs/snippets/react/reuse-args-test.js.mdx deleted file mode 100644 index cb71c04e892b..000000000000 --- a/docs/snippets/react/reuse-args-test.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// Button.test.js|jsx - -import { render, screen } from '@testing-library/react'; - -import { composeStories } from '@storybook/react'; - -import * as stories from './Button.stories'; - -const { Primary } = composeStories(stories); - -test('reuses args from composed story', () => { - render(<Primary />); - - const buttonElement = screen.getByRole('button'); - // Testing against values coming from the story itself! No need for duplication - expect(buttonElement.textContent).toEqual(Primary.args.label); -}); -``` diff --git a/docs/snippets/react/reuse-args-test.ts.mdx b/docs/snippets/react/reuse-args-test.ts.mdx deleted file mode 100644 index 143b3a1cf2a7..000000000000 --- a/docs/snippets/react/reuse-args-test.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.test.ts|tsx - -import { render, screen } from '@testing-library/react'; - -import { composeStories } from '@storybook/react'; - -import * as stories from './Button.stories'; - -const { Primary } = composeStories(stories); - -test('reuses args from composed story', () => { - render(<Primary />); - - const buttonElement = screen.getByRole('button'); - // Testing against values coming from the story itself! No need for duplication - expect(buttonElement.textContent).toEqual(Primary.args.label); -}); -``` diff --git a/docs/snippets/react/rsc-feature-flag.js.mdx b/docs/snippets/react/rsc-feature-flag.js.mdx deleted file mode 100644 index 82a2678bc411..000000000000 --- a/docs/snippets/react/rsc-feature-flag.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - features: { - experimentalRSC: true, - }, -}; -``` diff --git a/docs/snippets/react/rsc-feature-flag.ts.mdx b/docs/snippets/react/rsc-feature-flag.ts.mdx deleted file mode 100644 index 10b8a03ee75b..000000000000 --- a/docs/snippets/react/rsc-feature-flag.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/nextjs'; - -const config: StorybookConfig = { - // ... - features: { - experimentalRSC: true, - }, -}; - -export default config; -``` diff --git a/docs/snippets/react/rsc-parameter-in-meta.js.mdx b/docs/snippets/react/rsc-parameter-in-meta.js.mdx deleted file mode 100644 index c0247429a675..000000000000 --- a/docs/snippets/react/rsc-parameter-in-meta.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// MyServerComponent.stories.js -import MyServerComponent from './MyServerComponent'; - -export default { - component: MyServerComponent, - parameters: { - react: { rsc: false }, - }, -}; -``` diff --git a/docs/snippets/react/rsc-parameter-in-meta.ts-4-9.mdx b/docs/snippets/react/rsc-parameter-in-meta.ts-4-9.mdx deleted file mode 100644 index a9331a6bf74f..000000000000 --- a/docs/snippets/react/rsc-parameter-in-meta.ts-4-9.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// MyServerComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import MyServerComponent from './MyServerComponent'; - -const meta = { - component: MyServerComponent, - parameters: { - react: { rsc: false }, - }, -} satisfies Meta<typeof MyServerComponent>; -export default meta; -``` diff --git a/docs/snippets/react/rsc-parameter-in-meta.ts.mdx b/docs/snippets/react/rsc-parameter-in-meta.ts.mdx deleted file mode 100644 index 2b512d759ca4..000000000000 --- a/docs/snippets/react/rsc-parameter-in-meta.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// MyServerComponent.stories.ts -import { Meta, StoryObj } from '@storybook/react'; - -import MyServerComponent from './MyServerComponent'; - -const meta: Meta<typeof MyServerComponent> = { - component: MyServerComponent, - parameters: { - react: { rsc: false }, - }, -}; -export default meta; -``` diff --git a/docs/snippets/react/simple-page-implementation.js.mdx b/docs/snippets/react/simple-page-implementation.js.mdx deleted file mode 100644 index 50efe8fb60e2..000000000000 --- a/docs/snippets/react/simple-page-implementation.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// YourPage.js|jsx - -import React from 'react'; - -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/react/simple-page-implementation.ts.mdx b/docs/snippets/react/simple-page-implementation.ts.mdx deleted file mode 100644 index 02629a7a3bb9..000000000000 --- a/docs/snippets/react/simple-page-implementation.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```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 DocumentScreenProps { - user?: {}; - document?: Document; - subdocuments?: SubDocuments[]; -} - -export function DocumentScreen({ user, document, subdocuments }: DocumentScreenProps) { - return ( - <PageLayout user={user}> - <DocumentHeader document={document} /> - <DocumentList documents={subdocuments} /> - </PageLayout> - ); -} -``` diff --git a/docs/snippets/react/single-story-test.js.mdx b/docs/snippets/react/single-story-test.js.mdx deleted file mode 100644 index b47e0ad42194..000000000000 --- a/docs/snippets/react/single-story-test.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// Form.test.js|jsx - -import { fireEvent, render, screen } from '@testing-library/react'; - -import { composeStory } from '@storybook/react'; - -import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories'; - -const FormOK = composeStory(ValidFormStory, Meta); - -test('Validates form', () => { - render(<FormOK />); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).not.toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/react/single-story-test.ts.mdx b/docs/snippets/react/single-story-test.ts.mdx deleted file mode 100644 index 167767ce72f4..000000000000 --- a/docs/snippets/react/single-story-test.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Form.test.ts|tsx - -import { fireEvent, render, screen } from '@testing-library/react'; - -import { composeStory } from '@storybook/react'; - -import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories'; - -const FormOK = composeStory(ValidFormStory, Meta); - -test('Validates form', () => { - render(<FormOK />); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).not.toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/react/storybook-addon-a11y-disable.js.mdx b/docs/snippets/react/storybook-addon-a11y-disable.js.mdx deleted file mode 100644 index aaa982dbbc06..000000000000 --- a/docs/snippets/react/storybook-addon-a11y-disable.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -export const NonA11yStory = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/react/storybook-addon-a11y-disable.ts-4-9.mdx b/docs/snippets/react/storybook-addon-a11y-disable.ts-4-9.mdx deleted file mode 100644 index d94fada8ffcf..000000000000 --- a/docs/snippets/react/storybook-addon-a11y-disable.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const NonA11yStory: Story = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx deleted file mode 100644 index 4ce786cf4a0d..000000000000 --- a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const NonA11yStory: Story = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx deleted file mode 100644 index 665224ce8798..000000000000 --- a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -export const ExampleStory = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.ts-4-9.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.ts-4-9.mdx deleted file mode 100644 index a6ed20bdbbca..000000000000 --- a/docs/snippets/react/storybook-addon-a11y-story-config.ts-4-9.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ExampleStory: Story = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx deleted file mode 100644 index c51c416357d6..000000000000 --- a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const ExampleStory: Story = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/react/storybook-main-extend-ts-config.ts.mdx b/docs/snippets/react/storybook-main-extend-ts-config.ts.mdx deleted file mode 100644 index abf80d6e62f2..000000000000 --- a/docs/snippets/react/storybook-main-extend-ts-config.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - check: false, - checkOptions: {}, - reactDocgen: 'react-docgen', - reactDocgenTypescriptOptions: {}, // Available only when reactDocgen is set to 'react-docgen-typescript' - skipCompiler: true, - }, -}; - -export default config; -``` diff --git a/docs/snippets/react/storybook-main-prop-filter.ts.mdx b/docs/snippets/react/storybook-main-prop-filter.ts.mdx deleted file mode 100644 index 4dd6b9d649e5..000000000000 --- a/docs/snippets/react/storybook-main-prop-filter.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - reactDocgen: 'react-docgen-typescript', - reactDocgenTypescriptOptions: { - compilerOptions: { - allowSyntheticDefaultImports: false, - esModuleInterop: false, - }, - // Filter out third-party props from node_modules except @mui packages. - propFilter: (prop) => - prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true, - }, - }, -}; - -export default config; -``` diff --git a/docs/snippets/react/storybook-main-react-docgen-typescript.ts.mdx b/docs/snippets/react/storybook-main-react-docgen-typescript.ts.mdx deleted file mode 100644 index 8dc82534b82f..000000000000 --- a/docs/snippets/react/storybook-main-react-docgen-typescript.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace your-framework with the framework you are using (e.g., react-webpack5, react-vite) -import type { StorybookConfig } from '@storybook/your-framework'; - -const config: StorybookConfig = { - framework: '@storybook/your-framework', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - typescript: { - reactDocgen: 'react-docgen-typescript', - // Provide your own options if necessary. - // See https://storybook.js.org/docs/configure/typescript for more information. - reactDocgenTypescriptOptions: {}, - }, -}; - -export default config; -``` diff --git a/docs/snippets/react/storybook-preview-global-decorator.js.mdx b/docs/snippets/react/storybook-preview-global-decorator.js.mdx deleted file mode 100644 index 96f70f1ecab7..000000000000 --- a/docs/snippets/react/storybook-preview-global-decorator.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```jsx -// .storybook/preview.jsx - -import React from 'react'; - -export default { - 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/react/storybook-preview-global-decorator.ts.mdx b/docs/snippets/react/storybook-preview-global-decorator.ts.mdx deleted file mode 100644 index b4de2111f6ec..000000000000 --- a/docs/snippets/react/storybook-preview-global-decorator.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// .storybook/preview.tsx - -import React from 'react'; - -import { Preview } from '@storybook/react'; - -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/snippets/react/storybook-preview-use-global-type.js.mdx b/docs/snippets/react/storybook-preview-use-global-type.js.mdx deleted file mode 100644 index d0070867ca0f..000000000000 --- a/docs/snippets/react/storybook-preview-use-global-type.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```jsx -// .storybook/preview.js|jsx - -import { ThemeProvider } from 'styled-components'; - -import { MyThemes } from '../my-theme-folder/my-theme-file'; - -const preview = { - decorators: [ - (Story, context) => { - const theme = MyThemes[context.globals.theme]; - return ( - <ThemeProvider theme={theme}> - <Story /> - </ThemeProvider> - ); - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/react/storybook-preview-use-global-type.ts-4-9.mdx b/docs/snippets/react/storybook-preview-use-global-type.ts-4-9.mdx deleted file mode 100644 index 29ce06e0437f..000000000000 --- a/docs/snippets/react/storybook-preview-use-global-type.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```tsx -// .storybook/preview.ts|tsx - -import type { Preview } from '@storybook/react'; - -import { ThemeProvider } from 'styled-components'; - -import { MyThemes } from '../my-theme-folder/my-theme-file'; - -const preview: Preview = { - decorators: [ - (Story, context) => { - const theme = MyThemes[context.globals.theme]; - return ( - <ThemeProvider theme={theme}> - <Story /> - </ThemeProvider> - ); - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/react/storybook-preview-use-global-type.ts.mdx b/docs/snippets/react/storybook-preview-use-global-type.ts.mdx deleted file mode 100644 index 29ce06e0437f..000000000000 --- a/docs/snippets/react/storybook-preview-use-global-type.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```tsx -// .storybook/preview.ts|tsx - -import type { Preview } from '@storybook/react'; - -import { ThemeProvider } from 'styled-components'; - -import { MyThemes } from '../my-theme-folder/my-theme-file'; - -const preview: Preview = { - decorators: [ - (Story, context) => { - const theme = MyThemes[context.globals.theme]; - return ( - <ThemeProvider theme={theme}> - <Story /> - </ThemeProvider> - ); - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/react/storybook-preview-with-styled-components-decorator.js.mdx b/docs/snippets/react/storybook-preview-with-styled-components-decorator.js.mdx deleted file mode 100644 index da4f381c32c3..000000000000 --- a/docs/snippets/react/storybook-preview-with-styled-components-decorator.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```jsx -// .storybook/preview.js - -import React from 'react'; - -import { ThemeProvider } from 'styled-components'; - -export default { - decorators: [ - (Story) => ( - <ThemeProvider theme="default"> - {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */} - <Story /> - </ThemeProvider> - ), - ], -}; -``` diff --git a/docs/snippets/react/storybook-preview-with-styled-components-decorator.ts.mdx b/docs/snippets/react/storybook-preview-with-styled-components-decorator.ts.mdx deleted file mode 100644 index bb2f92d827c4..000000000000 --- a/docs/snippets/react/storybook-preview-with-styled-components-decorator.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```tsx -// .storybook/preview.tsx - -import React from 'react'; - -import { Preview } from '@storybook/react'; - -import { ThemeProvider } from 'styled-components'; - -const preview: Preview = { - decorators: [ - (Story) => ( - <ThemeProvider theme="default"> - {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */} - <Story /> - </ThemeProvider> - ), - ], -}; - -export default preview; -``` diff --git a/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx b/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx deleted file mode 100644 index 90b2cb1e1833..000000000000 --- a/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// setupFile.js|ts - -// Storybook's preview file location -import * as globalStorybookConfig from './.storybook/preview'; - -import { setProjectAnnotations } from '@storybook/react'; - -setProjectAnnotations(globalStorybookConfig); -``` diff --git a/docs/snippets/react/storybook-testing-addon-optional-config.vite.js.mdx b/docs/snippets/react/storybook-testing-addon-optional-config.vite.js.mdx deleted file mode 100644 index a50bd78cb49b..000000000000 --- a/docs/snippets/react/storybook-testing-addon-optional-config.vite.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// vitest.config.js - -import { defineConfig } from 'vitest/config'; -import { mergeConfig } from 'vite'; - -import viteConfig from './vite.config'; - -export default mergeConfig( - viteConfig, - defineConfig({ - test: { - globals: true, - environment: 'jsdom', - clearMocks: true, - setupFiles: './src/setupTests.js', //👈 Our configuration file enabled here - }, - }), -); -``` diff --git a/docs/snippets/react/storybook-testing-addon-optional-config.vite.ts.mdx b/docs/snippets/react/storybook-testing-addon-optional-config.vite.ts.mdx deleted file mode 100644 index 3161eb45448c..000000000000 --- a/docs/snippets/react/storybook-testing-addon-optional-config.vite.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// vitest.config.ts - -/// <reference types="vitest" /> -import { defineConfig } from 'vitest/config'; -import { mergeConfig } from 'vite'; - -import viteConfig from './vite.config'; - -export default mergeConfig( - viteConfig, - defineConfig({ - test: { - globals: true, - environment: 'jsdom', - clearMocks: true, - setupFiles: './src/setupTests.ts', //👈 Our configuration file enabled here - }, - }), -); -``` diff --git a/docs/snippets/react/tags-combo-example.js.mdx b/docs/snippets/react/tags-combo-example.js.mdx deleted file mode 100644 index 941f2ae24d6c..000000000000 --- a/docs/snippets/react/tags-combo-example.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```jsx -// Button.stories.jsx -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Variant1 = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2 = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ( - <> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </> - ), -}; -``` diff --git a/docs/snippets/react/tags-combo-example.ts-4-9.mdx b/docs/snippets/react/tags-combo-example.ts-4-9.mdx deleted file mode 100644 index 9d82bac172cc..000000000000 --- a/docs/snippets/react/tags-combo-example.ts-4-9.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.stories.tsx -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ( - <> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </> - ), -}; -``` diff --git a/docs/snippets/react/tags-combo-example.ts.mdx b/docs/snippets/react/tags-combo-example.ts.mdx deleted file mode 100644 index b78d740756e0..000000000000 --- a/docs/snippets/react/tags-combo-example.ts.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.stories.tsx -import type { Meta, StoryObj } from '@storybook/react'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; -export default meta; - -type Story = StoryObj<typeof Button>; - -export const Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ( - <> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </> - ), -}; -``` diff --git a/docs/snippets/react/your-component-with-decorator.js.mdx b/docs/snippets/react/your-component-with-decorator.js.mdx deleted file mode 100644 index 4a369d1981cf..000000000000 --- a/docs/snippets/react/your-component-with-decorator.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// YourComponent.stories.js|jsx - -import { YourComponent } from './YourComponent'; - -export default { - component: YourComponent, - 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/react/your-component-with-decorator.ts-4-9.mdx b/docs/snippets/react/your-component-with-decorator.ts-4-9.mdx deleted file mode 100644 index f496c316f5b6..000000000000 --- a/docs/snippets/react/your-component-with-decorator.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// YourComponent.stories.ts|tsx - -import type { Meta } from '@storybook/react'; - -import { YourComponent } from './YourComponent'; - -const meta = { - component: YourComponent, - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */} - <Story /> - </div> - ), - ], -} satisfies Meta<typeof YourComponent>; - -export default meta; -``` diff --git a/docs/snippets/react/your-component-with-decorator.ts.mdx b/docs/snippets/react/your-component-with-decorator.ts.mdx deleted file mode 100644 index 5138b2f275cb..000000000000 --- a/docs/snippets/react/your-component-with-decorator.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// YourComponent.stories.ts|tsx - -import type { Meta } from '@storybook/react'; - -import { YourComponent } from './YourComponent'; - -const meta: Meta<typeof YourComponent> = { - component: YourComponent, - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */} - <Story /> - </div> - ), - ], -}; - -export default meta; -``` diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx deleted file mode 100644 index 3fc6d4fd7682..000000000000 --- a/docs/snippets/react/your-component.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// YourComponent.stories.js|jsx - -import { YourComponent } from './YourComponent'; - -//👇 This default export determines where your story goes in the story list -export default { - component: YourComponent, -}; - -export const FirstStory = { - args: { - //👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/react/your-component.ts-4-9.mdx b/docs/snippets/react/your-component.ts-4-9.mdx deleted file mode 100644 index 8641996581e7..000000000000 --- a/docs/snippets/react/your-component.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// YourComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { YourComponent } from './YourComponent'; - -//👇 This default export determines where your story goes in the story list -const meta = { - 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/react/your-component.ts.mdx b/docs/snippets/react/your-component.ts.mdx deleted file mode 100644 index d36554a00187..000000000000 --- a/docs/snippets/react/your-component.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// YourComponent.stories.ts|tsx - -import type { Meta, StoryObj } from '@storybook/react'; - -import { YourComponent } from './YourComponent'; - -//👇 This default export determines where your story goes in the story list -const meta: Meta<typeof 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 - }, -}; -``` diff --git a/docs/snippets/solid/button-group-story.js.mdx b/docs/snippets/solid/button-group-story.js.mdx deleted file mode 100644 index bb82e5ac2e3a..000000000000 --- a/docs/snippets/solid/button-group-story.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// ButtonGroup.stories.js|jsx - -import { ButtonGroup } from '../ButtonGroup'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -export default { - 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 deleted file mode 100644 index 5f92b24feb38..000000000000 --- a/docs/snippets/solid/button-group-story.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```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 = { - 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 deleted file mode 100644 index 94cd07dee5a5..000000000000 --- a/docs/snippets/solid/button-group-story.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```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> = { - 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-click-handler-args.js.mdx b/docs/snippets/solid/button-story-click-handler-args.js.mdx deleted file mode 100644 index e8ed7a43a215..000000000000 --- a/docs/snippets/solid/button-story-click-handler-args.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// Button.stories.js|jsx - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index f414d1a1716c..000000000000 --- a/docs/snippets/solid/button-story-click-handler-args.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -const meta = { - 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 deleted file mode 100644 index f5d18b9037e4..000000000000 --- a/docs/snippets/solid/button-story-click-handler-args.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```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> = { - 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 deleted file mode 100644 index 7737407e7aeb..000000000000 --- a/docs/snippets/solid/button-story-click-handler-simplificated.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index 67ae1e3f2b69..000000000000 --- a/docs/snippets/solid/button-story-click-handler-simplificated.ts-4-9.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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 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 deleted file mode 100644 index a1f2375e69f3..000000000000 --- a/docs/snippets/solid/button-story-click-handler-simplificated.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts|tsx - -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 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 deleted file mode 100644 index 062a1cbaa7a8..000000000000 --- a/docs/snippets/solid/button-story-click-handler.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js|jsx - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index 49ecb3e2358d..000000000000 --- a/docs/snippets/solid/button-story-click-handler.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { action } from '@storybook/addon-actions'; - -import { Button } from './Button'; - -const meta = { - 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 deleted file mode 100644 index c77a6f033145..000000000000 --- a/docs/snippets/solid/button-story-click-handler.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```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> = { - 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-component-args-primary.js.mdx b/docs/snippets/solid/button-story-component-args-primary.js.mdx deleted file mode 100644 index fff9e33773a2..000000000000 --- a/docs/snippets/solid/button-story-component-args-primary.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index 1fbf94adf584..000000000000 --- a/docs/snippets/solid/button-story-component-args-primary.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Button } from './Button'; - -const meta = { - 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 deleted file mode 100644 index 8113965f7833..000000000000 --- a/docs/snippets/solid/button-story-component-args-primary.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Button } from './Button'; - -const meta: Meta<typeof 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/button-story-component-decorator.js.mdx b/docs/snippets/solid/button-story-component-decorator.js.mdx deleted file mode 100644 index 96d5b9929365..000000000000 --- a/docs/snippets/solid/button-story-component-decorator.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index b52e4cd10297..000000000000 --- a/docs/snippets/solid/button-story-component-decorator.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta } from 'storybook-solidjs'; - -import { Button } from './Button'; - -const meta = { - 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 deleted file mode 100644 index 74bccdb6223b..000000000000 --- a/docs/snippets/solid/button-story-component-decorator.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta } from 'storybook-solidjs'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - <Story /> - </div> - ), - ], -}; - -export default meta; -``` diff --git a/docs/snippets/solid/button-story-decorator.js.mdx b/docs/snippets/solid/button-story-decorator.js.mdx deleted file mode 100644 index 3b20f9abf956..000000000000 --- a/docs/snippets/solid/button-story-decorator.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Primary = { - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - <Story /> - </div> - ), - ], -}; -``` diff --git a/docs/snippets/solid/button-story-decorator.ts-4-9.mdx b/docs/snippets/solid/button-story-decorator.ts-4-9.mdx deleted file mode 100644 index be34fb09d2ab..000000000000 --- a/docs/snippets/solid/button-story-decorator.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.stories.ts|tsx - -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 = { - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - <Story /> - </div> - ), - ], -}; -``` diff --git a/docs/snippets/solid/button-story-decorator.ts.mdx b/docs/snippets/solid/button-story-decorator.ts.mdx deleted file mode 100644 index df3cf720b4b1..000000000000 --- a/docs/snippets/solid/button-story-decorator.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.stories.ts|tsx - -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 = { - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - <Story /> - </div> - ), - ], -}; -``` 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 deleted file mode 100644 index dfffb5de27e3..000000000000 --- a/docs/snippets/solid/button-story-default-export-with-component.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index 1afbbbab85d4..000000000000 --- a/docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta } from 'storybook-solidjs'; - -import { Button } from './Button'; - -const meta = { - 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 deleted file mode 100644 index dcc16eb5771f..000000000000 --- a/docs/snippets/solid/button-story-default-export-with-component.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta } from 'storybook-solidjs'; - -import { Button } from './Button'; - -const meta: Meta<typeof 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 deleted file mode 100644 index 2f7129b1f52e..000000000000 --- a/docs/snippets/solid/button-story-rename-story.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js|jsx -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Primary = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` 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 deleted file mode 100644 index c5cf4c006d7e..000000000000 --- a/docs/snippets/solid/button-story-rename-story.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```tsx -// Button.stories.ts|tsx -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 = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/solid/button-story-rename-story.ts.mdx b/docs/snippets/solid/button-story-rename-story.ts.mdx deleted file mode 100644 index 4252ac5e6759..000000000000 --- a/docs/snippets/solid/button-story-rename-story.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```tsx -// Button.stories.ts|tsx -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 = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/solid/button-story-using-args.js.mdx b/docs/snippets/solid/button-story-using-args.js.mdx deleted file mode 100644 index 65cfeddc8fa2..000000000000 --- a/docs/snippets/solid/button-story-using-args.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index 7556b41a3e51..000000000000 --- a/docs/snippets/solid/button-story-using-args.ts-4-9.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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: { - 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 deleted file mode 100644 index caf8ab0905b2..000000000000 --- a/docs/snippets/solid/button-story-using-args.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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: { - 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-addon-example.js.mdx b/docs/snippets/solid/button-story-with-addon-example.js.mdx deleted file mode 100644 index 40ded2296e56..000000000000 --- a/docs/snippets/solid/button-story-with-addon-example.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: '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 deleted file mode 100644 index cb85cd7138cb..000000000000 --- a/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```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/configure/#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/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 deleted file mode 100644 index 2227cf49eab0..000000000000 --- a/docs/snippets/solid/button-story-with-addon-example.ts.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```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/configure/#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/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-args.js.mdx b/docs/snippets/solid/button-story-with-args.js.mdx deleted file mode 100644 index b185421f6c95..000000000000 --- a/docs/snippets/solid/button-story-with-args.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index cc5c4cd8f6a9..000000000000 --- a/docs/snippets/solid/button-story-with-args.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/solid/button-story-with-args.ts.mdx b/docs/snippets/solid/button-story-with-args.ts.mdx deleted file mode 100644 index fadaa3424123..000000000000 --- a/docs/snippets/solid/button-story-with-args.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/solid/button-story-with-emojis.js.mdx b/docs/snippets/solid/button-story-with-emojis.js.mdx deleted file mode 100644 index 87e328b8a841..000000000000 --- a/docs/snippets/solid/button-story-with-emojis.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const 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 deleted file mode 100644 index 515869669bcf..000000000000 --- a/docs/snippets/solid/button-story-with-emojis.ts-4-9.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const 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 deleted file mode 100644 index bbaf1f7939b8..000000000000 --- a/docs/snippets/solid/button-story-with-emojis.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const 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-sample.js.mdx b/docs/snippets/solid/button-story-with-sample.js.mdx deleted file mode 100644 index 64fd26d83463..000000000000 --- a/docs/snippets/solid/button-story-with-sample.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Sample = { - render: () => <Button label="hello button" />, -}; -``` diff --git a/docs/snippets/solid/button-story.js.mdx b/docs/snippets/solid/button-story.js.mdx deleted file mode 100644 index 4cbc51dd0f99..000000000000 --- a/docs/snippets/solid/button-story.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const 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 deleted file mode 100644 index 5f6761d0fd52..000000000000 --- a/docs/snippets/solid/button-story.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const 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 deleted file mode 100644 index dab908a27f07..000000000000 --- a/docs/snippets/solid/button-story.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -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>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => <Button primary label="Button" />, -}; -``` diff --git a/docs/snippets/solid/button-story.with-hooks.js.mdx b/docs/snippets/solid/button-story.with-hooks.js.mdx deleted file mode 100644 index b41881651f14..000000000000 --- a/docs/snippets/solid/button-story.with-hooks.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```js -// Button.stories.js|jsx - -import { createSignal } from 'solid-js'; - -import { Button } from './Button'; - -export default { - 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/button-story.with-hooks.ts-4-9.mdx b/docs/snippets/solid/button-story.with-hooks.ts-4-9.mdx deleted file mode 100644 index 60422480efc3..000000000000 --- a/docs/snippets/solid/button-story.with-hooks.ts-4-9.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { createSignal } from 'solid-js'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -/* - * 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 />, -} satisfies Story; -``` diff --git a/docs/snippets/solid/button-story.with-hooks.ts.mdx b/docs/snippets/solid/button-story.with-hooks.ts.mdx deleted file mode 100644 index 9716bb8f535e..000000000000 --- a/docs/snippets/solid/button-story.with-hooks.ts.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { createSignal } from 'solid-js'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof 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: Story = { - render: () => <ButtonWithHooks />, -}; -``` diff --git a/docs/snippets/solid/component-story-custom-args-complex.js.mdx b/docs/snippets/solid/component-story-custom-args-complex.js.mdx deleted file mode 100644 index 060b5d236878..000000000000 --- a/docs/snippets/solid/component-story-custom-args-complex.js.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```js -// YourComponent.stories.js|jsx - -import { createSignal, createEffect } from 'solid-js'; -import { YourComponent } from './your-component'; - -export default { - 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'], - }, - }, -}; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -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 deleted file mode 100644 index 58d27e6e230d..000000000000 --- a/docs/snippets/solid/component-story-custom-args-complex.ts-4-9.mdx +++ /dev/null @@ -1,46 +0,0 @@ -```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 = { - 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'], - }, - }, -} satisfies Meta<typeof YourComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -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 deleted file mode 100644 index 9d61b897d7ec..000000000000 --- a/docs/snippets/solid/component-story-custom-args-complex.ts.mdx +++ /dev/null @@ -1,46 +0,0 @@ -```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> = { - 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'], - }, - }, -}; - -export default meta; -type Story = StoryObj<typeof YourComponent>; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -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 deleted file mode 100644 index e71edadfdc17..000000000000 --- a/docs/snippets/solid/component-story-figma-integration.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -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 deleted file mode 100644 index d121332d7514..000000000000 --- a/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} 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 deleted file mode 100644 index a105e443eb59..000000000000 --- a/docs/snippets/solid/component-story-figma-integration.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -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-static-asset-cdn.js.mdx b/docs/snippets/solid/component-story-static-asset-cdn.js.mdx deleted file mode 100644 index d4cec49790ec..000000000000 --- a/docs/snippets/solid/component-story-static-asset-cdn.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -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 deleted file mode 100644 index fb20844c5431..000000000000 --- a/docs/snippets/solid/component-story-static-asset-cdn.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} 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 deleted file mode 100644 index 7e64a0c88e9b..000000000000 --- a/docs/snippets/solid/component-story-static-asset-cdn.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -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 deleted file mode 100644 index f3d3ef8dd57b..000000000000 --- a/docs/snippets/solid/component-story-static-asset-with-import.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import imageFile from './static/image.png'; - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -const image = { - src: imageFile, - alt: 'my image', -}; - -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 deleted file mode 100644 index 8ed5339b1a33..000000000000 --- a/docs/snippets/solid/component-story-static-asset-with-import.ts-4-9.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import imageFile from './static/image.png'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -const image = { - src: imageFile, - alt: 'my image', -}; - -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 deleted file mode 100644 index 08ee67af80d8..000000000000 --- a/docs/snippets/solid/component-story-static-asset-with-import.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import imageFile from './static/image.png'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -const image = { - src: imageFile, - alt: 'my image', -}; - -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 deleted file mode 100644 index 4dcb30e21c0b..000000000000 --- a/docs/snippets/solid/component-story-static-asset-without-import.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -// 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 deleted file mode 100644 index dc246f730bd7..000000000000 --- a/docs/snippets/solid/component-story-static-asset-without-import.ts-4-9.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta = { - component: MyComponent, -} 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 deleted file mode 100644 index e1e89ae9dd77..000000000000 --- a/docs/snippets/solid/component-story-static-asset-without-import.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -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/component-story-with-accessibility.js.mdx b/docs/snippets/solid/component-story-with-accessibility.js.mdx deleted file mode 100644 index 31766b3e6b15..000000000000 --- a/docs/snippets/solid/component-story-with-accessibility.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// Button.stories.js|jsx - -import { Button } from './Button'; - -export default { - 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 deleted file mode 100644 index a652ea8ec9a8..000000000000 --- a/docs/snippets/solid/component-story-with-accessibility.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Button } from './Button'; - -const meta = { - 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 deleted file mode 100644 index a72236c178f3..000000000000 --- a/docs/snippets/solid/component-story-with-accessibility.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```tsx -// Button.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - 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/component-story-with-custom-render-function.js.mdx b/docs/snippets/solid/component-story-with-custom-render-function.js.mdx deleted file mode 100644 index 462b847c87b3..000000000000 --- a/docs/snippets/solid/component-story-with-custom-render-function.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { Layout } from './Layout'; - -import { MyComponent } from './MyComponent'; - -export default { - 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 deleted file mode 100644 index 0658a83ae528..000000000000 --- a/docs/snippets/solid/component-story-with-custom-render-function.ts-4-9.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Layout } from './Layout'; - -import { MyComponent } from './MyComponent'; - -const meta = { - 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 deleted file mode 100644 index f89d8b3966c5..000000000000 --- a/docs/snippets/solid/component-story-with-custom-render-function.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```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> = { - 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 deleted file mode 100644 index 6af95a68753d..000000000000 --- a/docs/snippets/solid/csf-2-example-starter.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```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 deleted file mode 100644 index fb55727065c3..000000000000 --- a/docs/snippets/solid/csf-2-example-starter.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```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 deleted file mode 100644 index dd37c0c366ca..000000000000 --- a/docs/snippets/solid/csf-2-example-story.js.mdx +++ /dev/null @@ -1,6 +0,0 @@ -```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 deleted file mode 100644 index c874f9a0e2dc..000000000000 --- a/docs/snippets/solid/csf-2-example-story.ts.mdx +++ /dev/null @@ -1,6 +0,0 @@ -```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 deleted file mode 100644 index 335954d99d51..000000000000 --- a/docs/snippets/solid/csf-3-example-render.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```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 deleted file mode 100644 index 3ea134d0e043..000000000000 --- a/docs/snippets/solid/csf-3-example-render.ts.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```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 deleted file mode 100644 index dbf66c18a4d6..000000000000 --- a/docs/snippets/solid/csf-3-example-starter.ts-4-9.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```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 deleted file mode 100644 index 74ce1415d934..000000000000 --- a/docs/snippets/solid/csf-3-example-starter.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```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/decorator-parameterized-in-preview.js.mdx b/docs/snippets/solid/decorator-parameterized-in-preview.js.mdx deleted file mode 100644 index c2dfdbf375bf..000000000000 --- a/docs/snippets/solid/decorator-parameterized-in-preview.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```jsx -// .storybook/preview.jsx -export default { - decorators: [ - // 👇 Defining the decorator in the preview file applies it to all stories - (Story, { parameters }) => { - // 👇 Make it configurable by reading from parameters - const { pageLayout } = parameters; - switch (pageLayout) { - case 'page': - return ( - // Your page layout is probably a little more complex than this ;) - <div className="page-layout"><Story /></div> - ); - case 'page-mobile': - return ( - <div className="page-mobile-layout"><Story /></div> - ); - case default: - // In the default case, don't apply a layout - return <Story />; - } - }, - ], -}; -``` diff --git a/docs/snippets/solid/decorator-parameterized-in-preview.ts.mdx b/docs/snippets/solid/decorator-parameterized-in-preview.ts.mdx deleted file mode 100644 index 763ad428596d..000000000000 --- a/docs/snippets/solid/decorator-parameterized-in-preview.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```tsx -// .storybook/preview.tsx -import { Preview } from 'storybook-solidjs'; - -const preview: Preview = { - decorators: [ - // 👇 Defining the decorator in the preview file applies it to all stories - (Story, { parameters }) => { - // 👇 Make it configurable by reading from parameters - const { pageLayout } = parameters; - switch (pageLayout) { - case 'page': - return ( - // Your page layout is probably a little more complex than this ;) - <div className="page-layout"><Story /></div> - ); - case 'page-mobile': - return ( - <div className="page-mobile-layout"><Story /></div> - ); - case default: - // In the default case, don't apply a layout - return <Story />; - } - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/solid/document-screen-fetch.js.mdx b/docs/snippets/solid/document-screen-fetch.js.mdx deleted file mode 100644 index a7f5e5b0f3b9..000000000000 --- a/docs/snippets/solid/document-screen-fetch.js.mdx +++ /dev/null @@ -1,57 +0,0 @@ -```js -// YourPage.js|jsx|mjs|ts|tsx - -import { createSignal, Match, Switch } 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(); - - 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={data().user}> - <DocumentHeader document={data().document} /> - <DocumentList documents={data().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 deleted file mode 100644 index c75dbc4b0a0c..000000000000 --- a/docs/snippets/solid/document-screen-with-graphql.js.mdx +++ /dev/null @@ -1,62 +0,0 @@ -```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 deleted file mode 100644 index 7b7f7f234c3d..000000000000 --- a/docs/snippets/solid/document-screen-with-graphql.ts.mdx +++ /dev/null @@ -1,85 +0,0 @@ -```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/histogram-story.js.mdx b/docs/snippets/solid/histogram-story.js.mdx deleted file mode 100644 index a84781630fc6..000000000000 --- a/docs/snippets/solid/histogram-story.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Histogram.stories.js|jsx - -import { Histogram } from './Histogram'; - -export default { - 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 deleted file mode 100644 index ea8ff6bcf0fb..000000000000 --- a/docs/snippets/solid/histogram-story.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Histogram.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Histogram } from './Histogram'; - -const meta = { - 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 deleted file mode 100644 index a07c6e473d1d..000000000000 --- a/docs/snippets/solid/histogram-story.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Histogram.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Histogram } from './Histogram'; - -const meta: Meta<typeof 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', - }, -}; -``` diff --git a/docs/snippets/solid/list-story-expanded.js.mdx b/docs/snippets/solid/list-story-expanded.js.mdx deleted file mode 100644 index 58a768ce8a99..000000000000 --- a/docs/snippets/solid/list-story-expanded.js.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```js -// List.stories.js|jsx - -import { List } from './List'; -import { ListItem } from './ListItem'; - -export default { - 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/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 deleted file mode 100644 index 8977481007e7..000000000000 --- a/docs/snippets/solid/list-story-expanded.ts-4-9.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -const meta = { - 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/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 deleted file mode 100644 index cf6032487725..000000000000 --- a/docs/snippets/solid/list-story-expanded.ts.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```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> = { - 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/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 deleted file mode 100644 index e893f403e914..000000000000 --- a/docs/snippets/solid/list-story-reuse-data.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```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 { - component: List, -}; - -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 deleted file mode 100644 index 78e8b4d089fb..000000000000 --- a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { List } from './List'; -import { ListItem } from './ListItem'; - -//👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -const meta = { - component: List, -} satisfies Meta<typeof List>; - -export default meta; -type Story = StoryObj<typeof meta>; - -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 deleted file mode 100644 index cccd2b421cc8..000000000000 --- a/docs/snippets/solid/list-story-reuse-data.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```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 { Selected, Unselected } from './ListItem.stories'; - -const meta: Meta<typeof List> = { - component: List, -}; - -export default meta; -type Story = StoryObj<typeof List>; - -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 deleted file mode 100644 index b6443261d408..000000000000 --- a/docs/snippets/solid/list-story-starter.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// List.stories.js|jsx - -import { List } from './List'; - -export default { - 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 deleted file mode 100644 index 9ed712dced70..000000000000 --- a/docs/snippets/solid/list-story-starter.ts-4-9.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { List } from './List'; - -const meta = { - 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 deleted file mode 100644 index 3f9c89b749d4..000000000000 --- a/docs/snippets/solid/list-story-starter.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```tsx -// List.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { List } from './List'; - -const meta: Meta<typeof 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/list-story-template.js.mdx b/docs/snippets/solid/list-story-template.js.mdx deleted file mode 100644 index 36c09aa21c0c..000000000000 --- a/docs/snippets/solid/list-story-template.js.mdx +++ /dev/null @@ -1,49 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index 4f548b8e63c6..000000000000 --- a/docs/snippets/solid/list-story-template.ts-4-9.mdx +++ /dev/null @@ -1,50 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index a905c2951509..000000000000 --- a/docs/snippets/solid/list-story-template.ts.mdx +++ /dev/null @@ -1,50 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index e9df70ee1467..000000000000 --- a/docs/snippets/solid/list-story-unchecked.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index c88e42c9dbed..000000000000 --- a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index 30cc4d698609..000000000000 --- a/docs/snippets/solid/list-story-unchecked.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index 3223e8596977..000000000000 --- a/docs/snippets/solid/list-story-with-subcomponents.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index ea41b2ba3654..000000000000 --- a/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index a3df460522f4..000000000000 --- a/docs/snippets/solid/list-story-with-subcomponents.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index 9f523a3a8130..000000000000 --- a/docs/snippets/solid/list-story-with-unchecked-children.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index 8618bd875991..000000000000 --- a/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```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/configure/#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 deleted file mode 100644 index 5763185a2eba..000000000000 --- a/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```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/configure/#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/snippets/solid/loader-story.js.mdx b/docs/snippets/solid/loader-story.js.mdx deleted file mode 100644 index b14d045f00c2..000000000000 --- a/docs/snippets/solid/loader-story.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// TodoItem.stories.js|jsx - -import { TodoItem } from './TodoItem'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export default { - 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 deleted file mode 100644 index 53eb6541713f..000000000000 --- a/docs/snippets/solid/loader-story.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { TodoItem } from './TodoItem'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -const meta = { - 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 deleted file mode 100644 index 74ae488c7756..000000000000 --- a/docs/snippets/solid/loader-story.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { TodoItem } from './TodoItem'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -const meta: Meta<typeof TodoItem> = { - 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/snippets/solid/login-form-with-play-function.js.mdx b/docs/snippets/solid/login-form-with-play-function.js.mdx deleted file mode 100644 index 3768779d10a3..000000000000 --- a/docs/snippets/solid/login-form-with-play-function.js.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```js -// LoginForm.stories.js|jsx - -import { userEvent, within, expect } from '@storybook/test'; - -import { LoginForm } from './LoginForm'; - -export default { - component: LoginForm, -}; - -export const EmptyForm = {}; - -/* - * See https://storybook.js.org/docs/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/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 deleted file mode 100644 index 83e2944b0d4e..000000000000 --- a/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx +++ /dev/null @@ -1,45 +0,0 @@ -```tsx -// LoginForm.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { within, userEvent } from '@storybook/testing-library'; - -import { expect } from '@storybook/test'; - -import { LoginForm } from './LoginForm'; - -const meta = { - component: LoginForm, -} satisfies Meta<typeof LoginForm>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const EmptyForm: Story = {}; - -/* - * See https://storybook.js.org/docs/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/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 deleted file mode 100644 index f5ca86f3bdb4..000000000000 --- a/docs/snippets/solid/login-form-with-play-function.ts.mdx +++ /dev/null @@ -1,45 +0,0 @@ -```tsx -// LoginForm.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { within, userEvent } from '@storybook/testing-library'; - -import { expect } from '@storybook/test'; - -import { LoginForm } from './LoginForm'; - -const meta: Meta<typeof LoginForm> = { - component: LoginForm, -}; - -export default meta; -type Story = StoryObj<typeof LoginForm>; - -export const EmptyForm: Story = {}; - -/* - * See https://storybook.js.org/docs/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/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/mock-context-container-global.js.mdx b/docs/snippets/solid/mock-context-container-global.js.mdx deleted file mode 100644 index dc9e0d365305..000000000000 --- a/docs/snippets/solid/mock-context-container-global.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```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-global.ts.mdx b/docs/snippets/solid/mock-context-container-global.ts.mdx deleted file mode 100644 index 95f27b1e7c25..000000000000 --- a/docs/snippets/solid/mock-context-container-global.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```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/snippets/solid/mock-context-container-provider.js.mdx b/docs/snippets/solid/mock-context-container-provider.js.mdx deleted file mode 100644 index 40a606ef477c..000000000000 --- a/docs/snippets/solid/mock-context-container-provider.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```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 deleted file mode 100644 index 2bfc54cb84fe..000000000000 --- a/docs/snippets/solid/mock-context-container.js.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```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 { - 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 deleted file mode 100644 index 983c4195e4e2..000000000000 --- a/docs/snippets/solid/mock-context-create.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```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 deleted file mode 100644 index 98d491b6db72..000000000000 --- a/docs/snippets/solid/mock-context-in-use.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```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/my-component-story-basic-and-props.js.mdx b/docs/snippets/solid/my-component-story-basic-and-props.js.mdx deleted file mode 100644 index c1e3bc64d80f..000000000000 --- a/docs/snippets/solid/my-component-story-basic-and-props.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// MyComponent.story.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - 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 deleted file mode 100644 index 61d3a9876214..000000000000 --- a/docs/snippets/solid/my-component-story-basic-and-props.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.story.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta = { - 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 deleted file mode 100644 index 51f3f38c0593..000000000000 --- a/docs/snippets/solid/my-component-story-basic-and-props.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.story.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof 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-configure-viewports.js.mdx b/docs/snippets/solid/my-component-story-configure-viewports.js.mdx deleted file mode 100644 index 3034db56937c..000000000000 --- a/docs/snippets/solid/my-component-story-configure-viewports.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import { MyComponent } from './MyComponent'; - -export default { - 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 deleted file mode 100644 index abcc10710baa..000000000000 --- a/docs/snippets/solid/my-component-story-configure-viewports.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```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 = { - 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 deleted file mode 100644 index 5a0ca3a80ad1..000000000000 --- a/docs/snippets/solid/my-component-story-configure-viewports.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```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> = { - 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.js.mdx b/docs/snippets/solid/my-component-story-use-globaltype.js.mdx deleted file mode 100644 index c8d0f82b2c54..000000000000 --- a/docs/snippets/solid/my-component-story-use-globaltype.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -export default { - component: MyComponent, -}; - -const getCaptionForLocale = (locale) => { - switch (locale) { - case 'es': - return 'Hola!'; - case 'fr': - return 'Bonjour!'; - case 'kr': - return '안녕하세요!'; - case 'zh': - return '你好!'; - default: - return 'Hello!'; - } -}; - -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 deleted file mode 100644 index 2e41b4632f2b..000000000000 --- a/docs/snippets/solid/my-component-story-use-globaltype.ts-4-9.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta = { - 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!'; - } -}; - -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 deleted file mode 100644 index 0eacbdd675b0..000000000000 --- a/docs/snippets/solid/my-component-story-use-globaltype.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta<typeof 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!'; - } -}; - -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return <p>{caption}</p>; - }, -}; -``` diff --git a/docs/snippets/solid/my-component-story-with-nonstory.js.mdx b/docs/snippets/solid/my-component-story-with-nonstory.js.mdx deleted file mode 100644 index 51bbcdc7bc1a..000000000000 --- a/docs/snippets/solid/my-component-story-with-nonstory.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js|jsx - -import { MyComponent } from './MyComponent'; - -import someData from './data.json'; - -export default { - 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 deleted file mode 100644 index abadda6da7b3..000000000000 --- a/docs/snippets/solid/my-component-story-with-nonstory.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```tsx -// MyComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -import someData from './data.json'; - -const meta = { - component: MyComponent, - includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories - excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains 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 deleted file mode 100644 index 91cffadf8ed2..000000000000 --- a/docs/snippets/solid/my-component-story-with-nonstory.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```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> = { - 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, - }, -}; -``` diff --git a/docs/snippets/solid/page-story-slots.js.mdx b/docs/snippets/solid/page-story-slots.js.mdx deleted file mode 100644 index 18b06c59a907..000000000000 --- a/docs/snippets/solid/page-story-slots.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// Page.stories.js|jsx - -import { Page } from './Page'; - -export default { - component: Page, - render: ({ footer, ...args }) => ( - <Page {...args}> - <footer>{footer}</footer> - </Page> - ), -}; - -export const CustomFooter = { - 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 deleted file mode 100644 index 83431768d59e..000000000000 --- a/docs/snippets/solid/page-story-slots.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -// Page.stories.ts|tsx - -import type { ComponentProps } from 'solid-js'; -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Page } from './Page'; - -type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string }; - -const meta = { - component: Page, - render: ({ footer, ...args }) => ( - <Page {...args}> - <footer>{footer}</footer> - </Page> - ), -} satisfies Meta<PagePropsAndCustomArgs>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const CustomFooter = { - args: { - footer: 'Built with Storybook', - }, -} satisfies Story; -``` diff --git a/docs/snippets/solid/page-story-slots.ts.mdx b/docs/snippets/solid/page-story-slots.ts.mdx deleted file mode 100644 index c372bf6e38d7..000000000000 --- a/docs/snippets/solid/page-story-slots.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -// Page.stories.ts|tsx - -import type { ComponentProps } from 'solid-js'; -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { Page } from './Page'; - -type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string }; - -const meta: Meta<PagePropsAndCustomArgs> = { - component: Page, - render: ({ footer, ...args }) => ( - <Page {...args}> - <footer>{footer}</footer> - </Page> - ), -}; -export default meta; - -type Story = StoryObj<PagePropsAndCustomArgs>; - -export const CustomFooter: Story = { - args: { - footer: 'Built with Storybook', - }, -}; -``` diff --git a/docs/snippets/solid/page-story.js.mdx b/docs/snippets/solid/page-story.js.mdx deleted file mode 100644 index 49c2f8297eb9..000000000000 --- a/docs/snippets/solid/page-story.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Page.stories.js|jsx - -import { Page } from './Page'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -export default { - 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 deleted file mode 100644 index f1fb4ae8a3f8..000000000000 --- a/docs/snippets/solid/page-story.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```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 = { - 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 deleted file mode 100644 index c1ae6ab7c75e..000000000000 --- a/docs/snippets/solid/page-story.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```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> = { - component: Page, -}; - -export default meta; -type Story = StoryObj<typeof Page>; - -export const LoggedIn: Story = { - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/solid/simple-page-implementation.js.mdx b/docs/snippets/solid/simple-page-implementation.js.mdx deleted file mode 100644 index d156c9ff27d0..000000000000 --- a/docs/snippets/solid/simple-page-implementation.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```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 deleted file mode 100644 index 913064973839..000000000000 --- a/docs/snippets/solid/simple-page-implementation.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```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/snippets/solid/storybook-preview-global-decorator.js.mdx b/docs/snippets/solid/storybook-preview-global-decorator.js.mdx deleted file mode 100644 index 8ecf094c320c..000000000000 --- a/docs/snippets/solid/storybook-preview-global-decorator.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```jsx -// .storybook/preview.js - -export default { - 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 deleted file mode 100644 index 9b34c7ffc16d..000000000000 --- a/docs/snippets/solid/storybook-preview-global-decorator.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// .storybook/preview.tsx - -import { Preview } from 'storybook-solidjs'; - -const preview: Preview = { - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - <Story /> - </div> - ), - ], -}; - -export default preview; -``` 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 deleted file mode 100644 index 480954f7079f..000000000000 --- a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.js.mdx +++ /dev/null @@ -1,19 +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/storybook-preview-with-styled-components-decorator.ts.mdx b/docs/snippets/solid/storybook-preview-with-styled-components-decorator.ts.mdx deleted file mode 100644 index 292fb737afcb..000000000000 --- a/docs/snippets/solid/storybook-preview-with-styled-components-decorator.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```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; -``` diff --git a/docs/snippets/solid/tags-combo-example.js.mdx b/docs/snippets/solid/tags-combo-example.js.mdx deleted file mode 100644 index 941f2ae24d6c..000000000000 --- a/docs/snippets/solid/tags-combo-example.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```jsx -// Button.stories.jsx -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Variant1 = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2 = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ( - <> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </> - ), -}; -``` diff --git a/docs/snippets/solid/tags-combo-example.ts-4-9.mdx b/docs/snippets/solid/tags-combo-example.ts-4-9.mdx deleted file mode 100644 index 8af57f5709b8..000000000000 --- a/docs/snippets/solid/tags-combo-example.ts-4-9.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.stories.tsx -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 Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ( - <> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </> - ), -}; -``` diff --git a/docs/snippets/solid/tags-combo-example.ts.mdx b/docs/snippets/solid/tags-combo-example.ts.mdx deleted file mode 100644 index f47a70924b55..000000000000 --- a/docs/snippets/solid/tags-combo-example.ts.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```tsx -// Button.stories.tsx -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 Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ( - <> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </> - ), -}; -``` diff --git a/docs/snippets/solid/your-component-with-decorator.js.mdx b/docs/snippets/solid/your-component-with-decorator.js.mdx deleted file mode 100644 index e75528448ad2..000000000000 --- a/docs/snippets/solid/your-component-with-decorator.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// YourComponent.stories.js|jsx - -import { YourComponent } from './YourComponent'; - -export default { - 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 deleted file mode 100644 index 333a73e2f48c..000000000000 --- a/docs/snippets/solid/your-component-with-decorator.story-function-js.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```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 { - component: YourComponent, - decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>], -}; -``` 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 deleted file mode 100644 index bc3c29eb2f07..000000000000 --- a/docs/snippets/solid/your-component-with-decorator.story-function-ts.ts.mdx +++ /dev/null @@ -1,16 +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: Meta<typeof 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 deleted file mode 100644 index 233731f5c9c8..000000000000 --- a/docs/snippets/solid/your-component-with-decorator.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// YourComponent.stories.ts|tsx - -import type { Meta } from 'storybook-solidjs'; - -import { YourComponent } from './YourComponent'; - -const meta = { - 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 deleted file mode 100644 index dc07ea7f9560..000000000000 --- a/docs/snippets/solid/your-component-with-decorator.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// YourComponent.stories.ts|tsx - -import type { Meta } from 'storybook-solidjs'; - -import { YourComponent } from './YourComponent'; - -const meta: Meta<typeof YourComponent> = { - component: YourComponent, - decorators: [ - (Story) => ( - <div style={{ margin: '3em' }}> - <Story /> - </div> - ), - ], -}; - -export default meta; -``` diff --git a/docs/snippets/solid/your-component.js.mdx b/docs/snippets/solid/your-component.js.mdx deleted file mode 100644 index 3fc6d4fd7682..000000000000 --- a/docs/snippets/solid/your-component.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// YourComponent.stories.js|jsx - -import { YourComponent } from './YourComponent'; - -//👇 This default export determines where your story goes in the story list -export default { - 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 deleted file mode 100644 index d5fc4b2febe1..000000000000 --- a/docs/snippets/solid/your-component.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```tsx -// YourComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { YourComponent } from './YourComponent'; - -//👇 This default export determines where your story goes in the story list -const meta = { - 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 deleted file mode 100644 index a8b836aab991..000000000000 --- a/docs/snippets/solid/your-component.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```tsx -// YourComponent.stories.ts|tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { YourComponent } from './YourComponent'; - -//👇 This default export determines where your story goes in the story list -const meta: Meta<typeof 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 - }, -}; -``` diff --git a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx deleted file mode 100644 index 422ff81724d4..000000000000 --- a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```html -{/* MockApolloWrapperClient.svelte */} - -<script> - import { ApolloClient, InMemoryCache } from '@apollo/client'; - - import { setClient } from 'svelte-apollo'; - - const mockedClient = new ApolloClient({ - uri: 'https://your-graphql-endpoint', - cache: new InMemoryCache(), - defaultOptions: { - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - }, - }); - setClient(mockedClient); -</script> - -<slot /> -``` diff --git a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx deleted file mode 100644 index d424edcdae0d..000000000000 --- a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```html -{/* MockApolloWrapperClient.svelte */} - -<script lang="ts"> - import { ApolloClient, InMemoryCache } from '@apollo/client'; - - import { setClient } from 'svelte-apollo'; - - const mockedClient = new ApolloClient({ - uri: 'https://your-graphql-endpoint', - cache: new InMemoryCache(), - defaultOptions: { - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - }, - }); - setClient(mockedClient); -</script> - -<slot /> -``` diff --git a/docs/snippets/svelte/button-component-with-proptypes.js.mdx b/docs/snippets/svelte/button-component-with-proptypes.js.mdx deleted file mode 100644 index 62e2f815bb9f..000000000000 --- a/docs/snippets/svelte/button-component-with-proptypes.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```html -// Button.svelte - -<script> - /** - * A Button Component - * @component - */ - - /** - * Disable the button - * @required - */ - export let disabled = false; - - /** - * Button content - * @required - */ - export let content = ''; -<script/> - -<button type="button" {disabled}>{content}</button> -``` diff --git a/docs/snippets/svelte/button-group-story.js.mdx b/docs/snippets/svelte/button-group-story.js.mdx deleted file mode 100644 index 9304e1bfda12..000000000000 --- a/docs/snippets/svelte/button-group-story.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// ButtonGroup.stories.js - -import ButtonGroup from '../ButtonGroup.svelte'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -export default { - component: ButtonGroup, -}; - -export const Pair = { - args: { - buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], - orientation: 'horizontal', - }, -}; -``` diff --git a/docs/snippets/svelte/button-group-story.ts-4-9.mdx b/docs/snippets/svelte/button-group-story.ts-4-9.mdx deleted file mode 100644 index aab891afac53..000000000000 --- a/docs/snippets/svelte/button-group-story.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// ButtonGroup.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import ButtonGroup from './ButtonGroup.svelte'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -const meta = { - 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/svelte/button-group-story.ts.mdx b/docs/snippets/svelte/button-group-story.ts.mdx deleted file mode 100644 index d0d9a8989620..000000000000 --- a/docs/snippets/svelte/button-group-story.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// ButtonGroup.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import ButtonGroup from './ButtonGroup.svelte'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -const meta: Meta<typeof ButtonGroup> = { - component: 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/svelte/button-implementation.js.mdx b/docs/snippets/svelte/button-implementation.js.mdx deleted file mode 100644 index 7ec9c5a3d6f0..000000000000 --- a/docs/snippets/svelte/button-implementation.js.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```html -{/* Button.svelte */} - -<script> - import { createEventDispatcher } from 'svelte'; - /** - * Is this the principal call to action on the page? - */ - export let primary = false; - - /** - * What background color to use - */ - export let backgroundColor = undefined; - /** - * How large should the button be? - */ - export let size = 'medium'; - /** - * Button contents - */ - export let label = ''; - - $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - - const dispatch = createEventDispatcher(); - - /** - * Optional click handler - */ - export let onClick = (event) => { - dispatch('click', event); - }; -</script> - -<button type="button" {style} on:click="{onClick}">{label}</button> -``` diff --git a/docs/snippets/svelte/button-story-click-handler-args.js.mdx b/docs/snippets/svelte/button-story-click-handler-args.js.mdx deleted file mode 100644 index 240d178f480c..000000000000 --- a/docs/snippets/svelte/button-story-click-handler-args.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -import { action } from '@storybook/addon-actions'; - -export default { - component: Button, -}; - -export const Text = { - render: ({ label, click }) => ({ - Component: Button, - props: { - label, - }, - on: { - click, - }, - }), - args: { - label: 'Hello', - click: action('clicked'), - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-click-handler-args.ts-4-9.mdx b/docs/snippets/svelte/button-story-click-handler-args.ts-4-9.mdx deleted file mode 100644 index ff23875fed16..000000000000 --- a/docs/snippets/svelte/button-story-click-handler-args.ts-4-9.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; -import { action } from '@storybook/addon-actions'; - -import Button from './Button.svelte'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - render: ({ label, click }) => ({ - Component: Button, - props: { - label, - }, - on: { - click, - }, - }), - args: { - label: 'Hello', - click: action('clicked'), - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-click-handler-args.ts.mdx b/docs/snippets/svelte/button-story-click-handler-args.ts.mdx deleted file mode 100644 index 0601a77f56e7..000000000000 --- a/docs/snippets/svelte/button-story-click-handler-args.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; -import { action } from '@storybook/addon-actions'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Text: Story = { - render: ({ label, click }) => ({ - Component: Button, - props: { - label, - }, - on: { - click, - }, - }), - args: { - label: 'Hello', - click: action('clicked'), - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx deleted file mode 100644 index 8f6a170584d3..000000000000 --- a/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - component: Button, -}; - -export const Text = { - args: {...}, -}; -``` diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx deleted file mode 100644 index a51528d3dedc..000000000000 --- a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - import Button from './Button.svelte'; -</script> - -{/* - See https://storybook.js.org/docs/essentials/actions#action-argtype-annotation - to learn how to set up argTypes for actions -*/} - -<Meta title="Button" component={Button} argTypes={{ onClick: { action: "onClick" }, }} /> - -<template let:args> - <button {...args} on:click="{args.onClick}" /> -</template> - -<Story name="Text" args={{ label: 'Hello' }}/> -``` diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.ts-4-9.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.ts-4-9.mdx deleted file mode 100644 index 13eeb3c3b7c6..000000000000 --- a/docs/snippets/svelte/button-story-click-handler-simplificated.ts-4-9.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Text: Story = { - args: {...}, -}; -``` diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx deleted file mode 100644 index 860f8e586456..000000000000 --- a/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Text: Story = { - args: {...}, -}; -``` diff --git a/docs/snippets/svelte/button-story-click-handler.js.mdx b/docs/snippets/svelte/button-story-click-handler.js.mdx deleted file mode 100644 index 06f272af6ca6..000000000000 --- a/docs/snippets/svelte/button-story-click-handler.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// Button.stories.js - -import { action } from '@storybook/addon-actions'; - -import Button from './Button.svelte'; - -export default { - component: Button, -}; - -export const Text = { - render: () => ({ - Component: Button, - props: { - label: 'Hello', - }, - on: { - click: action('clicked'), - }, - }), -}; -``` diff --git a/docs/snippets/svelte/button-story-click-handler.native-format.mdx b/docs/snippets/svelte/button-story-click-handler.native-format.mdx deleted file mode 100644 index 98c9bf2ca769..000000000000 --- a/docs/snippets/svelte/button-story-click-handler.native-format.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta, Story } from '@storybook/addon-svelte-csf'; - - import { action } from '@storybook/addon-actions'; - - import Button from './Button.svelte'; -</script> - -<meta title="Button" component="{Button}" /> - -<Story name="Text"> <Button text="Hello" on:click={action('clicked')}/> </Story> -``` diff --git a/docs/snippets/svelte/button-story-click-handler.ts-4-9.mdx b/docs/snippets/svelte/button-story-click-handler.ts-4-9.mdx deleted file mode 100644 index 16db58d0a779..000000000000 --- a/docs/snippets/svelte/button-story-click-handler.ts-4-9.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; -import { action } from '@storybook/addon-actions'; - -import Button from './Button.svelte'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - render: (args) => ({ - Component: Button, - props: args, - }), - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-click-handler.ts.mdx b/docs/snippets/svelte/button-story-click-handler.ts.mdx deleted file mode 100644 index f5e8c397eba5..000000000000 --- a/docs/snippets/svelte/button-story-click-handler.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; -import { action } from '@storybook/addon-actions'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Text: Story = { - render: () => ({ - Component: Button, - props: { - label: 'Hello', - }, - on: { - click: action('clicked'), - }, - }), -}; -``` diff --git a/docs/snippets/svelte/button-story-component-args-primary.js.mdx b/docs/snippets/svelte/button-story-component-args-primary.js.mdx deleted file mode 100644 index 94e036a09ee3..000000000000 --- a/docs/snippets/svelte/button-story-component-args-primary.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - component: Button, - //👇 Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - args: { - //👇 Now all Button stories will be primary. - primary: true, - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-component-args-primary.native-format.mdx b/docs/snippets/svelte/button-story-component-args-primary.native-format.mdx deleted file mode 100644 index e540ccc629ea..000000000000 --- a/docs/snippets/svelte/button-story-component-args-primary.native-format.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta } from '@storybook/addon-svelte-csf'; - - import Button from './Button.svelte'; -</script> - -<Meta title="Button" component={Button} args={{ primary: true, }} /> -``` diff --git a/docs/snippets/svelte/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/svelte/button-story-component-args-primary.ts-4-9.mdx deleted file mode 100644 index 7c83e880ac7f..000000000000 --- a/docs/snippets/svelte/button-story-component-args-primary.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - 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; -``` diff --git a/docs/snippets/svelte/button-story-component-args-primary.ts.mdx b/docs/snippets/svelte/button-story-component-args-primary.ts.mdx deleted file mode 100644 index 2b5e54a6ea2d..000000000000 --- a/docs/snippets/svelte/button-story-component-args-primary.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, - //👇 Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - args: { - //👇 Now all Button stories will be primary. - primary: true, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/svelte/button-story-component-decorator.js.mdx b/docs/snippets/svelte/button-story-component-decorator.js.mdx deleted file mode 100644 index d777e387143f..000000000000 --- a/docs/snippets/svelte/button-story-component-decorator.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; -import MarginDecorator from './MarginDecorator.svelte'; - -export default { - component: Button, - decorators: [() => MarginDecorator], -}; -``` diff --git a/docs/snippets/svelte/button-story-component-decorator.native-format.mdx b/docs/snippets/svelte/button-story-component-decorator.native-format.mdx deleted file mode 100644 index 7e324c3381ab..000000000000 --- a/docs/snippets/svelte/button-story-component-decorator.native-format.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta, Template } from '@storybook/addon-svelte-csf'; - - import MarginDecorator from './MarginDecorator.svelte'; - - import Button from './Button.svelte'; -</script> - -<meta title="Button" component="{Button}" /> - -<template let:args> - <MarginDecorator> - {/*👇 Your component here */} - </MarginDecorator> -</template> -``` diff --git a/docs/snippets/svelte/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/svelte/button-story-component-decorator.ts-4-9.mdx deleted file mode 100644 index badb749d2732..000000000000 --- a/docs/snippets/svelte/button-story-component-decorator.ts-4-9.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/svelte'; - -import Button from './Button.svelte'; -import MarginDecorator from './MarginDecorator.svelte'; - -const meta = { - component: Button, - decorators: [() => MarginDecorator], -}; - -export default meta; -``` diff --git a/docs/snippets/svelte/button-story-component-decorator.ts.mdx b/docs/snippets/svelte/button-story-component-decorator.ts.mdx deleted file mode 100644 index 67c72b7cc899..000000000000 --- a/docs/snippets/svelte/button-story-component-decorator.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/svelte'; - -import Button from './Button.svelte'; -import MarginDecorator from './MarginDecorator.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, - decorators: [() => MarginDecorator], -}; - -export default meta; -``` diff --git a/docs/snippets/svelte/button-story-decorator.js.mdx b/docs/snippets/svelte/button-story-decorator.js.mdx deleted file mode 100644 index 94378724bb4d..000000000000 --- a/docs/snippets/svelte/button-story-decorator.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; -import MarginDecorator from './MarginDecorator.svelte'; - -export default { - component: Button, -}; - -export const Primary = { - decorators: [() => MarginDecorator], -}; -``` diff --git a/docs/snippets/svelte/button-story-decorator.ts-4-9.mdx b/docs/snippets/svelte/button-story-decorator.ts-4-9.mdx deleted file mode 100644 index 94567b8b9ec1..000000000000 --- a/docs/snippets/svelte/button-story-decorator.ts-4-9.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.stories.ts - -import { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; -import MarginDecorator from './MarginDecorator.svelte'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - decorators: [() => MarginDecorator], -}; -``` diff --git a/docs/snippets/svelte/button-story-decorator.ts.mdx b/docs/snippets/svelte/button-story-decorator.ts.mdx deleted file mode 100644 index 22ba3a40c092..000000000000 --- a/docs/snippets/svelte/button-story-decorator.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.stories.ts - -import { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; -import MarginDecorator from './MarginDecorator.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - decorators: [() => MarginDecorator], -}; -``` diff --git a/docs/snippets/svelte/button-story-default-docs-code.js.mdx b/docs/snippets/svelte/button-story-default-docs-code.js.mdx deleted file mode 100644 index c8f9d6894eb2..000000000000 --- a/docs/snippets/svelte/button-story-default-docs-code.js.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - component: Button, - //👇 Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -//👇 Some function to demonstrate the behavior -const someFunction = (someValue) => { - return `i am a ${someValue}`; -}; - -export const ExampleStory = (args) => { - //👇 Destructure the label from the args object - const { label } = args; - - //👇 Assigns the function result to a variable and pass it as a prop into the component - const functionResult = someFunction(label); - return { - Component: Button, - props: { - ...args, - label: functionResult, - }, - }; -}; -ExampleStory.args = { - primary: true, - size: 'small', - label: 'button', -}; -``` diff --git a/docs/snippets/svelte/button-story-default-docs-code.native-format.mdx b/docs/snippets/svelte/button-story-default-docs-code.native-format.mdx deleted file mode 100644 index 43ca17a94472..000000000000 --- a/docs/snippets/svelte/button-story-default-docs-code.native-format.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import Button from './Button.svelte'; - - //👇 Some function to demonstrate the behavior - function someFunction(someValue) { - return `i am a ${someValue}`; - } -</script> - -{/*👇 Creates specific argTypes */} -<Meta title="Button" component={Button} argTypes={{ backgroundColor: { control: 'color' }, }} /> - -{/* 👇 Assigns the function result to a variable and pass it as a prop into the component */} -<template let:args> - <button {...args} label="{someFunction(args.label)}" /> -</template> - -<Story name="ExampleStory" args={{ primary: true, size:'small', label: 'Button', }} /> -``` diff --git a/docs/snippets/svelte/button-story-default-export-with-component.js.mdx b/docs/snippets/svelte/button-story-default-export-with-component.js.mdx deleted file mode 100644 index 89a10479f2ec..000000000000 --- a/docs/snippets/svelte/button-story-default-export-with-component.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - component: Button, -}; -``` diff --git a/docs/snippets/svelte/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/svelte/button-story-default-export-with-component.ts-4-9.mdx deleted file mode 100644 index 62d8e08df1b7..000000000000 --- a/docs/snippets/svelte/button-story-default-export-with-component.ts-4-9.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -``` diff --git a/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx b/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx deleted file mode 100644 index d0bf35d7af69..000000000000 --- a/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -``` diff --git a/docs/snippets/svelte/button-story-rename-story.js.mdx b/docs/snippets/svelte/button-story-rename-story.js.mdx deleted file mode 100644 index a591c1deba4a..000000000000 --- a/docs/snippets/svelte/button-story-rename-story.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js -import Button from './Button.svelte'; - -export default { - component: Button, -}; - -export const Primary = ({ - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-rename-story.ts-4-9.mdx b/docs/snippets/svelte/button-story-rename-story.ts-4-9.mdx deleted file mode 100644 index acfd8db4868e..000000000000 --- a/docs/snippets/svelte/button-story-rename-story.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = ({ - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-rename-story.ts.mdx b/docs/snippets/svelte/button-story-rename-story.ts.mdx deleted file mode 100644 index d4f1afa0a09c..000000000000 --- a/docs/snippets/svelte/button-story-rename-story.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = ({ - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-using-args.js.mdx b/docs/snippets/svelte/button-story-using-args.js.mdx deleted file mode 100644 index 8be69a92c46f..000000000000 --- a/docs/snippets/svelte/button-story-using-args.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - 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/svelte/button-story-using-args.native-format.mdx b/docs/snippets/svelte/button-story-using-args.native-format.mdx deleted file mode 100644 index 40a788c5b5d0..000000000000 --- a/docs/snippets/svelte/button-story-using-args.native-format.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import Button from './Button.svelte'; -</script> - -<Meta title="Button" component={Button} argTypes={{ label: { control: 'text' }, primary: { control: -'boolean' }, }} /> - -{/* 👇 We create a “template” of how args map to rendering */} -<template let:args> - <button {...args} /> -</template> - -{/* 👇 Each story then reuses that template */} -<Story name="Primary" args={{ background: '#ff0', label: 'Button' }} /> <Story name="Secondary" -args={{ background: '#ff0', label: '😄👍😍💯' }} /> <Story name="Tertiary" args={{ background: -'#ff0', label: '📚📕📈🤓' }} /> -``` diff --git a/docs/snippets/svelte/button-story-using-args.ts-4-9.mdx b/docs/snippets/svelte/button-story-using-args.ts-4-9.mdx deleted file mode 100644 index e5d5dc11f72d..000000000000 --- a/docs/snippets/svelte/button-story-using-args.ts-4-9.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -//👇This default export determines where your story goes in the story list -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - args: { - 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/svelte/button-story-using-args.ts.mdx b/docs/snippets/svelte/button-story-using-args.ts.mdx deleted file mode 100644 index edcd9995e364..000000000000 --- a/docs/snippets/svelte/button-story-using-args.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -//👇This default export determines where your story goes in the story list -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - args: { - 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/svelte/button-story-with-addon-example.js.mdx b/docs/snippets/svelte/button-story-with-addon-example.js.mdx deleted file mode 100644 index e1fcca24d96d..000000000000 --- a/docs/snippets/svelte/button-story-with-addon-example.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - component: Button, - //👇 Creates specific parameters for the story - parameters: { - myAddon: { - data: 'this data is passed to the addon', - }, - }, -}; - -export const Basic = {}; -``` diff --git a/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx b/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx deleted file mode 100644 index 45f53c522d56..000000000000 --- a/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import Button from './Button.svelte'; -</script> - -<Meta title="Button" component={Button} parameters={{ myAddon: { data: 'this data is passed to the -addon', }, }} /> - -<template let:args> - <button {...args} /> -</template> -``` diff --git a/docs/snippets/svelte/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/svelte/button-story-with-addon-example.ts-4-9.mdx deleted file mode 100644 index 697c27744174..000000000000 --- a/docs/snippets/svelte/button-story-with-addon-example.ts-4-9.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: '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>; - -export const Basic: Story = {}; -``` diff --git a/docs/snippets/svelte/button-story-with-addon-example.ts.mdx b/docs/snippets/svelte/button-story-with-addon-example.ts.mdx deleted file mode 100644 index 53aa9fe085fd..000000000000 --- a/docs/snippets/svelte/button-story-with-addon-example.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#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 meta>; - -export const Basic: Story = {}; -``` diff --git a/docs/snippets/svelte/button-story-with-args.js.mdx b/docs/snippets/svelte/button-story-with-args.js.mdx deleted file mode 100644 index 58cf0732e6be..000000000000 --- a/docs/snippets/svelte/button-story-with-args.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - component: Button, -}; - -export const Primary = { - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-with-args.native-format.mdx b/docs/snippets/svelte/button-story-with-args.native-format.mdx deleted file mode 100644 index da5f4ba2f0fb..000000000000 --- a/docs/snippets/svelte/button-story-with-args.native-format.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import Button from './Button.svelte'; -</script> - -<Meta title="Button" component={Button} argTypes={{ label: { control: 'text' }, primary: { control: -'boolean' }, }} /> - -{/*👇 We create a “template” of how args map to rendering */} - -<template let:args> - <button {...args} /> -</template> - -{/* 👇 Each story then reuses that template */} - -<Story name='Primary' args={{ primary: true, label: 'Button' }} /> -``` diff --git a/docs/snippets/svelte/button-story-with-args.ts-4-9.mdx b/docs/snippets/svelte/button-story-with-args.ts-4-9.mdx deleted file mode 100644 index 059ecc250092..000000000000 --- a/docs/snippets/svelte/button-story-with-args.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - 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/svelte/button-story-with-args.ts.mdx b/docs/snippets/svelte/button-story-with-args.ts.mdx deleted file mode 100644 index 0c481911787c..000000000000 --- a/docs/snippets/svelte/button-story-with-args.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/svelte/button-story-with-emojis.js.mdx b/docs/snippets/svelte/button-story-with-emojis.js.mdx deleted file mode 100644 index c6b199b35f0d..000000000000 --- a/docs/snippets/svelte/button-story-with-emojis.js.mdx +++ /dev/null @@ -1,44 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: 'Button', - }, - }), -}; - -export const Secondary = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: '😄👍😍💯', - }, - }), -}; - -export const Tertiary = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: '📚📕📈🤓', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/button-story-with-emojis.native-format.mdx b/docs/snippets/svelte/button-story-with-emojis.native-format.mdx deleted file mode 100644 index 921d6a7b61ec..000000000000 --- a/docs/snippets/svelte/button-story-with-emojis.native-format.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```html -<script> - import { Meta, Story } from '@storybook/addon-svelte-csf'; - - import Button from './Button.svelte'; -</script> - -<meta title="Button" component="{Button}" /> - -<Story name="Primary"> - <button background="#ff0" label="Button" /> -</Story> - -<Story name="Secondary"> - <button background="#ff0" label="😄👍😍💯" /> -</Story> - -<Story name="Tertiary"> - <button background="#ff0" label="📚📕📈🤓" /> -</Story> -``` diff --git a/docs/snippets/svelte/button-story-with-emojis.ts-4-9.mdx b/docs/snippets/svelte/button-story-with-emojis.ts-4-9.mdx deleted file mode 100644 index 61c72830fa8f..000000000000 --- a/docs/snippets/svelte/button-story-with-emojis.ts-4-9.mdx +++ /dev/null @@ -1,49 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - 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/svelte/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: 'Button', - }, - }), -}; - -export const Secondary: Story = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: '😄👍😍💯', - }, - }), -}; - -export const Tertiary: Story = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: '📚📕📈🤓', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/button-story-with-emojis.ts.mdx b/docs/snippets/svelte/button-story-with-emojis.ts.mdx deleted file mode 100644 index 8bcc1bd7c66a..000000000000 --- a/docs/snippets/svelte/button-story-with-emojis.ts.mdx +++ /dev/null @@ -1,49 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: 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/svelte/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: 'Button', - }, - }), -}; - -export const Secondary: Story = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: '😄👍😍💯', - }, - }), -}; - -export const Tertiary: Story = { - render: () => ({ - Component: Button, - props: { - backgroundColor: '#ff0', - label: '📚📕📈🤓', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/button-story.js.mdx b/docs/snippets/svelte/button-story.js.mdx deleted file mode 100644 index 4f71c549c49c..000000000000 --- a/docs/snippets/svelte/button-story.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => ({ - Component: Button, - props: { - primary: true, - label: 'Button', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/button-story.native-format.mdx b/docs/snippets/svelte/button-story.native-format.mdx deleted file mode 100644 index ccd4ef879ba7..000000000000 --- a/docs/snippets/svelte/button-story.native-format.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```html -{/* Button.stories.svelte */} - -<script> - import { Meta, Story } from '@storybook/addon-svelte-csf'; - - import Button from './Button.svelte'; -</script> - -<meta title="Button" component="{Button}" /> - -<Story name="Primary"> - <button primary="true" label="Button" /> -</Story> -``` diff --git a/docs/snippets/svelte/button-story.ts-4-9.mdx b/docs/snippets/svelte/button-story.ts-4-9.mdx deleted file mode 100644 index c5a3be16a646..000000000000 --- a/docs/snippets/svelte/button-story.ts-4-9.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - Component: Button, - props: { - primary: true, - label: 'Button', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/button-story.ts.mdx b/docs/snippets/svelte/button-story.ts.mdx deleted file mode 100644 index 04f4b63d9c0c..000000000000 --- a/docs/snippets/svelte/button-story.ts.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - Component: Button, - props: { - primary: true, - label: 'Button', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/checkbox-story-csf.native-format.mdx b/docs/snippets/svelte/checkbox-story-csf.native-format.mdx deleted file mode 100644 index b60bb2c32b36..000000000000 --- a/docs/snippets/svelte/checkbox-story-csf.native-format.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```html -{/* Checkbox.stories.svelte */} - -<script> - import { Meta, Story } from '@storybook/addon-svelte-csf'; - - import Checkbox from './Checkbox.svelte'; -</script> - -<meta title="MDX/Checkbox" component="{Checkbox}" /> - -<Story name="allCheckboxes"> - <form> - <Checkbox id="Unchecked" label="Unchecked" /> - <Checkbox id="Checked" label="Checked" {checked} /> - <Checkbox appearance="secondary" id="second" label="Secondary" {checked} /> - </form> -</Story> -``` diff --git a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx deleted file mode 100644 index c596e646c196..000000000000 --- a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```js -// YourComponent.stories.js - -import YourComponent from './YourComponent.svelte'; - -export default { - component: YourComponent, - //👇 Creates specific argTypes - 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'], - }, - }, -}; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export const ExampleStory = { - render: ({ propertyA, propertyB }) => { - //👇 Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - return { - Component: YourComponent, - props: { - ...args, - someProperty: someFunctionResult, - }, - }; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx b/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx deleted file mode 100644 index f70c905e738b..000000000000 --- a/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```html -{/* YourComponent.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import YourComponent from './YourComponent.svelte'; - - //👇 Some function to demonstrate the behavior - function someFunction(valuePropertyA, valuePropertyB) { - // Makes some computations and returns something - } -</script> - -{/*👇 Creates specific argTypes and automatically infers them when 'options' is defined */} - -<Meta title="YourComponent" component={YourComponent} argTypes={{ propertyA: { options: ['Item One', -'Item Two', 'Item Three'], control: { type: 'select' }, }, propertyB: { options: ['Another Item -One', 'Another Item Two', 'Another Item Three'], }, }} /> - -<template let:args> - <YourComponent {...args} someProperty="{someFunction(args.propertyA," args.propertyB)} /> -</template> -``` diff --git a/docs/snippets/svelte/component-story-custom-args-complex.ts-4-9.mdx b/docs/snippets/svelte/component-story-custom-args-complex.ts-4-9.mdx deleted file mode 100644 index e32f516fb01b..000000000000 --- a/docs/snippets/svelte/component-story-custom-args-complex.ts-4-9.mdx +++ /dev/null @@ -1,46 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import YourComponent from './YourComponent.svelte'; - -const meta = { - component: YourComponent, - //👇 Creates specific argTypes - 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>; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export const ExampleStory: Story = { - render: ({ propertyA, propertyB }) => { - //👇 Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - return { - Component: YourComponent, - props: { - ...args, - someProperty: someFunctionResult, - }, - }; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx b/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx deleted file mode 100644 index eb0a45d9a1db..000000000000 --- a/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx +++ /dev/null @@ -1,46 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import YourComponent from './YourComponent.svelte'; - -const meta: Meta<typeof YourComponent> = { - component: YourComponent, - //👇 Creates specific argTypes - 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 meta>; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export const ExampleStory: Story = { - render: ({ propertyA, propertyB }) => { - //👇 Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - return { - Component: YourComponent, - props: { - ...args, - someProperty: someFunctionResult, - }, - }; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/svelte/component-story-figma-integration.js.mdx b/docs/snippets/svelte/component-story-figma-integration.js.mdx deleted file mode 100644 index f6781fe6fe61..000000000000 --- a/docs/snippets/svelte/component-story-figma-integration.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -export default { - component: MyComponent, -}; - -export const Example = { - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/Sample-File', - }, - }, -}; -``` diff --git a/docs/snippets/svelte/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/svelte/component-story-figma-integration.ts-4-9.mdx deleted file mode 100644 index bf5c42c553f4..000000000000 --- a/docs/snippets/svelte/component-story-figma-integration.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export -const meta = { - component: MyComponent, -} 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/svelte/component-story-figma-integration.ts.mdx b/docs/snippets/svelte/component-story-figma-integration.ts.mdx deleted file mode 100644 index 799438a116eb..000000000000 --- a/docs/snippets/svelte/component-story-figma-integration.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export -const meta: Meta<typeof MyComponent> = { - component: 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/svelte/component-story-static-asset-cdn.js.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx deleted file mode 100644 index 08dc3c0289a6..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -export default { - component: MyComponent, -}; - -export const WithAnImage = { - render: () => ({ - Component: MyComponent, - props: { - src: 'https://storybook.js.org/images/placeholders/350x150.png', - alt: 'My CDN placeholder', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx deleted file mode 100644 index 581839a9c443..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```html -{/* MyComponent.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import MyComponent from './MyComponent.svelte'; -</script> - -<meta title="img" component="{MyComponent}" /> - -<template> - <MyComponent - src="https://storybook.js.org/images/placeholders/350x150.png" - alt="My CDN placeholder" - /> -</template> - -<Story name="WithAnImage" /> -``` diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.ts-4-9.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.ts-4-9.mdx deleted file mode 100644 index 542c6ccefb33..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-cdn.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const WithAnImage: Story = { - render: () => ({ - Component: MyComponent, - props: { - src: 'https://storybook.js.org/images/placeholders/350x150.png', - alt: 'My CDN placeholder', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx deleted file mode 100644 index 3b21d2eed894..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const WithAnImage: Story = { - render: () => ({ - Component: MyComponent, - props: { - src: 'https://storybook.js.org/images/placeholders/350x150.png', - alt: 'My CDN placeholder', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx deleted file mode 100644 index 54db828925b6..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -//MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -import imageFile from './static/image.png'; - -export default { - component: MyComponent, -}; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export const WithAnImage = { - render: () => ({ - Component: MyComponent, - props: image, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx deleted file mode 100644 index 95482cba2c5f..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```html -{/* MyComponent.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import MyComponent from './MyComponent.svelte'; - - import imageFile from './static/image.png'; - - let image = { - src: imageFile, - alt: 'my image', - }; -</script> - -<meta title="img" component="{MyComponent}" /> - -<template> - <MyComponent {image} /> -</template> - -<Story name="WithAnImage" /> -``` diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.ts-4-9.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.ts-4-9.mdx deleted file mode 100644 index bc8eb9d4688c..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-with-import.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -import imageFile from './static/image.png'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export const WithAnImage: Story = { - render: () => ({ - Component: MyComponent, - props: image, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx deleted file mode 100644 index 9014220f808c..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -import imageFile from './static/image.png'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export const WithAnImage: Story = { - render: () => ({ - Component: MyComponent, - props: image, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx deleted file mode 100644 index 128d2f0166b5..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -export default { - component: MyComponent, -}; - -// Assume image.png is located in the "public" directory. -export const WithAnImage = { - render: () => ({ - Component: MyComponent, - props: { - src: '/image.png', - alt: 'my image', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx deleted file mode 100644 index 6078d75a04cd..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```html -{/* MyComponent.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import MyComponent from './MyComponent.svelte'; -</script> - -<meta title="img" component="{MyComponent}" /> - -<template> - <MyComponent src="/image.png" alt="my image" /> -</template> - -<Story name="WithAnImage" /> -``` diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.ts-4-9.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.ts-4-9.mdx deleted file mode 100644 index 894af1a2f567..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-without-import.ts-4-9.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta = { - component: MyComponent, -} 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: () => ({ - Component: MyComponent, - props: { - src: '/image.png', - alt: 'my image', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx deleted file mode 100644 index cfc54fb20623..000000000000 --- a/docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -// Assume image.png is located in the "public" directory. -export const WithAnImage: Story = { - render: () => ({ - Component: MyComponent, - props: { - src: '/image.png', - alt: 'my image', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/component-story-with-accessibility.js.mdx b/docs/snippets/svelte/component-story-with-accessibility.js.mdx deleted file mode 100644 index 50ec0a686df4..000000000000 --- a/docs/snippets/svelte/component-story-with-accessibility.js.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - component: Button, - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -// This is an accessible story -export const Accessible = { - render: (args) => ({ - Component: Button, - props: args, - }), - args: { - primary: false, - label: 'Button', - }, -}; - -// This is not -export const Inaccessible = { - render: (args) => ({ - Component: Button, - props: args, - }), - args: { - ...Accessible.args, - backgroundColor: 'red', - }, -}; -``` diff --git a/docs/snippets/svelte/component-story-with-accessibility.ts-4-9.mdx b/docs/snippets/svelte/component-story-with-accessibility.ts-4-9.mdx deleted file mode 100644 index fd54dd1393c1..000000000000 --- a/docs/snippets/svelte/component-story-with-accessibility.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta = { - 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/svelte/component-story-with-accessibility.ts.mdx b/docs/snippets/svelte/component-story-with-accessibility.ts.mdx deleted file mode 100644 index c66dc1afb6e3..000000000000 --- a/docs/snippets/svelte/component-story-with-accessibility.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { - component: Button, - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -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/svelte/component-test-with-testing-library.js.mdx b/docs/snippets/svelte/component-test-with-testing-library.js.mdx deleted file mode 100644 index cd3da15a6bfc..000000000000 --- a/docs/snippets/svelte/component-test-with-testing-library.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// Form.test.js|ts - -import { render, fireEvent } from '@testing-library/svelte'; - -import LoginForm from './LoginForm.svelte'; - -import { InvalidForm } from './LoginForm.stories'; //👈 Our stories imported here. - -it('Checks if the form is valid', async () => { - const { getByTestId, getByText } = render(LoginForm, { - props: InvalidForm.args, - }); - - await fireEvent.click(getByText('Submit')); - - const isFormValid = getByTestId('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/svelte/csf-2-example-starter.js.mdx b/docs/snippets/svelte/csf-2-example-starter.js.mdx deleted file mode 100644 index 025761271718..000000000000 --- a/docs/snippets/svelte/csf-2-example-starter.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - title: 'Button', - component: Button, -}; - -export const Primary = (args) => ({ - Component: Button, - props: args, -}); -Primary.args = { primary: true }; -``` diff --git a/docs/snippets/svelte/csf-2-example-starter.ts.mdx b/docs/snippets/svelte/csf-2-example-starter.ts.mdx deleted file mode 100644 index 67f72c6419ce..000000000000 --- a/docs/snippets/svelte/csf-2-example-starter.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryFn } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -export default { - title: 'Button', - component: Button, -} as Meta<typeof Button>; - -export const Primary: StoryFn<typeof Button> = (args) => ({ - Component: Button, - props: args, -}); -Primary.args = { primary: true }; -``` diff --git a/docs/snippets/svelte/csf-2-example-story.js.mdx b/docs/snippets/svelte/csf-2-example-story.js.mdx deleted file mode 100644 index 31654612ae2b..000000000000 --- a/docs/snippets/svelte/csf-2-example-story.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// CSF 2 - -// Other imports and story implementation -export const Default = (args) => ({ - Component: Button, - props: args, -}); -``` diff --git a/docs/snippets/svelte/csf-2-example-story.ts.mdx b/docs/snippets/svelte/csf-2-example-story.ts.mdx deleted file mode 100644 index 3d479ca132fc..000000000000 --- a/docs/snippets/svelte/csf-2-example-story.ts.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```ts -// CSF 2 - -// Other imports and story implementation -export const Primary: StoryFn<typeof Button> = (args) => ({ - Component: Button, - props: args, -}); -``` diff --git a/docs/snippets/svelte/csf-3-example-render.js.mdx b/docs/snippets/svelte/csf-3-example-render.js.mdx deleted file mode 100644 index bf3cd564a422..000000000000 --- a/docs/snippets/svelte/csf-3-example-render.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// CSF 3 - explicit render function - -// Other imports and story implementation -export const Default = { - render: (args) => ({ - Component: Button, - props: args, - }); -}; -``` diff --git a/docs/snippets/svelte/csf-3-example-render.ts.mdx b/docs/snippets/svelte/csf-3-example-render.ts.mdx deleted file mode 100644 index ea8603bdcf9a..000000000000 --- a/docs/snippets/svelte/csf-3-example-render.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// CSF 3 - explicit render function - -// Other imports and story implementation -export const Default: Story = { - render: (args) => ({ - Component: Button, - props: args, - }), -}; -``` diff --git a/docs/snippets/svelte/csf-3-example-starter.ts.mdx b/docs/snippets/svelte/csf-3-example-starter.ts.mdx deleted file mode 100644 index 70a4585e5192..000000000000 --- a/docs/snippets/svelte/csf-3-example-starter.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta<typeof Button> = { component: Button }; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { args: { primary: true } }; -``` diff --git a/docs/snippets/svelte/document-screen-fetch.js.mdx b/docs/snippets/svelte/document-screen-fetch.js.mdx deleted file mode 100644 index df927a860c85..000000000000 --- a/docs/snippets/svelte/document-screen-fetch.js.mdx +++ /dev/null @@ -1,47 +0,0 @@ -```html -{/* YourPage.svelte */} - -<script> - import { onMount } from 'svelte'; - - import PageLayout from './PageLayout.svelte'; - import DocumentHeader from './DocumentHeader.svelte'; - import DocumentList from './DocumentList.svelte'; - - export let user = {}; - export let document = {}; - export let subdocuments = []; - export let status = 'loading'; - - onMount(async () => { - await fetch('https://your-restful-endpoint') - .then((res) => { - if (!res.ok) { - throw new Error(res.statusText); - } - return res; - }) - .then((res) => res.json()) - .then((data) => { - user = data.user; - status = 'success'; - document = data.document; - subdocuments = data.subdocuments; - }) - .catch(() => { - status = 'error'; - }); - }); -</script> - -{#if status === "error"} -<p>There was an error fetching the data!</p> -{:else if status === "loading"} -<p>Loading...</p> -{:else} -<PageLayout {user}> - <DocumentHeader {document} /> - <DocumentList documents="{subdocuments}" /> -</PageLayout> -{/if} -``` diff --git a/docs/snippets/svelte/document-screen-fetch.ts.mdx b/docs/snippets/svelte/document-screen-fetch.ts.mdx deleted file mode 100644 index c71c46825667..000000000000 --- a/docs/snippets/svelte/document-screen-fetch.ts.mdx +++ /dev/null @@ -1,47 +0,0 @@ -```html -{/* YourPage.svelte */} - -<script lang="ts"> - import { onMount } from 'svelte'; - - import PageLayout from './PageLayout.svelte'; - import DocumentHeader from './DocumentHeader.svelte'; - import DocumentList from './DocumentList.svelte'; - - export let user: Record<string, unknown> = {}; - export let document: Record<string, unknown> = {}; - export let subdocuments: Record<string, unknown>[] = []; - export let status: 'error' | 'loading' | 'success' = 'loading'; - - onMount(async () => { - await fetch('https://your-restful-endpoint') - .then((res) => { - if (!res.ok) { - throw new Error(res.statusText); - } - return res; - }) - .then((res) => res.json()) - .then((data) => { - user = data.user; - status = 'success'; - document = data.document; - subdocuments = data.subdocuments; - }) - .catch(() => { - status = 'error'; - }); - }); -</script> - -{#if status === "error"} -<p>There was an error fetching the data!</p> -{:else if status === "loading"} -<p>Loading...</p> -{:else} -<PageLayout {user}> - <DocumentHeader {document} /> - <DocumentList documents="{subdocuments}" /> -</PageLayout> -{/if} -``` diff --git a/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx b/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx deleted file mode 100644 index 8c3eec4e0abd..000000000000 --- a/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx +++ /dev/null @@ -1,46 +0,0 @@ -```html -{/* YourPage.svelte */} - -<script> - import gql from 'graphql-tag'; - import { query } from 'svelte-apollo'; - import PageLayout from './PageLayout.svelte'; - import DocumentHeader from './DocumentHeader.svelte'; - import DocumentList from './DocumentList.svelte'; - - const AllInfoQuery = gql` - query AllInfoQuery { - user { - userID - name - } - document { - id - userID - title - brief - status - } - subdocuments { - id - userID - title - content - status - } - } - `; - const infoResult = query(AllInfoQuery); -</script> - -{#if $infoResult.loading} -<p>Loading...</p> -{:else if $infoResult.error} -<p>There was an error fetching the data!</p> -{:else} -<PageLayout {$infoResult.data.user}> - <DocumentHeader {$infoResult.data.document} /> - <DocumentList {$infoResult.data.subdocuments} /> -</PageLayout> -{/if} -``` diff --git a/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx b/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx deleted file mode 100644 index 3ddc2f1d4f79..000000000000 --- a/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx +++ /dev/null @@ -1,46 +0,0 @@ -```html -{/* YourPage.svelte */} - -<script lang="ts"> - import gql from 'graphql-tag'; - import { query } from 'svelte-apollo'; - import PageLayout from './PageLayout.svelte'; - import DocumentHeader from './DocumentHeader.svelte'; - import DocumentList from './DocumentList.svelte'; - - const AllInfoQuery = gql` - query AllInfoQuery { - user { - userID - name - } - document { - id - userID - title - brief - status - } - subdocuments { - id - userID - title - content - status - } - } - `; - const infoResult = query(AllInfoQuery); -</script> - -{#if $infoResult.loading} -<p>Loading...</p> -{:else if $infoResult.error} -<p>There was an error fetching the data!</p> -{:else} -<PageLayout {$infoResult.data.user}> - <DocumentHeader {$infoResult.data.document} /> - <DocumentList {$infoResult.data.subdocuments} /> -</PageLayout> -{/if} -``` diff --git a/docs/snippets/svelte/histogram-story.js.mdx b/docs/snippets/svelte/histogram-story.js.mdx deleted file mode 100644 index b422653fdb7a..000000000000 --- a/docs/snippets/svelte/histogram-story.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// Histogram.stories.js - -import Histogram from './Histogram.svelte'; - -export default { - component: Histogram, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Default = { - render: (args) => ({ - Component: Histogram, - props: args, - }), - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/svelte/histogram-story.ts-4-9.mdx b/docs/snippets/svelte/histogram-story.ts-4-9.mdx deleted file mode 100644 index c265b76af911..000000000000 --- a/docs/snippets/svelte/histogram-story.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// Histogram.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Histogram from './Histogram.svelte'; - -const meta = { - component: Histogram, -} satisfies Meta<typeof Histogram>; - -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/api/csf - * to learn how to use render functions. - */ -export const Default: Story = { - render: (args) => ({ - Component: Histogram, - props: args, - }), - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/svelte/histogram-story.ts.mdx b/docs/snippets/svelte/histogram-story.ts.mdx deleted file mode 100644 index e1451615407b..000000000000 --- a/docs/snippets/svelte/histogram-story.ts.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// Histogram.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Histogram from './Histogram.svelte'; - -const meta: Meta<typeof Histogram> = { - component: Histogram, -}; - -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/api/csf - * to learn how to use render functions. - */ -export const Default: Story = { - render: (args) => ({ - Component: Histogram, - props: args, - }), - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/svelte/list-story-expanded.native-format.mdx b/docs/snippets/svelte/list-story-expanded.native-format.mdx deleted file mode 100644 index ac2610af7c0d..000000000000 --- a/docs/snippets/svelte/list-story-expanded.native-format.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```html -{/* List.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import List from './List.svelte'; - - import ListItem from './ListItem.svelte'; -</script> - -<meta title="List" component="{List}" /> - -<template let:args id="Empty"> - <List {...args} /> -</template> - -<template let:args id="OneItem"> - <List {...args}> - <ListItem /> - </List> -</template> - -<template let:args id="ManyItems"> - <List {...args}> - <ListItem /> - <ListItem /> - <ListItem /> - </List> -</template> - -<Story name="Empty" template="Empty" /> - -<Story name="OneItem" template="OneItem" /> - -<Story name="MultipleItems" template="ManyItems" /> -``` diff --git a/docs/snippets/svelte/list-story-starter.native-format.mdx b/docs/snippets/svelte/list-story-starter.native-format.mdx deleted file mode 100644 index 5be76fc8160e..000000000000 --- a/docs/snippets/svelte/list-story-starter.native-format.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```html -{/* List.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import List from './List.svelte'; -</script> - -<meta title="List" component="{List}" /> - -<template let:args> - <List {...args} /> -</template> - -<Story name="Empty"> - <List {...args} /> -</Story> -``` diff --git a/docs/snippets/svelte/loader-story.js.mdx b/docs/snippets/svelte/loader-story.js.mdx deleted file mode 100644 index f768ba12b62d..000000000000 --- a/docs/snippets/svelte/loader-story.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// TodoItem.stories.js - -import fetch from 'node-fetch'; - -import TodoItem from './TodoItem.svelte'; - -export default { - component: TodoItem, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args, { loaded: { todo } }) => ({ - Component: TodoItem, - props: { - ...args, - todo, - }, - }), - loaders: [ - async () => ({ - todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(), - }), - ], -}; -``` diff --git a/docs/snippets/svelte/loader-story.ts-4-9.mdx b/docs/snippets/svelte/loader-story.ts-4-9.mdx deleted file mode 100644 index 3a0c52903ec4..000000000000 --- a/docs/snippets/svelte/loader-story.ts-4-9.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// TodoItem.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import fetch from 'node-fetch'; - -import TodoItem from './TodoItem.svelte'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/svelte/api/csf - * to learn how to use render functions. - */ -const meta = { - component: TodoItem, - render: (args, { loaded: { todo } }) => ({ - Component: TodoItem, - props: { - ...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/svelte/loader-story.ts.mdx b/docs/snippets/svelte/loader-story.ts.mdx deleted file mode 100644 index 5bea2892ef0c..000000000000 --- a/docs/snippets/svelte/loader-story.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// TodoItem.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import fetch from 'node-fetch'; - -import TodoItem from './TodoItem.svelte'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/svelte/api/csf - * to learn how to use render functions. - */ -const meta: Meta<typeof TodoItem> = { - component: TodoItem, - render: (args, { loaded: { todo } }) => ({ - Component: TodoItem, - props: { - ...args, - ...todo, - }, - }), -}; - -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/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx deleted file mode 100644 index 4408fc6261a0..000000000000 --- a/docs/snippets/svelte/login-form-with-play-function.js.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```js -// LoginForm.stories.js - -import { expect, userEvent, within } from '@storybook/test'; - -import LoginForm from './LoginForm.svelte'; - -export default { - component: LoginForm, -}; - -export const EmptyForm = {}; - -/* - * See https://storybook.js.org/docs/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/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/svelte/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx deleted file mode 100644 index b975337dc799..000000000000 --- a/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// LoginForm.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; -import { expect, userEvent, within } from '@storybook/test'; - -import LoginForm from './LoginForm.svelte'; - -const meta = { - component: LoginForm, -} satisfies Meta<typeof LoginForm>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const EmptyForm: Story = {}; - -/* - * See https://storybook.js.org/docs/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/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/svelte/login-form-with-play-function.ts.mdx b/docs/snippets/svelte/login-form-with-play-function.ts.mdx deleted file mode 100644 index 24bcd6c1d41a..000000000000 --- a/docs/snippets/svelte/login-form-with-play-function.ts.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// LoginForm.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; -import { expect, userEvent, within } from '@storybook/test'; - -import LoginForm from './LoginForm.svelte'; - -const meta: Meta<typeof LoginForm> = { - component: LoginForm, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const EmptyForm: Story = {}; - -/* - * See https://storybook.js.org/docs/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/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/svelte/main-config-csf-addon-register.js.mdx b/docs/snippets/svelte/main-config-csf-addon-register.js.mdx deleted file mode 100644 index 5559ac261ca1..000000000000 --- a/docs/snippets/svelte/main-config-csf-addon-register.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// .storybook/main.js - -export default { - // Replace sveltekit with svelte-vite if you are not working with SvelteKit - framework: '@storybook/sveltekit', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'], - addons: [ - // Other Storybook addons - '@storybook/addon-svelte-csf', //👈 The Svelte CSF addon goes here - ], -}; -``` diff --git a/docs/snippets/svelte/main-config-csf-addon-register.ts.mdx b/docs/snippets/svelte/main-config-csf-addon-register.ts.mdx deleted file mode 100644 index 3221880ebb99..000000000000 --- a/docs/snippets/svelte/main-config-csf-addon-register.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// .storybook/main.ts - -// Replace sveltekit with svelte-vite if you are not working with SvelteKit -import type { StorybookConfig } from '@storybook/sveltekit'; - -const config: StorybookConfig = { - framework: '@storybook/sveltekit', - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'], - addons: [ - // Other Storybook addons - '@storybook/addon-svelte-csf', //👈 The Svelte CSF addon goes here - ], -}; - -export default config; -``` diff --git a/docs/snippets/svelte/margindecorator.with-margin-component.js.mdx b/docs/snippets/svelte/margindecorator.with-margin-component.js.mdx deleted file mode 100644 index cd87a7850882..000000000000 --- a/docs/snippets/svelte/margindecorator.with-margin-component.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```html -{/* MarginDecorator.svelte */} - -<div> - <slot /> -</div> - -<style> - div { - margin: 3em; - } -</style> -``` diff --git a/docs/snippets/svelte/margindecorator.with-margin-component.ts.mdx b/docs/snippets/svelte/margindecorator.with-margin-component.ts.mdx deleted file mode 100644 index cd87a7850882..000000000000 --- a/docs/snippets/svelte/margindecorator.with-margin-component.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```html -{/* MarginDecorator.svelte */} - -<div> - <slot /> -</div> - -<style> - div { - margin: 3em; - } -</style> -``` diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx deleted file mode 100644 index 72ab24c05d6f..000000000000 --- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx +++ /dev/null @@ -1,74 +0,0 @@ -```js -// YourPage.stories.js -import { graphql, HttpResponse, delay } from 'msw'; - -import MockApolloWrapperClient from './MockApolloWrapperClient.svelte'; -import DocumentScreen from './YourPage.svelte'; - -export default { - component: DocumentScreen, - decorators: [() => MockApolloWrapperClient], -}; - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export const MockedSuccess = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - }, - }); - }), - ], - }, - }, -}; - -export const MockedError = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx deleted file mode 100644 index 440b47dc992d..000000000000 --- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx +++ /dev/null @@ -1,79 +0,0 @@ -```ts -// YourPage.stories.ts -import type { Meta, StoryObj } from '@storybook/svelte'; - -import { graphql, HttpResponse, delay } from 'msw'; - -import MockApolloWrapperClient from './MockApolloWrapperClient.svelte'; -import DocumentScreen from './YourPage.svelte'; - -const meta = { - component: DocumentScreen, - decorators: [() => MockApolloWrapperClient], -} satisfies Meta<typeof DocumentScreen>; - -export default meta; -type Story = StoryObj<typeof meta>; - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export const MockedSuccess: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - }, - }); - }), - ], - }, - }, -}; - -export const MockedError: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx deleted file mode 100644 index a186c5183bf2..000000000000 --- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx +++ /dev/null @@ -1,79 +0,0 @@ -```ts -// YourPage.stories.ts -import type { Meta, StoryObj } from '@storybook/svelte'; - -import { graphql, HttpResponse, delay } from 'msw'; - -import MockApolloWrapperClient from './MockApolloWrapperClient.svelte'; -import DocumentScreen from './YourPage.svelte'; - -const meta: Meta<typeof DocumentScreen> = { - component: DocumentScreen, - decorators: [() => MockApolloWrapperClient], -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export const MockedSuccess: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - }, - }); - }), - ], - }, - }, -}; - -export const MockedError: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx deleted file mode 100644 index 42e11888b759..000000000000 --- a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -export default { - component: MyComponent, -}; - -export const Basic = {}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const WithProp = { - render: () => ({ - Component: MyComponent, - props: { - prop: 'value', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx deleted file mode 100644 index d994e0e2e996..000000000000 --- a/docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```html -{/* MyComponent.stories.svelte */} - -<script> - import { Meta, Story } from '@storybook/addon-svelte-csf'; - import MyComponent from './MyComponent.svelte'; -</script> - -<Story name="Basic"> - <MyComponent /> -</Story> - -<Story name="WithProp"> - <MyComponent prop="value" /> -</Story> -``` diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.ts-4-9.mdx deleted file mode 100644 index 486fd96d1ceb..000000000000 --- a/docs/snippets/svelte/my-component-story-basic-and-props.ts-4-9.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Basic: Story = {}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const WithProp: Story = { - render: () => ({ - Component: MyComponent, - props: { - prop: 'value', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx deleted file mode 100644 index ad985f99262e..000000000000 --- a/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Basic: Story = {}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const WithProp: Story = { - render: () => ({ - Component: MyComponent, - props: { - prop: 'value', - }, - }), -}; -``` diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx deleted file mode 100644 index 856aed93e83b..000000000000 --- a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import MyComponent from './MyComponent.svelte'; - -export default { - 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/svelte/my-component-story-configure-viewports.native-format.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx deleted file mode 100644 index 15795af40cba..000000000000 --- a/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```html -{/* MyComponent.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - - import MyComponent from './MyComponent.svelte'; -</script> - -<Meta 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', }, }} /> - -<template let:args> - <MyComponent {...args} /> -</template> - -<Story name="MyStory" parameters={{ viewport: { defaultViewport: 'iphonex', }, }} /> -``` diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.ts-4-9.mdx deleted file mode 100644 index 2395d688fb55..000000000000 --- a/docs/snippets/svelte/my-component-story-configure-viewports.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import MyComponent from './MyComponent.svelte'; - -const meta = { - 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/svelte/my-component-story-configure-viewports.ts.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx deleted file mode 100644 index 93ab5bcf7ae0..000000000000 --- a/docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import MyComponent from './MyComponent.svelte'; - -const meta: Meta<typeof 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 meta>; - -export const MyStory: Story = { - parameters: { - viewport: { - defaultViewport: 'iphonex', - }, - }, -}; -``` diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx deleted file mode 100644 index 8542b37240a7..000000000000 --- a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -export default { - component: MyComponent, -}; - -const getCaptionForLocale = (locale) => { - switch (locale) { - case 'es': - return 'Hola!'; - case 'fr': - return 'Bonjour!'; - case 'kr': - return '안녕하세요!'; - case 'zh': - return '你好!'; - default: - return 'Hello!'; - } -}; - -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - Component: MyComponent, - props: { - locale: caption, - }, - }; - }, -}; -``` diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.ts-4-9.mdx deleted file mode 100644 index 59e0feecc847..000000000000 --- a/docs/snippets/svelte/my-component-story-use-globaltype.ts-4-9.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './YourComponent.svelte'; - -const meta = { - 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!'; - } -}; - -export const StoryWithLocale: Story = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - Component: MyComponent, - props: { - locale: caption, - }, - }; - }, -}; -``` diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx deleted file mode 100644 index 88847d3d9011..000000000000 --- a/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './YourComponent.svelte'; - -const meta: Meta<typeof MyComponent> = { - component: 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!'; - } -}; - -export const StoryWithLocale: Story = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - Component: MyComponent, - props: { - locale: caption, - }, - }; - }, -}; -``` diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx deleted file mode 100644 index 0ca9319f8737..000000000000 --- a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -import someData from './data.json'; - -export default { - 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/svelte/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.ts-4-9.mdx deleted file mode 100644 index 9bf8759217e1..000000000000 --- a/docs/snippets/svelte/my-component-story-with-nonstory.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -import someData from './data.json'; - -const meta = { - component: MyComponent, - includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories - excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains 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/svelte/my-component-story-with-nonstory.ts.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx deleted file mode 100644 index 97c183896eb9..000000000000 --- a/docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -import someData from './data.json'; - -const meta: Meta<typeof 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 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/svelte/my-component-with-env-variables.native-format.mdx b/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx deleted file mode 100644 index d1977d5d83ac..000000000000 --- a/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```html -{/* MyComponent.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import MyComponent from './MyComponent.svelte'; -</script> - -<meta title="MyComponent" component="{MyComponent}" /> - -<template let:args> - <MyComponent {...args} /> -</template> - -<Story name="ExampleStory" args={{ propertyA: process.env.STORYBOOK_DATA_KEY, }} /> -``` diff --git a/docs/snippets/svelte/page-story-slots.native-format.mdx b/docs/snippets/svelte/page-story-slots.native-format.mdx deleted file mode 100644 index 17cf7ea3a251..000000000000 --- a/docs/snippets/svelte/page-story-slots.native-format.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```html -{/* Page.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import Page from './Page.svelte'; -</script> - -<meta title="Page" component="{Page}" /> - -<template let:args> - <Page {...args}> - <footer>{args.footer}</footer> - </Page> -</template> - -<Story name="CustomFooter" args={{ footer: 'Built with Storybook', }} /> -``` diff --git a/docs/snippets/svelte/page-story.js.mdx b/docs/snippets/svelte/page-story.js.mdx deleted file mode 100644 index ec72dc32448c..000000000000 --- a/docs/snippets/svelte/page-story.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Page.stories.js - -import Page from './Page.svelte'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -export default { - component: Page, -}; - -export const LoggedIn = { - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/svelte/page-story.ts-4-9.mdx b/docs/snippets/svelte/page-story.ts-4-9.mdx deleted file mode 100644 index 7184cc7ce31f..000000000000 --- a/docs/snippets/svelte/page-story.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Page.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Page from './Page.svelte'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -const meta = { - 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/svelte/page-story.ts.mdx b/docs/snippets/svelte/page-story.ts.mdx deleted file mode 100644 index 897a7f6db039..000000000000 --- a/docs/snippets/svelte/page-story.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Page.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Page from './Page.svelte'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -const meta: Meta<typeof Page> = { - component: Page, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const LoggedIn: Story = { - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/svelte/portable-stories-vitest-compose-stories.ts.mdx b/docs/snippets/svelte/portable-stories-vitest-compose-stories.ts.mdx deleted file mode 100644 index 4e8af8c4086b..000000000000 --- a/docs/snippets/svelte/portable-stories-vitest-compose-stories.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.test.ts -import { test, expect } from 'vitest'; -import { render, screen } from '@testing-library/svelte'; -import { composeStories } from '@storybook/svelte'; - -// Import all stories and the component annotations from the stories file -import * as stories from './Button.stories'; - -// Every component that is returned maps 1:1 with the stories, -// but they already contain all annotations from story, meta, and project levels -const { Primary, Secondary } = composeStories(stories); - -test('renders primary button with default args', () => { - render(Primary.Component, Primary.props); - const buttonElement = screen.getByText('Text coming from args in stories file!'); - expect(buttonElement).not.toBeNull(); -}); -``` diff --git a/docs/snippets/svelte/portable-stories-vitest-compose-story.ts.mdx b/docs/snippets/svelte/portable-stories-vitest-compose-story.ts.mdx deleted file mode 100644 index a03e3b028aef..000000000000 --- a/docs/snippets/svelte/portable-stories-vitest-compose-story.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.test.ts -import { vi, test, expect } from 'vitest'; -import { render, screen } from '@testing-library/svelte'; -import { composeStory } from '@storybook/svelte'; - -import meta, { Primary } from './Button.stories'; - -test('renders primary button with default args', () => { - // Returns a story which already contains all annotations from story, meta and global levels - const PrimaryStory = composeStory(Primary, meta); - - render(PrimaryStory.Component, PrimaryStory.props); - const buttonElement = screen.getByText('Text coming from args in stories file!'); - expect(buttonElement).not.toBeNull(); -}); - -test('renders primary button with overridden props', () => { - // You can override props and they will get merged with values from the story's args - const PrimaryStory = composeStory({ ...Primary, args: { label: 'Hello world' } }, meta); - - render(PrimaryStory.Component, PrimaryStory.props); - const buttonElement = screen.getByText(/Hello world/i); - expect(buttonElement).not.toBeNull(); -}); -``` diff --git a/docs/snippets/svelte/portable-stories-vitest-override-globals.ts.mdx b/docs/snippets/svelte/portable-stories-vitest-override-globals.ts.mdx deleted file mode 100644 index d4e7924bae37..000000000000 --- a/docs/snippets/svelte/portable-stories-vitest-override-globals.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.test.ts -import { test } from 'vitest'; -import { render } from '@testing-library/svelte'; -import { composeStory } from '@storybook/svelte'; - -import meta, { Primary } from './Button.stories'; - -test('renders in English', async () => { - const PrimaryStory = composeStory( - Primary, - meta, - { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale - ); - - render(PrimaryStory.Component, PrimaryStory.props); -}); - -test('renders in Spanish', async () => { - const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } }); - - render(PrimaryStory.Component, PrimaryStory.props); -}); -``` diff --git a/docs/snippets/svelte/portable-stories-vitest-with-loaders.ts.mdx b/docs/snippets/svelte/portable-stories-vitest-with-loaders.ts.mdx deleted file mode 100644 index 8d377ff22ec4..000000000000 --- a/docs/snippets/svelte/portable-stories-vitest-with-loaders.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.test.ts -import { test } from 'vitest'; -import { render } from '@testing-library/svelte'; -import { composeStory } from '@storybook/svelte'; - -import meta, { Primary } from './Button.stories'; - -test('applies the loaders and renders', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, load the data for the story - await PrimaryStory.load(); - - // Then, render the story - render(PrimaryStory.Component, PrimaryStory.props); -}); -``` diff --git a/docs/snippets/svelte/portable-stories-vitest-with-play-function.ts.mdx b/docs/snippets/svelte/portable-stories-vitest-with-play-function.ts.mdx deleted file mode 100644 index 64198c2ddbc9..000000000000 --- a/docs/snippets/svelte/portable-stories-vitest-with-play-function.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.test.ts -import { test } from 'vitest'; -import { render } from '@testing-library/svelte'; -import { composeStory } from '@storybook/svelte'; - -import meta, { Primary } from './Button.stories'; - -test('renders and executes the play function', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, render the story - render(PrimaryStory.Component, PrimaryStory.props); - - // Then, execute the play function - await PrimaryStory.play(); -}); -``` diff --git a/docs/snippets/svelte/simple-page-implementation.js.mdx b/docs/snippets/svelte/simple-page-implementation.js.mdx deleted file mode 100644 index 2c5b9b1df72a..000000000000 --- a/docs/snippets/svelte/simple-page-implementation.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```html -{/* YourPage.svelte */} - -<script> - import PageLayout from './PageLayout.svelte'; - import DocumentHeader from './DocumentHeader.svelte'; - import DocumentList from './DocumentList.svelte'; - - export let user = {}; - export let document = {}; - export let subdocuments = []; -</script> - -<div> - <PageLayout {user}> - <DocumentHeader {document} /> - <DocumentList documents="{subdocuments}" /> - </PageLayout> -</div> -``` diff --git a/docs/snippets/svelte/simple-page-implementation.ts.mdx b/docs/snippets/svelte/simple-page-implementation.ts.mdx deleted file mode 100644 index 4fe0848de7f4..000000000000 --- a/docs/snippets/svelte/simple-page-implementation.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```html -{/* YourPage.svelte */} - -<script lang="ts"> - import PageLayout from './PageLayout.svelte'; - import DocumentHeader from './DocumentHeader.svelte'; - import DocumentList from './DocumentList.svelte'; - - export let user: Record<string, unknown> = {}; - export let document: Record<string, unknown> = {}; - export let subdocuments: Record<string, unknown>[] = []; -</script> - -<div> - <PageLayout {user}> - <DocumentHeader {document} /> - <DocumentList documents="{subdocuments}" /> - </PageLayout> -</div> -``` diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx deleted file mode 100644 index 7ddea5b9cef4..000000000000 --- a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -export default { - component: MyComponent, -}; - -export const NonA11yStory = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.ts-4-9.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.ts-4-9.mdx deleted file mode 100644 index a88af48d41e6..000000000000 --- a/docs/snippets/svelte/storybook-addon-a11y-disable.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const NonA11yStory: Story = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx deleted file mode 100644 index d9b1abb6a04e..000000000000 --- a/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const NonA11yStory: Story = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx deleted file mode 100644 index d26c9049ae24..000000000000 --- a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -export default { - component: MyComponent, -}; - -export const ExampleStory = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.ts-4-9.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts-4-9.mdx deleted file mode 100644 index 405228dd4df8..000000000000 --- a/docs/snippets/svelte/storybook-addon-a11y-story-config.ts-4-9.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ExampleStory: Story = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx deleted file mode 100644 index a2516ffa6464..000000000000 --- a/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import MyComponent from './MyComponent.svelte'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ExampleStory: Story = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx b/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx deleted file mode 100644 index 7951b0a3efd9..000000000000 --- a/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/preview.js - -import MarginDecorator from './MarginDecorator.svelte'; - -export default { decorators: [() => MarginDecorator] }; -``` diff --git a/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx b/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx deleted file mode 100644 index 9e6cf557f9c3..000000000000 --- a/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// .storybook/preview.ts - -import type { Preview } from '@storybook/svelte'; - -import MarginDecorator from './MarginDecorator.svelte'; - -const preview: Preview = { - decorators: [() => MarginDecorator], -}; - -export default preview; -``` diff --git a/docs/snippets/svelte/svelte-csf-addon-install.npm.js.mdx b/docs/snippets/svelte/svelte-csf-addon-install.npm.js.mdx deleted file mode 100644 index 3889ca8909c4..000000000000 --- a/docs/snippets/svelte/svelte-csf-addon-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@latest add @storybook/addon-svelte-csf -``` diff --git a/docs/snippets/svelte/svelte-csf-addon-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-csf-addon-install.pnpm.js.mdx deleted file mode 100644 index eb8c09e0708c..000000000000 --- a/docs/snippets/svelte/svelte-csf-addon-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest add @storybook/addon-svelte-csf -``` diff --git a/docs/snippets/svelte/svelte-csf-addon-install.yarn.js.mdx b/docs/snippets/svelte/svelte-csf-addon-install.yarn.js.mdx deleted file mode 100644 index 52ecff831d4c..000000000000 --- a/docs/snippets/svelte/svelte-csf-addon-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn storybook@latest add @storybook/addon-svelte-csf -``` diff --git a/docs/snippets/svelte/svelte-vite-add-framework.js.mdx b/docs/snippets/svelte/svelte-vite-add-framework.js.mdx deleted file mode 100644 index a16370254866..000000000000 --- a/docs/snippets/svelte/svelte-vite-add-framework.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - framework: '@storybook/svelte-vite', // 👈 Add this -}; -``` diff --git a/docs/snippets/svelte/svelte-vite-add-framework.ts.mdx b/docs/snippets/svelte/svelte-vite-add-framework.ts.mdx deleted file mode 100644 index 920d91ae6d13..000000000000 --- a/docs/snippets/svelte/svelte-vite-add-framework.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/svelte-vite'; - -const config: StorybookConfig = { - // ... - framework: '@storybook/svelte-vite', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/svelte/svelte-vite-install.npm.js.mdx b/docs/snippets/svelte/svelte-vite-install.npm.js.mdx deleted file mode 100644 index 8b6986b5ecfa..000000000000 --- a/docs/snippets/svelte/svelte-vite-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/svelte-vite -``` diff --git a/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx deleted file mode 100644 index c45e7cb6cd33..000000000000 --- a/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/svelte-vite -``` diff --git a/docs/snippets/svelte/svelte-vite-install.yarn.js.mdx b/docs/snippets/svelte/svelte-vite-install.yarn.js.mdx deleted file mode 100644 index 7a8b11a4d500..000000000000 --- a/docs/snippets/svelte/svelte-vite-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/svelte-vite -``` diff --git a/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx b/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx deleted file mode 100644 index de6a0bdc94f0..000000000000 --- a/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - framework: '@storybook/svelte-webpack5', // 👈 Add this -}; -``` diff --git a/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx b/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx deleted file mode 100644 index e2c5a9e91c04..000000000000 --- a/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/svelte-webpack5'; - -const config: StorybookConfig = { - // ... - framework: '@storybook/svelte-webpack5', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx deleted file mode 100644 index 395d6086a967..000000000000 --- a/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/svelte-webpack5 -``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx deleted file mode 100644 index aab7b9126cfc..000000000000 --- a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/svelte-webpack5 -``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx deleted file mode 100644 index 0350df4376bf..000000000000 --- a/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/svelte-webpack5 -``` diff --git a/docs/snippets/svelte/sveltekit-add-framework.js.mdx b/docs/snippets/svelte/sveltekit-add-framework.js.mdx deleted file mode 100644 index 12ea1574f451..000000000000 --- a/docs/snippets/svelte/sveltekit-add-framework.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - framework: '@storybook/sveltekit', // 👈 Add this - // svelteOptions: { ... }, 👈 Remove this -}; -``` diff --git a/docs/snippets/svelte/sveltekit-add-framework.ts.mdx b/docs/snippets/svelte/sveltekit-add-framework.ts.mdx deleted file mode 100644 index d9b21745ab48..000000000000 --- a/docs/snippets/svelte/sveltekit-add-framework.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/nextjs'; - -const config: StorybookConfig = { - // ... - framework: '@storybook/sveltekit', // 👈 Add this - // svelteOptions: { ... }, 👈 Remove this -}; - -export default config; -``` diff --git a/docs/snippets/svelte/sveltekit-install.npm.js.mdx b/docs/snippets/svelte/sveltekit-install.npm.js.mdx deleted file mode 100644 index b63e43de7c6b..000000000000 --- a/docs/snippets/svelte/sveltekit-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/sveltekit -``` diff --git a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx deleted file mode 100644 index 266855652a06..000000000000 --- a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/sveltekit -``` diff --git a/docs/snippets/svelte/sveltekit-install.yarn.js.mdx b/docs/snippets/svelte/sveltekit-install.yarn.js.mdx deleted file mode 100644 index 2cb71e06c9ed..000000000000 --- a/docs/snippets/svelte/sveltekit-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/sveltekit -``` diff --git a/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx b/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx deleted file mode 100644 index a6546a1570ef..000000000000 --- a/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```html -{/*Table.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import Table from './Table.svelte'; -</script> - -<Meta title="Custom Table" component={Table} argTypes={{ size: { options: ['small', 'medium', -'large'], }, }} /> - -<template let:args> - <table {...args}> - <tbody> - {#each args.data as row} - <tr> - {#each row as col} - <td>{col}</td> - {/each} - </tr> - {/each} - </tbody> - </table> -</template> - -{/* 👇 The data arg is for the story component and the remaining args get passed to the Table component */} -<Story name="Numeric" args={{ data: [ [1, 2, 3], [4, 5, 6], ], size: 'large', }} /> -``` diff --git a/docs/snippets/svelte/your-component-with-decorator.js.mdx b/docs/snippets/svelte/your-component-with-decorator.js.mdx deleted file mode 100644 index c9d943052349..000000000000 --- a/docs/snippets/svelte/your-component-with-decorator.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// YourComponent.stories.js - -import YourComponent from './YourComponent.svelte'; - -import MarginDecorator from './MarginDecorator.svelte'; - -export default { - component: YourComponent, - decorators: [() => MarginDecorator], -}; -``` diff --git a/docs/snippets/svelte/your-component-with-decorator.native-format.mdx b/docs/snippets/svelte/your-component-with-decorator.native-format.mdx deleted file mode 100644 index 8b701c6f43cb..000000000000 --- a/docs/snippets/svelte/your-component-with-decorator.native-format.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```html -{/* YourComponent.stories.svelte */} - -<script> - import { Meta, Template } from '@storybook/addon-svelte-csf'; - - import MarginDecorator from './MarginDecorator.svelte'; - - import YourComponent from './YourComponent.svelte'; -</script> - -<meta title="YourComponent" component="{YourComponent}" /> - -<template let:args> - <MarginDecorator> - {/*👇 Your component here */} - </MarginDecorator> -</template> -``` diff --git a/docs/snippets/svelte/your-component-with-decorator.ts-4-9.mdx b/docs/snippets/svelte/your-component-with-decorator.ts-4-9.mdx deleted file mode 100644 index b840eb852abe..000000000000 --- a/docs/snippets/svelte/your-component-with-decorator.ts-4-9.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta } from '@storybook/svelte'; - -import YourComponent from './YourComponent.svelte'; -import MarginDecorator from './MarginDecorator.svelte'; - -const meta = { - component: Button, - decorators: [() => MarginDecorator], -} satisfies Meta<typeof Button>; - -export default meta; -``` diff --git a/docs/snippets/svelte/your-component-with-decorator.ts.mdx b/docs/snippets/svelte/your-component-with-decorator.ts.mdx deleted file mode 100644 index d7698d42c35d..000000000000 --- a/docs/snippets/svelte/your-component-with-decorator.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta } from '@storybook/svelte'; - -import YourComponent from './YourComponent.svelte'; -import MarginDecorator from './MarginDecorator.svelte'; - -const meta: Meta<typeof YourComponent> = { - component: YourComponent, - decorators: [() => MarginDecorator], -}; - -export default meta; -``` diff --git a/docs/snippets/svelte/your-component.js.mdx b/docs/snippets/svelte/your-component.js.mdx deleted file mode 100644 index 50e7a8288c3a..000000000000 --- a/docs/snippets/svelte/your-component.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// YourComponent.stories.js - -import YourComponent from './YourComponent.svelte'; - -//👇This default export determines where your story goes in the story list -export default { - component: YourComponent, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const FirstStory = { - render: (args) => ({ - Component: YourComponent, - props: args, - }), - args: { - //👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/svelte/your-component.native-format.mdx b/docs/snippets/svelte/your-component.native-format.mdx deleted file mode 100644 index 5579aa4d413d..000000000000 --- a/docs/snippets/svelte/your-component.native-format.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```html -{/* YourComponent.stories.svelte */} - -<script> - import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; - - import YourComponent from './YourComponent.svelte'; -</script> - -{/*👇 The title determines where your story goes in the story list */} -<Meta title="YourComponent" component={YourComponent} argTypes={{ /* Customize your args here -depending on your component */ }} /> - -<template let:args> - <button {...args} /> -</template> - -<Story name="FirstStory" args={{ /* The args you need here will depend on your component */ }} /> -``` diff --git a/docs/snippets/svelte/your-component.ts-4-9.mdx b/docs/snippets/svelte/your-component.ts-4-9.mdx deleted file mode 100644 index b22bdcd14841..000000000000 --- a/docs/snippets/svelte/your-component.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import YourComponent from './YourComponent.svelte'; - -//👇This default export determines where your story goes in the story list -const meta = { - 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/svelte/your-component.ts.mdx b/docs/snippets/svelte/your-component.ts.mdx deleted file mode 100644 index 84c1fa290c50..000000000000 --- a/docs/snippets/svelte/your-component.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import YourComponent from './YourComponent.svelte'; - -//👇This default export determines where your story goes in the story list -const meta: Meta<typeof YourComponent> = { - component: 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/vue/addon-highlight-reset.js.mdx b/docs/snippets/vue/addon-highlight-reset.js.mdx deleted file mode 100644 index 18cbab4e2dc6..000000000000 --- a/docs/snippets/vue/addon-highlight-reset.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// MyComponent.stories.js - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const ResetHighlight = { - decorators: [ - () => { - const emit = useChannel({}); - emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements - emit(HIGHLIGHT, { - elements: ['header', 'section', 'footer'], - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx b/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx deleted file mode 100644 index a20717cd633d..000000000000 --- a/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ResetHighlight: Story = { - decorators: [ - () => { - const emit = useChannel({}); - emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements - emit(HIGHLIGHT, { - elements: ['header', 'section', 'footer'], - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/addon-highlight-reset.ts.mdx b/docs/snippets/vue/addon-highlight-reset.ts.mdx deleted file mode 100644 index be52b73a62ac..000000000000 --- a/docs/snippets/vue/addon-highlight-reset.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const ResetHighlight: Story = { - decorators: [ - () => { - const emit = useChannel({}); - emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements - emit(HIGHLIGHT, { - elements: ['header', 'section', 'footer'], - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation.3.js.mdx b/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation.3.js.mdx deleted file mode 100644 index 42fa4822e0ff..000000000000 --- a/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation.3.js.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```html -{/* ApolloWrapperClient.vue */} - -<template> - <div><slot /></div> -</template> - -<script> - import { defineComponent, provide } from 'vue'; - import { DefaultApolloClient } from '@vue/apollo-composable'; - import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'; - - // Apollo client wrapper component that can be used within your app and Storybook - export default defineComponent({ - name: 'WrapperComponent', - setup() { - const httpLink = createHttpLink({ - // You should use an absolute URL here - uri: 'https://your-graphql-endpoint', - }); - const cache = new InMemoryCache(); - - const mockedClient = new ApolloClient({ - link: httpLink, - cache, - defaultOptions: { - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all', - }, - }, - }); - provide(DefaultApolloClient, mockedClient); - }, - }); -</script> -``` diff --git a/docs/snippets/vue/button-component-with-proptypes.3.js.mdx b/docs/snippets/vue/button-component-with-proptypes.3.js.mdx deleted file mode 100644 index 2129ae79e35f..000000000000 --- a/docs/snippets/vue/button-component-with-proptypes.3.js.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```html -{/* Button.vue */} - -<template> - <button type="button" :disabled="isDisabled">{{ label }}</button> -</template> - -<script> - import { reactive } from 'vue'; - - export default { - name: 'button', - props: { - /** - * Checks if the button should be disabled - */ - isDisabled: { - type: Boolean, - default: false, - required: true, - }, - /** - * The display label of the button - */ - label: { - type: String, - default: 'One', - required: true, - }, - }, - setup(props) { - props = reactive(props); - return { - /** - * What will be returned here will available to the component - * Functions referenced here will act like methods - */ - }; - // - }, - }; -</script> -``` diff --git a/docs/snippets/vue/button-component-with-proptypes.3.ts.mdx b/docs/snippets/vue/button-component-with-proptypes.3.ts.mdx deleted file mode 100644 index 11f9432ba46e..000000000000 --- a/docs/snippets/vue/button-component-with-proptypes.3.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```html -{/* Button.vue */} - -<template> - <button type="button" :disabled="isDisabled">{{ label }}</button> -</template> - -<script lang="ts"> - import { defineComponent } from 'vue'; - - export default defineComponent({ - name: 'button', - props: { - /** - * Checks if the button should be disabled - */ - isDisabled: { - type: Boolean, - default: false, - }, - /** - * The display label of the button - */ - label: { - type: String, - default: 'One', - required: true, - }, - }, - setup(props) { - /** - * What will be returned here will available to the component - * Functions referenced here will act like methods - */ - }, - }); -</script> -``` diff --git a/docs/snippets/vue/button-group-story.3.js.mdx b/docs/snippets/vue/button-group-story.3.js.mdx deleted file mode 100644 index bc008354e852..000000000000 --- a/docs/snippets/vue/button-group-story.3.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// ButtonGroup.stories.js - -import ButtonGroup from './ButtonGroup.vue'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -export default { - component: ButtonGroup, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Pair = { - render: (args) => ({ - components: { ButtonGroup }, - setup() { - return { args }; - }, - template: '<ButtonGroup v-bind="args" />', - }), - args: { - buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], - orientation: 'horizontal', - }, -}; -``` diff --git a/docs/snippets/vue/button-group-story.3.ts-4-9.mdx b/docs/snippets/vue/button-group-story.3.ts-4-9.mdx deleted file mode 100644 index 44f45718891a..000000000000 --- a/docs/snippets/vue/button-group-story.3.ts-4-9.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// ButtonGroup.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import ButtonGroup from './ButtonGroup.vue'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -const meta = { - component: ButtonGroup, -} satisfies Meta<typeof ButtonGroup>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Pair: Story = { - render: (args) => ({ - components: { ButtonGroup }, - setup() { - return { args }; - }, - template: '<ButtonGroup v-bind="args" />', - }), - args: { - buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], - orientation: 'horizontal', - }, -}; -``` diff --git a/docs/snippets/vue/button-group-story.3.ts.mdx b/docs/snippets/vue/button-group-story.3.ts.mdx deleted file mode 100644 index 5b33e4c7b011..000000000000 --- a/docs/snippets/vue/button-group-story.3.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// ButtonGroup.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import ButtonGroup from './ButtonGroup.vue'; - -//👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -const meta: Meta<typeof ButtonGroup> = { - component: ButtonGroup, -}; - -export default meta; -type Story = StoryObj<typeof ButtonGroup>; - -export const Pair: Story = { - render: (args) => ({ - components: { ButtonGroup }, - setup() { - return { args }; - }, - template: '<ButtonGroup v-bind="args" />', - }), - args: { - buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], - orientation: 'horizontal', - }, -}; -``` diff --git a/docs/snippets/vue/button-implementation.3.js.mdx b/docs/snippets/vue/button-implementation.3.js.mdx deleted file mode 100644 index bcff695e39f6..000000000000 --- a/docs/snippets/vue/button-implementation.3.js.mdx +++ /dev/null @@ -1,57 +0,0 @@ -```html -{/* Button.vue */} - -<template> - {/* the component markup implementation */} -</template> - -<script> - export default { - name: 'button', - props: { - /** - * Button contents - */ - label: { - type: String, - required: true, - }, - /** - * Is this the principal call to action on the page? - */ - primary: { - type: Boolean, - default: false, - }, - /** - * How large should the button be? - */ - size: { - type: String, - default: 'medium', - validator: function (value) { - return ['small', 'medium', 'large'].indexOf(value) !== -1; - }, - }, - /** - * What background color to use - */ - backgroundColor: { - type: String, - }, - }, - emits: ['click'], - setup(props, { emit }) { - props = reactive(props); - return { - /** - * Optional click handler - */ - onClick() { - emit('click'); - }, - }; - }, - }; -</script> -``` diff --git a/docs/snippets/vue/button-implementation.3.ts.mdx b/docs/snippets/vue/button-implementation.3.ts.mdx deleted file mode 100644 index b5f0e13e6471..000000000000 --- a/docs/snippets/vue/button-implementation.3.ts.mdx +++ /dev/null @@ -1,60 +0,0 @@ -```html -{/* Button.vue */} - -<template> - {/* the component markup implementation */} -</template> - -<script lang="ts"> - import { defineComponent, reactive } from 'vue'; - - export default defineComponent({ - // eslint-disable-next-line vue/multi-word-component-names - name: 'button', - props: { - /** - * Button contents - */ - label: { - type: String, - required: true, - }, - /** - * Is this the principal call to action on the page? - */ - primary: { - type: Boolean, - default: false, - }, - /** - * How large should the button be? - */ - size: { - type: String, - default: 'medium', - validator: function (value) { - return ['small', 'medium', 'large'].indexOf(value) !== -1; - }, - }, - /** - * What background color to use - */ - backgroundColor: { - type: String, - }, - }, - emits: ['click'], - setup(props, { emit }) { - props = reactive(props); - return { - /** - * Optional click handler - */ - onClick() { - emit('click'); - }, - }; - }, - }); -</script> -``` diff --git a/docs/snippets/vue/button-snapshot-test-portable-stories.js.mdx b/docs/snippets/vue/button-snapshot-test-portable-stories.js.mdx deleted file mode 100644 index 06d28200e454..000000000000 --- a/docs/snippets/vue/button-snapshot-test-portable-stories.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// __tests__/Button.spec.js|ts -// @vitest-environment jsdom - -import { expect, test } from 'vitest'; - -import { render } from '@testing-library/vue'; - -import { composeStories } from '@storybook/vue3'; - -import * as stories from '../stories/Button.stories'; - -const { Primary } = composeStories(stories); -test('Button snapshot', async () => { - const mounted = render(Primary()); - expect(mounted.container).toMatchSnapshot(); -}); -``` diff --git a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx deleted file mode 100644 index 37dce06185a4..000000000000 --- a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -import { action } from '@storybook/addon-actions'; - -export default { - component: Button, -}; - -export const Text = { - render: (args) => ({ - components: { Button }, - setup() { - return { - ...args, - onClick: action('clicked'), - }; - }, - template: '<Button @click="onClick" :label="label" />', - }), - args: { - label: 'Hello', - }, -}; -``` diff --git a/docs/snippets/vue/button-story-click-handler-args.3.ts-4-9.mdx b/docs/snippets/vue/button-story-click-handler-args.3.ts-4-9.mdx deleted file mode 100644 index 16b2306a9930..000000000000 --- a/docs/snippets/vue/button-story-click-handler-args.3.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -import { action } from '@storybook/addon-actions'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { - ...args, - onClick: action('clicked'), - }; - }, - template: '<Button @click="onClick" :label="label" />', - }), - args: { - label: 'Hello', - }, -}; -``` diff --git a/docs/snippets/vue/button-story-click-handler-args.3.ts.mdx b/docs/snippets/vue/button-story-click-handler-args.3.ts.mdx deleted file mode 100644 index 8aaf4e7241f6..000000000000 --- a/docs/snippets/vue/button-story-click-handler-args.3.ts.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -import { action } from '@storybook/addon-actions'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Primary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { - ...args, - onClick: action('clicked'), - }; - }, - template: '<Button @click="onClick" :label="label" />', - }), - args: { - label: 'Hello', - }, -}; -``` diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx deleted file mode 100644 index e0895626c1a3..000000000000 --- a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, - argTypes: { - onClick: {}, - }, -}; - -export const Text = { - args: {}, -}; -``` diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.ts-4-9.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.ts-4-9.mdx deleted file mode 100644 index b6cd7e589631..000000000000 --- a/docs/snippets/vue/button-story-click-handler-simplificated.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - title: 'Button', - component: Button, - argTypes: { - onClick: {}, - }, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Text: Story = { - args: {}, -}; -``` diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.ts.mdx deleted file mode 100644 index 0b8d74045f2e..000000000000 --- a/docs/snippets/vue/button-story-click-handler-simplificated.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof Button> = { - title: 'Button', - component: Button, - argTypes: { - onClick: {}, - }, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Text: Story = { - args: {}, -}; -``` diff --git a/docs/snippets/vue/button-story-click-handler.3.js.mdx b/docs/snippets/vue/button-story-click-handler.3.js.mdx deleted file mode 100644 index bb97eb5b6222..000000000000 --- a/docs/snippets/vue/button-story-click-handler.3.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -import { action } from '@storybook/addon-actions'; - -export default { - component: Button, -}; - -export const Text = { - render: () => ({ - components: { Button }, - setup() { - return { - onClick: action('clicked'), - }; - }, - template: '<Button label="Hello" @click="onClick" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story-click-handler.3.ts-4-9.mdx b/docs/snippets/vue/button-story-click-handler.3.ts-4-9.mdx deleted file mode 100644 index e2044f58f753..000000000000 --- a/docs/snippets/vue/button-story-click-handler.3.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -import { action } from '@storybook/addon-actions'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Text: Story = { - render: () => ({ - components: { Button }, - setup() { - return { - onClick: action('clicked'), - }; - }, - template: '<Button label="Hello" @click="onClick" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story-click-handler.3.ts.mdx b/docs/snippets/vue/button-story-click-handler.3.ts.mdx deleted file mode 100644 index c47f3c18cd13..000000000000 --- a/docs/snippets/vue/button-story-click-handler.3.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -import { action } from '@storybook/addon-actions'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Text: Story = { - render: () => ({ - components: { Button }, - setup() { - return { - onClick: action('clicked'), - }; - }, - template: '<Button label="Hello" @click="onClick" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story-component-args-primary.js.mdx b/docs/snippets/vue/button-story-component-args-primary.js.mdx deleted file mode 100644 index 836df2f8d7e0..000000000000 --- a/docs/snippets/vue/button-story-component-args-primary.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, - //👇 Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - args: { - //👇 Now all Button stories will be primary. - primary: true, - }, -}; -``` diff --git a/docs/snippets/vue/button-story-component-args-primary.ts-4-9.mdx b/docs/snippets/vue/button-story-component-args-primary.ts-4-9.mdx deleted file mode 100644 index 39f8a3dc37ee..000000000000 --- a/docs/snippets/vue/button-story-component-args-primary.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - 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; -``` diff --git a/docs/snippets/vue/button-story-component-args-primary.ts.mdx b/docs/snippets/vue/button-story-component-args-primary.ts.mdx deleted file mode 100644 index 7b6e9c69cefe..000000000000 --- a/docs/snippets/vue/button-story-component-args-primary.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof Button> = { - component: Button, - //👇 Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - args: { - //👇 Now all Button stories will be primary. - primary: true, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/vue/button-story-component-decorator.js.mdx b/docs/snippets/vue/button-story-component-decorator.js.mdx deleted file mode 100644 index 90257aa9c660..000000000000 --- a/docs/snippets/vue/button-story-component-decorator.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, - decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })], -}; -``` diff --git a/docs/snippets/vue/button-story-component-decorator.ts-4-9.mdx b/docs/snippets/vue/button-story-component-decorator.ts-4-9.mdx deleted file mode 100644 index f2442fe3c1eb..000000000000 --- a/docs/snippets/vue/button-story-component-decorator.ts-4-9.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - component: Button, - decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })], -} satisfies Meta<typeof Button>; - -export default meta; -``` diff --git a/docs/snippets/vue/button-story-component-decorator.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts.mdx deleted file mode 100644 index cd4dfb6585c4..000000000000 --- a/docs/snippets/vue/button-story-component-decorator.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof Button> = { - component: Button, - decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })], -}; - -export default meta; -``` diff --git a/docs/snippets/vue/button-story-decorator.js.mdx b/docs/snippets/vue/button-story-decorator.js.mdx deleted file mode 100644 index 7777897e73f5..000000000000 --- a/docs/snippets/vue/button-story-decorator.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => ({ - components: { Button }, - template: '<Button primary label="Hello World" />', - }), - decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })], -}; -``` diff --git a/docs/snippets/vue/button-story-decorator.ts-4-9.mdx b/docs/snippets/vue/button-story-decorator.ts-4-9.mdx deleted file mode 100644 index 41f1d37a3e94..000000000000 --- a/docs/snippets/vue/button-story-decorator.ts-4-9.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - components: { Button }, - template: '<Button primary label="Hello World" />', - }), - decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })], -}; -``` diff --git a/docs/snippets/vue/button-story-decorator.ts.mdx b/docs/snippets/vue/button-story-decorator.ts.mdx deleted file mode 100644 index 54b26c0500ca..000000000000 --- a/docs/snippets/vue/button-story-decorator.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - components: { Button }, - template: '<Button primary label="Hello World" />', - }), - decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })], -}; -``` diff --git a/docs/snippets/vue/button-story-default-export-with-component.js.mdx b/docs/snippets/vue/button-story-default-export-with-component.js.mdx deleted file mode 100644 index 5c7b45d8dec4..000000000000 --- a/docs/snippets/vue/button-story-default-export-with-component.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, -}; -``` diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-4-9.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-4-9.mdx deleted file mode 100644 index 89e9c8a1686b..000000000000 --- a/docs/snippets/vue/button-story-default-export-with-component.ts-4-9.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -``` diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts.mdx deleted file mode 100644 index b5d6a923937a..000000000000 --- a/docs/snippets/vue/button-story-default-export-with-component.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -``` diff --git a/docs/snippets/vue/button-story-rename-story.js.mdx b/docs/snippets/vue/button-story-rename-story.js.mdx deleted file mode 100644 index a3fce535ca87..000000000000 --- a/docs/snippets/vue/button-story-rename-story.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js -import Button from './Button.vue'; - -export default { - component: Button, -}; - -export const Primary = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/vue/button-story-rename-story.ts-4-9.mdx b/docs/snippets/vue/button-story-rename-story.ts-4-9.mdx deleted file mode 100644 index 81f7f9ab1fea..000000000000 --- a/docs/snippets/vue/button-story-rename-story.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Primary: Story = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/vue/button-story-rename-story.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts.mdx deleted file mode 100644 index 002fc220952c..000000000000 --- a/docs/snippets/vue/button-story-rename-story.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof Button> = { - component: Button, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Primary: Story = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/vue/button-story-using-args.3.js.mdx b/docs/snippets/vue/button-story-using-args.3.js.mdx deleted file mode 100644 index 0d37c3922002..000000000000 --- a/docs/snippets/vue/button-story-using-args.3.js.mdx +++ /dev/null @@ -1,56 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - backgroundColor: '#ff0', - label: 'Button', - }, -}; - -export const Secondary = { - args: { - ...Primary.args, - label: '😄👍😍💯', - }, - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), -}; - -export const Tertiary = { - args: { - ...Primary.args, - label: '📚📕📈🤓', - }, - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story-using-args.3.ts-4-9.mdx b/docs/snippets/vue/button-story-using-args.3.ts-4-9.mdx deleted file mode 100644 index 115cc60552b8..000000000000 --- a/docs/snippets/vue/button-story-using-args.3.ts-4-9.mdx +++ /dev/null @@ -1,61 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - background: '#ff0', - label: 'Button', - }, -}; - -export const Secondary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - ...Primary.args, - label: '😄👍😍💯', - }, -}; - -export const Tertiary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - ...Primary.args, - label: '📚📕📈🤓', - }, -}; -``` diff --git a/docs/snippets/vue/button-story-using-args.3.ts.mdx b/docs/snippets/vue/button-story-using-args.3.ts.mdx deleted file mode 100644 index 5e3f566a32c3..000000000000 --- a/docs/snippets/vue/button-story-using-args.3.ts.mdx +++ /dev/null @@ -1,61 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - background: '#ff0', - label: 'Button', - }, -}; - -export const Secondary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - ...Primary.args, - label: '😄👍😍💯', - }, -}; - -export const Tertiary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - ...Primary.args, - label: '📚📕📈🤓', - }, -}; -``` diff --git a/docs/snippets/vue/button-story-with-addon-example.js.mdx b/docs/snippets/vue/button-story-with-addon-example.js.mdx deleted file mode 100644 index 96508489cf4c..000000000000 --- a/docs/snippets/vue/button-story-with-addon-example.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - component: Button, - //👇 Creates specific parameters for the story - parameters: { - myAddon: { - data: 'This data is passed to the addon', - }, - }, -}; - -export const Basic = { - render: () => ({ - components: { Button }, - template: '<Button label="Hello" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx deleted file mode 100644 index aabbb3de754f..000000000000 --- a/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: '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/api/csf - * to learn how to use render functions. - */ -export const Basic: Story = { - render: () => ({ - components: { Button }, - template: '<Button label="Hello" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story-with-addon-example.ts.mdx b/docs/snippets/vue/button-story-with-addon-example.ts.mdx deleted file mode 100644 index 855176b847ff..000000000000 --- a/docs/snippets/vue/button-story-with-addon-example.ts.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof Button> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#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/api/csf - * to learn how to use render functions. - */ -export const Basic: Story = { - render: () => ({ - components: { Button }, - template: '<Button label="Hello" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story-with-args.3.js.mdx b/docs/snippets/vue/button-story-with-args.3.js.mdx deleted file mode 100644 index 1bfc58e1ae2f..000000000000 --- a/docs/snippets/vue/button-story-with-args.3.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/vue/button-story-with-args.3.ts-4-9.mdx b/docs/snippets/vue/button-story-with-args.3.ts-4-9.mdx deleted file mode 100644 index 09d9252fcb2f..000000000000 --- a/docs/snippets/vue/button-story-with-args.3.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/vue/button-story-with-args.3.ts.mdx b/docs/snippets/vue/button-story-with-args.3.ts.mdx deleted file mode 100644 index 6c7c65c594c9..000000000000 --- a/docs/snippets/vue/button-story-with-args.3.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/vue/button-story-with-emojis.js.mdx b/docs/snippets/vue/button-story-with-emojis.js.mdx deleted file mode 100644 index 7ae7e6b66d0c..000000000000 --- a/docs/snippets/vue/button-story-with-emojis.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => ({ - components: { Button }, - template: '<Button backgroundColor="#ff0" label="Button" />', - }), -}; - -export const Secondary = { - render: () => ({ - components: { Button }, - template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />', - }), -}; - -export const Tertiary = { - render: () => ({ - components: { Button }, - template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />', - }), -``` diff --git a/docs/snippets/vue/button-story-with-emojis.ts-4-9.mdx b/docs/snippets/vue/button-story-with-emojis.ts-4-9.mdx deleted file mode 100644 index 72d3d7c6ddcd..000000000000 --- a/docs/snippets/vue/button-story-with-emojis.ts-4-9.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - component: Button, -} satisfies Meta<typeof 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - components: { Button }, - template: '<Button background="#ff0" label="Button" />', - }), -}; - -export const Secondary: Story = { - render: () => ({ - components: { Button }, - template: '<Button background="#ff0" label="😄👍😍💯" />', - }), -}; - -export const Tertiary: Story = { - render: () => ({ - components: { Button }, - template: '<Button background="#ff0" label="📚📕📈🤓" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story-with-emojis.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts.mdx deleted file mode 100644 index 1aabd590de60..000000000000 --- a/docs/snippets/vue/button-story-with-emojis.ts.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - components: { Button }, - template: '<Button background="#ff0" label="Button" />', - }), -}; - -export const Secondary: Story = { - render: () => ({ - components: { Button }, - template: '<Button background="#ff0" label="😄👍😍💯" />', - }), -}; - -export const Tertiary: Story = { - render: () => ({ - components: { Button }, - template: '<Button background="#ff0" label="📚📕📈🤓" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story.js.mdx b/docs/snippets/vue/button-story.js.mdx deleted file mode 100644 index 6447138b12ef..000000000000 --- a/docs/snippets/vue/button-story.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - component: Button, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => ({ - components: { Button }, - template: '<Button primary label="Button" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story.ts-4-9.mdx b/docs/snippets/vue/button-story.ts-4-9.mdx deleted file mode 100644 index 9b3cebfd9766..000000000000 --- a/docs/snippets/vue/button-story.ts-4-9.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - components: { Button }, - template: '<Button primary label="Button" />', - }), -}; -``` diff --git a/docs/snippets/vue/button-story.ts.mdx b/docs/snippets/vue/button-story.ts.mdx deleted file mode 100644 index fd5321a92b11..000000000000 --- a/docs/snippets/vue/button-story.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => ({ - components: { Button }, - template: '<Button primary label="Button" />', - }), -}; -``` diff --git a/docs/snippets/vue/component-story-custom-args-complex.js.mdx b/docs/snippets/vue/component-story-custom-args-complex.js.mdx deleted file mode 100644 index a95a1447f0df..000000000000 --- a/docs/snippets/vue/component-story-custom-args-complex.js.mdx +++ /dev/null @@ -1,47 +0,0 @@ -```js -// YourComponent.stories.js - -import YourComponent from './YourComponent.vue'; - -export default { - 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'], - }, - }, -}; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export const ExampleStory = { - render: ({ args }) => { - const { propertyA, propertyB } = args; - //👇 Assigns the function result to a variable - const functionResult = someFunction(propertyA, propertyB); - return { - components: { YourComponent }, - setup() { - return { - ...args, - //👇 Replaces arg variable with the override (without the need of mutation) - someProperty: functionResult, - }; - }, - template: - '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>', - }; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/vue/component-story-custom-args-complex.ts-4-9.mdx b/docs/snippets/vue/component-story-custom-args-complex.ts-4-9.mdx deleted file mode 100644 index ce7d870381b6..000000000000 --- a/docs/snippets/vue/component-story-custom-args-complex.ts-4-9.mdx +++ /dev/null @@ -1,52 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import YourComponent from './YourComponent.vue'; - -const meta = { - 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'], - }, - }, -} satisfies Meta<typeof YourComponent>; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ExampleStory: Story = { - render: ({ args }) => { - const { propertyA, propertyB } = args; - //👇 Assigns the function result to a variable - const functionResult = someFunction(propertyA, propertyB); - return { - components: { YourComponent }, - setup() { - return { - ...args, - //👇 Replaces arg variable with the override (without the need of mutation) - someProperty: functionResult, - }; - }, - template: - '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>', - }; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/vue/component-story-custom-args-complex.ts.mdx b/docs/snippets/vue/component-story-custom-args-complex.ts.mdx deleted file mode 100644 index f496cfc58644..000000000000 --- a/docs/snippets/vue/component-story-custom-args-complex.ts.mdx +++ /dev/null @@ -1,52 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import YourComponent from './YourComponent.vue'; - -const meta: Meta<typeof 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'], - }, - }, -}; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export default meta; -type Story = StoryObj<typeof YourComponent>; - -export const ExampleStory: Story = { - render: ({ args }) => { - const { propertyA, propertyB } = args; - //👇 Assigns the function result to a variable - const functionResult = someFunction(propertyA, propertyB); - return { - components: { YourComponent }, - setup() { - return { - ...args, - //👇 Replaces arg variable with the override (without the need of mutation) - someProperty: functionResult, - }; - }, - template: - '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>', - }; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/vue/component-story-figma-integration.js.mdx b/docs/snippets/vue/component-story-figma-integration.js.mdx deleted file mode 100644 index 0ca8871dc1e6..000000000000 --- a/docs/snippets/vue/component-story-figma-integration.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -export default { - component: MyComponent, -}; - -export const Example = { - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/Sample-File', - }, - }, -}; -``` diff --git a/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx deleted file mode 100644 index 83905650db3e..000000000000 --- a/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -const meta = { - component: MyComponent, -} 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/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx deleted file mode 100644 index 4cdf812fc09b..000000000000 --- a/docs/snippets/vue/component-story-figma-integration.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -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/vue/component-story-highlight-addon.js.mdx b/docs/snippets/vue/component-story-highlight-addon.js.mdx deleted file mode 100644 index 3781ac9d3fc5..000000000000 --- a/docs/snippets/vue/component-story-highlight-addon.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// MyComponent.stories.js - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const Highlighted = { - decorators: [ - () => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx deleted file mode 100644 index 4c16542861a9..000000000000 --- a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Highlighted: Story = { - decorators: [ - () => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/component-story-highlight-addon.ts.mdx b/docs/snippets/vue/component-story-highlight-addon.ts.mdx deleted file mode 100644 index 4e7cec8c0a87..000000000000 --- a/docs/snippets/vue/component-story-highlight-addon.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const Highlighted: Story = { - decorators: [ - () => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-cdn.js.mdx b/docs/snippets/vue/component-story-static-asset-cdn.js.mdx deleted file mode 100644 index b3561688edd5..000000000000 --- a/docs/snippets/vue/component-story-static-asset-cdn.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const WithAnImage = { - render: () => ({ - template: - '<img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder"/>', - }), -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-cdn.ts-4-9.mdx b/docs/snippets/vue/component-story-static-asset-cdn.ts-4-9.mdx deleted file mode 100644 index 0403b1076439..000000000000 --- a/docs/snippets/vue/component-story-static-asset-cdn.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const WithAnImage: Story = { - render: () => ({ - template: - '<img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder"/>', - }), -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-cdn.ts.mdx b/docs/snippets/vue/component-story-static-asset-cdn.ts.mdx deleted file mode 100644 index 53c2ff0089fc..000000000000 --- a/docs/snippets/vue/component-story-static-asset-cdn.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const WithAnImage: Story = { - render: () => ({ - template: - '<img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder"/>', - }), -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx b/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx deleted file mode 100644 index 854c557620f5..000000000000 --- a/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -import imageFile from './static/image.png'; - -export default { - component: MyComponent, -}; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export const WithAnImage = { - render: () => ({ - setup() { - //👇 Returns the content of the image object create above. - return { image }; - }, - template: `<img v-bind="image"/>`, - }), -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-with-import.3.ts-4-9.mdx b/docs/snippets/vue/component-story-static-asset-with-import.3.ts-4-9.mdx deleted file mode 100644 index 87773ea8b590..000000000000 --- a/docs/snippets/vue/component-story-static-asset-with-import.3.ts-4-9.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -import imageFile from './static/image.png'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const WithAnImage: Story = { - render: () => ({ - setup() { - //👇 Returns the content of the image object create above. - return { image }; - }, - template: `<img v-bind="image"/>`, - }), -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-with-import.3.ts.mdx b/docs/snippets/vue/component-story-static-asset-with-import.3.ts.mdx deleted file mode 100644 index 18ccfbdaa60d..000000000000 --- a/docs/snippets/vue/component-story-static-asset-with-import.3.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -import imageFile from './static/image.png'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const WithAnImage: Story = { - render: () => ({ - setup() { - //👇 Returns the content of the image object create above. - return { image }; - }, - template: `<img v-bind="image"/>`, - }), -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-without-import.js.mdx b/docs/snippets/vue/component-story-static-asset-without-import.js.mdx deleted file mode 100644 index 9ba58a8d7de2..000000000000 --- a/docs/snippets/vue/component-story-static-asset-without-import.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -// Assume image.png is located in the "public" directory. -export const WithAnImage = { - render: () => ({ - template: '<img src="image.png" alt="my image" />', - }), -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-without-import.ts-4-9.mdx b/docs/snippets/vue/component-story-static-asset-without-import.ts-4-9.mdx deleted file mode 100644 index 9abf2c9121cd..000000000000 --- a/docs/snippets/vue/component-story-static-asset-without-import.ts-4-9.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const WithAnImage: Story = { - render: () => ({ - template: '<img src="image.png" alt="my image" />', - }), -}; -``` diff --git a/docs/snippets/vue/component-story-static-asset-without-import.ts.mdx b/docs/snippets/vue/component-story-static-asset-without-import.ts.mdx deleted file mode 100644 index 540c5ba6270f..000000000000 --- a/docs/snippets/vue/component-story-static-asset-without-import.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const WithAnImage: Story = { - render: () => ({ - template: '<img src="image.png" alt="my image" />', - }), -}; -``` diff --git a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx deleted file mode 100644 index ffbf245d1c35..000000000000 --- a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.vue'; - -export default { - 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/vue/component-story-with-accessibility.3.ts-4-9.mdx b/docs/snippets/vue/component-story-with-accessibility.3.ts-4-9.mdx deleted file mode 100644 index e7ce6da59b42..000000000000 --- a/docs/snippets/vue/component-story-with-accessibility.3.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta = { - 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/vue/component-story-with-accessibility.3.ts.mdx b/docs/snippets/vue/component-story-with-accessibility.3.ts.mdx deleted file mode 100644 index 4f6b726eb855..000000000000 --- a/docs/snippets/vue/component-story-with-accessibility.3.ts.mdx +++ /dev/null @@ -1,46 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -const meta: Meta<typeof Button> = { - component: Button, - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -// This is an accessible story -export const Accessible: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - primary: false, - label: 'Button', - }, -}; -// This is not -export const Inaccessible: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), - args: { - ...Accessible.args, - backgroundColor: 'red', - }, -}; -``` diff --git a/docs/snippets/vue/component-story-with-custom-render-function.js.mdx b/docs/snippets/vue/component-story-with-custom-render-function.js.mdx deleted file mode 100644 index 44b1314936c1..000000000000 --- a/docs/snippets/vue/component-story-with-custom-render-function.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js - -import Layout from './Layout.vue'; - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -// This story uses a render function to fully control how the component renders. -export const Example = { - render: () => ({ - components: { Layout, MyComponent }, - template: ` - <Layout> - <header> - <h1>Example</h1> - </header> - <article> - <MyComponent /> - </article> - </Layout> - `, - }), -}; -``` diff --git a/docs/snippets/vue/component-story-with-custom-render-function.ts-4-9.mdx b/docs/snippets/vue/component-story-with-custom-render-function.ts-4-9.mdx deleted file mode 100644 index 23d5723c02d9..000000000000 --- a/docs/snippets/vue/component-story-with-custom-render-function.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Layout from './Layout.vue'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - 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: () => ({ - components: { Layout, MyComponent }, - template: ` - <Layout> - <header> - <h1>Example</h1> - </header> - <article> - <MyComponent /> - </article> - </Layout> - `, - }), -}; -``` diff --git a/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx deleted file mode 100644 index 396a3e482e07..000000000000 --- a/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Layout from './Layout.vue'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof 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: () => ({ - components: { Layout, MyComponent }, - template: ` - <Layout> - <header> - <h1>Example</h1> - </header> - <article> - <MyComponent /> - </article> - </Layout> - `, - }), -}; -``` diff --git a/docs/snippets/vue/component-test-with-testing-library.3.js.mdx b/docs/snippets/vue/component-test-with-testing-library.3.js.mdx deleted file mode 100644 index ce1ae6871a11..000000000000 --- a/docs/snippets/vue/component-test-with-testing-library.3.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// tests/Form.test.js - -import { fireEvent, render, screen } from '@testing-library/vue'; - -import { composeStory } from '@storybook/vue3'; - -import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here. - -const FormError = composeStory(InvalidFormStory, Meta); - -test('Checks if the form is valid', () => { - render(FormError()); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/vue/component-test-with-testing-library.3.ts.mdx b/docs/snippets/vue/component-test-with-testing-library.3.ts.mdx deleted file mode 100644 index dfab5b1b1345..000000000000 --- a/docs/snippets/vue/component-test-with-testing-library.3.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// tests/Form.test.ts - -import { fireEvent, render, screen } from '@testing-library/vue'; - -import { composeStory } from '@storybook/vue3'; - -import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here. - -const FormError = composeStory(InvalidFormStory, Meta); - -test('Checks if the form is valid', () => { - render(FormError()); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/vue/csf-2-example-starter.3.js.mdx b/docs/snippets/vue/csf-2-example-starter.3.js.mdx deleted file mode 100644 index 763947d22cc3..000000000000 --- a/docs/snippets/vue/csf-2-example-starter.3.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// CSF 2 - -import Button from './Button.vue'; - -export default { - title: 'Button', - component: Button, -}; - -export const Primary = (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', -}); -Primary.args = { primary: true }; -``` diff --git a/docs/snippets/vue/csf-2-example-starter.3.ts.mdx b/docs/snippets/vue/csf-2-example-starter.3.ts.mdx deleted file mode 100644 index aa7e5987c725..000000000000 --- a/docs/snippets/vue/csf-2-example-starter.3.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// CSF 2 - -import { Meta, StoryFn } from '@storybook/vue3'; - -import Button from './Button.vue'; - -export default { - title: 'Button', - component: Button, -} as Meta<typeof Button>; - -export const Primary: StoryFn<typeof Button> = (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', -}); -Primary.args = { primary: true }; -``` diff --git a/docs/snippets/vue/csf-2-example-story.3.js.mdx b/docs/snippets/vue/csf-2-example-story.3.js.mdx deleted file mode 100644 index b03868b1a26a..000000000000 --- a/docs/snippets/vue/csf-2-example-story.3.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// CSF 2 - -// Other imports and story implementation -export const Default = (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', -}); -``` diff --git a/docs/snippets/vue/csf-2-example-story.3.ts.mdx b/docs/snippets/vue/csf-2-example-story.3.ts.mdx deleted file mode 100644 index fed44dd1a1c8..000000000000 --- a/docs/snippets/vue/csf-2-example-story.3.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// CSF 2 - -// Other imports and story implementation -export const Default: StoryFn<typeof Button> = (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', -}); -``` diff --git a/docs/snippets/vue/csf-3-example-render.3.js.mdx b/docs/snippets/vue/csf-3-example-render.3.js.mdx deleted file mode 100644 index 9396c61b4d3f..000000000000 --- a/docs/snippets/vue/csf-3-example-render.3.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// CSF 3 - explicit render function - -// Other imports and story implementation -export const Default = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), -}; -``` diff --git a/docs/snippets/vue/csf-3-example-render.3.ts.mdx b/docs/snippets/vue/csf-3-example-render.3.ts.mdx deleted file mode 100644 index a331792b577a..000000000000 --- a/docs/snippets/vue/csf-3-example-render.3.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// CSF 3 - explicit render function - -// Other imports and story implementation -export const Default: Story = { - render: (args) => ({ - components: { Button }, - setup() { - return { args }; - }, - template: '<Button v-bind="args" />', - }), -}; -``` diff --git a/docs/snippets/vue/csf-3-example-starter.ts-4-9.mdx b/docs/snippets/vue/csf-3-example-starter.ts-4-9.mdx deleted file mode 100644 index f33bfd299044..000000000000 --- a/docs/snippets/vue/csf-3-example-starter.ts-4-9.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// CSF 3 - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -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/vue/csf-3-example-starter.ts.mdx b/docs/snippets/vue/csf-3-example-starter.ts.mdx deleted file mode 100644 index e13b2470da4e..000000000000 --- a/docs/snippets/vue/csf-3-example-starter.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// CSF 3 - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Button from './Button.vue'; - -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/vue/decorator-parameterized-in-preview.js.mdx b/docs/snippets/vue/decorator-parameterized-in-preview.js.mdx deleted file mode 100644 index be2c87827ef0..000000000000 --- a/docs/snippets/vue/decorator-parameterized-in-preview.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// .storybook/preview.js -export default { - decorators: [ - // 👇 Defining the decorator in the preview file applies it to all stories - (_, { parameters }) => { - // 👇 Make it configurable by reading from parameters - const { pageLayout } = parameters; - switch (pageLayout) { - case 'page': - // Your page layout is probably a little more complex than this ;) - return { template: '<div class="page-layout"><story/></div>' }; - case 'page-mobile': - return { template: '<div class="page-mobile-layout"><story/></div>' }; - case default: - // In the default case, don't apply a layout - return { template: '<story/>' }; - } - }, - ], -}; -``` diff --git a/docs/snippets/vue/decorator-parameterized-in-preview.ts.mdx b/docs/snippets/vue/decorator-parameterized-in-preview.ts.mdx deleted file mode 100644 index c65f8be884e7..000000000000 --- a/docs/snippets/vue/decorator-parameterized-in-preview.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// .storybook/preview.ts -import type { Preview } from '@storybook/vue3'; - -const preview: Preview = { - decorators: [ - // 👇 Defining the decorator in the preview file applies it to all stories - (_, { parameters }) => { - // 👇 Make it configurable by reading from parameters - const { pageLayout } = parameters; - switch (pageLayout) { - case 'page': - // Your page layout is probably a little more complex than this ;) - return { template: '<div class="page-layout"><story/></div>' }; - case 'page-mobile': - return { template: '<div class="page-mobile-layout"><story/></div>' }; - case default: - // In the default case, don't apply a layout - return { template: '<story/>' }; - } - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/vue/document-screen-fetch.3.js.mdx b/docs/snippets/vue/document-screen-fetch.3.js.mdx deleted file mode 100644 index f716e859fa8b..000000000000 --- a/docs/snippets/vue/document-screen-fetch.3.js.mdx +++ /dev/null @@ -1,50 +0,0 @@ -```html -{/* YourPage.vue */} - -<template> - <div v-if="!loading && data && data.subdocuments.length"> - <PageLayout :user="data.user"> - <DocumentHeader :document="data.document" /> - <DocumentList :documents="data.subdocuments" /> - </PageLayout> - </div> - <p v-if="loading">Loading...</p> - <p v-if="error">There was an error fetching the data!</p> -</template> -<script> - import { ref } from 'vue'; - - import PageLayout from './PageLayout'; - import DocumentHeader from './DocumentHeader'; - import DocumentList from './DocumentList'; - - export default { - name: 'DocumentScreen', - setup() { - const data = ref(null); - const loading = ref(true); - const error = ref(null); - fetch('https://your-restful-endpoint') - .then((res) => { - if (!res.ok) { - error.value = res.statusText; - } - return res; - }) - .then((res) => res.json()) - .then((requestData) => { - data.value = requestData; - loading.value = false; - }) - .catch(() => { - error.value = 'error'; - }); - return { - error, - loading, - data, - }; - }, - }; -</script> -``` diff --git a/docs/snippets/vue/document-screen-fetch.3.ts.mdx b/docs/snippets/vue/document-screen-fetch.3.ts.mdx deleted file mode 100644 index eb38e54c6519..000000000000 --- a/docs/snippets/vue/document-screen-fetch.3.ts.mdx +++ /dev/null @@ -1,54 +0,0 @@ -```html -{/* YourPage.vue */} - -<template> - <div v-if="!loading && data && data.subdocuments.length"> - <PageLayout :user="data.user"> - <DocumentHeader :document="data.document" /> - <DocumentList :documents="data.subdocuments" /> - </PageLayout> - </div> - <p v-if="loading">Loading...</p> - <p v-if="error">There was an error fetching the data!</p> -</template> -<script lang="ts"> - import { defineComponent, ref } from 'vue'; - import PageLayout from './PageLayout'; - import DocumentHeader from './DocumentHeader'; - import DocumentList from './DocumentList'; - - export default defineComponent({ - name: 'SampleRestComponent', - components: { - PageLayout, - DocumentHeader, - DocumentList, - }, - setup() { - const data = ref(null); - const loading = ref(true); - const error = ref(null); - fetch('https://your-restful-endpoint') - .then((res) => { - if (!res.ok) { - error.value = res.statusText; - } - return res; - }) - .then((res) => res.json()) - .then((requestData) => { - data.value = requestData; - loading.value = false; - }) - .catch(() => { - error.value = 'error'; - }); - return { - error, - loading, - data, - }; - }, - }); -</script> -``` diff --git a/docs/snippets/vue/document-screen-with-graphql.3.js.mdx b/docs/snippets/vue/document-screen-with-graphql.3.js.mdx deleted file mode 100644 index 385605c2ac0f..000000000000 --- a/docs/snippets/vue/document-screen-with-graphql.3.js.mdx +++ /dev/null @@ -1,58 +0,0 @@ -```html -{/* YourPage.vue */} - -<template> - <div v-if="loading">Loading...</div> - - <div v-else-if="error">There was an error fetching the data!</div> - - <div v-if="!loading && data && result.subdocuments.length"> - <PageLayout :user="data.user"> - <DocumentHeader :document="result.document" /> - <DocumentList :documents="result.subdocuments" /> - </PageLayout> - </div> -</template> - -<script> - import PageLayout from './PageLayout'; - import DocumentHeader from './DocumentHeader'; - import DocumentList from './DocumentList'; - - import gql from 'graphql-tag'; - import { useQuery } from '@vue/apollo-composable'; - - export default { - name: 'DocumentScreen', - setup() { - const { result, loading, error } = useQuery(gql` - query AllInfoQuery { - user { - userID - name - } - document { - id - userID - title - brief - status - } - subdocuments { - id - userID - title - content - status - } - } - `); - return { - result, - loading, - error, - }; - }, - }; -</script> -``` diff --git a/docs/snippets/vue/document-screen-with-graphql.3.ts.mdx b/docs/snippets/vue/document-screen-with-graphql.3.ts.mdx deleted file mode 100644 index c03971fb5f23..000000000000 --- a/docs/snippets/vue/document-screen-with-graphql.3.ts.mdx +++ /dev/null @@ -1,60 +0,0 @@ -```html -{/* YourPage.vue */} - -<template> - <div v-if="loading">Loading...</div> - - <div v-else-if="error">There was an error fetching the data!</div> - - <div v-if="!loading && data && result.subdocuments.length"> - <PageLayout :user="data.user"> - <DocumentHeader :document="result.document" /> - <DocumentList :documents="result.subdocuments" /> - </PageLayout> - </div> -</template> - -<script lang="ts"> - import PageLayout from './PageLayout'; - import DocumentHeader from './DocumentHeader'; - import DocumentList from './DocumentList'; - - import gql from 'graphql-tag'; - import { useQuery } from '@vue/apollo-composable'; - import { defineComponent } from 'vue'; - - export default defineComponent({ - name: 'DocumentScreen', - setup() { - const { result, loading, error } = useQuery(gql` - query AllInfoQuery { - user { - userID - name - } - document { - id - userID - title - brief - status - } - subdocuments { - id - userID - title - content - status - } - } - `); - - return { - result, - loading, - error, - }; - }, - }); -</script> -``` diff --git a/docs/snippets/vue/highlight-addon-custom-style.js.mdx b/docs/snippets/vue/highlight-addon-custom-style.js.mdx deleted file mode 100644 index 443a8476a384..000000000000 --- a/docs/snippets/vue/highlight-addon-custom-style.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const StyledHighlight = { - decorators: [ - () => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - color: 'blue', - style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx deleted file mode 100644 index 155b04789e73..000000000000 --- a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const StyledHighlight: Story = { - decorators: [ - () => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - color: 'blue', - style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx deleted file mode 100644 index 4bd686676206..000000000000 --- a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const StyledHighlight: Story = { - decorators: [ - () => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - color: 'blue', - style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' - }); - return { - template: '<story />', - }; - }, - ], -}; -``` diff --git a/docs/snippets/vue/histogram-story.3.js.mdx b/docs/snippets/vue/histogram-story.3.js.mdx deleted file mode 100644 index ced9fabe2c93..000000000000 --- a/docs/snippets/vue/histogram-story.3.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// Histogram.stories.js - -import Histogram from './Histogram.vue'; - -export default { - component: Histogram, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Default = { - render: (args) => ({ - components: { Histogram }, - setup() { - return { args }; - }, - template: '<Histogram v-bind="args" />', - }), - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/vue/histogram-story.3.ts-4-9.mdx b/docs/snippets/vue/histogram-story.3.ts-4-9.mdx deleted file mode 100644 index 0b681b147295..000000000000 --- a/docs/snippets/vue/histogram-story.3.ts-4-9.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// Histogram.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Histogram from './Histogram.vue'; - -const meta = { - component: Histogram, -} satisfies Meta<typeof Histogram>; - -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/api/csf - * to learn how to use render functions. - */ -export const Default: Story = { - render: (args) => ({ - components: { Histogram }, - setup() { - return { args }; - }, - template: '<Histogram v-bind="args" />', - }), - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/vue/histogram-story.3.ts.mdx b/docs/snippets/vue/histogram-story.3.ts.mdx deleted file mode 100644 index bb07a270ad0c..000000000000 --- a/docs/snippets/vue/histogram-story.3.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// Histogram.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Histogram from './Histogram.vue'; - -const meta: Meta<typeof Histogram> = { - component: Histogram, -}; - -export default meta; -type Story = StoryObj<typeof Histogram>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Default: Story = { - render: (args) => ({ - components: { Histogram }, - setup() { - return { args }; - }, - template: '<Histogram v-bind="args" />', - }), - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/vue/list-story-expanded.js.mdx b/docs/snippets/vue/list-story-expanded.js.mdx deleted file mode 100644 index 1d0b1a073e88..000000000000 --- a/docs/snippets/vue/list-story-expanded.js.mdx +++ /dev/null @@ -1,44 +0,0 @@ -```js -// List.stories.js - -import List from './ListComponent.vue'; -import ListItem from './ListItem.vue'; - -export default { - component: List, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Empty = { - render: () => ({ - components: { List }, - template: '<List/>', - }), -}; - -export const OneItem = { - render: () => ({ - components: { List, ListItem }, - template: ` - <List> - <list-item/> - </List>`, - }), -}; - -export const ManyItems = { - render: () => ({ - components: { List, ListItem }, - template: ` - <List> - <list-item/> - <list-item/> - <list-item/> - </List>`, - }), -}; -``` diff --git a/docs/snippets/vue/list-story-expanded.ts-4-9.mdx b/docs/snippets/vue/list-story-expanded.ts-4-9.mdx deleted file mode 100644 index 8106b3ad32f6..000000000000 --- a/docs/snippets/vue/list-story-expanded.ts-4-9.mdx +++ /dev/null @@ -1,49 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './ListComponent.vue'; -import ListItem from './ListItem.vue'; - -const meta = { - 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/api/csf - * to learn how to use render functions. - */ -export const Empty: Story = { - render: () => ({ - components: { List }, - template: '<List/>', - }), -}; - -export const OneItem: Story = { - render: () => ({ - components: { List, ListItem }, - template: ` - <List> - <list-item/> - </List>`, - }), -}; - -export const ManyItems: Story = { - render: (args) => ({ - components: { List, ListItem }, - template: ` - <List> - <list-item/> - <list-item/> - <list-item/> - </List>`, - }), -}; -``` diff --git a/docs/snippets/vue/list-story-expanded.ts.mdx b/docs/snippets/vue/list-story-expanded.ts.mdx deleted file mode 100644 index 3e15fa7f423d..000000000000 --- a/docs/snippets/vue/list-story-expanded.ts.mdx +++ /dev/null @@ -1,49 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './ListComponent.vue'; -import ListItem from './ListItem.vue'; - -const meta: Meta<typeof 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/api/csf - * to learn how to use render functions. - */ -export const Empty: Story = { - render: () => ({ - components: { List }, - template: '<List/>', - }), -}; - -export const OneItem: Story = { - render: () => ({ - components: { List, ListItem }, - template: ` - <List> - <list-item/> - </List>`, - }), -}; - -export const ManyItems: Story = { - render: () => ({ - components: { List, ListItem }, - template: ` - <List> - <list-item/> - <list-item/> - <list-item/> - </List>`, - }), -}; -``` diff --git a/docs/snippets/vue/list-story-reuse-data.3.js.mdx b/docs/snippets/vue/list-story-reuse-data.3.js.mdx deleted file mode 100644 index ab3b3f042072..000000000000 --- a/docs/snippets/vue/list-story-reuse-data.3.js.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```js -// List.stories.js - -import List from './ListComponent.vue'; -import ListItem from './ListItem.vue'; - -//👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -export default { - component: List, -}; - -export const ManyItems = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - return { ...args }; - }, - template: ` - <List v-bind="args"> - <list-item :isSelected="Selected"/> - <list-item :isSelected="Unselected"/> - <list-item :isSelected="Unselected"/> - </List>`, - }), - args: { - Selected: Selected.args.isSelected, - Unselected: Unselected.args.isSelected, - }, -}; -``` diff --git a/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx b/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx deleted file mode 100644 index bfcc9be89175..000000000000 --- a/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './ListComponent.vue'; -import ListItem from './ListItem.vue'; - -//👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -const meta = { - component: List, -} satisfies Meta<typeof List>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ManyItems: Story = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - return { ...args }; - }, - template: ` - <List v-bind="args"> - <list-item :isSelected="Selected"/> - <list-item :isSelected="Unselected"/> - <list-item :isSelected="Unselected"/> - </List>`, - }), - args: { - Selected: Selected.args.isSelected, - Unselected: Unselected.args.isSelected, - }, -}; -``` diff --git a/docs/snippets/vue/list-story-reuse-data.3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.3.ts.mdx deleted file mode 100644 index 93bf88a25d67..000000000000 --- a/docs/snippets/vue/list-story-reuse-data.3.ts.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './ListComponent.vue'; -import ListItem from './ListItem.vue'; - -//👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -const meta: Meta<typeof List> = { - component: List, -}; - -export default meta; -type Story = StoryObj<typeof List>; - -export const ManyItems: Story = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - return { ...args }; - }, - template: ` - <List v-bind="args"> - <list-item :isSelected="Selected"/> - <list-item :isSelected="Unselected"/> - <list-item :isSelected="Unselected"/> - </List>`, - }), - args: { - Selected: Selected.args.isSelected, - Unselected: Unselected.args.isSelected, - }, -}; -``` diff --git a/docs/snippets/vue/list-story-starter.js.mdx b/docs/snippets/vue/list-story-starter.js.mdx deleted file mode 100644 index 644bb4d4f2ca..000000000000 --- a/docs/snippets/vue/list-story-starter.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// List.stories.js - -import List from './ListComponent.vue'; - -export default { - component: List, -}; - -// Always an empty list, not super interesting -export const Empty = { - render: () => ({ - components: { List }, - template: '<List/>', - }), -}; -``` diff --git a/docs/snippets/vue/list-story-starter.ts-4-9.mdx b/docs/snippets/vue/list-story-starter.ts-4-9.mdx deleted file mode 100644 index 941e3d9c736a..000000000000 --- a/docs/snippets/vue/list-story-starter.ts-4-9.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './ListComponent.vue'; - -const meta = { - 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 = { - render: () => ({ - components: { List }, - template: '<List/>', - }), -}; -``` diff --git a/docs/snippets/vue/list-story-starter.ts.mdx b/docs/snippets/vue/list-story-starter.ts.mdx deleted file mode 100644 index 2d3c6d52e09d..000000000000 --- a/docs/snippets/vue/list-story-starter.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './ListComponent.vue'; - -const meta: Meta<typeof List> = { - component: List, -}; - -export default meta; -type Story = StoryObj<typeof List>; - -// Always an empty list, not super interesting -export const Empty: Story = { - render: () => ({ - components: { List }, - template: '<List/>', - }), -}; -``` diff --git a/docs/snippets/vue/list-story-template.3.js.mdx b/docs/snippets/vue/list-story-template.3.js.mdx deleted file mode 100644 index 4a18bd196493..000000000000 --- a/docs/snippets/vue/list-story-template.3.js.mdx +++ /dev/null @@ -1,52 +0,0 @@ -```js -// List.stories.js - -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -//👇 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/configure/#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: (args) => ({ - components: { List, ListItem }, - setup() { - return { ...args }; - }, - template: ` - <List v-bind="args"> - <div v-for="item in items" :key="item.title"> - <ListItem :item="item"/> - </div> - </List> - `, - }), -}; - -export const Empty = { - ...ListTemplate, - args: { - items: [], - }, -}; -export const OneItem = { - ...ListTemplate, - args: { - items: [ - { - ...Unchecked.args, - }, - ], - }, -}; -``` diff --git a/docs/snippets/vue/list-story-template.3.ts-4-9.mdx b/docs/snippets/vue/list-story-template.3.ts-4-9.mdx deleted file mode 100644 index 88bf00132210..000000000000 --- a/docs/snippets/vue/list-story-template.3.ts-4-9.mdx +++ /dev/null @@ -1,57 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -//👇 Imports a specific story from ListItem stories -import { Unchecked } from './ListItem.stories'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', - component: List, -} satisfies Meta<typeof List>; - -export default meta; -type Story = StoryObj<typeof meta>; - -//👇 The ListTemplate construct will be spread to the existing stories. -export const ListTemplate: Story = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - return { ...args }; - }, - template: ` - <List v-bind="args"> - <div v-for="item in items" :key="item.title"> - <ListItem :item="item"/> - </div> - </List> - `, - }), -}; - -export const Empty: Story = { - ...ListTemplate, - args: { - items: [], - }, -}; -export const OneItem: Story = { - ...ListTemplate, - args: { - items: [ - { - ...Unchecked.args, - }, - ], - }, -}; -``` diff --git a/docs/snippets/vue/list-story-template.3.ts.mdx b/docs/snippets/vue/list-story-template.3.ts.mdx deleted file mode 100644 index 31b7478f2a5d..000000000000 --- a/docs/snippets/vue/list-story-template.3.ts.mdx +++ /dev/null @@ -1,57 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -//👇 Imports a specific story from ListItem stories -import { Unchecked } from './ListItem.stories'; - -const meta: Meta<typeof List> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', - component: List, -}; - -export default meta; -type Story = StoryObj<typeof List>; - -//👇 The ListTemplate construct will be spread to the existing stories. -export const ListTemplate: Story = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - return { ...args }; - }, - template: ` - <List v-bind="args"> - <div v-for="item in items" :key="item.title"> - <ListItem :item="item"/> - </div> - </List> - `, - }), -}; - -export const Empty: Story = { - ...ListTemplate, - args: { - items: [], - }, -}; -export const OneItem: Story = { - ...ListTemplate, - args: { - items: [ - { - ...Unchecked.args, - }, - ], - }, -}; -``` diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx deleted file mode 100644 index 8d521c737efe..000000000000 --- a/docs/snippets/vue/list-story-unchecked.3.js.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```js -// List.stories.js - -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -//👇 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/configure/#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/api/csf - * to learn how to use render functions. - */ -export const OneItem = { - args: { - ...Unchecked.args, - }, - render: (args) => ({ - components: { List, ListItem }, - setup() { - //👇 The args will now be passed down to the template - return { args }; - }, - template: '<List v-bind="args"><ListItem v-bind="args"/></List>', - }), -}; -``` diff --git a/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx b/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx deleted file mode 100644 index 478e65d6f878..000000000000 --- a/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// List.stories.js - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -//👇 Imports a specific story from ListItem stories -import { Unchecked } from './ListItem.stories'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', - component: List, -} satisfies Meta<typeof List>; - -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/api/csf - * to learn how to use render functions. - */ -export const OneItem: Story = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - //👇 The args will now be passed down to the template - return { args }; - }, - template: '<List v-bind="args"><ListItem v-bind="args"/></List>', - }), - args: { - ...Unchecked.args, - }, -}; -``` diff --git a/docs/snippets/vue/list-story-unchecked.3.ts.mdx b/docs/snippets/vue/list-story-unchecked.3.ts.mdx deleted file mode 100644 index d928c99296a3..000000000000 --- a/docs/snippets/vue/list-story-unchecked.3.ts.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// List.stories.js - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -//👇 Imports a specific story from ListItem stories -import { Unchecked } from './ListItem.stories'; - -const meta: Meta<typeof List> = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'List', - component: List, -}; - -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/api/csf - * to learn how to use render functions. - */ -export const OneItem: Story = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - //👇 The args will now be passed down to the template - return { args }; - }, - template: '<List v-bind="args"><ListItem v-bind="args"/></List>', - }), - args: { - ...Unchecked.args, - }, -}; -``` diff --git a/docs/snippets/vue/list-story-with-sub-components.js.mdx b/docs/snippets/vue/list-story-with-sub-components.js.mdx deleted file mode 100644 index a19b58f3b3d1..000000000000 --- a/docs/snippets/vue/list-story-with-sub-components.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// List.stories.js -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -export default { - component: List, - subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent -}; - -export const Empty = { - render: () => ({ - components: { List }, - template: '<List/>', - }), -}; - -export const OneItem = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - return { args } - } - template: '<List v-bind="args"><ListItem /></List>', - }), -}; -``` diff --git a/docs/snippets/vue/list-story-with-sub-components.ts-4-9.mdx b/docs/snippets/vue/list-story-with-sub-components.ts-4-9.mdx deleted file mode 100644 index 6e99a25445df..000000000000 --- a/docs/snippets/vue/list-story-with-sub-components.ts-4-9.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// List.stories.ts -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -const meta = { - component: List, - subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent -} satisfies Meta<typeof List>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Empty: Story = { - render: () => ({ - components: { List }, - template: '<List />', - }), -}; - -export const OneItem: Story = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - return { args } - } - template: '<List v-bind="args"><ListItem /></List>', - }), -}; -``` diff --git a/docs/snippets/vue/list-story-with-sub-components.ts.mdx b/docs/snippets/vue/list-story-with-sub-components.ts.mdx deleted file mode 100644 index 87ae30aed24a..000000000000 --- a/docs/snippets/vue/list-story-with-sub-components.ts.mdx +++ /dev/null @@ -1,32 +0,0 @@ -```ts -// List.stories.ts -import type { Meta, StoryObj } from '@storybook/vue3'; - -import List from './List.vue'; -import ListItem from './ListItem.vue'; - -const meta: Meta<typeof List> = { - component: List, - subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent -}; -export default meta; - -type Story = StoryObj<typeof List>; - -export const Empty: Story = { - render: () => ({ - components: { List }, - template: '<List />', - }), -}; - -export const OneItem: Story = { - render: (args) => ({ - components: { List, ListItem }, - setup() { - return { args } - } - template: '<List v-bind="args"><ListItem /></List>', - }), -}; -``` diff --git a/docs/snippets/vue/loader-story.js.mdx b/docs/snippets/vue/loader-story.js.mdx deleted file mode 100644 index 42d26ba62894..000000000000 --- a/docs/snippets/vue/loader-story.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// TodoItem.stories.js - -import TodoItem from './TodoItem.vue'; - -import fetch from 'node-fetch'; - -export default { - component: TodoItem, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: (args, { loaded: { todo } }) => ({ - components: { TodoItem }, - setup() { - return { args, todo: todo }; - }, - template: '<TodoItem :todo="todo" />', - }), - loaders: [ - async () => ({ - todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(), - }), - ], -}; -``` diff --git a/docs/snippets/vue/loader-story.ts-4-9.mdx b/docs/snippets/vue/loader-story.ts-4-9.mdx deleted file mode 100644 index e26b78d0e145..000000000000 --- a/docs/snippets/vue/loader-story.ts-4-9.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// TodoItem.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import TodoItem from './TodoItem.vue'; - -import fetch from 'node-fetch'; - -const meta = { - component: TodoItem, -} satisfies Meta<typeof TodoItem>; - -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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args, { loaded: { todo } }) => ({ - components: { TodoItem }, - setup() { - return { args, todo: todo }; - }, - template: '<TodoItem :todo="todo" />', - }), - loaders: [ - async () => ({ - todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(), - }), - ], -}; -``` diff --git a/docs/snippets/vue/loader-story.ts.mdx b/docs/snippets/vue/loader-story.ts.mdx deleted file mode 100644 index c6728d19e3bb..000000000000 --- a/docs/snippets/vue/loader-story.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// TodoItem.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import TodoItem from './TodoItem.vue'; - -import fetch from 'node-fetch'; - -const meta: Meta<typeof TodoItem> = { - component: TodoItem, -}; - -export default meta; -type Story = StoryObj<typeof TodoItem>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args, { loaded: { todo } }) => ({ - components: { TodoItem }, - setup() { - return { args, todo: todo }; - }, - template: '<TodoItem :todo="todo" />', - }), - loaders: [ - async () => ({ - todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(), - }), - ], -}; -``` diff --git a/docs/snippets/vue/login-form-with-play-function.js.mdx b/docs/snippets/vue/login-form-with-play-function.js.mdx deleted file mode 100644 index 756f1a0e043d..000000000000 --- a/docs/snippets/vue/login-form-with-play-function.js.mdx +++ /dev/null @@ -1,47 +0,0 @@ -```js -// LoginForm.stories.js - -import { userEvent, within, expect } from '@storybook/test'; - -import LoginForm from './LoginForm.vue'; - -export default { - component: LoginForm, -}; - -export const EmptyForm = { - render: () => ({ - components: { LoginForm }, - template: `<LoginForm />`, - }), -}; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const FilledForm = { - render: () => ({ - components: { LoginForm }, - template: `<LoginForm />`, - }), - 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/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/vue/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/vue/login-form-with-play-function.ts-4-9.mdx deleted file mode 100644 index 76aa8eacfbaa..000000000000 --- a/docs/snippets/vue/login-form-with-play-function.ts-4-9.mdx +++ /dev/null @@ -1,52 +0,0 @@ -```ts -// LoginForm.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import { userEvent, within, expect } from '@storybook/test'; - -import LoginForm from './LoginForm.vue'; - -const meta = { - component: LoginForm, -} satisfies Meta<typeof LoginForm>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const EmptyForm: Story = { - render: () => ({ - components: { LoginForm }, - template: `<LoginForm />`, - }), -}; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const FilledForm: Story = { - render: () => ({ - components: { LoginForm }, - template: `<LoginForm />`, - }), - 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/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/vue/login-form-with-play-function.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts.mdx deleted file mode 100644 index a0b283c0a09f..000000000000 --- a/docs/snippets/vue/login-form-with-play-function.ts.mdx +++ /dev/null @@ -1,52 +0,0 @@ -```ts -// LoginForm.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import { userEvent, within, expect } from '@storybook/test'; - -import LoginForm from './LoginForm.vue'; - -const meta: Meta<typeof LoginForm> = { - component: LoginForm, -}; - -export default meta; -type Story = StoryObj<typeof LoginForm>; - -export const EmptyForm: Story = { - render: () => ({ - components: { LoginForm }, - template: `<LoginForm />`, - }), -}; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const FilledForm: Story = { - render: () => ({ - components: { LoginForm }, - template: `<LoginForm />`, - }), - 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/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/vue/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx deleted file mode 100644 index 407903cf95c4..000000000000 --- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx +++ /dev/null @@ -1,77 +0,0 @@ -```js -// YourPage.stories.js -import { graphql, HttpResponse, delay } from 'msw'; - -import WrapperComponent from './ApolloWrapperClient.vue'; -import DocumentScreen from './YourPage.vue'; - -export default { - component: DocumentScreen, - render: () => ({ - components: { DocumentScreen, WrapperComponent }, - template: '<WrapperComponent><DocumentScreen /></WrapperComponent>', - }), -}; - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export const MockedSuccess = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - }, - }); - }), - ], - }, - }, -}; - -export const MockedError = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx deleted file mode 100644 index b85e3d507999..000000000000 --- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx +++ /dev/null @@ -1,82 +0,0 @@ -```ts -// YourPage.stories.ts -import type { Meta, StoryObj } from '@storybook/vue3'; - -import { graphql, HttpResponse, delay } from 'msw'; - -import WrapperComponent from './ApolloWrapperClient.vue'; -import DocumentScreen from './YourPage.vue'; - -const meta = { - component: DocumentScreen, - render: () => ({ - components: { DocumentScreen, WrapperComponent }, - template: '<WrapperComponent><DocumentScreen /></WrapperComponent>', - }), -} satisfies Meta<typeof DocumentScreen>; - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const MockedSuccess: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - }, - }); - }), - ], - }, - }, -}; - -export const MockedError: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx deleted file mode 100644 index 56559de2b65a..000000000000 --- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx +++ /dev/null @@ -1,82 +0,0 @@ -```ts -// YourPage.stories.ts -import type { Meta, StoryObj } from '@storybook/vue3'; - -import { graphql, HttpResponse, delay } from 'msw'; - -import WrapperComponent from './ApolloWrapperClient.vue'; -import DocumentScreen from './YourPage.vue'; - -const meta: Meta<typeof DocumentScreen> = { - component: DocumentScreen, - render: () => ({ - components: { DocumentScreen, WrapperComponent }, - template: '<WrapperComponent><DocumentScreen /></WrapperComponent>', - }), -}; - -//👇The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export default meta; -type Story = StoryObj<typeof DocumentScreen>; - -export const MockedSuccess: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', () => { - return HttpResponse.json({ - data: { - allInfo: { - ...TestData, - }, - }, - }); - }), - ], - }, - }, -}; - -export const MockedError: Story = { - parameters: { - msw: { - handlers: [ - graphql.query('AllInfoQuery', async () => { - await delay(800); - return HttpResponse.json({ - errors: [ - { - message: 'Access denied', - }, - ], - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/vue/multiple-stories-test.3.js.mdx b/docs/snippets/vue/multiple-stories-test.3.js.mdx deleted file mode 100644 index cedc62296bbd..000000000000 --- a/docs/snippets/vue/multiple-stories-test.3.js.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```js -// tests/Form.test.js - -import { fireEvent, render, screen } from '@testing-library/vue'; - -import { composeStories } from '@storybook/vue3'; - -import * as FormStories from './LoginForm.stories'; - -const { InvalidForm, ValidForm } = composeStories(FormStories); - -test('Tests invalid form state', () => { - render(InvalidForm()); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); - -test('Tests filled form', () => { - render(ValidForm()); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).not.toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/vue/multiple-stories-test.3.ts.mdx b/docs/snippets/vue/multiple-stories-test.3.ts.mdx deleted file mode 100644 index de66f556a819..000000000000 --- a/docs/snippets/vue/multiple-stories-test.3.ts.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// tests/Form.test.ts - -import { fireEvent, render, screen } from '@testing-library/vue'; - -import { composeStories } from '@storybook/vue3'; - -import * as FormStories from './LoginForm.stories'; - -const { InvalidForm, ValidForm } = composeStories(FormStories); - -test('Tests invalid form state', () => { - render(InvalidForm()); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).toBeInTheDocument(); -}); - -test('Tests filled form', () => { - render(ValidForm()); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).not.toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx deleted file mode 100644 index 5e44bd0077c2..000000000000 --- a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const Basic = { - render: () => ({ - components: { MyComponent }, - template: '<MyComponent />', - }), -}; - -export const WithProp = { - render: () => ({ - components: { MyComponent }, - template: '<MyComponent prop="value"/>', - }), -}; -``` diff --git a/docs/snippets/vue/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/vue/my-component-story-basic-and-props.ts-4-9.mdx deleted file mode 100644 index dcaa9e7e5f48..000000000000 --- a/docs/snippets/vue/my-component-story-basic-and-props.ts-4-9.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Basic: Story = { - render: () => ({ - components: { MyComponent }, - template: '<MyComponent />', - }), -}; - -export const WithProp: Story = { - render: () => ({ - components: { MyComponent }, - template: '<MyComponent prop="value"/>', - }), -}; -``` diff --git a/docs/snippets/vue/my-component-story-basic-and-props.ts.mdx b/docs/snippets/vue/my-component-story-basic-and-props.ts.mdx deleted file mode 100644 index 9f64968035dd..000000000000 --- a/docs/snippets/vue/my-component-story-basic-and-props.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const Basic: Story = { - render: () => ({ - components: { MyComponent }, - template: '<MyComponent />', - }), -}; - -export const WithProp: Story = { - render: () => ({ - components: { MyComponent }, - template: '<MyComponent prop="value"/>', - }), -}; -``` diff --git a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx deleted file mode 100644 index f7a38b413a95..000000000000 --- a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```js -// MyComponent.stories.js - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import MyComponent from './MyComponent.vue'; - -export default { - 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/vue/my-component-story-configure-viewports.ts-4-9.mdx b/docs/snippets/vue/my-component-story-configure-viewports.ts-4-9.mdx deleted file mode 100644 index 952bafb73b91..000000000000 --- a/docs/snippets/vue/my-component-story-configure-viewports.ts-4-9.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - 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/vue/my-component-story-configure-viewports.ts.mdx b/docs/snippets/vue/my-component-story-configure-viewports.ts.mdx deleted file mode 100644 index 091a3631305b..000000000000 --- a/docs/snippets/vue/my-component-story-configure-viewports.ts.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof 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/vue/my-component-story-use-globaltype.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx deleted file mode 100644 index 9d3a3a77303c..000000000000 --- a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -const getCaptionForLocale = (locale) => { - switch (locale) { - case 'es': - return 'Hola!'; - case 'fr': - return 'Bonjour!'; - case 'kr': - return '안녕하세요!'; - case 'zh': - return '你好!'; - default: - return 'Hello!'; - } -}; - -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - template: `<p>${caption}</p>`, - }; - }, -}; -``` diff --git a/docs/snippets/vue/my-component-story-use-globaltype.ts-4-9.mdx b/docs/snippets/vue/my-component-story-use-globaltype.ts-4-9.mdx deleted file mode 100644 index f9f473a290e8..000000000000 --- a/docs/snippets/vue/my-component-story-use-globaltype.ts-4-9.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - 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!'; - } -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const MyStory: Story = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - template: `<p>${caption}</p>`, - }; - }, -}; -``` diff --git a/docs/snippets/vue/my-component-story-use-globaltype.ts.mdx b/docs/snippets/vue/my-component-story-use-globaltype.ts.mdx deleted file mode 100644 index e13eb36f4002..000000000000 --- a/docs/snippets/vue/my-component-story-use-globaltype.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof 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!'; - } -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const MyStory: Story = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - template: `<p>${caption}</p>`, - }; - }, -}; -``` diff --git a/docs/snippets/vue/my-component-story-with-nonstory.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.js.mdx deleted file mode 100644 index aa4104408293..000000000000 --- a/docs/snippets/vue/my-component-story-with-nonstory.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -import someData from './data.json'; - -export default { - component: MyComponent, - includeStories: ['SimpleStory', 'ComplexStory'], - 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/vue/my-component-story-with-nonstory.ts-4-9.mdx b/docs/snippets/vue/my-component-story-with-nonstory.ts-4-9.mdx deleted file mode 100644 index 458342aa2c63..000000000000 --- a/docs/snippets/vue/my-component-story-with-nonstory.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -import someData from './data.json'; - -const meta = { - component: MyComponent, - includeStories: ['SimpleStory', 'ComplexStory'], - excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data -} satisfies Meta<typeof MyComponent>; - -export const simpleData = { foo: 1, bar: 'baz' }; -export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } }; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const SimpleStory: Story = { - args: { - data: simpleData, - }, -}; - -export const ComplexStory: Story = { - args: { - data: complexData, - }, -}; -``` diff --git a/docs/snippets/vue/my-component-story-with-nonstory.ts.mdx b/docs/snippets/vue/my-component-story-with-nonstory.ts.mdx deleted file mode 100644 index f84387793c72..000000000000 --- a/docs/snippets/vue/my-component-story-with-nonstory.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -import someData from './data.json'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, - includeStories: ['SimpleStory', 'ComplexStory'], - 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 default meta; -type Story = StoryObj<typeof MyComponent>; - -export const SimpleStory: Story = { - args: { - data: simpleData, - }, -}; - -export const ComplexStory: Story = { - args: { - data: complexData, - }, -}; -``` diff --git a/docs/snippets/vue/override-compose-story-test.compose-stories.3.js.mdx b/docs/snippets/vue/override-compose-story-test.compose-stories.3.js.mdx deleted file mode 100644 index 21ff3a8c5e29..000000000000 --- a/docs/snippets/vue/override-compose-story-test.compose-stories.3.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// tests/Form.test.js - -import { composeStory } from '@storybook/vue3'; - -import * as FormStories from './LoginForm.stories'; - -const { ValidForm } = composeStories(FormStories, { - decorators: [ - // Define your story-level decorators here - ], - globalTypes: { - // Define your global types here - }, - parameters: { - // Define your story-level parameters here - }, -}); -``` diff --git a/docs/snippets/vue/override-compose-story-test.compose-stories.3.ts.mdx b/docs/snippets/vue/override-compose-story-test.compose-stories.3.ts.mdx deleted file mode 100644 index 545f2756540f..000000000000 --- a/docs/snippets/vue/override-compose-story-test.compose-stories.3.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// tests/Form.test.ts - -import { composeStory } from '@storybook/vue3'; - -import * as FormStories from './LoginForm.stories'; - -const { ValidForm } = composeStories(FormStories, { - decorators: [ - // Define your story-level decorators here - ], - globalTypes: { - // Define your global types here - }, - parameters: { - // Define your story-level parameters here - }, -}); -``` diff --git a/docs/snippets/vue/override-compose-story-test.compose-story.3.js.mdx b/docs/snippets/vue/override-compose-story-test.compose-story.3.js.mdx deleted file mode 100644 index 9da0bb9572c3..000000000000 --- a/docs/snippets/vue/override-compose-story-test.compose-story.3.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// tests/Form.test.js - -import { composeStory } from '@storybook/vue3'; - -import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories'; - -const FormValidation = composeStory(ValidFormStory, Meta, { - decorators: [ - // Define your story-level decorators here - ], - globalTypes: { - // Define your global types here - }, - parameters: { - // Define your story-level parameters here - }, -}); -``` diff --git a/docs/snippets/vue/override-compose-story-test.compose-story.3.ts.mdx b/docs/snippets/vue/override-compose-story-test.compose-story.3.ts.mdx deleted file mode 100644 index f8dbedd15c8e..000000000000 --- a/docs/snippets/vue/override-compose-story-test.compose-story.3.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// tests/Form.test.ts - -import { composeStory } from '@storybook/vue3'; - -import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories'; - -const FormValidation = composeStory(ValidFormStory, Meta, { - decorators: [ - // Define your story-level decorators here - ], - globalTypes: { - // Define your global types here - }, - parameters: { - // Define your story-level parameters here - }, -}); -``` diff --git a/docs/snippets/vue/page-story-slots.3.js.mdx b/docs/snippets/vue/page-story-slots.3.js.mdx deleted file mode 100644 index b15a0fab3d48..000000000000 --- a/docs/snippets/vue/page-story-slots.3.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// Page.stories.js - -import Page from './Page.vue'; - -export default { - component: Page, - render: (args) => ({ - components: { Page }, - setup() { - return { args }; - }, - template: ` - <page v-bind="args"> - <template v-slot:footer> - <footer v-if="args.footer" v-html="args.footer" /> - </template> - </page> - `, - }), -}; - -export const CustomFooter = { - args: { - footer: 'Built with Storybook', - }, -}; -``` diff --git a/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx b/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx deleted file mode 100644 index afb00a498398..000000000000 --- a/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// Page.stories.ts - -// https://www.npmjs.com/package/vue-component-type-helpers -import type { ComponentProps } from 'vue-component-type-helpers'; -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Page from './Page.vue'; - -type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string }; - -const meta = { - component: Page, - render: (args) => ({ - components: { Page }, - setup() { - return { args }; - }, - template: ` - <page v-bind="args"> - <template v-slot:footer> - <footer v-if="args.footer" v-html="args.footer" /> - </template> - </page> - `, - }), -} satisfies Meta<PagePropsAndCustomArgs>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Primary = { - args: { - footer: 'Built with Storybook', - }, -} satisfies Story; -``` diff --git a/docs/snippets/vue/page-story-slots.3.ts.mdx b/docs/snippets/vue/page-story-slots.3.ts.mdx deleted file mode 100644 index fc7eb08b54fd..000000000000 --- a/docs/snippets/vue/page-story-slots.3.ts.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// Page.stories.ts - -// https://www.npmjs.com/package/vue-component-type-helpers -import type { ComponentProps } from 'vue-component-type-helpers'; -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Page from './Page.vue'; - -type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string }; - -const meta: Meta<PagePropsAndCustomArgs> = { - component: Page, - render: (args) => ({ - components: { Page }, - setup() { - return { args }; - }, - template: ` - <page v-bind="args"> - <template v-slot:footer> - <footer v-if="args.footer" v-html="args.footer" /> - </template> - </page> - `, - }), -}; -export default meta; - -type Story = StoryObj<PagePropsAndCustomArgs>; - -export const Primary: Story = { - args: { - footer: 'Built with Storybook', - }, -}; -``` diff --git a/docs/snippets/vue/page-story.3.js.mdx b/docs/snippets/vue/page-story.3.js.mdx deleted file mode 100644 index 6fd0d34da7d0..000000000000 --- a/docs/snippets/vue/page-story.3.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// Page.stories.js - -import Page from './Page.vue'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -export default { - component: Page, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const LoggedIn = { - render: (args) => ({ - components: { Page }, - setup() { - return { args }; - }, - template: '<page v-bind="args" />', - }), - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/vue/page-story.3.ts-4-9.mdx b/docs/snippets/vue/page-story.3.ts-4-9.mdx deleted file mode 100644 index 7bc744a2b75b..000000000000 --- a/docs/snippets/vue/page-story.3.ts-4-9.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// Page.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Page from './Page.vue'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -const meta = { - component: Page, -} satisfies Meta<typeof Page>; - -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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => ({ - components: { Page }, - setup() { - return { args }; - }, - template: '<page v-bind="args" />', - }), - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/vue/page-story.3.ts.mdx b/docs/snippets/vue/page-story.3.ts.mdx deleted file mode 100644 index b0914e00a56d..000000000000 --- a/docs/snippets/vue/page-story.3.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// Page.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import Page from './Page.vue'; - -//👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -const meta: Meta<typeof Page> = { - component: Page, -}; - -export default meta; -type Story = StoryObj<typeof Page>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => ({ - components: { Page }, - setup() { - return { args }; - }, - template: '<page v-bind="args" />', - }), - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx b/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx deleted file mode 100644 index 1bd57fff0783..000000000000 --- a/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.test.ts -import { test, expect } from '@jest/globals'; -import { render, screen } from '@testing-library/vue'; -import { composeStories } from '@storybook/vue3'; - -// Import all stories and the component annotations from the stories file -import * as stories from './Button.stories'; - -// Every component that is returned maps 1:1 with the stories, -// but they already contain all annotations from story, meta, and project levels -const { Primary, Secondary } = composeStories(stories); - -test('renders primary button with default args', () => { - render(Primary); - const buttonElement = screen.getByText('Text coming from args in stories file!'); - expect(buttonElement).not.toBeNull(); -}); - -test('renders primary button with overridden props', () => { - // You can override props and they will get merged with values from the story's args - render(Primary, { props: { label: 'Hello world' } }); - const buttonElement = screen.getByText(/Hello world/i); - expect(buttonElement).not.toBeNull(); -}); -``` diff --git a/docs/snippets/vue/portable-stories-jest-compose-story.ts.mdx b/docs/snippets/vue/portable-stories-jest-compose-story.ts.mdx deleted file mode 100644 index 8141b5d1cb4d..000000000000 --- a/docs/snippets/vue/portable-stories-jest-compose-story.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.test.ts -import { jest, test, expect } from '@jest/globals'; -import { render, screen } from '@testing-library/vue'; -import { composeStory } from '@storybook/vue3'; - -import meta, { Primary } from './Button.stories'; - -test('onclick handler is called', () => { - // Returns a story which already contains all annotations from story, meta and global levels - const PrimaryStory = composeStory(Primary, meta); - - const onClickSpy = jest.fn(); - render(Primary, { props: { onClick: onClickSpy } }); - const buttonElement = screen.getByRole('button'); - buttonElement.click(); - expect(onClickSpy).toHaveBeenCalled(); -}); -``` diff --git a/docs/snippets/vue/portable-stories-jest-override-globals.ts.mdx b/docs/snippets/vue/portable-stories-jest-override-globals.ts.mdx deleted file mode 100644 index 6a18d79dc751..000000000000 --- a/docs/snippets/vue/portable-stories-jest-override-globals.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.test.ts -import { test } from '@jest/globals'; -import { render } from '@testing-library/vue'; -import { composeStory } from '@storybook/vue3'; - -import meta, { Primary } from './Button.stories'; - -test('renders in English', async () => { - const PrimaryStory = composeStory( - Primary, - meta, - { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale - ); - - render(PrimaryStory); -}); - -test('renders in Spanish', async () => { - const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } }); - - render(PrimaryStory); -}); -``` diff --git a/docs/snippets/vue/portable-stories-jest-with-loaders.ts.mdx b/docs/snippets/vue/portable-stories-jest-with-loaders.ts.mdx deleted file mode 100644 index 99dff9059713..000000000000 --- a/docs/snippets/vue/portable-stories-jest-with-loaders.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.test.ts -import { test } from '@jest/globals'; -import { render } from '@testing-library/vue'; -import { composeStory } from '@storybook/vue3'; - -import meta, { Primary } from './Button.stories'; - -test('applies the loaders and renders', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, load the data for the story - await PrimaryStory.load(); - - // Then, render the story - render(PrimaryStory); -}); -``` diff --git a/docs/snippets/vue/portable-stories-jest-with-play-function.ts.mdx b/docs/snippets/vue/portable-stories-jest-with-play-function.ts.mdx deleted file mode 100644 index a901326a9cf4..000000000000 --- a/docs/snippets/vue/portable-stories-jest-with-play-function.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.test.ts -import { test } from '@jest/globals'; -import { render } from '@testing-library/vue'; -import { composeStory } from '@storybook/vue3'; - -import meta, { Primary } from './Button.stories'; - -test('renders and executes the play function', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, render the story - render(PrimaryStory); - - // Then, execute the play function - await PrimaryStory.play(); -}); -``` diff --git a/docs/snippets/vue/portable-stories-playwright-ct.ts.mdx b/docs/snippets/vue/portable-stories-playwright-ct.ts.mdx deleted file mode 100644 index a43868f5506a..000000000000 --- a/docs/snippets/vue/portable-stories-playwright-ct.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// Button.playwright.test.ts -import { createTest } from '@storybook/vue3/experimental-playwright'; -import { test as base } from '@playwright/experimental-ct-vue'; - -// See explanation below for `.portable` stories file -import stories from './Button.stories.portable'; - -const test = createTest(base); - -// 👉 Important: Due to current limitations, you can only reference your stories as JSX elements. - -test('renders primary button', async ({ mount }) => { - // The mount function will execute all the necessary steps in the story, - // such as loaders, render, and play function - await mount(<stories.Primary />); -}); - -test('renders primary button with overridden props', async ({ mount }) => { - // You can pass custom props to your component via JSX - const component = await mount(<stories.Primary label="label from test" />); - await expect(component).toContainText('label from test'); - await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/); -}); -``` diff --git a/docs/snippets/vue/portable-stories-vitest-compose-stories.ts.mdx b/docs/snippets/vue/portable-stories-vitest-compose-stories.ts.mdx deleted file mode 100644 index a9d31745cd17..000000000000 --- a/docs/snippets/vue/portable-stories-vitest-compose-stories.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.test.ts -import { test, expect } from 'vitest'; -import { render, screen } from '@testing-library/vue'; -import { composeStories } from '@storybook/vue3'; - -// Import all stories and the component annotations from the stories file -import * as stories from './Button.stories'; - -// Every component that is returned maps 1:1 with the stories, -// but they already contain all annotations from story, meta, and project levels -const { Primary, Secondary } = composeStories(stories); - -test('renders primary button with default args', () => { - render(Primary); - const buttonElement = screen.getByText('Text coming from args in stories file!'); - expect(buttonElement).not.toBeNull(); -}); - -test('renders primary button with overridden props', () => { - // You can override props and they will get merged with values from the story's args - render(Primary, { props: { label: 'Hello world' } }); - const buttonElement = screen.getByText(/Hello world/i); - expect(buttonElement).not.toBeNull(); -}); -``` diff --git a/docs/snippets/vue/portable-stories-vitest-compose-story.ts.mdx b/docs/snippets/vue/portable-stories-vitest-compose-story.ts.mdx deleted file mode 100644 index 9b8bf8ac6d3d..000000000000 --- a/docs/snippets/vue/portable-stories-vitest-compose-story.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.test.ts -import { vi, test, expect } from 'vitest'; -import { render, screen } from '@testing-library/vue'; -import { composeStory } from '@storybook/vue3'; - -import meta, { Primary } from './Button.stories'; - -test('onclick handler is called', () => { - // Returns a story which already contains all annotations from story, meta and global levels - const PrimaryStory = composeStory(Primary, meta); - - const onClickSpy = vi.fn(); - render(Primary, { props: { onClick: onClickSpy } }); - const buttonElement = screen.getByRole('button'); - buttonElement.click(); - expect(onClickSpy).toHaveBeenCalled(); -}); -``` diff --git a/docs/snippets/vue/portable-stories-vitest-override-globals.ts.mdx b/docs/snippets/vue/portable-stories-vitest-override-globals.ts.mdx deleted file mode 100644 index ba69f6cd5819..000000000000 --- a/docs/snippets/vue/portable-stories-vitest-override-globals.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.test.ts -import { test } from 'vitest'; -import { render } from '@testing-library/vue'; -import { composeStory } from '@storybook/vue3'; - -import meta, { Primary } from './Button.stories'; - -test('renders in English', async () => { - const PrimaryStory = composeStory( - Primary, - meta, - { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale - ); - - render(PrimaryStory); -}); - -test('renders in Spanish', async () => { - const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } }); - - render(PrimaryStory); -}); -``` diff --git a/docs/snippets/vue/portable-stories-vitest-with-loaders.ts.mdx b/docs/snippets/vue/portable-stories-vitest-with-loaders.ts.mdx deleted file mode 100644 index 279d84bac659..000000000000 --- a/docs/snippets/vue/portable-stories-vitest-with-loaders.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.test.ts -import { test } from 'vitest'; -import { render } from '@testing-library/vue'; -import { composeStory } from '@storybook/vue3'; - -import meta, { Primary } from './Button.stories'; - -test('applies the loaders and renders', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, load the data for the story - await PrimaryStory.load(); - - // Then, render the story - render(PrimaryStory); -}); -``` diff --git a/docs/snippets/vue/portable-stories-vitest-with-play-function.ts.mdx b/docs/snippets/vue/portable-stories-vitest-with-play-function.ts.mdx deleted file mode 100644 index 1fe2a7a42ae0..000000000000 --- a/docs/snippets/vue/portable-stories-vitest-with-play-function.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.test.ts -import { test } from 'vitest'; -import { render } from '@testing-library/vue'; -import { composeStory } from '@storybook/vue3'; - -import meta, { Primary } from './Button.stories'; - -test('renders and executes the play function', async () => { - const PrimaryStory = composeStory(Primary, meta); - - // First, render the story - render(PrimaryStory); - - // Then, execute the play function - await PrimaryStory.play(); -}); -``` diff --git a/docs/snippets/vue/reuse-args-test.3.js.mdx b/docs/snippets/vue/reuse-args-test.3.js.mdx deleted file mode 100644 index fdd957980e29..000000000000 --- a/docs/snippets/vue/reuse-args-test.3.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// tests/Button.test.js - -import { render, screen } from '@testing-library/vue'; - -import { composeStories } from '@storybook/vue3'; - -import * as stories from './Button.stories'; - -const { Primary } = composeStories(stories); - -test('reuses args from composed story', () => { - render(Primary()); - - const buttonElement = screen.getByRole('button'); - // Testing against values coming from the story itself! No need for duplication - expect(buttonElement.textContent).toEqual(Primary.args.label); -}); -``` diff --git a/docs/snippets/vue/reuse-args-test.3.ts.mdx b/docs/snippets/vue/reuse-args-test.3.ts.mdx deleted file mode 100644 index fc750f1c742f..000000000000 --- a/docs/snippets/vue/reuse-args-test.3.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// tests/Button.test.ts - -import { render, screen } from '@testing-library/vue'; - -import { composeStories } from '@storybook/vue3'; - -import * as stories from './Button.stories'; - -const { Primary } = composeStories(stories); - -test('reuses args from composed story', () => { - render(Primary()); - - const buttonElement = screen.getByRole('button'); - // Testing against values coming from the story itself! No need for duplication - expect(buttonElement.textContent).toEqual(Primary.args.label); -}); -``` diff --git a/docs/snippets/vue/simple-page-implementation.3.js.mdx b/docs/snippets/vue/simple-page-implementation.3.js.mdx deleted file mode 100644 index 73002deead02..000000000000 --- a/docs/snippets/vue/simple-page-implementation.3.js.mdx +++ /dev/null @@ -1,49 +0,0 @@ -```html -{/* YourPage.vue */} - -<template> - <PageLayout :user="user"> - <DocumentHeader :document="document" /> - <DocumentList :documents="subdocuments" /> - </PageLayout> -</template> - -<script> - import PageLayout from './PageLayout'; - import DocumentHeader from './DocumentHeader'; - import DocumentList from './DocumentList'; - import { reactive } from 'vue'; - - export default { - name: 'DocumentScreen', - components: { PageLayout, DocumentHeader, DocumentList }, - props: { - user: { - type: String, - default: 'N/A', - }, - document: { - type: Object, - default: () => ({ - id: 1, - title: 'A document', - content: 'Lorem Ipsum', - }), - }, - subdocuments: { - type: Array, - default: () => [], - }, - }, - setup(props) { - props = reactive(props); - return { - /** - * What will be returned here will available to the component - * Functions referenced here will act like methods - */ - }; - }, - }; -</script> -``` diff --git a/docs/snippets/vue/single-story-test.3.js.mdx b/docs/snippets/vue/single-story-test.3.js.mdx deleted file mode 100644 index 6e05fcc32ae9..000000000000 --- a/docs/snippets/vue/single-story-test.3.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// tests/Form.test.js - -import { fireEvent, render, screen } from '@testing-library/vue'; - -import { composeStory } from '@storybook/vue3'; - -import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories'; - -const FormOK = composeStory(ValidFormStory, Meta); - -test('Validates form', () => { - render(FormOK()); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).not.toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/vue/single-story-test.3.ts.mdx b/docs/snippets/vue/single-story-test.3.ts.mdx deleted file mode 100644 index ca9208d9a86e..000000000000 --- a/docs/snippets/vue/single-story-test.3.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// tests/Form.test.ts - -import { fireEvent, render, screen } from '@testing-library/vue'; - -import { composeStory } from '@storybook/vue3'; - -import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories'; - -const FormOK = composeStory(ValidFormStory, Meta); - -test('Validates form', () => { - render(FormOK()); - - const buttonElement = screen.getByRole('button', { - name: 'Submit', - }); - - fireEvent.click(buttonElement); - - const isFormValid = screen.getByLabelText('invalid-form'); - expect(isFormValid).not.toBeInTheDocument(); -}); -``` diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx deleted file mode 100644 index 8b3dd92a3905..000000000000 --- a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const NonA11yStory = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.ts-4-9.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.ts-4-9.mdx deleted file mode 100644 index 4dcb458dae3d..000000000000 --- a/docs/snippets/vue/storybook-addon-a11y-disable.ts-4-9.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const NonA11yStory: Story = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.ts.mdx deleted file mode 100644 index cd460d53556b..000000000000 --- a/docs/snippets/vue/storybook-addon-a11y-disable.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const NonA11yStory: Story = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx deleted file mode 100644 index c0af1c56297b..000000000000 --- a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const ExampleStory = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.ts-4-9.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.ts-4-9.mdx deleted file mode 100644 index b990a1f2db4c..000000000000 --- a/docs/snippets/vue/storybook-addon-a11y-story-config.ts-4-9.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta<typeof MyComponent>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const ExampleStory = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.ts.mdx deleted file mode 100644 index 46fe6190dbcd..000000000000 --- a/docs/snippets/vue/storybook-addon-a11y-story-config.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './MyComponent.vue'; - -const meta: Meta<typeof MyComponent> = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj<typeof MyComponent>; - -export const ExampleStory = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/vue/storybook-preview-global-decorator.js.mdx b/docs/snippets/vue/storybook-preview-global-decorator.js.mdx deleted file mode 100644 index 22f8847cbaf8..000000000000 --- a/docs/snippets/vue/storybook-preview-global-decorator.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/preview.js - -export default { - decorators: [ - (story) => ({ - components: { story }, - template: '<div style="margin: 3em;"><story /></div>', - }), - ], -}; -``` diff --git a/docs/snippets/vue/storybook-preview-global-decorator.ts.mdx b/docs/snippets/vue/storybook-preview-global-decorator.ts.mdx deleted file mode 100644 index 5b223b160a42..000000000000 --- a/docs/snippets/vue/storybook-preview-global-decorator.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// .storybook/preview.ts - -import { Preview } from '@storybook/vue3'; - -const preview: Preview = { - decorators: [ - (story) => ({ - components: { story }, - template: '<div style="margin: 3em;"><story /></div>', - }), - ], -}; -export default preview; -``` diff --git a/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx b/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx deleted file mode 100644 index d45c79dad770..000000000000 --- a/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```js -// .storybook/preview.js - -import { setup } from '@storybook/vue3'; - -import { VApp } from 'vuetify/components'; - -import { registerPlugins } from '../src/plugins'; - -setup((app) => { - // Registers your app's plugins including Vuetify into Storybook - registerPlugins(app); -}); - -const preview = { - decorators: [ - (story, context) => { - const theme = context.globals.theme || 'light'; - return { - components: { story, VApp }, - template: ` - <v-app theme="${theme}"> - <div> - <story/> - </div> - </v-app> - `, - }; - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx b/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx deleted file mode 100644 index 7c8816faf8dc..000000000000 --- a/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// .storybook/preview.ts - -import type { Preview } from '@storybook/vue3'; -import { setup } from '@storybook/vue3'; - -import { VApp } from 'vuetify/components'; - -import { registerPlugins } from '../src/plugins'; - -setup((app) => { - // Registers your app's plugins including Vuetify into Storybook - registerPlugins(app); -}); - -const preview: Preview = { - decorators: [ - (story, context) => { - const theme = context.globals.theme || 'light'; - return { - components: { story, VApp }, - template: ` - <v-app theme="${theme}"> - <div class="d-flex"> - <story/> - </div> - </v-app> - `, - }; - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx b/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx deleted file mode 100644 index 7c8816faf8dc..000000000000 --- a/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// .storybook/preview.ts - -import type { Preview } from '@storybook/vue3'; -import { setup } from '@storybook/vue3'; - -import { VApp } from 'vuetify/components'; - -import { registerPlugins } from '../src/plugins'; - -setup((app) => { - // Registers your app's plugins including Vuetify into Storybook - registerPlugins(app); -}); - -const preview: Preview = { - decorators: [ - (story, context) => { - const theme = context.globals.theme || 'light'; - return { - components: { story, VApp }, - template: ` - <v-app theme="${theme}"> - <div class="d-flex"> - <story/> - </div> - </v-app> - `, - }; - }, - ], -}; - -export default preview; -``` diff --git a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-3.js.mdx b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-3.js.mdx deleted file mode 100644 index 8837790f12ea..000000000000 --- a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-3.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// .storybook/preview.js - -import { setup } from '@storybook/vue3'; - -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons'; - -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; - -setup((app) => { - //👇 Adds the icon to the library so you can use it in your story. - library.add(fasPlusSquare); - app.component('font-awesome-icon', FontAwesomeIcon); -}); - -export default { - decorators: [ - (story) => ({ - components: { story }, - template: '<div style="margin: 3em;"><story /></div>', - }), - ], -}; -``` diff --git a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-3.ts.mdx b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-3.ts.mdx deleted file mode 100644 index 169fad716ca2..000000000000 --- a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.component-3.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// .storybook/preview.ts - -import { setup, Preview } from '@storybook/vue3'; - -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons'; - -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; - -setup((app) => { - //👇 Adds the icon to the library so you can use it in your story. - library.add(fasPlusSquare); - app.component('font-awesome-icon', FontAwesomeIcon); -}); - -const preview: Preview = { - decorators: [ - (story) => ({ - components: { story }, - template: '<div style="margin: 3em;"><story /></div>', - }), - ], -}; - -export default preview; -``` diff --git a/docs/snippets/vue/storybook-preview-with-library-decorator.library-3.js.mdx b/docs/snippets/vue/storybook-preview-with-library-decorator.library-3.js.mdx deleted file mode 100644 index b4d3d454b954..000000000000 --- a/docs/snippets/vue/storybook-preview-with-library-decorator.library-3.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// .storybook/preview.js - -import { setup } from '@storybook/vue3'; - -import { createPinia } from 'pinia'; - -setup((app) => { - //👇 Registers a global Pinia instance inside Storybook to be consumed by existing stories - app.use(createPinia()); -}); - -export default { - decorators: [ - (story) => ({ - components: { story }, - template: '<div style="margin: 3em;"><story /></div>', - }), - ], -}; -``` diff --git a/docs/snippets/vue/storybook-preview-with-library-decorator.library-3.ts.mdx b/docs/snippets/vue/storybook-preview-with-library-decorator.library-3.ts.mdx deleted file mode 100644 index 1aa446ec20cc..000000000000 --- a/docs/snippets/vue/storybook-preview-with-library-decorator.library-3.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// .storybook/preview.ts - -import { setup, Preview } from '@storybook/vue3'; - -import { createPinia } from 'pinia'; - -setup((app) => { - //👇 Registers a global Pinia instance inside Storybook to be consumed by existing stories - app.use(createPinia()); -}); - -const preview: Preview = { - decorators: [ - (story) => ({ - components: { story }, - template: '<div style="margin: 3em;"><story /></div>', - }), - ], -}; - -export default preview; -``` diff --git a/docs/snippets/vue/storybook-testing-addon-optional-config.js.mdx b/docs/snippets/vue/storybook-testing-addon-optional-config.js.mdx deleted file mode 100644 index d50a45ba4c7a..000000000000 --- a/docs/snippets/vue/storybook-testing-addon-optional-config.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// setupFile.js|ts - -// Storybook's preview file location -import * as globalStorybookConfig from './.storybook/preview'; - -import { setProjectAnnotations } from '@storybook/vue3'; - -setProjectAnnotations(globalStorybookConfig); -``` diff --git a/docs/snippets/vue/storybook-testing-addon-optional-config.vite.js.mdx b/docs/snippets/vue/storybook-testing-addon-optional-config.vite.js.mdx deleted file mode 100644 index a50bd78cb49b..000000000000 --- a/docs/snippets/vue/storybook-testing-addon-optional-config.vite.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// vitest.config.js - -import { defineConfig } from 'vitest/config'; -import { mergeConfig } from 'vite'; - -import viteConfig from './vite.config'; - -export default mergeConfig( - viteConfig, - defineConfig({ - test: { - globals: true, - environment: 'jsdom', - clearMocks: true, - setupFiles: './src/setupTests.js', //👈 Our configuration file enabled here - }, - }), -); -``` diff --git a/docs/snippets/vue/storybook-testing-addon-optional-config.vite.ts.mdx b/docs/snippets/vue/storybook-testing-addon-optional-config.vite.ts.mdx deleted file mode 100644 index 3161eb45448c..000000000000 --- a/docs/snippets/vue/storybook-testing-addon-optional-config.vite.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// vitest.config.ts - -/// <reference types="vitest" /> -import { defineConfig } from 'vitest/config'; -import { mergeConfig } from 'vite'; - -import viteConfig from './vite.config'; - -export default mergeConfig( - viteConfig, - defineConfig({ - test: { - globals: true, - environment: 'jsdom', - clearMocks: true, - setupFiles: './src/setupTests.ts', //👈 Our configuration file enabled here - }, - }), -); -``` diff --git a/docs/snippets/vue/tags-combo-example.js.mdx b/docs/snippets/vue/tags-combo-example.js.mdx deleted file mode 100644 index 69ad439b26f6..000000000000 --- a/docs/snippets/vue/tags-combo-example.js.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```js -// Button.stories.js -import { Button } from './Button'; - -export default { - component: Button, -}; - -export const Variant1 = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2 = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ({ - components: { Button }, - template: ` - <div> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </div> - `, - }), -}; -``` diff --git a/docs/snippets/vue/tags-combo-example.ts-4-9.mdx b/docs/snippets/vue/tags-combo-example.ts-4-9.mdx deleted file mode 100644 index b738e5525ba2..000000000000 --- a/docs/snippets/vue/tags-combo-example.ts-4-9.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/vue3'; - -import { Button } from './Button'; - -const meta = { - component: Button, -} satisfies Meta<typeof Button>; -export default meta; - -type Story = StoryObj<typeof meta>; - -export const Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ({ - components: { Button }, - template: ` - <div> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </div> - `, - }), -}; -``` diff --git a/docs/snippets/vue/tags-combo-example.ts.mdx b/docs/snippets/vue/tags-combo-example.ts.mdx deleted file mode 100644 index 99409485a5c9..000000000000 --- a/docs/snippets/vue/tags-combo-example.ts.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/vue3'; - -import { Button } from './Button'; - -const meta: Meta<typeof Button> = { - component: Button, -}; -export default meta; - -type Story = StoryObj<typeof Button>; - -export const Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => ({ - components: { Button }, - template: ` - <div> - <Button variant={1}> - <Button variant={2}> - {/* Etc... */} - </div> - `, - }), -}; -``` diff --git a/docs/snippets/vue/vue-jest-optional-config-scripts.jest.js.mdx b/docs/snippets/vue/vue-jest-optional-config-scripts.jest.js.mdx deleted file mode 100644 index 6e0a504e6a0a..000000000000 --- a/docs/snippets/vue/vue-jest-optional-config-scripts.jest.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "test": "jest --setupFiles ./setupFile.js" - } -} -``` diff --git a/docs/snippets/vue/vue-jest-optional-config-scripts.jest.ts.mdx b/docs/snippets/vue/vue-jest-optional-config-scripts.jest.ts.mdx deleted file mode 100644 index 6e0a504e6a0a..000000000000 --- a/docs/snippets/vue/vue-jest-optional-config-scripts.jest.ts.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "test": "jest --setupFiles ./setupFile.js" - } -} -``` diff --git a/docs/snippets/vue/vue3-vite-add-framework.js.mdx b/docs/snippets/vue/vue3-vite-add-framework.js.mdx deleted file mode 100644 index 009f6f74b579..000000000000 --- a/docs/snippets/vue/vue3-vite-add-framework.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - framework: '@storybook/vue3-vite', // 👈 Add this -}; -``` diff --git a/docs/snippets/vue/vue3-vite-add-framework.ts.mdx b/docs/snippets/vue/vue3-vite-add-framework.ts.mdx deleted file mode 100644 index 404f53f5cc47..000000000000 --- a/docs/snippets/vue/vue3-vite-add-framework.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/vue3-vite'; - -const config: StorybookConfig = { - // ... - framework: '@storybook/vue3-vite', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/vue/vue3-vite-install.npm.js.mdx b/docs/snippets/vue/vue3-vite-install.npm.js.mdx deleted file mode 100644 index 1d023d6e253c..000000000000 --- a/docs/snippets/vue/vue3-vite-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/vue3-vite -``` diff --git a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx b/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx deleted file mode 100644 index 26dafd70c3ad..000000000000 --- a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/vue3-vite -``` diff --git a/docs/snippets/vue/vue3-vite-install.yarn.js.mdx b/docs/snippets/vue/vue3-vite-install.yarn.js.mdx deleted file mode 100644 index 427eb154d182..000000000000 --- a/docs/snippets/vue/vue3-vite-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/vue3-vite -``` diff --git a/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx b/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx deleted file mode 100644 index c5b6324a748e..000000000000 --- a/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - framework: '@storybook/vue3-webpack5', // 👈 Add this -}; -``` diff --git a/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx b/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx deleted file mode 100644 index d83650ea1e35..000000000000 --- a/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/vue3-webpack5'; - -const config: StorybookConfig = { - // ... - framework: '@storybook/vue3-webpack5', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx deleted file mode 100644 index 55a7bc78bd80..000000000000 --- a/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/vue3-webpack5 -``` diff --git a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx deleted file mode 100644 index 91cb03115e56..000000000000 --- a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/vue3-webpack5 -``` diff --git a/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx b/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx deleted file mode 100644 index e811a7ae3025..000000000000 --- a/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/vue3-webpack5 -``` diff --git a/docs/snippets/vue/your-component-with-decorator.js.mdx b/docs/snippets/vue/your-component-with-decorator.js.mdx deleted file mode 100644 index 2bec032fb58a..000000000000 --- a/docs/snippets/vue/your-component-with-decorator.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// YourComponent.stories.js - -import YourComponent from './YourComponent.vue'; - -export default { - component: YourComponent, - decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })], -}; -``` diff --git a/docs/snippets/vue/your-component-with-decorator.ts-4-9.mdx b/docs/snippets/vue/your-component-with-decorator.ts-4-9.mdx deleted file mode 100644 index e45d5df94929..000000000000 --- a/docs/snippets/vue/your-component-with-decorator.ts-4-9.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta } from '@storybook/vue3'; - -import YourComponent from './YourComponent.vue'; - -const meta = { - component: YourComponent, - decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })], -} satisfies Meta<typeof YourComponent>; - -export default meta; -``` diff --git a/docs/snippets/vue/your-component-with-decorator.ts.mdx b/docs/snippets/vue/your-component-with-decorator.ts.mdx deleted file mode 100644 index 1cb1aad6a363..000000000000 --- a/docs/snippets/vue/your-component-with-decorator.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta } from '@storybook/vue3'; - -import YourComponent from './YourComponent.vue'; - -const meta: Meta<typeof YourComponent> = { - component: YourComponent, - decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })], -}; - -export default meta; -``` diff --git a/docs/snippets/vue/your-component.3.js.mdx b/docs/snippets/vue/your-component.3.js.mdx deleted file mode 100644 index 992bcecb2107..000000000000 --- a/docs/snippets/vue/your-component.3.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// YourComponent.stories.js - -import YourComponent from './YourComponent.vue'; - -//👇 This default export determines where your story goes in the story list -export default { - component: YourComponent, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const FirstStory = { - render: (args) => ({ - components: { YourComponent }, - setup() { - return { args }; - }, - template: '<YourComponent v-bind="args" />', - }), - args: { - //👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/vue/your-component.3.ts-4-9.mdx b/docs/snippets/vue/your-component.3.ts-4-9.mdx deleted file mode 100644 index 647bfa066c25..000000000000 --- a/docs/snippets/vue/your-component.3.ts-4-9.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// YourComponent.stories.js - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import YourComponent from './YourComponent.vue'; - -const meta = { - component: YourComponent, -} satisfies Meta<typeof YourComponent>; - -//👇 This default export determines where your story goes in the story 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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => ({ - components: { YourComponent }, - setup() { - return { args }; - }, - template: '<YourComponent v-bind="args" />', - }), - args: { - //👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/vue/your-component.3.ts.mdx b/docs/snippets/vue/your-component.3.ts.mdx deleted file mode 100644 index 21e6a39308f1..000000000000 --- a/docs/snippets/vue/your-component.3.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/vue3'; - -import YourComponent from './YourComponent.vue'; - -const meta: Meta<typeof YourComponent> = { - component: YourComponent, -}; - -//👇 This default export determines where your story goes in the story list -export default meta; -type Story = StoryObj<typeof YourComponent>; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: (args) => ({ - components: { YourComponent }, - setup() { - return { args }; - }, - template: '<YourComponent v-bind="args" />', - }), - args: { - //👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/web-components/addon-actions-action-function.js.mdx b/docs/snippets/web-components/addon-actions-action-function.js.mdx deleted file mode 100644 index cf9b0212054a..000000000000 --- a/docs/snippets/web-components/addon-actions-action-function.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// Button.stories.js -import { action } from '@storybook/addon-actions'; - -export default { - component: 'demo-button', - args: { - // 👇 Create an action that appears when the onClick event is fired - onClick: action('on-click'), - }, -}; -``` diff --git a/docs/snippets/web-components/addon-actions-action-function.ts.mdx b/docs/snippets/web-components/addon-actions-action-function.ts.mdx deleted file mode 100644 index f5224800fcf3..000000000000 --- a/docs/snippets/web-components/addon-actions-action-function.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta } from '@storybook/angular'; -import { action } from '@storybook/addon-actions'; - -const meta: Meta { - component: 'demo-button', - args: { - // 👇 Create an action that appears when the onClick event is fired - onClick: action('on-click'), - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/addon-highlight-reset.js.mdx b/docs/snippets/web-components/addon-highlight-reset.js.mdx deleted file mode 100644 index 120eb341e106..000000000000 --- a/docs/snippets/web-components/addon-highlight-reset.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// MyComponent.stories.js - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; - -export default { - component: 'my-component', -}; - -export const ResetHighlight = { - decorators: [ - (story) => { - const emit = useChannel({}); - emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements - emit(HIGHLIGHT, { - elements: ['header', 'section', 'footer'], - }); - return story(); - }, - ], -}; -``` diff --git a/docs/snippets/web-components/addon-highlight-reset.ts.mdx b/docs/snippets/web-components/addon-highlight-reset.ts.mdx deleted file mode 100644 index f6f3fc849ceb..000000000000 --- a/docs/snippets/web-components/addon-highlight-reset.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const ResetHighlight: Story = { - decorators: [ - (story) => { - const emit = useChannel({}); - emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements - emit(HIGHLIGHT, { - elements: ['header', 'section', 'footer'], - }); - return story(); - }, - ], -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-canvas-parameter.js.mdx b/docs/snippets/web-components/api-doc-block-canvas-parameter.js.mdx deleted file mode 100644 index 3899d3cf734b..000000000000 --- a/docs/snippets/web-components/api-doc-block-canvas-parameter.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js - -export default { - title: 'Button', - component: 'demo-button', -}; - -export const Basic = { - parameters: { - docs: { - canvas: { sourceState: 'shown' }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-canvas-parameter.ts.mdx b/docs/snippets/web-components/api-doc-block-canvas-parameter.ts.mdx deleted file mode 100644 index cc1c55abff3c..000000000000 --- a/docs/snippets/web-components/api-doc-block-canvas-parameter.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Basic: Story = { - parameters: { - docs: { - canvas: { sourceState: 'shown' }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-controls-parameter.js.mdx b/docs/snippets/web-components/api-doc-block-controls-parameter.js.mdx deleted file mode 100644 index 3899d3cf734b..000000000000 --- a/docs/snippets/web-components/api-doc-block-controls-parameter.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js - -export default { - title: 'Button', - component: 'demo-button', -}; - -export const Basic = { - parameters: { - docs: { - canvas: { sourceState: 'shown' }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-controls-parameter.ts.mdx b/docs/snippets/web-components/api-doc-block-controls-parameter.ts.mdx deleted file mode 100644 index 065330a7f162..000000000000 --- a/docs/snippets/web-components/api-doc-block-controls-parameter.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', - parameters: { - docs: { - controls: { exclude: ['style'] }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/api-doc-block-description-example.js.mdx b/docs/snippets/web-components/api-doc-block-description-example.js.mdx deleted file mode 100644 index a1cbb54b1a1e..000000000000 --- a/docs/snippets/web-components/api-doc-block-description-example.js.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```js -// Button.stories.js - -export default { - title: 'Button', - component: 'demo-button', - parameters: { - docs: { - description: { - component: 'Another description, overriding the comments', - }, - }, - }, -}; - -/** - * # Button stories - * These stories showcase the button - */ -export const Primary = { - parameters: { - docs: { - description: { - story: 'Another description on the story, overriding the comments', - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-description-example.ts.mdx b/docs/snippets/web-components/api-doc-block-description-example.ts.mdx deleted file mode 100644 index 1362246cd5bb..000000000000 --- a/docs/snippets/web-components/api-doc-block-description-example.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -/** - * # Button stories - * These stories showcase the button - */ -const meta: Meta = { - title: 'Button', - component: 'demo-button', - parameters: { - docs: { - description: { - component: 'Another description, overriding the comments', - }, - }, - }, -}; - -export default meta; -type Story = StoryObj; - -/** - * # Primary Button - * This is the primary button - */ -export const Primary: Story = { - parameters: { - docs: { - description: { - story: 'Another description on the story, overriding the comments', - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-source-parameter.js.mdx b/docs/snippets/web-components/api-doc-block-source-parameter.js.mdx deleted file mode 100644 index cb106d4367f0..000000000000 --- a/docs/snippets/web-components/api-doc-block-source-parameter.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.ts - -export default { - title: 'Button', - component: 'demo-button', -}; - -export const Basic = { - parameters: { - docs: { - source: { language: 'tsx' }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-source-parameter.ts.mdx b/docs/snippets/web-components/api-doc-block-source-parameter.ts.mdx deleted file mode 100644 index 61f902540684..000000000000 --- a/docs/snippets/web-components/api-doc-block-source-parameter.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Basic: Story = { - parameters: { - docs: { - source: { language: 'tsx' }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-story-parameter.js.mdx b/docs/snippets/web-components/api-doc-block-story-parameter.js.mdx deleted file mode 100644 index 8c3aacf39885..000000000000 --- a/docs/snippets/web-components/api-doc-block-story-parameter.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js - -export default { - title: 'Button', - component: 'demo-button', -}; - -export const Basic = { - parameters: { - docs: { - story: { autoplay: true }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/api-doc-block-story-parameter.ts.mdx b/docs/snippets/web-components/api-doc-block-story-parameter.ts.mdx deleted file mode 100644 index 4ca079b88aa2..000000000000 --- a/docs/snippets/web-components/api-doc-block-story-parameter.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Basic: Story = { - parameters: { - docs: { - story: { autoplay: true }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-control.js.mdx b/docs/snippets/web-components/arg-types-control.js.mdx deleted file mode 100644 index caa3f03d85dc..000000000000 --- a/docs/snippets/web-components/arg-types-control.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Example.stories.js - -export default { - component: 'demo-example', - argTypes: { - value: { - control: { - type: 'number', - min: 0, - max: 100, - step: 10, - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-control.ts.mdx b/docs/snippets/web-components/arg-types-control.ts.mdx deleted file mode 100644 index 7c989cd85cb4..000000000000 --- a/docs/snippets/web-components/arg-types-control.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - value: { - control: { - type: 'number', - min: 0, - max: 100, - step: 10, - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-default-value.js.mdx b/docs/snippets/web-components/arg-types-default-value.js.mdx deleted file mode 100644 index 1adbe70fb486..000000000000 --- a/docs/snippets/web-components/arg-types-default-value.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Example.stories.js - -export default { - component: 'demo-example', - argTypes: { - value: { - // ⛔️ Deprecated, do not use - defaultValue: 0, - }, - }, - // ✅ Do this instead - args: { - value: 0, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-default-value.ts.mdx b/docs/snippets/web-components/arg-types-default-value.ts.mdx deleted file mode 100644 index 73a989becbbe..000000000000 --- a/docs/snippets/web-components/arg-types-default-value.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - value: { - // ⛔️ Deprecated, do not use - defaultValue: 0, - }, - }, - // ✅ Do this instead - args: { - value: 0, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-description.js.mdx b/docs/snippets/web-components/arg-types-description.js.mdx deleted file mode 100644 index 54dd87327e3e..000000000000 --- a/docs/snippets/web-components/arg-types-description.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// Example.stories.js - -export default { - component: 'demo-example', - argTypes: { - value: { - description: 'The value of the slider', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-description.ts.mdx b/docs/snippets/web-components/arg-types-description.ts.mdx deleted file mode 100644 index 6ee86c3b3f0e..000000000000 --- a/docs/snippets/web-components/arg-types-description.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - value: { - description: 'The value of the slider', - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-if.js.mdx b/docs/snippets/web-components/arg-types-if.js.mdx deleted file mode 100644 index 2b0f86869835..000000000000 --- a/docs/snippets/web-components/arg-types-if.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```js -// Example.stories.js - -export default { - component: 'demo-example', - argTypes: { - parent: { control: 'select', options: ['one', 'two', 'three'] }, - - // 👇 Only shown when `parent` arg exists - parentExists: { if: { arg: 'parent', exists: true } }, - - // 👇 Only shown when `parent` arg does not exist - parentDoesNotExist: { if: { arg: 'parent', exists: false } }, - - // 👇 Only shown when `parent` arg value is truthy - parentIsTruthy: { if: { arg: 'parent' } }, - parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } }, - - // 👇 Only shown when `parent` arg value is not truthy - parentIsNotTruthy: { if: { arg: 'parent', truthy: false } }, - - // 👇 Only shown when `parent` arg value is 'three' - parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } }, - - // 👇 Only shown when `parent` arg value is not 'three' - parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } }, - - // Each of the above can also be conditional on the value of a globalType, e.g.: - - // 👇 Only shown when `theme` global exists - parentExists: { if: { global: 'theme', exists: true } }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-if.ts.mdx b/docs/snippets/web-components/arg-types-if.ts.mdx deleted file mode 100644 index 80d27cf5b83a..000000000000 --- a/docs/snippets/web-components/arg-types-if.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - parent: { control: 'select', options: ['one', 'two', 'three'] }, - - // 👇 Only shown when `parent` arg exists - parentExists: { if: { arg: 'parent', exists: true } }, - - // 👇 Only shown when `parent` arg does not exist - parentDoesNotExist: { if: { arg: 'parent', exists: false } }, - - // 👇 Only shown when `parent` arg value is truthy - parentIsTruthy: { if: { arg: 'parent' } }, - parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } }, - - // 👇 Only shown when `parent` arg value is not truthy - parentIsNotTruthy: { if: { arg: 'parent', truthy: false } }, - - // 👇 Only shown when `parent` arg value is 'three' - parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } }, - - // 👇 Only shown when `parent` arg value is not 'three' - parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } }, - - // Each of the above can also be conditional on the value of a globalType, e.g.: - - // 👇 Only shown when `theme` global exists - parentExists: { if: { global: 'theme', exists: true } }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-in-meta.js.mdx b/docs/snippets/web-components/arg-types-in-meta.js.mdx deleted file mode 100644 index b4522d4b5464..000000000000 --- a/docs/snippets/web-components/arg-types-in-meta.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - argTypes: { - // 👇 All Button stories expect a label arg - label: { - control: 'text', - description: 'Overwritten description', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-in-meta.ts.mdx b/docs/snippets/web-components/arg-types-in-meta.ts.mdx deleted file mode 100644 index bdc172197117..000000000000 --- a/docs/snippets/web-components/arg-types-in-meta.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - argTypes: { - // 👇 All Button stories expect a label arg - label: { - control: 'text', - description: 'Overwritten description', - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-in-story.js.mdx b/docs/snippets/web-components/arg-types-in-story.js.mdx deleted file mode 100644 index b42be873c969..000000000000 --- a/docs/snippets/web-components/arg-types-in-story.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Basic = { - argTypes: { - // 👇 This story expects a label arg - label: { - control: 'text', - description: 'Overwritten description', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-in-story.ts.mdx b/docs/snippets/web-components/arg-types-in-story.ts.mdx deleted file mode 100644 index 00ee4593d241..000000000000 --- a/docs/snippets/web-components/arg-types-in-story.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Basic: Story = { - argTypes: { - // 👇 This story expects a label arg - label: { - control: 'text', - description: 'Overwritten description', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-mapping.js.mdx b/docs/snippets/web-components/arg-types-mapping.js.mdx deleted file mode 100644 index 65b296831f75..000000000000 --- a/docs/snippets/web-components/arg-types-mapping.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Example.stories.js - -import { html } from 'lit'; - -export default { - component: 'demo-example', - argTypes: { - label: { - options: ['Normal', 'Bold', 'Italic'], - mapping: { - Bold: html`<b>Bold</b>`, - Italic: html`<i>Italic</i>`, - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-mapping.ts.mdx b/docs/snippets/web-components/arg-types-mapping.ts.mdx deleted file mode 100644 index d7d915ce2fe0..000000000000 --- a/docs/snippets/web-components/arg-types-mapping.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - label: { - options: ['Normal', 'Bold', 'Italic'], - mapping: { - Bold: html`<b>Bold</b>`, - Italic: html`<i>Italic</i>`, - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-name.js.mdx b/docs/snippets/web-components/arg-types-name.js.mdx deleted file mode 100644 index a87c2fdf2704..000000000000 --- a/docs/snippets/web-components/arg-types-name.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// Example.stories.js - -export default { - component: 'demo-example', - argTypes: { - actualArgName: { - name: 'Friendly name', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-name.ts.mdx b/docs/snippets/web-components/arg-types-name.ts.mdx deleted file mode 100644 index 117ee4dc2c4b..000000000000 --- a/docs/snippets/web-components/arg-types-name.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - actualArgName: { - name: 'Friendly name', - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-options.js.mdx b/docs/snippets/web-components/arg-types-options.js.mdx deleted file mode 100644 index a49ccacc9fc4..000000000000 --- a/docs/snippets/web-components/arg-types-options.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// Example.stories.js - -export default { - component: 'demo-example', - argTypes: { - icon: { - options: ['arrow-up', 'arrow-down', 'loading'], - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-options.ts.mdx b/docs/snippets/web-components/arg-types-options.ts.mdx deleted file mode 100644 index 912c035dd30d..000000000000 --- a/docs/snippets/web-components/arg-types-options.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - icon: { - options: ['arrow-up', 'arrow-down', 'loading'], - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-table.js.mdx b/docs/snippets/web-components/arg-types-table.js.mdx deleted file mode 100644 index a891b937c8ec..000000000000 --- a/docs/snippets/web-components/arg-types-table.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Example.stories.js - -export default { - component: 'demo-example', - argTypes: { - value: { - table: { - defaultValue: { summary: 0 }, - type: { summary: 'number' }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-table.ts.mdx b/docs/snippets/web-components/arg-types-table.ts.mdx deleted file mode 100644 index 0756a77f4d9e..000000000000 --- a/docs/snippets/web-components/arg-types-table.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - value: { - table: { - defaultValue: { summary: 0 }, - type: { summary: 'number' }, - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/arg-types-type.js.mdx b/docs/snippets/web-components/arg-types-type.js.mdx deleted file mode 100644 index 4254ebee1df5..000000000000 --- a/docs/snippets/web-components/arg-types-type.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// Example.stories.js - -export default { - component: 'demo-example', - argTypes: { - value: { type: 'number' }, - }, -}; -``` diff --git a/docs/snippets/web-components/arg-types-type.ts.mdx b/docs/snippets/web-components/arg-types-type.ts.mdx deleted file mode 100644 index c4b25ec2ba27..000000000000 --- a/docs/snippets/web-components/arg-types-type.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Example.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-example', - argTypes: { - value: { type: 'number' }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/before-each-in-meta-mock-date.js.mdx b/docs/snippets/web-components/before-each-in-meta-mock-date.js.mdx deleted file mode 100644 index 7c4a9907894c..000000000000 --- a/docs/snippets/web-components/before-each-in-meta-mock-date.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// Page.stories.js -import MockDate from 'mockdate'; - -import { getUserFromSession } from '../../api/session.mock'; - -export default { - component: 'my-page', - // 👇 Set the value of Date for every story in the file - async beforeEach() { - MockDate.set('2024-02-14'); - - // 👇 Reset the Date after each story - return () => { - MockDate.reset(); - }; - }, -}; - -export const Default = { - async play({ canvasElement }) { - // ... This will run with the mocked Date - }, -}; -``` diff --git a/docs/snippets/web-components/before-each-in-meta-mock-date.ts.mdx b/docs/snippets/web-components/before-each-in-meta-mock-date.ts.mdx deleted file mode 100644 index 166b29c6028e..000000000000 --- a/docs/snippets/web-components/before-each-in-meta-mock-date.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// Page.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; -import MockDate from 'mockdate'; - -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { getUserFromSession } from '#api/session.mock'; - -const meta: Meta = { - component: 'my-page', - // 👇 Set the value of Date for every story in the file - async beforeEach() { - MockDate.set('2024-02-14'); - - // 👇 Reset the Date after each story - return () => { - MockDate.reset(); - }; - }, -}; -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - async play({ canvasElement }) { - // ... This will run with the mocked Date - }, -}; -``` diff --git a/docs/snippets/web-components/button-component-with-proptypes.js.mdx b/docs/snippets/web-components/button-component-with-proptypes.js.mdx deleted file mode 100644 index 2d8d86810a63..000000000000 --- a/docs/snippets/web-components/button-component-with-proptypes.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// Button.js - -import { LitElement, html } from 'lit'; - -/** - * @prop {string} content - The display label of the button - * @prop {boolean} isDisabled - Checks if the button should be disabled - * @summary This is a custom button element - * @tag custom-button - */ - -export class CustomButton extends LitElement { - static get properties() { - return { - content: { type: String }, - isDisabled: { type: Boolean }, - }; - } - - constructor() { - super(); - this.content = 'One'; - this.isDisabled = false; - } - - render() { - return html` <button type="button" ?disabled=${this.isDisabled}>${this.content}</button> `; - } -} - -customElements.define('custom-button', CustomButton); -``` diff --git a/docs/snippets/web-components/button-component-with-proptypes.ts.mdx b/docs/snippets/web-components/button-component-with-proptypes.ts.mdx deleted file mode 100644 index dce478b9996d..000000000000 --- a/docs/snippets/web-components/button-component-with-proptypes.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// Button.ts - -import { LitElement, html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -/** - * @prop {string} content - The display label of the button - * @prop {boolean} isDisabled - Checks if the button should be disabled - * @summary This is a custom button element - * @tag custom-button - */ - -@customElement('custom-button') -export class CustomButton extends LitElement { - @property() - content?: string = 'One'; - @property() - isDisabled?: boolean = false; - - render() { - return html` <button type="button" ?disabled=${this.isDisabled}>${this.content}</button> `; - } -} -``` diff --git a/docs/snippets/web-components/button-group-story.js.mdx b/docs/snippets/web-components/button-group-story.js.mdx deleted file mode 100644 index 956f7d5b4e2f..000000000000 --- a/docs/snippets/web-components/button-group-story.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// ButtonGroup.stories.js - -// 👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -export default { - component: 'demo-button-group', -}; - -export const Pair = { - args: { - buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], - orientation: 'horizontal', - }, -}; -``` diff --git a/docs/snippets/web-components/button-group-story.ts.mdx b/docs/snippets/web-components/button-group-story.ts.mdx deleted file mode 100644 index 2c74e216e0a1..000000000000 --- a/docs/snippets/web-components/button-group-story.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// ButtonGroup.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -// 👇 Imports the Button stories -import * as ButtonStories from './Button.stories'; - -const meta: Meta = { - component: 'demo-button-group', -}; - -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/web-components/button-story-action-event-handle.js.mdx b/docs/snippets/web-components/button-story-action-event-handle.js.mdx deleted file mode 100644 index ff5eb2da04ba..000000000000 --- a/docs/snippets/web-components/button-story-action-event-handle.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js - -import { withActions } from '@storybook/addon-actions/decorator'; - -export default { - component: 'demo-button', - parameters: { - actions: { - handles: ['mouseover', 'click .btn'], - }, - }, - decorators: [withActions], -}; -``` diff --git a/docs/snippets/web-components/button-story-action-event-handle.ts.mdx b/docs/snippets/web-components/button-story-action-event-handle.ts.mdx deleted file mode 100644 index 81b119c03836..000000000000 --- a/docs/snippets/web-components/button-story-action-event-handle.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; -import { withActions } from '@storybook/addon-actions/decorator'; - -const meta: Meta = { - component: 'demo-button', - parameters: { - actions: { - handles: ['mouseover', 'click .btn'], - }, - }, - decorators: [withActions], -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-argtypes-with-categories.js.mdx b/docs/snippets/web-components/button-story-argtypes-with-categories.js.mdx deleted file mode 100644 index aebfd72d2581..000000000000 --- a/docs/snippets/web-components/button-story-argtypes-with-categories.js.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - argTypes: { - // Assigns the argTypes to the Colors category - backgroundColor: { - control: 'color', - table: { - category: 'Colors', - }, - }, - primary: { - table: { - category: 'Colors', - }, - }, - // Assigns the argType to the Text category - label: { - table: { - category: 'Text', - }, - }, - // Assigns the argType to the Events category - onClick: { - table: { - category: 'Events', - }, - }, - // Assigns the argType to the Sizes category - size: { - table: { - category: 'Sizes', - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-argtypes-with-categories.ts.mdx b/docs/snippets/web-components/button-story-argtypes-with-categories.ts.mdx deleted file mode 100644 index d052b262bd5e..000000000000 --- a/docs/snippets/web-components/button-story-argtypes-with-categories.ts.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - argTypes: { - // Assigns the argTypes to the Colors category - backgroundColor: { - control: 'color', - table: { - category: 'Colors', - }, - }, - primary: { - table: { - category: 'Colors', - }, - }, - // Assigns the argType to the Text category - label: { - table: { - category: 'Text', - }, - }, - // Assigns the argType to the Events category - onClick: { - table: { - category: 'Events', - }, - }, - // Assigns the argType to the Sizes category - size: { - table: { - category: 'Sizes', - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-argtypes-with-subcategories.js.mdx b/docs/snippets/web-components/button-story-argtypes-with-subcategories.js.mdx deleted file mode 100644 index ae39da3579e0..000000000000 --- a/docs/snippets/web-components/button-story-argtypes-with-subcategories.js.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - argTypes: { - // Assigns the argTypes to the Colors category - backgroundColor: { - control: 'color', - table: { - category: 'Colors', - // Assigns the argTypes to a specific subcategory - subcategory: 'Button colors', - }, - }, - primary: { - table: { - category: 'Colors', - subcategory: 'Button style', - }, - }, - label: { - table: { - category: 'Text', - subcategory: 'Button contents', - }, - }, - // Assigns the argType to the Events category - onClick: { - table: { - category: 'Events', - subcategory: 'Button Events', - }, - }, - // Assigns the argType to the Sizes category - size: { - table: { - category: 'Sizes', - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-argtypes-with-subcategories.ts.mdx b/docs/snippets/web-components/button-story-argtypes-with-subcategories.ts.mdx deleted file mode 100644 index 8124b83554bc..000000000000 --- a/docs/snippets/web-components/button-story-argtypes-with-subcategories.ts.mdx +++ /dev/null @@ -1,47 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - argTypes: { - // Assigns the argTypes to the Colors category - backgroundColor: { - control: 'color', - table: { - category: 'Colors', - // Assigns the argTypes to a specific subcategory - subcategory: 'Button colors', - }, - }, - primary: { - table: { - category: 'Colors', - subcategory: 'Button style', - }, - }, - label: { - table: { - category: 'Text', - subcategory: 'Button contents', - }, - }, - // Assigns the argType to the Events category - onClick: { - table: { - category: 'Events', - subcategory: 'Button Events', - }, - }, - // Assigns the argType to the Sizes category - size: { - table: { - category: 'Sizes', - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-baseline.ts.mdx b/docs/snippets/web-components/button-story-baseline.ts.mdx deleted file mode 100644 index 121b8caca910..000000000000 --- a/docs/snippets/web-components/button-story-baseline.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -//👇 Throws a type error it the args don't match the component props -export const Primary: Story = { - args: { - primary: true, - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-click-handler-args.js.mdx b/docs/snippets/web-components/button-story-click-handler-args.js.mdx deleted file mode 100644 index 6afc85655fc3..000000000000 --- a/docs/snippets/web-components/button-story-click-handler-args.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// Button.stories.js - -import { html } from 'lit'; - -import { action } from '@storybook/addon-actions'; - -export default { - component: 'custom-button', -}; - -export const Text = { - render: ({ label, onClick }) => - html`<custom-button label="${label}" @click=${onClick}></custom-button>`, - args: { - label: 'Hello', - onClick: action('clicked'), - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-click-handler-args.ts.mdx b/docs/snippets/web-components/button-story-click-handler-args.ts.mdx deleted file mode 100644 index 81af43e6ba6a..000000000000 --- a/docs/snippets/web-components/button-story-click-handler-args.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { action } from '@storybook/addon-actions'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'custom-button', -}; - -export default meta; -type Story = StoryObj; - -export const Text: Story = { - render: ({ label, onClick }) => - html`<custom-button label="${label}" @click=${onClick}></custom-button>`, - args: { - label: 'Hello', - onClick: action('clicked'), - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-click-handler-simplificated.js.mdx b/docs/snippets/web-components/button-story-click-handler-simplificated.js.mdx deleted file mode 100644 index ad0ac5a99e12..000000000000 --- a/docs/snippets/web-components/button-story-click-handler-simplificated.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'custom-button', - argTypes: { - onClick: { action: 'onClick' }, - }, -}; - -export const Text = { - args: {...}, -}; -``` diff --git a/docs/snippets/web-components/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/web-components/button-story-click-handler-simplificated.ts.mdx deleted file mode 100644 index b4acbace86f5..000000000000 --- a/docs/snippets/web-components/button-story-click-handler-simplificated.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'custom-button', - argTypes: { - onClick: { action: 'onClick' }, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Text: Story = { - args: {}, -}; -``` diff --git a/docs/snippets/web-components/button-story-click-handler.js.mdx b/docs/snippets/web-components/button-story-click-handler.js.mdx deleted file mode 100644 index b42a3778224b..000000000000 --- a/docs/snippets/web-components/button-story-click-handler.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js - -import { html } from 'lit'; - -import { action } from '@storybook/addon-actions'; - -export default { - component: 'custom-button', -}; - -export const Text = { - render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`, -}; -``` diff --git a/docs/snippets/web-components/button-story-click-handler.ts.mdx b/docs/snippets/web-components/button-story-click-handler.ts.mdx deleted file mode 100644 index dbd76f7175bf..000000000000 --- a/docs/snippets/web-components/button-story-click-handler.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { action } from '@storybook/addon-actions'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'custom-button', -}; - -export default meta; -type Story = StoryObj; - -export const Text: Story = { - render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`, -}; -``` diff --git a/docs/snippets/web-components/button-story-component-args-primary.js.mdx b/docs/snippets/web-components/button-story-component-args-primary.js.mdx deleted file mode 100644 index bc5387444526..000000000000 --- a/docs/snippets/web-components/button-story-component-args-primary.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - // 👇 Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - args: { - // 👇 Now all Button stories will be primary. - primary: true, - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-component-args-primary.ts.mdx b/docs/snippets/web-components/button-story-component-args-primary.ts.mdx deleted file mode 100644 index 618b4e342f41..000000000000 --- a/docs/snippets/web-components/button-story-component-args-primary.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// Button.stories.js - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - // 👇 Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - args: { - // 👇 Now all Button stories will be primary. - primary: true, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-component-decorator.js.mdx b/docs/snippets/web-components/button-story-component-decorator.js.mdx deleted file mode 100644 index 5576589ab27f..000000000000 --- a/docs/snippets/web-components/button-story-component-decorator.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// Button.stories.js - -import { html } from 'lit'; - -export default { - component: 'demo-button', - decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`], -}; - -export const Example = {}; -``` diff --git a/docs/snippets/web-components/button-story-component-decorator.ts.mdx b/docs/snippets/web-components/button-story-component-decorator.ts.mdx deleted file mode 100644 index fe6dd814aa53..000000000000 --- a/docs/snippets/web-components/button-story-component-decorator.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'demo-button', - decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`], -}; - -export default meta; -type Story = StoryObj; - -export const Example: Story = {}; -``` diff --git a/docs/snippets/web-components/button-story-controls-primary-variant.js.mdx b/docs/snippets/web-components/button-story-controls-primary-variant.js.mdx deleted file mode 100644 index e188de89cbc9..000000000000 --- a/docs/snippets/web-components/button-story-controls-primary-variant.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Success = { - args: { - variant: 'primary', - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-controls-primary-variant.ts.mdx b/docs/snippets/web-components/button-story-controls-primary-variant.ts.mdx deleted file mode 100644 index dd31c77c00f5..000000000000 --- a/docs/snippets/web-components/button-story-controls-primary-variant.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - args: { - variant: 'primary', - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-controls-radio-group.js.mdx b/docs/snippets/web-components/button-story-controls-radio-group.js.mdx deleted file mode 100644 index 6e7599153253..000000000000 --- a/docs/snippets/web-components/button-story-controls-radio-group.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - argTypes: { - variant: { - options: ['primary', 'secondary'], - control: { type: 'radio' }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-controls-radio-group.ts.mdx b/docs/snippets/web-components/button-story-controls-radio-group.ts.mdx deleted file mode 100644 index d68f1fd8c8b6..000000000000 --- a/docs/snippets/web-components/button-story-controls-radio-group.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - argTypes: { - variant: { - options: ['primary', 'secondary'], - control: { type: 'radio' }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-decorator.js.mdx b/docs/snippets/web-components/button-story-decorator.js.mdx deleted file mode 100644 index 5291a359acf5..000000000000 --- a/docs/snippets/web-components/button-story-decorator.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -import { html } from 'lit'; - -export default { - component: 'demo-button', -}; - -export const Primary = { - decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`], -}; -``` diff --git a/docs/snippets/web-components/button-story-decorator.ts.mdx b/docs/snippets/web-components/button-story-decorator.ts.mdx deleted file mode 100644 index 88b367f00dfe..000000000000 --- a/docs/snippets/web-components/button-story-decorator.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`], -}; -``` diff --git a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx deleted file mode 100644 index ac5eb51344b6..000000000000 --- a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; -``` diff --git a/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx b/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx deleted file mode 100644 index 8ddd34a485c3..000000000000 --- a/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-default-export.js.mdx b/docs/snippets/web-components/button-story-default-export.js.mdx deleted file mode 100644 index 1db6ccfc2f33..000000000000 --- a/docs/snippets/web-components/button-story-default-export.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// Button.stories.js - -export default { - title: 'Button', - component: 'demo-button', -}; -``` diff --git a/docs/snippets/web-components/button-story-default-export.ts.mdx b/docs/snippets/web-components/button-story-default-export.ts.mdx deleted file mode 100644 index 8ddd34a485c3..000000000000 --- a/docs/snippets/web-components/button-story-default-export.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-disable-addon.js.mdx b/docs/snippets/web-components/button-story-disable-addon.js.mdx deleted file mode 100644 index b3c12110dc9b..000000000000 --- a/docs/snippets/web-components/button-story-disable-addon.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - parameters: { - myAddon: { disable: true }, // Disables the addon - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-disable-addon.ts.mdx b/docs/snippets/web-components/button-story-disable-addon.ts.mdx deleted file mode 100644 index 0ad564b6fb24..000000000000 --- a/docs/snippets/web-components/button-story-disable-addon.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - parameters: { - myAddon: { disable: true }, // Disables the addon - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-grouped.js.mdx b/docs/snippets/web-components/button-story-grouped.js.mdx deleted file mode 100644 index 620ca54a9464..000000000000 --- a/docs/snippets/web-components/button-story-grouped.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// Button.stories.js - -export default { - title: 'Design System/Atoms/Button', - component: 'demo-button', -}; -``` diff --git a/docs/snippets/web-components/button-story-grouped.ts.mdx b/docs/snippets/web-components/button-story-grouped.ts.mdx deleted file mode 100644 index 418a8fe45d08..000000000000 --- a/docs/snippets/web-components/button-story-grouped.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Design System/Atoms/Button', - component: 'demo-button', -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-hoisted.js.mdx b/docs/snippets/web-components/button-story-hoisted.js.mdx deleted file mode 100644 index 9839774d3966..000000000000 --- a/docs/snippets/web-components/button-story-hoisted.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// Button.stories.js - -export default { - title: 'Design System/Atoms/Button', - component: 'demo-button', -}; - -// This is the only named export in the file, and it matches the component name -export const Button = {}; -``` diff --git a/docs/snippets/web-components/button-story-hoisted.ts.mdx b/docs/snippets/web-components/button-story-hoisted.ts.mdx deleted file mode 100644 index 2eae6d8dc3df..000000000000 --- a/docs/snippets/web-components/button-story-hoisted.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/your-framework'; - -const meta: Meta = { - title: 'Design System/Atoms/Button', - component: 'demo-component', -}; - -export default meta; -type Story = StoryObj; - -// This is the only named export in the file, and it matches the component name -export const Button: Story = {}; -``` diff --git a/docs/snippets/web-components/button-story-matching-argtypes.js.mdx b/docs/snippets/web-components/button-story-matching-argtypes.js.mdx deleted file mode 100644 index 19e76aa44805..000000000000 --- a/docs/snippets/web-components/button-story-matching-argtypes.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - parameters: { actions: { argTypesRegex: '^on.*' } }, -}; -``` diff --git a/docs/snippets/web-components/button-story-matching-argtypes.ts.mdx b/docs/snippets/web-components/button-story-matching-argtypes.ts.mdx deleted file mode 100644 index 6192762d4670..000000000000 --- a/docs/snippets/web-components/button-story-matching-argtypes.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - parameters: { actions: { argTypesRegex: '^on.*' } }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/button-story-primary-composition.js.mdx b/docs/snippets/web-components/button-story-primary-composition.js.mdx deleted file mode 100644 index 971b19a40f60..000000000000 --- a/docs/snippets/web-components/button-story-primary-composition.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Primary = { - args: { - primary: true, - label: 'Button', - }, -}; - -export const Secondary = { - args: { - ...Primary.args, - primary: false, - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-primary-composition.ts.mdx b/docs/snippets/web-components/button-story-primary-composition.ts.mdx deleted file mode 100644 index d13113abe026..000000000000 --- a/docs/snippets/web-components/button-story-primary-composition.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -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/web-components/button-story-primary-long-name.js.mdx b/docs/snippets/web-components/button-story-primary-long-name.js.mdx deleted file mode 100644 index 288aac913191..000000000000 --- a/docs/snippets/web-components/button-story-primary-long-name.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Primary = { - args: { - primary: true, - label: 'Button', - }, -}; - -export const PrimaryLongName = { - args: { - ...Primary.args, - label: 'Primary with a really long name', - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-primary-long-name.ts.mdx b/docs/snippets/web-components/button-story-primary-long-name.ts.mdx deleted file mode 100644 index 4de4973e559c..000000000000 --- a/docs/snippets/web-components/button-story-primary-long-name.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -}; - -export const PrimaryLongName: Story = { - args: { - ...Primary.args, - label: 'Primary with a really long name', - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-rename-story.js.mdx b/docs/snippets/web-components/button-story-rename-story.js.mdx deleted file mode 100644 index cda12f18a916..000000000000 --- a/docs/snippets/web-components/button-story-rename-story.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Primary = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-rename-story.ts.mdx b/docs/snippets/web-components/button-story-rename-story.ts.mdx deleted file mode 100644 index 8d76cb92be12..000000000000 --- a/docs/snippets/web-components/button-story-rename-story.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - // 👇 Rename this story - name: 'I am the primary', - args: { - label: 'Button', - primary: true, - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-using-args.js.mdx b/docs/snippets/web-components/button-story-using-args.js.mdx deleted file mode 100644 index e030adc5f449..000000000000 --- a/docs/snippets/web-components/button-story-using-args.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Primary = { - args: { - background: '#ff0', - label: 'Button', - }, -}; - -export const Secondary = { - args: { - ...Primary.args, - label: '😄👍😍💯', - }, -}; - -export const Tertiary = { - args: { - ...Primary.args, - label: '📚📕📈🤓', - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-using-args.ts.mdx b/docs/snippets/web-components/button-story-using-args.ts.mdx deleted file mode 100644 index 9d621d0feb97..000000000000 --- a/docs/snippets/web-components/button-story-using-args.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - args: { - background: '#ff0', - label: 'Button', - }, -}; - -export const Secondary: Story = { - args: { - ...Primary.args, - label: '😄👍😍💯', - }, -}; - -export const Tertiary: Story = { - args: { - ...Primary.args, - label: '📚📕📈🤓', - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-with-addon-example.js.mdx b/docs/snippets/web-components/button-story-with-addon-example.js.mdx deleted file mode 100644 index bf9a2d750462..000000000000 --- a/docs/snippets/web-components/button-story-with-addon-example.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// Button.stories.js - -import { html } from 'lit'; - -export default { - title: 'Button', - component: 'custom-button', - //👇 Creates specific parameters for the story - parameters: { - myAddon: { - data: 'This data is passed to the addon', - }, - }, -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Basic = { - render: () => html`<custom-button label="Hello"></custom-button>`, -}; -``` diff --git a/docs/snippets/web-components/button-story-with-addon-example.ts.mdx b/docs/snippets/web-components/button-story-with-addon-example.ts.mdx deleted file mode 100644 index 192ab27dde6a..000000000000 --- a/docs/snippets/web-components/button-story-with-addon-example.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - title: 'Button', - component: 'custom-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/api/csf - * to learn how to use render functions. - */ -export const Basic: Story = { - render: () => html`<custom-button label="Hello"></custom-button>`, -}; -``` diff --git a/docs/snippets/web-components/button-story-with-args.js.mdx b/docs/snippets/web-components/button-story-with-args.js.mdx deleted file mode 100644 index c1bfcfc2c893..000000000000 --- a/docs/snippets/web-components/button-story-with-args.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Primary = { - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-with-args.ts.mdx b/docs/snippets/web-components/button-story-with-args.ts.mdx deleted file mode 100644 index b323e1df96cc..000000000000 --- a/docs/snippets/web-components/button-story-with-args.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -}; -``` diff --git a/docs/snippets/web-components/button-story-with-emojis.js.mdx b/docs/snippets/web-components/button-story-with-emojis.js.mdx deleted file mode 100644 index fa513ff2ba71..000000000000 --- a/docs/snippets/web-components/button-story-with-emojis.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// Button.stories.js - -import { html } from 'lit'; - -export default { - component: 'demo-button', -}; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary = { - render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`, -}; - -export const Secondary = { - render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`, -}; - -export const Tertiary = { - render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`, -}; -``` diff --git a/docs/snippets/web-components/button-story-with-emojis.ts.mdx b/docs/snippets/web-components/button-story-with-emojis.ts.mdx deleted file mode 100644 index 81a860a6da67..000000000000 --- a/docs/snippets/web-components/button-story-with-emojis.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'demo-button', -}; - -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/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`, -}; - -export const Secondary: Story = { - render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`, -}; - -export const Tertiary: Story = { - render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`, -}; -``` diff --git a/docs/snippets/web-components/button-story.js.mdx b/docs/snippets/web-components/button-story.js.mdx deleted file mode 100644 index 04a9a0831f2d..000000000000 --- a/docs/snippets/web-components/button-story.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -import { html } from 'lit'; - -export default { - component: 'demo-button', -}; - -export const Primary = { - render: () => html`<demo-button primary></demo-button>`, -}; -``` diff --git a/docs/snippets/web-components/button-story.ts.mdx b/docs/snippets/web-components/button-story.ts.mdx deleted file mode 100644 index 96dc34276f64..000000000000 --- a/docs/snippets/web-components/button-story.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - render: () => html`<demo-button primary></demo-button>`, -}; -``` diff --git a/docs/snippets/web-components/checkbox-story-csf.js.mdx b/docs/snippets/web-components/checkbox-story-csf.js.mdx deleted file mode 100644 index 67fcd70641e1..000000000000 --- a/docs/snippets/web-components/checkbox-story-csf.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// Checkbox.stories.js - -export default { - title: 'Checkbox', - component: 'checkbox', -}; - -export const Unchecked = { - args: { - label: 'Unchecked', - }, -}; -``` diff --git a/docs/snippets/web-components/checkbox-story-csf.ts.mdx b/docs/snippets/web-components/checkbox-story-csf.ts.mdx deleted file mode 100644 index d5069a0b3d43..000000000000 --- a/docs/snippets/web-components/checkbox-story-csf.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Checkbox.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'checkbox-element', -}; - -export default meta; -type Story = StoryObj; - -export const Unchecked: Story = { - args: { - label: 'Unchecked', - }, -}; -``` diff --git a/docs/snippets/web-components/checkbox-story-grouped.js.mdx b/docs/snippets/web-components/checkbox-story-grouped.js.mdx deleted file mode 100644 index 878232043911..000000000000 --- a/docs/snippets/web-components/checkbox-story-grouped.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// Checkbox.stories.js - -export default { - title: 'Design System/Atoms/Checkbox', - component: 'demo-checkbox', -}; -``` diff --git a/docs/snippets/web-components/checkbox-story-grouped.ts.mdx b/docs/snippets/web-components/checkbox-story-grouped.ts.mdx deleted file mode 100644 index 962f93794789..000000000000 --- a/docs/snippets/web-components/checkbox-story-grouped.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// CheckBox.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Design System/Atoms/Checkbox', - component: 'demo-checkbox', -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/component-story-conditional-controls-mutual-exclusion.js.mdx b/docs/snippets/web-components/component-story-conditional-controls-mutual-exclusion.js.mdx deleted file mode 100644 index 7ca861999e43..000000000000 --- a/docs/snippets/web-components/component-story-conditional-controls-mutual-exclusion.js.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - argTypes: { - // Button can be passed a label or an image, not both - label: { - control: 'text', - if: { arg: 'image', truthy: false }, - }, - image: { - control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] }, - if: { arg: 'label', truthy: false }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-conditional-controls-mutual-exclusion.ts.mdx b/docs/snippets/web-components/component-story-conditional-controls-mutual-exclusion.ts.mdx deleted file mode 100644 index 6e2304a6beab..000000000000 --- a/docs/snippets/web-components/component-story-conditional-controls-mutual-exclusion.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - argTypes: { - // Button can be passed a label or an image, not both - label: { - control: 'text', - if: { arg: 'image', truthy: false }, - }, - image: { - control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] }, - if: { arg: 'label', truthy: false }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/component-story-conditional-controls-toggle.js.mdx b/docs/snippets/web-components/component-story-conditional-controls-toggle.js.mdx deleted file mode 100644 index a2897b3a92da..000000000000 --- a/docs/snippets/web-components/component-story-conditional-controls-toggle.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - argTypes: { - label: { control: 'text' }, // Always shows the control - advanced: { control: 'boolean' }, - // Only enabled if advanced is true - margin: { control: 'number', if: { arg: 'advanced' } }, - padding: { control: 'number', if: { arg: 'advanced' } }, - cornerRadius: { control: 'number', if: { arg: 'advanced' } }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-conditional-controls-toggle.ts.mdx b/docs/snippets/web-components/component-story-conditional-controls-toggle.ts.mdx deleted file mode 100644 index b38aac5d379a..000000000000 --- a/docs/snippets/web-components/component-story-conditional-controls-toggle.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - argTypes: { - label: { control: 'text' }, // Always shows the control - advanced: { control: 'boolean' }, - // Only enabled if advanced is true - margin: { control: 'number', if: { arg: 'advanced' } }, - padding: { control: 'number', if: { arg: 'advanced' } }, - cornerRadius: { control: 'number', if: { arg: 'advanced' } }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/component-story-custom-args-complex.js.mdx b/docs/snippets/web-components/component-story-custom-args-complex.js.mdx deleted file mode 100644 index 0bd0906b20ba..000000000000 --- a/docs/snippets/web-components/component-story-custom-args-complex.js.mdx +++ /dev/null @@ -1,42 +0,0 @@ -```js -// Button.stories.js - -import { html } from 'lit'; - -export default { - component: 'custom-component', - //👇 Creates specific argTypes - 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'], - }, - }, -}; - -const someFunction = (valuePropertyA, valuePropertyB) => { - // Do some logic here -}; - -export const ExampleStory = { - render: ({ propertyA, propertyB }) => { - //👇 Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - - return html` - <custom-component - .propertyA=${propertyA} - .propertyB=${propertyB} - .someProperty=${someFunctionResult} - ></custom-component> - `; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-custom-args-complex.ts.mdx b/docs/snippets/web-components/component-story-custom-args-complex.ts.mdx deleted file mode 100644 index b772ef0301cc..000000000000 --- a/docs/snippets/web-components/component-story-custom-args-complex.ts.mdx +++ /dev/null @@ -1,47 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'custom-component', - //👇 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; - -const someFunction = (valuePropertyA: any, valuePropertyB: any) => { - // Do some logic here -}; - -export const ExampleStory: Story = { - render: ({ propertyA, propertyB }) => { - //👇 Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - - return html` - <custom-component - .propertyA=${propertyA} - .propertyB=${propertyB} - .someProperty=${someFunctionResult} - ></custom-component> - `; - }, - args: { - propertyA: 'Item One', - propertyB: 'Another Item One', - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-custom-args-mapping.js.mdx b/docs/snippets/web-components/component-story-custom-args-mapping.js.mdx deleted file mode 100644 index 913e601abd29..000000000000 --- a/docs/snippets/web-components/component-story-custom-args-mapping.js.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```js -// Button.stories.js - -import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons'; - -const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight }; - -export default { - component: 'demo-button', - argTypes: { - arrow: { - options: Object.keys(arrows), // An array of serializable values - mapping: arrows, // Maps serializable option values to complex arg values - control: { - type: 'select', // Type 'select' is automatically inferred when 'options' is defined - labels: { - // 'labels' maps option values to string labels - ArrowUp: 'Up', - ArrowDown: 'Down', - ArrowLeft: 'Left', - ArrowRight: 'Right', - }, - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-custom-args-mapping.ts.mdx b/docs/snippets/web-components/component-story-custom-args-mapping.ts.mdx deleted file mode 100644 index c0d8f01cb70b..000000000000 --- a/docs/snippets/web-components/component-story-custom-args-mapping.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons'; - -const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight }; - -const meta: Meta = { - component: 'demo-button', - argTypes: { - arrow: { - options: Object.keys(arrows), // An array of serializable values - mapping: arrows, // Maps serializable option values to complex arg values - control: { - type: 'select', // Type 'select' is automatically inferred when 'options' is defined - labels: { - // 'labels' maps option values to string labels - ArrowUp: 'Up', - ArrowDown: 'Down', - ArrowLeft: 'Left', - ArrowRight: 'Right', - }, - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/component-story-disable-controls-alt.js.mdx b/docs/snippets/web-components/component-story-disable-controls-alt.js.mdx deleted file mode 100644 index fde027b0c20f..000000000000 --- a/docs/snippets/web-components/component-story-disable-controls-alt.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// YourComponent.stories.js - -export default { - component: 'your-component', - argTypes: { - // foo is the property we want to remove from the UI - foo: { - control: false, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-disable-controls-alt.ts.mdx b/docs/snippets/web-components/component-story-disable-controls-alt.ts.mdx deleted file mode 100644 index 7b911c9f82c2..000000000000 --- a/docs/snippets/web-components/component-story-disable-controls-alt.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'your-component', - argTypes: { - // foo is the property we want to remove from the UI - foo: { - control: false, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/component-story-disable-controls-regex.js.mdx b/docs/snippets/web-components/component-story-disable-controls-regex.js.mdx deleted file mode 100644 index 8a2ab40890ea..000000000000 --- a/docs/snippets/web-components/component-story-disable-controls-regex.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// YourComponent.stories.js - -export default { - component: 'your-component', -}; - -export const ArrayInclude = { - parameters: { - controls: { include: ['foo', 'bar'] }, - }, -}; - -export const RegexInclude = { - parameters: { - controls: { include: /^hello*/ }, - }, -}; - -export const ArrayExclude = { - parameters: { - controls: { exclude: ['foo', 'bar'] }, - }, -}; - -export const RegexExclude = { - parameters: { - controls: { exclude: /^hello*/ }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-disable-controls-regex.ts.mdx b/docs/snippets/web-components/component-story-disable-controls-regex.ts.mdx deleted file mode 100644 index 9e254537af1d..000000000000 --- a/docs/snippets/web-components/component-story-disable-controls-regex.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'your-component', -}; - -export default meta; -type Story = StoryObj; - -export const ArrayInclude: Story = { - parameters: { - controls: { include: ['foo', 'bar'] }, - }, -}; - -export const RegexInclude: Story = { - parameters: { - controls: { include: /^hello*/ }, - }, -}; - -export const ArrayExclude: Story = { - parameters: { - controls: { exclude: ['foo', 'bar'] }, - }, -}; - -export const RegexExclude: Story = { - parameters: { - controls: { exclude: /^hello*/ }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-disable-controls.js.mdx b/docs/snippets/web-components/component-story-disable-controls.js.mdx deleted file mode 100644 index f6f0fbc7fb57..000000000000 --- a/docs/snippets/web-components/component-story-disable-controls.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// YourComponent.stories.js - -export default { - component: 'your-component', - argTypes: { - // foo is the property we want to remove from the UI - foo: { - table: { - disable: true, - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-disable-controls.ts.mdx b/docs/snippets/web-components/component-story-disable-controls.ts.mdx deleted file mode 100644 index 628491f4380d..000000000000 --- a/docs/snippets/web-components/component-story-disable-controls.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'your-component', - argTypes: { - // foo is the property we want to remove from the UI - foo: { - table: { - disable: true, - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/component-story-figma-integration.js.mdx b/docs/snippets/web-components/component-story-figma-integration.js.mdx deleted file mode 100644 index b4fe98316de5..000000000000 --- a/docs/snippets/web-components/component-story-figma-integration.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', -}; - -export const Example = { - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/Sample-File', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-figma-integration.ts.mdx b/docs/snippets/web-components/component-story-figma-integration.ts.mdx deleted file mode 100644 index e15a8241a7ac..000000000000 --- a/docs/snippets/web-components/component-story-figma-integration.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const Example: Story = { - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/Sample-File', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/component-story-highlight-addon.js.mdx b/docs/snippets/web-components/component-story-highlight-addon.js.mdx deleted file mode 100644 index cfa00a6804a7..000000000000 --- a/docs/snippets/web-components/component-story-highlight-addon.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// MyComponent.stories.js - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -export default { - component: 'my-component', -}; - -export const Highlighted = { - decorators: [ - (story) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - }); - return story(); - }, - ], -}; -``` diff --git a/docs/snippets/web-components/component-story-highlight-addon.ts.mdx b/docs/snippets/web-components/component-story-highlight-addon.ts.mdx deleted file mode 100644 index 620d112c1967..000000000000 --- a/docs/snippets/web-components/component-story-highlight-addon.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const Highlighted: Story = { - decorators: [ - (story) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - }); - return story(); - }, - ], -}; -``` diff --git a/docs/snippets/web-components/component-story-sort-controls.js.mdx b/docs/snippets/web-components/component-story-sort-controls.js.mdx deleted file mode 100644 index 82b7c605ca83..000000000000 --- a/docs/snippets/web-components/component-story-sort-controls.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// YourComponent.stories.js - -export default { - component: 'your-component', - parameters: { controls: { sort: 'requiredFirst' } }, -}; -``` diff --git a/docs/snippets/web-components/component-story-sort-controls.ts.mdx b/docs/snippets/web-components/component-story-sort-controls.ts.mdx deleted file mode 100644 index f857b7bc06f9..000000000000 --- a/docs/snippets/web-components/component-story-sort-controls.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'your-component', - parameters: { controls: { sort: 'requiredFirst' } }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/component-story-static-asset-cdn.js.mdx b/docs/snippets/web-components/component-story-static-asset-cdn.js.mdx deleted file mode 100644 index 6a8c2d22ec04..000000000000 --- a/docs/snippets/web-components/component-story-static-asset-cdn.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// MyComponent.stories.js - -import { html } from 'lit'; - -export default { - component: 'my-component', -}; - -export const WithAnImage = { - render: () => - html`<img - src="https://storybook.js.org/images/placeholders/350x150.png" - alt="My CDN placeholder" - />`, -}; -``` diff --git a/docs/snippets/web-components/component-story-static-asset-cdn.ts.mdx b/docs/snippets/web-components/component-story-static-asset-cdn.ts.mdx deleted file mode 100644 index 8638fa308685..000000000000 --- a/docs/snippets/web-components/component-story-static-asset-cdn.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const WithAnImage: Story = { - render: () => - html`<img - src="https://storybook.js.org/images/placeholders/350x150.png" - alt="My CDN placeholder" - />`, -}; -``` diff --git a/docs/snippets/web-components/component-story-static-asset-with-import.js.mdx b/docs/snippets/web-components/component-story-static-asset-with-import.js.mdx deleted file mode 100644 index 952676b62b57..000000000000 --- a/docs/snippets/web-components/component-story-static-asset-with-import.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// MyComponent.stories.js - -import { html } from 'lit'; - -import imageFile from './static/image.png'; - -export default { - component: 'my-component', -}; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export const WithAnImage = { - render: () => html`<img src="${image.src}" alt="${image.alt}" /> `, -}; -``` diff --git a/docs/snippets/web-components/component-story-static-asset-with-import.ts.mdx b/docs/snippets/web-components/component-story-static-asset-with-import.ts.mdx deleted file mode 100644 index 0fd82c99170e..000000000000 --- a/docs/snippets/web-components/component-story-static-asset-with-import.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -import imageFile from './static/image.png'; - -const meta: Meta = { - component: 'my-component', -}; - -const image = { - src: imageFile, - alt: 'my image', -}; - -export default meta; -type Story = StoryObj; - -export const WithAnImage: Story = { - render: () => html`<img src="${image.src}" alt="${image.alt}" />`, -}; -``` diff --git a/docs/snippets/web-components/component-story-static-asset-without-import.js.mdx b/docs/snippets/web-components/component-story-static-asset-without-import.js.mdx deleted file mode 100644 index 40c32016fae8..000000000000 --- a/docs/snippets/web-components/component-story-static-asset-without-import.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// MyComponent.stories.js - -import { html } from 'lit'; - -export default { - component: 'my-component', -}; - -// Assume image.png is located in the "public" directory. -export const WithAnImage = { - render: () => html`<img src="/image.png" alt="image" />`, -}; -``` diff --git a/docs/snippets/web-components/component-story-static-asset-without-import.ts.mdx b/docs/snippets/web-components/component-story-static-asset-without-import.ts.mdx deleted file mode 100644 index 6804464fc8b0..000000000000 --- a/docs/snippets/web-components/component-story-static-asset-without-import.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -// Assume image.png is located in the "public" directory. -export const WithAnImage: Story = { - render: () => html`<img src="/image.png" alt="image" />`, -}; -``` diff --git a/docs/snippets/web-components/component-story-with-accessibility.js.mdx b/docs/snippets/web-components/component-story-with-accessibility.js.mdx deleted file mode 100644 index e5c0eef83e8a..000000000000 --- a/docs/snippets/web-components/component-story-with-accessibility.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'custom-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/web-components/component-story-with-accessibility.ts.mdx b/docs/snippets/web-components/component-story-with-accessibility.ts.mdx deleted file mode 100644 index 238e06d9f147..000000000000 --- a/docs/snippets/web-components/component-story-with-accessibility.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'custom-button', - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -export default meta; -type Story = StoryObj; - -// 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/web-components/component-story-with-custom-render-function.js.mdx b/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx deleted file mode 100644 index 17c3e445172e..000000000000 --- a/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// MyComponent.stories.js - -import { html } from 'lit'; - -export default { - component: 'my-component', -}; - -// This story uses a render function to fully control how the component renders. -export const Example = { - render: () => html` - <layout> - <header> - <h1>Example</h1> - </header> - <article> - <my-component /> - </article> - </layout> - `, -}; -``` diff --git a/docs/snippets/web-components/component-story-with-custom-render-function.ts.mdx b/docs/snippets/web-components/component-story-with-custom-render-function.ts.mdx deleted file mode 100644 index c17cdf7c80e9..000000000000 --- a/docs/snippets/web-components/component-story-with-custom-render-function.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -// This story uses a render function to fully control how the component renders. -export const Example: Story = { - render: () => html` - <layout> - <header> - <h1>Example</h1> - </header> - <article> - <my-component /> - </article> - </layout> - `, -}; -``` diff --git a/docs/snippets/web-components/csf-2-example-starter.js.mdx b/docs/snippets/web-components/csf-2-example-starter.js.mdx deleted file mode 100644 index 65498d68ba9a..000000000000 --- a/docs/snippets/web-components/csf-2-example-starter.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// CSF 2 - -import { html } from 'lit'; - -export default { - title: 'components/Button', - component: 'demo-button', -}; - -export const Primary = ({ primary }) => html`<custom-button ?primary=${primary}></custom-button>`; -Primary.args = { - primary: true, -}; -``` diff --git a/docs/snippets/web-components/csf-2-example-starter.ts.mdx b/docs/snippets/web-components/csf-2-example-starter.ts.mdx deleted file mode 100644 index 6cefdfa42a7b..000000000000 --- a/docs/snippets/web-components/csf-2-example-starter.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// CSF 2 - -import type { Meta, Story } from '@storybook/web-components'; - -import { html } from 'lit'; - -export default { - title: 'components/Button', - component: 'demo-button', -} as Meta; - -export const Primary: Story = ({ primary }) => - html`<demo-button ?primary=${primary}></demo-button>`; -Primary.args = { - primary: true, -}; -``` diff --git a/docs/snippets/web-components/csf-2-example-story.js.mdx b/docs/snippets/web-components/csf-2-example-story.js.mdx deleted file mode 100644 index d0ceda986223..000000000000 --- a/docs/snippets/web-components/csf-2-example-story.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// CSF 2 - -// Other imports and story implementation - -export const Default = ({ primary, backgroundColor, size, label }) => - html`<custom-button ?primary="${primary}" size="${size}" label="${label}"></custom-button>`; -``` diff --git a/docs/snippets/web-components/csf-2-example-story.ts.mdx b/docs/snippets/web-components/csf-2-example-story.ts.mdx deleted file mode 100644 index 1af142c3a895..000000000000 --- a/docs/snippets/web-components/csf-2-example-story.ts.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```ts -// CSF 2 - -// Other imports and story implementation - -export const Default: Story = ({ primary, backgroundColor, size, label }) => - html`<custom-button ?primary="${primary}" size="${size}" label="${label}"></custom-button>`; -``` diff --git a/docs/snippets/web-components/csf-3-example-render.js.mdx b/docs/snippets/web-components/csf-3-example-render.js.mdx deleted file mode 100644 index 1cd0d80ea3f8..000000000000 --- a/docs/snippets/web-components/csf-3-example-render.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// CSF 3 - -// Other imports and story implementation - -export const Default = { - render: (args) => html`<demo-button label="Hello" @click=${action('clicked')}></custom-button>`, -}; -``` diff --git a/docs/snippets/web-components/csf-3-example-render.ts.mdx b/docs/snippets/web-components/csf-3-example-render.ts.mdx deleted file mode 100644 index 802e52c1bdbc..000000000000 --- a/docs/snippets/web-components/csf-3-example-render.ts.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// CSF 3 - -// Other imports and story implementation - -export const Default: Story = { - render: (args) => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`, -}; -``` diff --git a/docs/snippets/web-components/csf-3-example-starter.js.mdx b/docs/snippets/web-components/csf-3-example-starter.js.mdx deleted file mode 100644 index 2b0ff292041c..000000000000 --- a/docs/snippets/web-components/csf-3-example-starter.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// CSF 3 - -export default { - title: 'components/Button', - component: 'demo-button', -}; - -export const Primary = { args: { primary: true } }; -``` diff --git a/docs/snippets/web-components/csf-3-example-starter.ts.mdx b/docs/snippets/web-components/csf-3-example-starter.ts.mdx deleted file mode 100644 index 8279938a15dd..000000000000 --- a/docs/snippets/web-components/csf-3-example-starter.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// CSF 3 - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'components/Button', - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { args: { primary: true } }; -``` diff --git a/docs/snippets/web-components/document-screen-fetch.js.mdx b/docs/snippets/web-components/document-screen-fetch.js.mdx deleted file mode 100644 index 18238b561581..000000000000 --- a/docs/snippets/web-components/document-screen-fetch.js.mdx +++ /dev/null @@ -1,63 +0,0 @@ -```js -// YourPage.js - -import { LitElement, html } from 'lit-element'; - -class DocumentScreen extends LitElement { - static get properties() { - return { - _data: { type: Object }, - _status: { state: true }, - }; - } - - constructor() { - super(); - this._status = 'idle'; - } - - connectedCallback() { - super.connectedCallback(); - this.fetchData(); - } - - fetchData() { - this._status = 'loading'; - - fetch('https://your-restful-endpoint') - .then((response) => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - response.json(); - }) - .then((data) => { - this._status = 'success'; - this._data = data; - }) - .catch((error) => { - this._status = 'error'; - }); - } - - render() { - if (this._status === 'error') { - return html`<p>There was an error fetching the data!</p>`; - } - - if (this._status === 'loading') { - return html`<p>Loading...</p>`; - } - - const { user, document, subdocuments } = this._data; - return html` - <demo-page-layout .user=${user}> - <demo-document-header .document=${document}></demo-document-header> - <demo-document-list .documents=${subdocuments}></demo-document-list> - </demo-page-layout> - `; - } -} - -customElements.define('demo-document-screen', DocumentScreen); -``` diff --git a/docs/snippets/web-components/gizmo-story-controls-customization.js.mdx b/docs/snippets/web-components/gizmo-story-controls-customization.js.mdx deleted file mode 100644 index 8a5948d21ad3..000000000000 --- a/docs/snippets/web-components/gizmo-story-controls-customization.js.mdx +++ /dev/null @@ -1,54 +0,0 @@ -```js -// Gizmo.stories.js - -export default { - component: 'gizmo-element', - argTypes: { - canRotate: { - control: 'boolean', - }, - width: { - control: { type: 'number', min: 400, max: 1200, step: 50 }, - }, - height: { - control: { type: 'range', min: 200, max: 1500, step: 50 }, - }, - rawData: { - control: 'object', - }, - coordinates: { - control: 'object', - }, - texture: { - control: { - type: 'file', - accept: '.png', - }, - }, - position: { - control: 'radio', - options: ['left', 'right', 'center'], - }, - rotationAxis: { - control: 'check', - options: ['x', 'y', 'z'], - }, - scaling: { - control: 'select', - options: [10, 50, 75, 100, 200], - }, - label: { - control: 'text', - }, - meshColors: { - control: { - type: 'color', - presetColors: ['#ff0000', '#00ff00', '#0000ff'], - }, - }, - revisionDate: { - control: 'date', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/gizmo-story-controls-customization.ts.mdx b/docs/snippets/web-components/gizmo-story-controls-customization.ts.mdx deleted file mode 100644 index 04217d100ae9..000000000000 --- a/docs/snippets/web-components/gizmo-story-controls-customization.ts.mdx +++ /dev/null @@ -1,58 +0,0 @@ -```ts -// Gizmo.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'gizmo-element', - argTypes: { - canRotate: { - control: 'boolean', - }, - width: { - control: { type: 'number', min: 400, max: 1200, step: 50 }, - }, - height: { - control: { type: 'range', min: 200, max: 1500, step: 50 }, - }, - rawData: { - control: 'object', - }, - coordinates: { - control: 'object', - }, - texture: { - control: { - type: 'file', - accept: '.png', - }, - }, - position: { - control: 'radio', - options: ['left', 'right', 'center'], - }, - rotationAxis: { - control: 'check', - options: ['x', 'y', 'z'], - }, - scaling: { - control: 'select', - options: [10, 50, 75, 100, 200], - }, - label: { - control: 'text', - }, - meshColors: { - control: { - type: 'color', - presetColors: ['#ff0000', '#00ff00', '#0000ff'], - }, - }, - revisionDate: { - control: 'date', - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/highlight-addon-custom-style.js.mdx b/docs/snippets/web-components/highlight-addon-custom-style.js.mdx deleted file mode 100644 index 0f2ffb53cb41..000000000000 --- a/docs/snippets/web-components/highlight-addon-custom-style.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// MyComponent.stories.js - -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -export default { - component: 'my-component', -}; - -export const StyledHighlight = { - decorators: [ - (story) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - color: 'blue', - style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' - }); - return story(); - }, - ], -}; -``` diff --git a/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx b/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx deleted file mode 100644 index c8b4958a57b1..000000000000 --- a/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { useChannel } from '@storybook/preview-api'; -import { HIGHLIGHT } from '@storybook/addon-highlight'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const StyledHighlight: Story = { - decorators: [ - (story) => { - const emit = useChannel({}); - emit(HIGHLIGHT, { - elements: ['h2', 'a', '.storybook-button'], - color: 'blue', - style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double' - }); - return story(); - }, - ], -}; -``` diff --git a/docs/snippets/web-components/histogram-story.js.mdx b/docs/snippets/web-components/histogram-story.js.mdx deleted file mode 100644 index cad98fbf5dfb..000000000000 --- a/docs/snippets/web-components/histogram-story.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Histogram.stories.js - -export default { - component: 'histogram-component', -}; - -export const Default = { - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/web-components/histogram-story.ts.mdx b/docs/snippets/web-components/histogram-story.ts.mdx deleted file mode 100644 index 9e26741b5d68..000000000000 --- a/docs/snippets/web-components/histogram-story.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'histogram-component', -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - dataType: 'latency', - showHistogramLabels: true, - histogramAccentColor: '#1EA7FD', - label: 'Latency distribution', - }, -}; -``` diff --git a/docs/snippets/web-components/list-story-expanded.js.mdx b/docs/snippets/web-components/list-story-expanded.js.mdx deleted file mode 100644 index 3e66b6d97acf..000000000000 --- a/docs/snippets/web-components/list-story-expanded.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// List.stories.js - -import { html } from 'lit'; - -export default { - component: 'demo-list', -}; - -export const Empty = { - render: () => html`<demo-list></demo-list>`, -}; - -export const OneItem = { - render: () => html` - <demo-list> - <demo-list-item></demo-list-item> - </demo-list> - `, -}; - -export const ManyItems = { - render: () => html` - <demo-list> - <demo-list-item></demo-list-item> - <demo-list-item></demo-list-item> - <demo-list-item></demo-list-item> - </demo-list> - `, -}; -``` diff --git a/docs/snippets/web-components/list-story-expanded.ts.mdx b/docs/snippets/web-components/list-story-expanded.ts.mdx deleted file mode 100644 index 71cb5933351b..000000000000 --- a/docs/snippets/web-components/list-story-expanded.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'demo-list', -}; - -export default meta; -type Story = StoryObj; - -export const Empty: Story = { - render: () => html`<demo-list></demo-list>`, -}; - -export const OneItem: Story = { - render: () => html` - <demo-list> - <demo-list-item></demo-list-item> - </demo-list> - `, -}; - -export const ManyItems: Story = { - render: () => html` - <demo-list> - <demo-list-item></demo-list-item> - <demo-list-item></demo-list-item> - <demo-list-item></demo-list-item> - </demo-list> - `, -}; -``` diff --git a/docs/snippets/web-components/list-story-reuse-data.js.mdx b/docs/snippets/web-components/list-story-reuse-data.js.mdx deleted file mode 100644 index 5ffc02df5b7b..000000000000 --- a/docs/snippets/web-components/list-story-reuse-data.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// List.stories.js - -import { html } from 'lit'; - -// 👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -export default { - component: 'demo-list', -}; - -export const ManyItems = { - render: (args) => html` - <demo-list> - ${Selected({ ...args, ...Selected.args })} ${Unselected({ ...args, ...Unselected.args })} - ${Unselected({ ...args, ...Unselected.args })} - </demo-list> - `, -}; -``` diff --git a/docs/snippets/web-components/list-story-reuse-data.ts.mdx b/docs/snippets/web-components/list-story-reuse-data.ts.mdx deleted file mode 100644 index 9790cd5686d3..000000000000 --- a/docs/snippets/web-components/list-story-reuse-data.ts.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -// 👇 We're importing the necessary stories from ListItem -import { Selected, Unselected } from './ListItem.stories'; - -const meta: Meta = { - component: 'demo-list', -}; - -export default meta; -type Story = StoryObj; - -export const ManyItems: Story = { - render: (args) => html` - <demo-list> - ${Selected({ ...args, ...Selected.args })} ${Unselected({ ...args, ...Unselected.args })} - ${Unselected({ ...args, ...Unselected.args })} - </demo-list> - `, -}; -``` diff --git a/docs/snippets/web-components/list-story-starter.js.mdx b/docs/snippets/web-components/list-story-starter.js.mdx deleted file mode 100644 index 306cfad9f238..000000000000 --- a/docs/snippets/web-components/list-story-starter.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// List.stories.js - -import { html } from 'lit'; - -export default { - component: 'demo-list', -}; - -// Always an empty list, not super interesting -export const Empty = { - render: () => html`<demo-list></demo-list>`, -}; -``` diff --git a/docs/snippets/web-components/list-story-starter.ts.mdx b/docs/snippets/web-components/list-story-starter.ts.mdx deleted file mode 100644 index fa54fbf455bc..000000000000 --- a/docs/snippets/web-components/list-story-starter.ts.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-list', -}; - -export default meta; -type Story = StoryObj; - -// Always an empty list, not super interesting -export const Empty: Story = { - render: () => html`<demo-list></demo-list>`, -}; -``` diff --git a/docs/snippets/web-components/list-story-template.js.mdx b/docs/snippets/web-components/list-story-template.js.mdx deleted file mode 100644 index 08226beaeb39..000000000000 --- a/docs/snippets/web-components/list-story-template.js.mdx +++ /dev/null @@ -1,41 +0,0 @@ -```js -// List.stories.js - -import { html } from 'lit'; -import { repeat } from 'lit/directives/repeat.js'; - -import { Unchecked } from './ListItem.stories'; - -export default { - title: 'List', - component: 'demo-list', -}; - -//👇 The ListTemplate construct will be spread to the existing stories. -const ListTemplate = { - render: ({ items, ...args }) => { - return html` - <demo-list> - ${repeat(items, (item) => html`<demo-list-item>${item}</demo-list-item>`)} - </demo-list> - `; - }, -}; -export const Empty = { - ...ListTemplate, - args: { - items: [], - }, -}; - -export const OneItem = { - ...ListTemplate, - args: { - items: [ - { - ...Unchecked.args, - }, - ], - }, -}; -``` diff --git a/docs/snippets/web-components/list-story-template.ts.mdx b/docs/snippets/web-components/list-story-template.ts.mdx deleted file mode 100644 index 37b0e1daeb76..000000000000 --- a/docs/snippets/web-components/list-story-template.ts.mdx +++ /dev/null @@ -1,45 +0,0 @@ -```ts -// List.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; -import { repeat } from 'lit/directives/repeat.js'; - -const meta: Meta = { - title: 'List', - component: 'demo-list', -}; - -export default meta; -type Story = StoryObj; - -//👇 The ListTemplate construct will be spread to the existing stories. -const ListTemplate = { - render: ({ items, ...args }) => { - return html` - <demo-list> - ${repeat(items, (item) => html`<demo-list-item>${item}</demo-list-item>`)} - </demo-list> - `; - }, -}; - -export const Empty: Story = { - ...ListTemplate, - args: { - items: [], - }, -}; - -export const OneItem: Story = { - ...ListTemplate, - args: { - items: [ - { - ...Unchecked.args, - }, - ], - }, -}; -``` diff --git a/docs/snippets/web-components/list-story-unchecked.js.mdx b/docs/snippets/web-components/list-story-unchecked.js.mdx deleted file mode 100644 index be30704c8341..000000000000 --- a/docs/snippets/web-components/list-story-unchecked.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// MyList.stories.js - -import { html } from 'lit'; - -// 👇 Import the stories of MyListItem -import { Unchecked } from './MyListItem.stories'; - -export default { - title: 'MyList', - component: 'demo-my-list', -}; - -export const OneItem = { - render: () => html` <List> ${Unchecked({ ...Unchecked.args })} </List> `, -}; -``` diff --git a/docs/snippets/web-components/list-story-unchecked.ts.mdx b/docs/snippets/web-components/list-story-unchecked.ts.mdx deleted file mode 100644 index 80c135f68a4f..000000000000 --- a/docs/snippets/web-components/list-story-unchecked.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// MyList.stories.ts - -import { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -// 👇 Import the stories of MyListItem -import { Unchecked } from './my-list-item.stories'; - -const meta: Meta = { - title: 'MyList', - component: 'demo-my-list', -}; -export default meta; - -type Story = StoryObj; - -export const OneItem: Story = { - render: () => html` <List> ${Unchecked({ ...Unchecked.args })} </List> `, -}; -``` diff --git a/docs/snippets/web-components/list-story-with-subcomponents.js.mdx b/docs/snippets/web-components/list-story-with-subcomponents.js.mdx deleted file mode 100644 index 2e34a5e7104d..000000000000 --- a/docs/snippets/web-components/list-story-with-subcomponents.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// List.stories.js -import { html } from 'lit'; - -export default { - title: 'List', - component: 'demo-list', - subcomponents: { ListItem: 'demo-list-item' }, // 👈 Adds the ListItem component as a subcomponent -}; - -export const Empty = {}; - -export const OneItem = { - render: () => html` - <demo-list> - <demo-list-item></demo-list-item> - </demo-list> - `, -}; -``` diff --git a/docs/snippets/web-components/list-story-with-subcomponents.ts.mdx b/docs/snippets/web-components/list-story-with-subcomponents.ts.mdx deleted file mode 100644 index d433d2f02fd0..000000000000 --- a/docs/snippets/web-components/list-story-with-subcomponents.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// List.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - title: 'List', - component: 'demo-list', - subcomponents: { ListItem: 'demo-list-item' }, // 👈 Adds the ListItem component as a subcomponent -}; -export default meta; - -type Story = StoryObj; - -export const Empty: Story = {}; - -export const OneItem: Story = { - render: () => html` - <demo-list> - <demo-list-item></demo-list-item> - </demo-list> - `, -}; -``` diff --git a/docs/snippets/web-components/loader-story.js.mdx b/docs/snippets/web-components/loader-story.js.mdx deleted file mode 100644 index 59536731f6ba..000000000000 --- a/docs/snippets/web-components/loader-story.js.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```js -// TodoItem.stories.js - -import fetch from 'node-fetch'; -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export default { - component: 'demo-todo-item', - 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/web-components/loader-story.ts.mdx b/docs/snippets/web-components/loader-story.ts.mdx deleted file mode 100644 index c55f6fe1d098..000000000000 --- a/docs/snippets/web-components/loader-story.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// TodoItem.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import fetch from 'node-fetch'; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -const meta: Meta = { - component: 'demo-todo-item', - render: (args, { loaded: { todo } }) => TodoItem({ ...args, ...todo }), -}; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - loaders: [ - async () => ({ - todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(), - }), - ], -}; -``` diff --git a/docs/snippets/web-components/login-form-with-play-function.js.mdx b/docs/snippets/web-components/login-form-with-play-function.js.mdx deleted file mode 100644 index fb95478a0ac2..000000000000 --- a/docs/snippets/web-components/login-form-with-play-function.js.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```js -// LoginForm.stories.js - -import { userEvent, within, expect } from '@storybook/test'; - -export default { - component: 'demo-login-form', -}; - -export const EmptyForm = {}; - -/* - * See https://storybook.js.org/docs/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/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/web-components/login-form-with-play-function.ts.mdx b/docs/snippets/web-components/login-form-with-play-function.ts.mdx deleted file mode 100644 index 4da90c1c274a..000000000000 --- a/docs/snippets/web-components/login-form-with-play-function.ts.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```ts -// LoginForm.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, within, expect } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-login-form', -}; - -export default meta; -type Story = StoryObj; - -export const EmptyForm: Story = {}; - -/* - * See https://storybook.js.org/docs/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/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/web-components/msw-addon-configure-handlers-http.js.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx deleted file mode 100644 index fd212d46c43e..000000000000 --- a/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx +++ /dev/null @@ -1,60 +0,0 @@ -```js -// YourPage.stories.js -import { http, HttpResponse, delay } from 'msw'; - -export default { - component: 'demo-document-screen', -}; - -// 👇 The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export const MockedSuccess = { - parameters: { - msw: { - handlers: [ - http.get('https://your-restful-endpoint/', () => { - return HttpResponse.json(TestData); - }), - ], - }, - }, -}; - -export const MockedError = { - parameters: { - msw: { - handlers: [ - http.get('https://your-restful-endpoint', async () => { - await delay(800); - return new HttpResponse(null, { - status: 403, - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx deleted file mode 100644 index f92501a7df63..000000000000 --- a/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx +++ /dev/null @@ -1,65 +0,0 @@ -```ts -// YourPage.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { http, HttpResponse, delay } from 'msw'; - -const meta: Meta = { - component: 'demo-document-screen', -}; - -export default meta; -type Story = StoryObj; - -// 👇 The mocked data that will be used in the story -const TestData = { - user: { - userID: 1, - name: 'Someone', - }, - document: { - id: 1, - userID: 1, - title: 'Something', - brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - status: 'approved', - }, - subdocuments: [ - { - id: 1, - userID: 1, - title: 'Something', - content: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - status: 'approved', - }, - ], -}; - -export const MockedSuccess: Story = { - parameters: { - msw: { - handlers: [ - http.get('https://your-restful-endpoint/', () => { - return HttpResponse.json(TestData); - }), - ], - }, - }, -}; - -export const MockedError: Story = { - parameters: { - msw: { - handlers: [ - http.get('https://your-restful-endpoint', async () => { - await delay(800); - return new HttpResponse(null, { - status: 403, - }); - }), - ], - }, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-disable-toc.js.mdx b/docs/snippets/web-components/my-component-disable-toc.js.mdx deleted file mode 100644 index 9da978dc1bbf..000000000000 --- a/docs/snippets/web-components/my-component-disable-toc.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', - tags: ['autodocs'], - parameters: { - docs: { - toc: { - disable: true, // 👈 Disables the table of contents - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-disable-toc.ts.mdx b/docs/snippets/web-components/my-component-disable-toc.ts.mdx deleted file mode 100644 index 7c15b2301fe9..000000000000 --- a/docs/snippets/web-components/my-component-disable-toc.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', - tags: ['autodocs'], - parameters: { - docs: { - toc: { - disable: true, // 👈 Disables the table of contents - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/my-component-env-var-config.js.mdx b/docs/snippets/web-components/my-component-env-var-config.js.mdx deleted file mode 100644 index 2071df2fb03a..000000000000 --- a/docs/snippets/web-components/my-component-env-var-config.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', -}; - -export const Default = { - args: { - exampleProp: process.env.EXAMPLE_VAR, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-env-var-config.ts.mdx b/docs/snippets/web-components/my-component-env-var-config.ts.mdx deleted file mode 100644 index 7700eb966ea4..000000000000 --- a/docs/snippets/web-components/my-component-env-var-config.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - exampleProp: process.env.EXAMPLE_VAR, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-alt-queries.js.mdx b/docs/snippets/web-components/my-component-play-function-alt-queries.js.mdx deleted file mode 100644 index 8b60de749b58..000000000000 --- a/docs/snippets/web-components/my-component-play-function-alt-queries.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// MyComponent.stories.js - -import { userEvent, within } from '@storybook/test'; - -export default { - component: 'demo-my-component', -}; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const ExampleWithRole = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(canvas.getByRole('button', { name: / button label/i })); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/web-components/my-component-play-function-alt-queries.ts.mdx deleted file mode 100644 index 6f99cee47158..000000000000 --- a/docs/snippets/web-components/my-component-play-function-alt-queries.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-my-component', -}; - -export default meta; -type Story = StoryObj; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const ExampleWithRole: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(canvas.getByRole('button', { name: / button label/i })); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-composition.js.mdx b/docs/snippets/web-components/my-component-play-function-composition.js.mdx deleted file mode 100644 index 1dd7de6c6166..000000000000 --- a/docs/snippets/web-components/my-component-play-function-composition.js.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```js -// MyComponent.stories.js - -import { userEvent, within } from '@storybook/test'; - -export default { - component: 'demo-my-component', -}; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const FirstStory = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - await userEvent.type(canvas.getByTestId('an-element'), 'example-value'); - }, -}; - -export const SecondStory = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - await userEvent.type(canvas.getByTestId('other-element'), 'another value'); - }, -}; - -export const CombinedStories = { - play: async (context) => { - const canvas = within(context.canvasElement); - - // Runs the FirstStory and Second story play function before running this story's play function - await FirstStory.play(context); - await SecondStory.play(context); - await userEvent.type(canvas.getByTestId('another-element'), 'random value'); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-composition.ts.mdx b/docs/snippets/web-components/my-component-play-function-composition.ts.mdx deleted file mode 100644 index e6c38428702e..000000000000 --- a/docs/snippets/web-components/my-component-play-function-composition.ts.mdx +++ /dev/null @@ -1,44 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-my-component', -}; - -export default meta; -type Story = StoryObj; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const FirstStory: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - await userEvent.type(canvas.getByTestId('an-element'), 'example-value'); - }, -}; - -export const SecondStory: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - await userEvent.type(canvas.getByTestId('other-element'), 'another value'); - }, -}; - -export const CombinedStories: Story = { - play: async (context) => { - const canvas = within(context.canvasElement); - - // Runs the FirstStory and Second story play function before running this story's play function - await FirstStory.play(context); - await SecondStory.play(context); - await userEvent.type(canvas.getByTestId('another-element'), 'random value'); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-query-findby.js.mdx b/docs/snippets/web-components/my-component-play-function-query-findby.js.mdx deleted file mode 100644 index 1e97da543f13..000000000000 --- a/docs/snippets/web-components/my-component-play-function-query-findby.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// MyComponent.stories.js - -import { userEvent, within } from '@storybook/test'; - -export default { - component: 'demo-my-component', -}; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const AsyncExample = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // Other steps - - // Waits for the component to be rendered before querying the element - await canvas.findByRole('button', { name: / button label/i })); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-query-findby.ts.mdx b/docs/snippets/web-components/my-component-play-function-query-findby.ts.mdx deleted file mode 100644 index 97391863d8b9..000000000000 --- a/docs/snippets/web-components/my-component-play-function-query-findby.ts.mdx +++ /dev/null @@ -1,27 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-my-component', -}; - -export default meta; -type Story = StoryObj; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const AsyncExample: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // Other steps - - // Waits for the component to be rendered before querying the element - await canvas.findByRole('button', { name: / button label/i }); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-waitfor.js.mdx b/docs/snippets/web-components/my-component-play-function-waitfor.js.mdx deleted file mode 100644 index e3e2c97ae527..000000000000 --- a/docs/snippets/web-components/my-component-play-function-waitfor.js.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```js -// MyComponent.stories.js - -import { userEvent, waitFor, within } from '@storybook/test'; - -export default { - component: 'demo-my-component', -}; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const ExampleAsyncStory = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const Input = canvas.getByLabelText('Username', { - selector: 'input', - }); - - await userEvent.type(Input, 'WrongInput', { - delay: 100, - }); - - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - const Submit = canvas.getByRole('button'); - await userEvent.click(Submit); - - await waitFor(async () => { - await userEvent.hover(canvas.getByTestId('error')); - }); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-waitfor.ts.mdx b/docs/snippets/web-components/my-component-play-function-waitfor.ts.mdx deleted file mode 100644 index d552cefeeac8..000000000000 --- a/docs/snippets/web-components/my-component-play-function-waitfor.ts.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, waitFor, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-my-component', -}; - -export default meta; -type Story = StoryObj; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const ExampleAsyncStory: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const Input = canvas.getByLabelText('Username', { - selector: 'input', - }); - - await userEvent.type(Input, 'WrongInput', { - delay: 100, - }); - - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - const Submit = canvas.getByRole('button'); - await userEvent.click(Submit); - - await waitFor(async () => { - await userEvent.hover(canvas.getByTestId('error')); - }); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-with-canvas.js.mdx b/docs/snippets/web-components/my-component-play-function-with-canvas.js.mdx deleted file mode 100644 index d3812d7d1af0..000000000000 --- a/docs/snippets/web-components/my-component-play-function-with-canvas.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// MyComponent.stories.js - -import { userEvent, within } from '@storybook/test'; - -export default { - component: 'demo-my-component', -}; - -export const ExampleStory = { - play: async ({ canvasElement }) => { - // Assigns canvas to the component root element - const canvas = within(canvasElement); - - // Starts querying from the component's root element - await userEvent.type(canvas.getByTestId('example-element'), 'something'); - await userEvent.click(canvas.getByRole('another-element')); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/web-components/my-component-play-function-with-canvas.ts.mdx deleted file mode 100644 index 178a8718ac5d..000000000000 --- a/docs/snippets/web-components/my-component-play-function-with-canvas.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-my-component', -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - play: async ({ canvasElement }) => { - // Assigns canvas to the component root element - const canvas = within(canvasElement); - - // Starts querying from the component's root element - await userEvent.type(canvas.getByTestId('example-element'), 'something'); - await userEvent.click(canvas.getByRole('another-element')); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/web-components/my-component-play-function-with-clickevent.js.mdx deleted file mode 100644 index bbac354b9b0b..000000000000 --- a/docs/snippets/web-components/my-component-play-function-with-clickevent.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// MyComponent.stories.js - -import { fireEvent, userEvent, within } from '@storybook/test'; - -export default { - component: 'demo-my-component', -}; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const ClickExample = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(canvas.getByRole('button')); - }, -}; - -export const FireEventExample = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await fireEvent.click(canvas.getByTestId('data-testid')); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/web-components/my-component-play-function-with-clickevent.ts.mdx deleted file mode 100644 index cb6f16377162..000000000000 --- a/docs/snippets/web-components/my-component-play-function-with-clickevent.ts.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { fireEvent, userEvent, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-my-component', -}; - -export default meta; -type Story = StoryObj; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const ClickExample: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await userEvent.click(canvas.getByRole('button')); - }, -}; - -export const FireEventExample: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - await fireEvent.click(canvas.getByTestId('data-testid')); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx b/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx deleted file mode 100644 index a7549c0f3b61..000000000000 --- a/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// MyComponent.stories.js - -import { userEvent, within } from '@storybook/test'; - -export default { - component: 'demo-my-component', -}; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const DelayedStory = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const exampleElement = canvas.getByLabelText('example-element'); - - // The delay option sets the amount of milliseconds between characters being typed - await userEvent.type(exampleElement, 'random string', { - delay: 100, - }); - - const AnotherExampleElement = canvas.getByLabelText('another-example-element'); - await userEvent.type(AnotherExampleElement, 'another random string', { - delay: 100, - }); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx b/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx deleted file mode 100644 index 85e039e7b833..000000000000 --- a/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-my-component', -}; - -export default meta; -type Story = StoryObj; - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const DelayedStory: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const exampleElement = canvas.getByLabelText('example-element'); - - // The delay option sets the amount of milliseconds between characters being typed - await userEvent.type(exampleElement, 'random string', { - delay: 100, - }); - - const AnotherExampleElement = canvas.getByLabelText('another-example-element'); - await userEvent.type(AnotherExampleElement, 'another random string', { - delay: 100, - }); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/web-components/my-component-play-function-with-selectevent.js.mdx deleted file mode 100644 index d87d1b3c6ac1..000000000000 --- a/docs/snippets/web-components/my-component-play-function-with-selectevent.js.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```js -// MyComponent.stories.js - -import { userEvent, within } from '@storybook/test'; - -export default { - component: 'demo-my-component', -}; - -// Function to emulate pausing between interactions -function sleep(ms) { - return new Promise((resolve) => setTimeout(resolve, ms)); -} - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const ExampleChangeEvent = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const select = canvas.getByRole('listbox'); - - await userEvent.selectOptions(select, ['One Item']); - await sleep(2000); - - await userEvent.selectOptions(select, ['Another Item']); - await sleep(2000); - - await userEvent.selectOptions(select, ['Yet another item']); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/web-components/my-component-play-function-with-selectevent.ts.mdx deleted file mode 100644 index 42be47060de4..000000000000 --- a/docs/snippets/web-components/my-component-play-function-with-selectevent.ts.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-my-component', -}; - -export default meta; -type Story = StoryObj; - -// Function to emulate pausing between interactions -function sleep(ms: number) { - return new Promise((resolve) => setTimeout(resolve, ms)); -} - -/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const ExampleChangeEvent: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const select = canvas.getByRole('listbox'); - - await userEvent.selectOptions(select, ['One Item']); - await sleep(2000); - - await userEvent.selectOptions(select, ['Another Item']); - await sleep(2000); - - await userEvent.selectOptions(select, ['Yet another item']); - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-basic-and-props.js.mdx b/docs/snippets/web-components/my-component-story-basic-and-props.js.mdx deleted file mode 100644 index 7400521ff561..000000000000 --- a/docs/snippets/web-components/my-component-story-basic-and-props.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// MyComponent.stories.js - -import { html } from 'lit'; - -export default { - title: 'Path/To/MyComponent', - component: 'my-component', -}; - -export const Basic = {}; - -export const WithProp = { - render: () => html`<my-component prop="value" />`, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-basic-and-props.ts.mdx b/docs/snippets/web-components/my-component-story-basic-and-props.ts.mdx deleted file mode 100644 index 169806842def..000000000000 --- a/docs/snippets/web-components/my-component-story-basic-and-props.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const Basic: Story = {}; - -export const WithProp: Story = { - render: () => html`<my-component prop="value" />`, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx b/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx deleted file mode 100644 index db354fb556a1..000000000000 --- a/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```js -// MyComponent.stories.js - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -export default { - component: 'my-component', - 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/web-components/my-component-story-configure-viewports.ts.mdx b/docs/snippets/web-components/my-component-story-configure-viewports.ts.mdx deleted file mode 100644 index 3429768570f4..000000000000 --- a/docs/snippets/web-components/my-component-story-configure-viewports.ts.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -const meta: Meta = { - component: 'my-component', - 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; - -export const MyStory: Story = { - parameters: { - viewport: { - defaultViewport: 'iphonex', - }, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-mandatory-export.js.mdx b/docs/snippets/web-components/my-component-story-mandatory-export.js.mdx deleted file mode 100644 index a01536a1030b..000000000000 --- a/docs/snippets/web-components/my-component-story-mandatory-export.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - title: 'Path/To/MyComponent', - component: 'my-component', - decorators: [ ... ], - parameters: { ... }, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-mandatory-export.ts.mdx b/docs/snippets/web-components/my-component-story-mandatory-export.ts.mdx deleted file mode 100644 index 909a45bf5da2..000000000000 --- a/docs/snippets/web-components/my-component-story-mandatory-export.ts.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Path/To/MyComponent', - component: 'my-component', - decorators: [ ... ], - parameters: { ... }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx deleted file mode 100644 index 6f8e99afeb44..000000000000 --- a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// MyComponent.stories.js - -import { html } from 'lit'; - -export default { - component: 'my-component', -}; - -const getCaptionForLocale = (locale) => { - switch (locale) { - case 'es': - return 'Hola!'; - case 'fr': - return 'Bonjour!'; - case 'kr': - return '안녕하세요!'; - case 'zh': - return '你好!'; - default: - return 'Hello!'; - } -}; - -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return html`<p>${caption}</p>`; - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-use-globaltype.ts.mdx b/docs/snippets/web-components/my-component-story-use-globaltype.ts.mdx deleted file mode 100644 index 43341aec2b59..000000000000 --- a/docs/snippets/web-components/my-component-story-use-globaltype.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -const meta: Meta = { - component: 'my-component', -}; - -const getCaptionForLocale = (locale) => { - switch (locale) { - case 'es': - return 'Hola!'; - case 'fr': - return 'Bonjour!'; - case 'kr': - return '안녕하세요!'; - case 'zh': - return '你好!'; - default: - return 'Hello!'; - } -}; - -export default meta; -type Story = StoryObj; - -export const StoryWithLocale: Story = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return html`<p>${caption}</p>`; - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-with-nonstory.js.mdx b/docs/snippets/web-components/my-component-story-with-nonstory.js.mdx deleted file mode 100644 index 0dad9bf94d00..000000000000 --- a/docs/snippets/web-components/my-component-story-with-nonstory.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', - 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/web-components/my-component-story-with-nonstory.ts.mdx b/docs/snippets/web-components/my-component-story-with-nonstory.ts.mdx deleted file mode 100644 index 367f355cc1eb..000000000000 --- a/docs/snippets/web-components/my-component-story-with-nonstory.ts.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', - 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 default meta; -type Story = StoryObj; - -export const SimpleStory: Story = { - args: { - data: simpleData, - }, -}; - -export const ComplexStory: Story = { - args: { - data: complexData, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-with-storyname.js.mdx b/docs/snippets/web-components/my-component-story-with-storyname.js.mdx deleted file mode 100644 index 6a38eb139715..000000000000 --- a/docs/snippets/web-components/my-component-story-with-storyname.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', -}; - -export const Simple = { - decorators: [], - name: 'So simple!', - parameters: {}, -}; -``` diff --git a/docs/snippets/web-components/my-component-story-with-storyname.ts.mdx b/docs/snippets/web-components/my-component-story-with-storyname.ts.mdx deleted file mode 100644 index e821613b4f68..000000000000 --- a/docs/snippets/web-components/my-component-story-with-storyname.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const Simple: Story = { - decorators: [], - name: 'So simple!', - parameters: {}, -}; -``` diff --git a/docs/snippets/web-components/my-component-vite-env-variables.js.mdx b/docs/snippets/web-components/my-component-vite-env-variables.js.mdx deleted file mode 100644 index 381d34ac9b89..000000000000 --- a/docs/snippets/web-components/my-component-vite-env-variables.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', -}; - -export const ExampleStory = { - args: { - propertyA: import.meta.env.STORYBOOK_DATA_KEY, - propertyB: import.meta.env.VITE_CUSTOM_VAR, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx b/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx deleted file mode 100644 index 5a35c7a8ae24..000000000000 --- a/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - args: { - propertyA: import.meta.env.STORYBOOK_DATA_KEY, - propertyB: import.meta.env.VITE_CUSTOM_VAR, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-with-env-variables.js.mdx b/docs/snippets/web-components/my-component-with-env-variables.js.mdx deleted file mode 100644 index 4eb42879dc64..000000000000 --- a/docs/snippets/web-components/my-component-with-env-variables.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', -}; - -export const ExampleStory = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-with-env-variables.ts.mdx b/docs/snippets/web-components/my-component-with-env-variables.ts.mdx deleted file mode 100644 index 06197dc3c0f4..000000000000 --- a/docs/snippets/web-components/my-component-with-env-variables.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/web-components/other-foo-bar-story.js.mdx b/docs/snippets/web-components/other-foo-bar-story.js.mdx deleted file mode 100644 index 9e12ce69502e..000000000000 --- a/docs/snippets/web-components/other-foo-bar-story.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// FooBar.stories.js - -export default { - title: 'OtherFoo/Bar', - component: 'foo', - id: 'Foo/Bar', // Or 'foo-bar' if you prefer -}; - -export const Baz = { - name: 'Insert name here', -}; -``` diff --git a/docs/snippets/web-components/other-foo-bar-story.ts.mdx b/docs/snippets/web-components/other-foo-bar-story.ts.mdx deleted file mode 100644 index 6b9d8f7a9af7..000000000000 --- a/docs/snippets/web-components/other-foo-bar-story.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// FooBar.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'OtherFoo/Bar', - component: 'foo', - id: 'Foo/Bar', // Or 'foo-bar' if you prefer -}; - -export default meta; -type Story = StoryObj; - -export const Baz: Story = { - name: 'Insert name here', -}; -``` diff --git a/docs/snippets/web-components/page-story-slots.js.mdx b/docs/snippets/web-components/page-story-slots.js.mdx deleted file mode 100644 index 1d464c2976a9..000000000000 --- a/docs/snippets/web-components/page-story-slots.js.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```js -// Page.stories.js - -import { html } from 'lit'; - -export default { - title: 'Page', - component: 'demo-page', - render: ({ footer }) => html` - <demo-page> - <footer>${footer}</footer> - </demo-page> - `, -}; - -export const CustomFooter = { - args: { - footer: 'Built with Storybook', - }, -}; -``` diff --git a/docs/snippets/web-components/page-story-slots.ts.mdx b/docs/snippets/web-components/page-story-slots.ts.mdx deleted file mode 100644 index 24b1fdc62b1e..000000000000 --- a/docs/snippets/web-components/page-story-slots.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// Page.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; - -type CustomArgs = { footer?: string }; - -const meta: Meta<CustomArgs> = { - title: 'Page', - component: 'demo-page', - render: ({ footer }) => html` - <demo-page> - <footer>${footer}</footer> - </demo-page> - `, -}; - -export default meta; -type Story = StoryObj<CustomArgs>; - -export const CustomFooter: Story = { - args: { - footer: 'Built with Storybook', - }, -}; -``` diff --git a/docs/snippets/web-components/page-story-with-args-composition.js.mdx b/docs/snippets/web-components/page-story-with-args-composition.js.mdx deleted file mode 100644 index 085ab9546145..000000000000 --- a/docs/snippets/web-components/page-story-with-args-composition.js.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```js -// YourPage.stories.js - -// 👇 Imports the required stories -import * as PageLayout from './PageLayout.stories'; -import * as DocumentHeader from './DocumentHeader.stories'; -import * as DocumentList from './DocumentList.stories'; - -export default { - component: 'demo-document-screen', -}; - -export const Simple = { - args: { - user: PageLayout.Simple.args.user, - document: DocumentHeader.Simple.args.document, - subdocuments: DocumentList.Simple.args.documents, - }, -}; -``` diff --git a/docs/snippets/web-components/page-story-with-args-composition.ts.mdx b/docs/snippets/web-components/page-story-with-args-composition.ts.mdx deleted file mode 100644 index 646e5a9138ae..000000000000 --- a/docs/snippets/web-components/page-story-with-args-composition.ts.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```ts -// YourPage.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -// 👇 Imports the required stories -import PageLayout from './PageLayout.stories'; -import DocumentHeader from './DocumentHeader.stories'; -import DocumentList from './DocumentList.stories'; - -const meta: Meta = { - component: 'demo-document-screen', -}; - -export default meta; -type Story = StoryObj; - -export const Simple: Story = { - args: { - user: PageLayout.Simple.args.user, - document: DocumentHeader.Simple.args.document, - subdocuments: DocumentList.Simple.args.documents, - }, -}; -``` diff --git a/docs/snippets/web-components/page-story.js.mdx b/docs/snippets/web-components/page-story.js.mdx deleted file mode 100644 index 8d3c4f17528c..000000000000 --- a/docs/snippets/web-components/page-story.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// Page.stories.js - -// 👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -export default { - component: 'demo-page', -}; - -export const LoggedIn = { - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/web-components/page-story.ts.mdx b/docs/snippets/web-components/page-story.ts.mdx deleted file mode 100644 index 70647ad5da78..000000000000 --- a/docs/snippets/web-components/page-story.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Page.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -// 👇 Imports all Header stories -import * as HeaderStories from './Header.stories'; - -const meta: Meta = { - component: 'demo-page', -}; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - ...HeaderStories.LoggedIn.args, - }, -}; -``` diff --git a/docs/snippets/web-components/parameters-in-meta.js.mdx b/docs/snippets/web-components/parameters-in-meta.js.mdx deleted file mode 100644 index 4ace9d6c0a83..000000000000 --- a/docs/snippets/web-components/parameters-in-meta.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-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/web-components/parameters-in-meta.ts.mdx b/docs/snippets/web-components/parameters-in-meta.ts.mdx deleted file mode 100644 index dcf52e61ae9c..000000000000 --- a/docs/snippets/web-components/parameters-in-meta.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-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/web-components/parameters-in-story.js.mdx b/docs/snippets/web-components/parameters-in-story.js.mdx deleted file mode 100644 index c6d66695a4b7..000000000000 --- a/docs/snippets/web-components/parameters-in-story.js.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Primary = { - args: { - primary: true, - label: 'Button', - }, - parameters: { - backgrounds: { - values: [ - { name: 'red', value: '#f00' }, - { name: 'green', value: '#0f0' }, - { name: 'blue', value: '#00f' }, - ], - }, - }, -}; -``` diff --git a/docs/snippets/web-components/parameters-in-story.ts.mdx b/docs/snippets/web-components/parameters-in-story.ts.mdx deleted file mode 100644 index 1ac38ef907e8..000000000000 --- a/docs/snippets/web-components/parameters-in-story.ts.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj<typeof Button>; - -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, - parameters: { - backgrounds: { - values: [ - { name: 'red', value: '#f00' }, - { name: 'green', value: '#0f0' }, - { name: 'blue', value: '#00f' }, - ], - }, - }, -}; -``` diff --git a/docs/snippets/web-components/register-component-with-play-function.js.mdx b/docs/snippets/web-components/register-component-with-play-function.js.mdx deleted file mode 100644 index 4d4da1131c22..000000000000 --- a/docs/snippets/web-components/register-component-with-play-function.js.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```js -// RegistrationForm.stories.js - -import { userEvent, within } from '@storybook/test'; - -export default { - component: 'demo-registration-form', -}; - -/* - * See https://storybook.js.org/docs/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); - - const emailInput = canvas.getByLabelText('email', { - selector: 'input', - }); - - await userEvent.type(emailInput, 'example-email@email.com', { - delay: 100, - }); - - const passwordInput = canvas.getByLabelText('password', { - selector: 'input', - }); - - await userEvent.type(passwordInput, 'ExamplePassword', { - delay: 100, - }); - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - const submitButton = canvas.getByRole('button'); - - await userEvent.click(submitButton); - }, -}; -``` diff --git a/docs/snippets/web-components/register-component-with-play-function.ts.mdx b/docs/snippets/web-components/register-component-with-play-function.ts.mdx deleted file mode 100644 index 14f71416c18b..000000000000 --- a/docs/snippets/web-components/register-component-with-play-function.ts.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```ts -// RegistrationForm.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; -import { userEvent, within } from '@storybook/test'; - -const meta: Meta = { - component: 'demo-registration-form', -}; - -export default meta; -type Story = StoryObj; - -/* - * See https://storybook.js.org/docs/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); - - const emailInput = canvas.getByLabelText('email', { - selector: 'input', - }); - - await userEvent.type(emailInput, 'example-email@email.com', { - delay: 100, - }); - - const passwordInput = canvas.getByLabelText('password', { - selector: 'input', - }); - - await userEvent.type(passwordInput, 'ExamplePassword', { - delay: 100, - }); - // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel - const submitButton = canvas.getByRole('button'); - - await userEvent.click(submitButton); - }, -}; -``` diff --git a/docs/snippets/web-components/simple-page-implementation.js.mdx b/docs/snippets/web-components/simple-page-implementation.js.mdx deleted file mode 100644 index ba5a25c4aa1d..000000000000 --- a/docs/snippets/web-components/simple-page-implementation.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// YourPage.js - -import { LitElement, html } from 'lit-element'; - -class DocumentScreen extends LitElement { - static get properties() { - return { - data: { type: Object }, - }; - } - - constructor() { - super(); - this.data = {}; - } - - render() { - const { user, document, subdocuments } = this.data; - return html` - <demo-page-layout .user=${user}> - <demo-document-header .document=${document}></demo-document-header> - <demo-document-list .documents=${subdocuments}></demo-document-list> - </demo-page-layout> - `; - } -} - -customElements.define('demo-document-screen', DocumentScreen); -``` diff --git a/docs/snippets/web-components/simple-page-implementation.ts.mdx b/docs/snippets/web-components/simple-page-implementation.ts.mdx deleted file mode 100644 index 1dcc67893231..000000000000 --- a/docs/snippets/web-components/simple-page-implementation.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// YourPage.ts - -import { LitElement, html } from 'lit-element'; - -@customElement('demo-document-screen') -class DocumentScreen extends LitElement { - @property({ type: Object }) - data: { - user: Record<string, unknown>; - document: Record<string, unknown>; - subdocuments: Array<Record<string, unknown>>; - } = {}; - - constructor() { - super(); - } - - render() { - const { user, document, subdocuments } = this.data; - return html` - <demo-page-layout .user=${user}> - <demo-document-header .document=${document}></demo-document-header> - <demo-document-list .documents=${subdocuments}></demo-document-list> - </demo-page-layout> - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'demo-document-screen': DocumentScreen; - } -} -``` diff --git a/docs/snippets/web-components/storybook-addon-a11y-component-config.js.mdx b/docs/snippets/web-components/storybook-addon-a11y-component-config.js.mdx deleted file mode 100644 index 990edaf9826d..000000000000 --- a/docs/snippets/web-components/storybook-addon-a11y-component-config.js.mdx +++ /dev/null @@ -1,29 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', - parameters: { - a11y: { - // Optional selector to inspect - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-a11y-component-config.ts.mdx b/docs/snippets/web-components/storybook-addon-a11y-component-config.ts.mdx deleted file mode 100644 index 43c27832c49f..000000000000 --- a/docs/snippets/web-components/storybook-addon-a11y-component-config.ts.mdx +++ /dev/null @@ -1,33 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', - parameters: { - a11y: { - // Optional selector to inspect - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/storybook-addon-a11y-disable.js.mdx b/docs/snippets/web-components/storybook-addon-a11y-disable.js.mdx deleted file mode 100644 index 404be9260ff6..000000000000 --- a/docs/snippets/web-components/storybook-addon-a11y-disable.js.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', -}; - -export const ExampleStory = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/web-components/storybook-addon-a11y-disable.ts.mdx deleted file mode 100644 index a2c410936f3b..000000000000 --- a/docs/snippets/web-components/storybook-addon-a11y-disable.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - parameters: { - a11y: { - // This option disables all a11y checks on this story - disable: true, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/web-components/storybook-addon-a11y-story-config.js.mdx deleted file mode 100644 index bfc2cec75433..000000000000 --- a/docs/snippets/web-components/storybook-addon-a11y-story-config.js.mdx +++ /dev/null @@ -1,31 +0,0 @@ -```js -// MyComponent.stories.js - -export default { - component: 'my-component', -}; - -export const ExampleStory = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/web-components/storybook-addon-a11y-story-config.ts.mdx deleted file mode 100644 index 38d22ae0f9f3..000000000000 --- a/docs/snippets/web-components/storybook-addon-a11y-story-config.ts.mdx +++ /dev/null @@ -1,36 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - parameters: { - a11y: { - element: '#storybook-root', - config: { - rules: [ - { - // The autocomplete rule will not run based on the CSS selector provided - id: 'autocomplete-valid', - selector: '*:not([autocomplete="nope"])', - }, - { - // Setting the enabled option to false will disable checks for this particular rule on all stories. - id: 'image-alt', - enabled: false, - }, - ], - }, - options: {}, - manual: true, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-backgrounds-configure-grid.js.mdx b/docs/snippets/web-components/storybook-addon-backgrounds-configure-grid.js.mdx deleted file mode 100644 index bf6244e98f79..000000000000 --- a/docs/snippets/web-components/storybook-addon-backgrounds-configure-grid.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// Button.stories.js - -// To apply a set of backgrounds to all stories of Button: -export default { - component: 'demo-button', - parameters: { - backgrounds: { - grid: { - cellSize: 20, - opacity: 0.5, - cellAmount: 5, - offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded' - offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded' - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-backgrounds-configure-grid.ts.mdx b/docs/snippets/web-components/storybook-addon-backgrounds-configure-grid.ts.mdx deleted file mode 100644 index 95efe818c624..000000000000 --- a/docs/snippets/web-components/storybook-addon-backgrounds-configure-grid.ts.mdx +++ /dev/null @@ -1,23 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -// To apply a set of backgrounds to all stories of Button: -const meta: Meta = { - component: 'demo-button', - parameters: { - backgrounds: { - grid: { - cellSize: 20, - opacity: 0.5, - cellAmount: 5, - offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded' - offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded' - }, - }, - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/storybook-addon-backgrounds-disable-backgrounds.js.mdx b/docs/snippets/web-components/storybook-addon-backgrounds-disable-backgrounds.js.mdx deleted file mode 100644 index c483e9c5958a..000000000000 --- a/docs/snippets/web-components/storybook-addon-backgrounds-disable-backgrounds.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Large = { - parameters: { - backgrounds: { disable: true }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-backgrounds-disable-backgrounds.ts.mdx b/docs/snippets/web-components/storybook-addon-backgrounds-disable-backgrounds.ts.mdx deleted file mode 100644 index 2b8bc09ffa82..000000000000 --- a/docs/snippets/web-components/storybook-addon-backgrounds-disable-backgrounds.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Large: Story = { - parameters: { - backgrounds: { disable: true }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-backgrounds-disable-grid.js.mdx b/docs/snippets/web-components/storybook-addon-backgrounds-disable-grid.js.mdx deleted file mode 100644 index 0fdae2b6bc02..000000000000 --- a/docs/snippets/web-components/storybook-addon-backgrounds-disable-grid.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Large = { - parameters: { - backgrounds: { - grid: { - disable: true, - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-backgrounds-disable-grid.ts.mdx b/docs/snippets/web-components/storybook-addon-backgrounds-disable-grid.ts.mdx deleted file mode 100644 index db4b85f002ef..000000000000 --- a/docs/snippets/web-components/storybook-addon-backgrounds-disable-grid.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Large: Story = { - parameters: { - backgrounds: { - grid: { - disable: true, - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-backgrounds-override-background-color.js.mdx b/docs/snippets/web-components/storybook-addon-backgrounds-override-background-color.js.mdx deleted file mode 100644 index 558fe5192913..000000000000 --- a/docs/snippets/web-components/storybook-addon-backgrounds-override-background-color.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const Large = { - parameters: { - backgrounds: { default: 'facebook' }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-addon-backgrounds-override-background-color.ts.mdx b/docs/snippets/web-components/storybook-addon-backgrounds-override-background-color.ts.mdx deleted file mode 100644 index 53037505fb75..000000000000 --- a/docs/snippets/web-components/storybook-addon-backgrounds-override-background-color.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const Large: Story = { - parameters: { - backgrounds: { default: 'facebook' }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-component-layout-param.js.mdx b/docs/snippets/web-components/storybook-component-layout-param.js.mdx deleted file mode 100644 index 104935d94381..000000000000 --- a/docs/snippets/web-components/storybook-component-layout-param.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', - // Sets the layout parameter component wide. - parameters: { - layout: 'centered', - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-component-layout-param.ts.mdx b/docs/snippets/web-components/storybook-component-layout-param.ts.mdx deleted file mode 100644 index 94e5fb6ee78b..000000000000 --- a/docs/snippets/web-components/storybook-component-layout-param.ts.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', - // Sets the layout parameter component wide. - parameters: { - layout: 'centered', - }, -}; - -export default meta; -``` diff --git a/docs/snippets/web-components/storybook-csf-3-auto-title-redundant.js.mdx b/docs/snippets/web-components/storybook-csf-3-auto-title-redundant.js.mdx deleted file mode 100644 index dc748eaa4f91..000000000000 --- a/docs/snippets/web-components/storybook-csf-3-auto-title-redundant.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// components/MyComponent/MyComponent.stories.js - -export default { - component: 'my-component', - title: 'components/MyComponent/MyComponent', -}; - -export const Default = { - args: { - something: 'Something else', - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-csf-3-auto-title-redundant.ts.mdx b/docs/snippets/web-components/storybook-csf-3-auto-title-redundant.ts.mdx deleted file mode 100644 index dcc4690c6f59..000000000000 --- a/docs/snippets/web-components/storybook-csf-3-auto-title-redundant.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// components/MyComponent/MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'my-component', - title: 'components/MyComponent/MyComponent', -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - something: 'Something else', - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-interactions-play-function.js.mdx b/docs/snippets/web-components/storybook-interactions-play-function.js.mdx deleted file mode 100644 index 650a37e9fb01..000000000000 --- a/docs/snippets/web-components/storybook-interactions-play-function.js.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```js -// Form.stories.js - -import { userEvent, waitFor, within, expect, fn } from '@storybook/test'; - -export default { - component: 'my-form-element', - args: { - // 👇 Use `fn` to spy on the onSubmit arg - onSubmit: fn(), - }, -}; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter credentials', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - - // 👇 Now we can assert that the onSubmit arg was called - await waitFor(() => expect(args.onSubmit).toHaveBeenCalled()); - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-interactions-play-function.ts.mdx b/docs/snippets/web-components/storybook-interactions-play-function.ts.mdx deleted file mode 100644 index d289d40e31a2..000000000000 --- a/docs/snippets/web-components/storybook-interactions-play-function.ts.mdx +++ /dev/null @@ -1,40 +0,0 @@ -```ts -// Form.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { userEvent, waitFor, within, expect, fn } from '@storybook/test'; - -const meta: Meta = { - component: 'my-form-element', - args: { - // 👇 Use `fn` to spy on the onSubmit arg - onSubmit: fn(), - }, -}; - -export default meta; -type Story = StoryObj; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted: Story = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter credentials', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - - // 👇 Now we can assert that the onSubmit arg was called - await waitFor(() => expect(args.onSubmit).toHaveBeenCalled()); - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-interactions-step-function.js.mdx b/docs/snippets/web-components/storybook-interactions-step-function.js.mdx deleted file mode 100644 index 374c1b992f25..000000000000 --- a/docs/snippets/web-components/storybook-interactions-step-function.js.mdx +++ /dev/null @@ -1,28 +0,0 @@ -```js -// MyComponent.stories.js - -import { userEvent, within } from '@storybook/test'; - -export default = { - component: 'my-component', -}; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter email and password', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-interactions-step-function.ts.mdx b/docs/snippets/web-components/storybook-interactions-step-function.ts.mdx deleted file mode 100644 index 24512a434764..000000000000 --- a/docs/snippets/web-components/storybook-interactions-step-function.ts.mdx +++ /dev/null @@ -1,34 +0,0 @@ -```ts -// MyComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { userEvent, within } from '@storybook/test'; - -const meta: Meta = { - title: 'MyComponent', - component: 'my-component', -}; - -export default meta; -type Story = StoryObj; - -/* - * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas - * to learn more about using the canvasElement to query the DOM - */ -export const Submitted: Story = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter email and password', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-preview-custom-elements-config.js.mdx b/docs/snippets/web-components/storybook-preview-custom-elements-config.js.mdx deleted file mode 100644 index 10b4d63d5c01..000000000000 --- a/docs/snippets/web-components/storybook-preview-custom-elements-config.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// .storybook/preview.js - -import { setCustomElementsManifest } from '@storybook/web-components'; -import customElements from '../custom-elements.json'; - -setCustomElementsManifest(customElements); - -export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-preview-custom-elements-config.ts.mdx b/docs/snippets/web-components/storybook-preview-custom-elements-config.ts.mdx deleted file mode 100644 index df8a1e374053..000000000000 --- a/docs/snippets/web-components/storybook-preview-custom-elements-config.ts.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```ts -// .storybook/preview.ts - -import type { Preview } from '@storybook/web-components'; -import { setCustomElementsManifest } from '@storybook/web-components'; - -import customElements from '../custom-elements.json'; - -setCustomElementsManifest(customElements); - -const preview: Preview = { - parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, -}; - -export default preview; -``` diff --git a/docs/snippets/web-components/storybook-preview-global-decorator.js.mdx b/docs/snippets/web-components/storybook-preview-global-decorator.js.mdx deleted file mode 100644 index 066379ef15bb..000000000000 --- a/docs/snippets/web-components/storybook-preview-global-decorator.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// .storybook/preview.js - -import { html } from 'lit'; - -export default { - decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`], -}; -``` diff --git a/docs/snippets/web-components/storybook-story-layout-param.js.mdx b/docs/snippets/web-components/storybook-story-layout-param.js.mdx deleted file mode 100644 index d8d87581f5f6..000000000000 --- a/docs/snippets/web-components/storybook-story-layout-param.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js - -export default { - component: 'demo-button', -}; - -export const WithLayout = { - parameters: { - layout: 'centered', - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-story-layout-param.ts.mdx b/docs/snippets/web-components/storybook-story-layout-param.ts.mdx deleted file mode 100644 index 7c776adc4e42..000000000000 --- a/docs/snippets/web-components/storybook-story-layout-param.ts.mdx +++ /dev/null @@ -1,18 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - component: 'demo-button', -}; - -export default meta; -type Story = StoryObj; - -export const WithLayout: Story = { - parameters: { - layout: 'centered', - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-test-fn-mock-spy.js.mdx b/docs/snippets/web-components/storybook-test-fn-mock-spy.js.mdx deleted file mode 100644 index c93f3ba6b3ef..000000000000 --- a/docs/snippets/web-components/storybook-test-fn-mock-spy.js.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```js -// NoteUI.stories.js -import { expect, userEvent, within } from '@storybook/test'; - -import { saveNote } from '#app/actions.mock'; -import { createNotes } from '#mocks/notes'; - -export default { - title: 'Mocked/NoteUI', - component: 'note-ui', -}; - -const notes = createNotes(); - -export const SaveFlow = { - name: 'Save Flow ▶', - args: { - isEditing: true, - note: notes[0], - }, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - const saveButton = canvas.getByRole('menuitem', { name: /done/i }); - await userEvent.click(saveButton); - // 👇 This is the mock function, so you can assert its behavior - await expect(saveNote).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-test-fn-mock-spy.ts.mdx b/docs/snippets/web-components/storybook-test-fn-mock-spy.ts.mdx deleted file mode 100644 index dfb83b7f8f07..000000000000 --- a/docs/snippets/web-components/storybook-test-fn-mock-spy.ts.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// NoteUI.stories.ts -import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; - -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { saveNote } from '#app/actions.mock'; -import { createNotes } from '#mocks/notes'; - -const meta: Meta = { - title: 'Mocked/NoteUI', - component: 'note-ui', -}; -export default meta; - -type Story = StoryObj; - -const notes = createNotes(); - -export const SaveFlow: Story = { - name: 'Save Flow ▶', - args: { - isEditing: true, - note: notes[0], - }, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - const saveButton = canvas.getByRole('menuitem', { name: /done/i }); - await userEvent.click(saveButton); - // 👇 This is the mock function, so you can assert its behavior - await expect(saveNote).toHaveBeenCalled(); - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-test-mock-return-value.js.mdx b/docs/snippets/web-components/storybook-test-mock-return-value.js.mdx deleted file mode 100644 index 04c8c9858980..000000000000 --- a/docs/snippets/web-components/storybook-test-mock-return-value.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// Page.stories.js -import { getUserFromSession } from '#api/session.mock'; - -export default { - component: 'my-page', -}; - -export const Default = { - async beforeEach() { - // 👇 Set the return value for the getUserFromSession function - getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' }); - }, -}; -``` diff --git a/docs/snippets/web-components/storybook-test-mock-return-value.ts.mdx b/docs/snippets/web-components/storybook-test-mock-return-value.ts.mdx deleted file mode 100644 index 053eb05ec8c6..000000000000 --- a/docs/snippets/web-components/storybook-test-mock-return-value.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// Page.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -// 👇 Must include the `.mock` portion of filename to have mocks typed correctly -import { getUserFromSession } from '#api/session.mock'; - -const meta: Meta = { - component: 'my-page', -}; -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - async beforeEach() { - // 👇 Set the return value for the getUserFromSession function - getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' }); - }, -}; -``` diff --git a/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx b/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx deleted file mode 100644 index 2d583742ba05..000000000000 --- a/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// Button.stories.js -export default { - title: 'Button', - component: 'demo-button', - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -}; -``` diff --git a/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx b/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx deleted file mode 100644 index 8f22771a18be..000000000000 --- a/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -}; -export default meta; -``` diff --git a/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx b/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx deleted file mode 100644 index 39cb92375359..000000000000 --- a/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx +++ /dev/null @@ -1,9 +0,0 @@ -```js -// Page.stories.js -export default { - title: 'Page', - component: 'demo-page', - // 👇 Disable auto-generated documentation for this component - tags: ['!autodocs'], -}; -``` diff --git a/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx b/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx deleted file mode 100644 index 8210e75a2ebc..000000000000 --- a/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```ts -// Page.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Page', - component: 'demo-page', - // 👇 Disable auto-generated documentation for this component - tags: ['!autodocs'], -}; -export default meta; -``` diff --git a/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx b/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx deleted file mode 100644 index 7f9e0c2cd176..000000000000 --- a/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// Button.stories.js -export default { - title: 'Button', - component: 'demo-button', - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -}; - -export const UndocumentedStory = { - // 👇 Removes this story from auto-generated documentation - tags: ['!autodocs'], -}; -``` diff --git a/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx b/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx deleted file mode 100644 index e46bbf2e9b03..000000000000 --- a/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', - //👇 Enables auto-generated documentation for this component and includes all stories in this file - tags: ['autodocs'], -}; -export default meta; - -type Story = StoryObj; - -export const UndocumentedStory: Story = { - // 👇 Removes this story from auto-generated documentation - tags: ['!autodocs'], -}; -``` diff --git a/docs/snippets/web-components/tags-combo-example.js.mdx b/docs/snippets/web-components/tags-combo-example.js.mdx deleted file mode 100644 index 3dce6939abd2..000000000000 --- a/docs/snippets/web-components/tags-combo-example.js.mdx +++ /dev/null @@ -1,35 +0,0 @@ -```ts -// Button.stories.ts -import { html } from 'lit'; - -export default { - title: 'Button', - component: 'demo-button', -}; - -export const Variant1 = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2 = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => html` - <div> - <demo-button variant="1"> - <demo-button variant="2"> - {/* Etc... */} - </div> - `, -}; -``` diff --git a/docs/snippets/web-components/tags-combo-example.ts.mdx b/docs/snippets/web-components/tags-combo-example.ts.mdx deleted file mode 100644 index 045319a9c557..000000000000 --- a/docs/snippets/web-components/tags-combo-example.ts.mdx +++ /dev/null @@ -1,39 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; -import { html } from 'lit'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', -}; -export default meta; - -type Story = StoryObj; - -export const Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['!dev', '!autodocs'], - args: { variant: 2 }, -}; - -// Etc... - -export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!test'], - render: () => html` - <div> - <demo-button variant="1"> - <demo-button variant="2"> - {/* Etc... */} - </div> - `, -}; -``` diff --git a/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx b/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx deleted file mode 100644 index 6618e9dd205c..000000000000 --- a/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```js -// Button.stories.js -export default { - title: 'Button', - component: 'demo-button', - /** - * 👇 All stories in this file will: - * - Be included in the docs page - * - Not appear in Storybook's sidebar - */ - tags: ['autodocs', '!dev'], -}; -``` diff --git a/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx b/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx deleted file mode 100644 index a48803256500..000000000000 --- a/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx +++ /dev/null @@ -1,16 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', - /** - * 👇 All stories in this file will: - * - Be included in the docs page - * - Not appear in Storybook's sidebar - */ - tags: ['autodocs', '!dev'], -}; -export default meta; -``` diff --git a/docs/snippets/web-components/tags-in-meta-and-story.js.mdx b/docs/snippets/web-components/tags-in-meta-and-story.js.mdx deleted file mode 100644 index 74e5be5e167a..000000000000 --- a/docs/snippets/web-components/tags-in-meta-and-story.js.mdx +++ /dev/null @@ -1,25 +0,0 @@ -```js -// Button.stories.js -export default { - title: 'Button', - component: 'demo-button', - /** - * 👇 All stories in this file will have these tags applied: - * - autodocs - * - dev (implicit default, inherited from preview) - * - test (implicit default, inherited from preview) - */ - tags: ['autodocs'], -}; - -export const ExperimentalFeatureStory = { - /** - * 👇 This particular story will have these tags applied: - * - experimental - * - autodocs (inherited from meta) - * - dev (inherited from meta) - * - test (inherited from meta) - */ - tags: ['experimental'], -}; -``` diff --git a/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx b/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx deleted file mode 100644 index 79d5f1f5ec55..000000000000 --- a/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx +++ /dev/null @@ -1,30 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', - /** - * 👇 All stories in this file will have these tags applied: - * - autodocs - * - dev (implicit default, inherited from preview) - * - test (implicit default, inherited from preview) - */ - tags: ['autodocs'], -}; -export default meta; - -type Story = StoryObj; - -export const ExperimentalFeatureStory: Story = { - /** - * 👇 This particular story will have these tags applied: - * - experimental - * - autodocs (inherited from meta) - * - dev (inherited from meta) - * - test (inherited from meta) - */ - tags: ['experimental'], -}; -``` diff --git a/docs/snippets/web-components/tags-remove-in-story.js.mdx b/docs/snippets/web-components/tags-remove-in-story.js.mdx deleted file mode 100644 index acdc34f2b679..000000000000 --- a/docs/snippets/web-components/tags-remove-in-story.js.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```js -// Button.stories.js -export default { - title: 'Button', - component: 'demo-button', - // 👇 Applies to all stories in this file - tags: ['stable'], -}; - -export const ExperimentalFeatureStory = { - /** - * 👇 For this particular story, remove the inherited - * `stable` tag and apply the `experimental` tag - */ - tags: ['!stable', 'experimental'], -}; -``` diff --git a/docs/snippets/web-components/tags-remove-in-story.ts.mdx b/docs/snippets/web-components/tags-remove-in-story.ts.mdx deleted file mode 100644 index 99f56aceecd9..000000000000 --- a/docs/snippets/web-components/tags-remove-in-story.ts.mdx +++ /dev/null @@ -1,22 +0,0 @@ -```ts -// Button.stories.ts -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', - // 👇 Applies to all stories in this file - tags: ['stable'], -}; -export default meta; - -type Story = StoryObj; - -export const ExperimentalFeatureStory: Story = { - /** - * 👇 For this particular story, remove the inherited - * `stable` tag and apply the `experimental` tag - */ - tags: ['!stable', 'experimental'], -}; -``` diff --git a/docs/snippets/web-components/typed-csf-file.ts.mdx b/docs/snippets/web-components/typed-csf-file.ts.mdx deleted file mode 100644 index 19d2def91703..000000000000 --- a/docs/snippets/web-components/typed-csf-file.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -const meta: Meta = { - title: 'Button', - component: 'demo-button', -}; - -export default meta; - -export const Basic: StoryObj = {}; - -export const Primary: StoryObj = { - args: { - primary: true, - }, -}; -``` diff --git a/docs/snippets/web-components/web-components-vite-add-framework.js.mdx b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx deleted file mode 100644 index 25c7d8e1b51b..000000000000 --- a/docs/snippets/web-components/web-components-vite-add-framework.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - framework: '@storybook/web-components-vite', // 👈 Add this -}; -``` diff --git a/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx deleted file mode 100644 index c4eee76aeb56..000000000000 --- a/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/web-components-vite'; - -const config: StorybookConfig = { - // ... - framework: '@storybook/web-components-vite', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/web-components/web-components-vite-install.npm.js.mdx b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx deleted file mode 100644 index 4472f27ea2a2..000000000000 --- a/docs/snippets/web-components/web-components-vite-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/web-components-vite -``` diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx deleted file mode 100644 index b48f36c4e8f3..000000000000 --- a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/web-components-vite -``` diff --git a/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx deleted file mode 100644 index 895cf072d24a..000000000000 --- a/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/web-components-vite -``` diff --git a/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx b/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx deleted file mode 100644 index 620630a1322a..000000000000 --- a/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx +++ /dev/null @@ -1,8 +0,0 @@ -```js -// .storybook/main.js -export default { - // ... - // framework: '@storybook/react-webpack5', 👈 Remove this - framework: '@storybook/nextjs', // 👈 Add this -}; -``` diff --git a/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx b/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx deleted file mode 100644 index 8ec81b767573..000000000000 --- a/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```ts -// .storybook/main.ts -import { StorybookConfig } from '@storybook/web-components-webpack5'; - -const config: StorybookConfig = { - // ... - framework: '@storybook/web-components-webpack5', // 👈 Add this -}; - -export default config; -``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx deleted file mode 100644 index cb74724ce972..000000000000 --- a/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install --save-dev @storybook/web-components-webpack5 -``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx deleted file mode 100644 index 2e04a2e57537..000000000000 --- a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/web-components-webpack5 -``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx deleted file mode 100644 index 561008e42cd4..000000000000 --- a/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/web-components-webpack5 -``` diff --git a/docs/snippets/web-components/your-component-with-decorator.js.mdx b/docs/snippets/web-components/your-component-with-decorator.js.mdx deleted file mode 100644 index 6bc07ad3c52f..000000000000 --- a/docs/snippets/web-components/your-component-with-decorator.js.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```js -// YourComponent.stories.js - -import { html } from 'lit'; - -export default { - component: 'demo-your-component', - decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`], -}; -``` diff --git a/docs/snippets/web-components/your-component-with-decorator.ts.mdx b/docs/snippets/web-components/your-component-with-decorator.ts.mdx deleted file mode 100644 index 4ac3a2a1315f..000000000000 --- a/docs/snippets/web-components/your-component-with-decorator.ts.mdx +++ /dev/null @@ -1,13 +0,0 @@ -```ts -// YourComponent.stories.ts - -import { html } from 'lit'; - -import type { Meta } from '@storybook/web-components'; - -const meta: Meta<YourComponentProps> = { - component: 'demo-your-component', - decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`], -}; -export default meta; -``` diff --git a/docs/snippets/web-components/your-component.js.mdx b/docs/snippets/web-components/your-component.js.mdx deleted file mode 100644 index 379d0b847764..000000000000 --- a/docs/snippets/web-components/your-component.js.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```js -// YourComponent.stories.js - -// This default export determines where your story goes in the story list -export default { - component: 'demo-your-component', -}; - -export const FirstStory = { - args: { - // 👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/snippets/web-components/your-component.ts.mdx b/docs/snippets/web-components/your-component.ts.mdx deleted file mode 100644 index 4ba15165da62..000000000000 --- a/docs/snippets/web-components/your-component.ts.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```ts -// YourComponent.stories.ts - -import type { Meta, StoryObj } from '@storybook/web-components'; - -// This default export determines where your story goes in the story list -const meta: Meta = { - component: 'demo-your-component', -}; - -export default meta; -type Story = StoryObj; - -export const FirstStory: Story = { - args: { - // 👇 The args you need here will depend on your component - }, -}; -``` diff --git a/docs/toc.js b/docs/toc.js deleted file mode 100644 index 86e654d8f8f7..000000000000 --- a/docs/toc.js +++ /dev/null @@ -1,874 +0,0 @@ -module.exports = { - toc: [ - { - pathSegment: 'get-started', - title: 'Get started', - type: 'heading', - children: [ - { - pathSegment: 'why-storybook', - title: 'Why Storybook?', - type: 'link', - description: 'Learn why Storybook can help you build better UIs', - }, - { - pathSegment: 'install', - title: 'Install', - type: 'link', - description: 'Install the Storybook package in your project', - }, - { - pathSegment: '', - title: 'Frameworks', - type: 'menu', - children: [ - { - pathSegment: 'angular', - title: 'Angular', - type: 'link', - }, - { - pathSegment: 'nextjs', - title: 'Next.js', - type: 'link', - }, - { - pathSegment: 'react-vite', - title: 'React & Vite', - type: 'link', - }, - { - pathSegment: 'react-webpack5', - title: 'React & Webpack', - type: 'link', - }, - { - pathSegment: 'sveltekit', - title: 'SvelteKit', - type: 'link', - }, - { - pathSegment: 'svelte-vite', - title: 'Svelte & Vite', - type: 'link', - }, - { - pathSegment: 'svelte-webpack5', - title: 'Svelte & Webpack', - type: 'link', - }, - { - pathSegment: 'vue3-vite', - title: 'Vue & Vite', - type: 'link', - }, - { - pathSegment: 'vue3-webpack5', - title: 'Vue & Webpack', - type: 'link', - }, - { - pathSegment: 'web-components-vite', - title: 'Web components & Vite', - type: 'link', - }, - { - pathSegment: 'web-components-webpack5', - title: 'Web components & Webpack', - type: 'link', - }, - ], - }, - { - pathSegment: 'whats-a-story', - title: "What's a story?", - type: 'link', - description: 'Learn how to save component examples as stories', - }, - { - pathSegment: 'browse-stories', - title: 'Browse stories', - type: 'link', - description: 'Learn how to explore your stories within Storybook', - }, - { - pathSegment: 'setup', - title: 'Setup', - type: 'link', - description: - 'Write your first story & adjust Storybook configuration for your environment', - }, - { - pathSegment: 'conclusion', - title: 'Conclusion', - type: 'link', - description: 'Take your Storybook skills to the next level', - }, - ], - }, - { - pathSegment: 'writing-stories', - title: 'Stories', - type: 'heading', - children: [ - { - pathSegment: 'args', - title: 'Args', - type: 'link', - }, - { - pathSegment: 'parameters', - title: 'Parameters', - type: 'link', - }, - { - pathSegment: 'decorators', - title: 'Decorators', - type: 'link', - }, - { - pathSegment: 'play-function', - title: 'Play function', - type: 'link', - }, - { - pathSegment: 'loaders', - title: 'Loaders', - type: 'link', - }, - { - pathSegment: 'tags', - title: 'Tags', - type: 'link', - }, - { - pathSegment: 'naming-components-and-hierarchy', - title: 'Naming components and hierarchy', - type: 'link', - }, - { - pathSegment: '', - title: 'Mocking data and modules', - type: 'menu', - children: [ - { - pathSegment: 'mocking-modules', - title: 'Modules', - type: 'link', - }, - { - pathSegment: 'mocking-network-requests', - title: 'Network requests', - type: 'link', - }, - { - pathSegment: 'mocking-providers', - title: 'Providers', - type: 'link', - }, - ], - }, - { - pathSegment: 'build-pages-with-storybook', - title: 'Build pages and screens', - type: 'link', - }, - { - pathSegment: 'stories-for-multiple-components', - title: 'Stories for multiple components', - type: 'link', - }, - { - pathSegment: 'typescript', - title: 'Writing stories in TypeScript', - type: 'link', - }, - ], - }, - { - pathSegment: 'writing-docs', - title: 'Docs', - type: 'heading', - children: [ - { - pathSegment: 'autodocs', - title: 'Autodocs', - type: 'link', - }, - { - pathSegment: 'mdx', - title: 'MDX', - type: 'link', - }, - { - pathSegment: 'doc-blocks', - title: 'Doc blocks', - type: 'link', - }, - { - pathSegment: 'build-documentation', - title: 'Preview and build docs', - type: 'link', - }, - ], - }, - { - pathSegment: 'writing-tests', - title: 'Testing', - type: 'heading', - children: [ - { - pathSegment: 'test-runner', - title: 'Test runner', - type: 'link', - }, - { - pathSegment: 'visual-testing', - title: 'Visual tests', - type: 'link', - }, - { - pathSegment: 'accessibility-testing', - title: 'Accessibility tests', - type: 'link', - }, - { - pathSegment: 'interaction-testing', - title: 'Interaction tests', - type: 'link', - }, - { - pathSegment: 'test-coverage', - title: 'Test coverage', - type: 'link', - }, - { - pathSegment: '', - title: 'Snapshot testing', - type: 'menu', - children: [ - { - pathSegment: 'snapshot-testing', - title: 'Write', - type: 'link', - }, - { - pathSegment: 'storyshots-migration-guide', - title: 'Storyshots migration guide', - type: 'link', - }, - ], - }, - { - pathSegment: '', - title: 'Import stories in tests', - type: 'menu', - children: [ - { - pathSegment: 'stories-in-end-to-end-tests', - title: 'End-to-end tests', - type: 'link', - }, - { - pathSegment: 'stories-in-unit-tests', - title: 'Unit tests', - type: 'link', - }, - ], - }, - ], - }, - { - pathSegment: 'sharing', - title: 'Sharing', - type: 'heading', - children: [ - { - pathSegment: 'publish-storybook', - title: 'Publish', - type: 'link', - }, - { - pathSegment: 'embed', - title: 'Embed', - type: 'link', - }, - { - pathSegment: 'design-integrations', - title: 'Design integrations', - type: 'link', - }, - { - pathSegment: 'storybook-composition', - title: 'Composition', - type: 'link', - }, - { - pathSegment: 'package-composition', - title: 'Package Composition', - type: 'link', - }, - ], - }, - { - pathSegment: 'essentials', - title: 'Essential addons', - type: 'heading', - children: [ - { - pathSegment: 'actions', - title: 'Actions', - type: 'link', - }, - { - pathSegment: 'backgrounds', - title: 'Backgrounds', - type: 'link', - }, - { - pathSegment: 'controls', - title: 'Controls', - type: 'link', - }, - { - pathSegment: 'highlight', - title: 'Highlight', - type: 'link', - }, - { - pathSegment: 'interactions', - title: 'Interactions', - type: 'link', - }, - { - pathSegment: 'measure-and-outline', - title: 'Measure & Outline', - type: 'link', - }, - // { - // pathSegment: 'themes', - // title: 'Themes', - // type: 'link', - // }, - { - pathSegment: 'toolbars-and-globals', - title: 'Toolbars & globals', - type: 'link', - }, - { - pathSegment: 'viewport', - title: 'Viewport', - type: 'link', - }, - - ], - }, - { - pathSegment: 'addons', - title: 'Addons', - type: 'heading', - children: [ - { - pathSegment: 'install-addons', - title: 'Install', - type: 'link', - }, - { - pathSegment: 'writing-addons', - title: 'Write', - type: 'link', - }, - { - pathSegment: 'configure-addons', - title: 'Configure addons', - type: 'link', - }, - { - pathSegment: 'writing-presets', - title: 'Write a preset', - type: 'link', - }, - { - pathSegment: 'integration-catalog', - title: 'Add to catalog', - type: 'link', - }, - { - pathSegment: 'addon-types', - title: 'Types of addons', - type: 'link', - }, - { - pathSegment: 'addon-knowledge-base', - title: 'Knowledge base', - type: 'link', - }, - { - pathSegment: 'addons-api', - title: 'Addon API', - type: 'link', - }, - { - pathSegment: 'addon-migration-guide', - title: 'Migrate addons to 8.0', - type: 'link', - }, - ], - }, - { - pathSegment: 'configure', - title: 'Configure', - type: 'heading', - children: [ - { - pathSegment: 'styling-and-css', - title: 'Styling and CSS', - type: 'link', - }, - { - pathSegment: 'upgrading', - title: 'Upgrading', - type: 'link', - }, - { - pathSegment: 'telemetry', - title: 'Telemetry', - type: 'link', - }, - { - pathSegment: '', - title: 'Integration', - type: 'menu', - children: [ - { - pathSegment: 'frameworks', - title: 'Frameworks', - type: 'link', - }, - { - pathSegment: 'frameworks-feature-support', - title: 'Feature support for frameworks', - type: 'link', - }, - { - pathSegment: 'compilers', - title: 'Compilers', - type: 'link', - }, - { - pathSegment: 'typescript', - title: 'TypeScript', - type: 'link', - }, - { - pathSegment: 'images-and-assets', - title: 'Images and assets', - type: 'link', - }, - ], - }, - { - pathSegment: 'story-rendering', - title: 'Story rendering', - type: 'link', - }, - { - pathSegment: 'story-layout', - title: 'Story Layout', - type: 'link', - }, - { - pathSegment: '', - title: 'User interface', - type: 'menu', - children: [ - { - pathSegment: 'features-and-behavior', - title: 'Features and behavior', - type: 'link', - }, - { - pathSegment: 'theming', - title: 'Theming', - type: 'link', - }, - { - pathSegment: 'sidebar-and-urls', - title: 'Sidebar & URLS', - type: 'link', - }, - { - pathSegment: 'storybook-addons', - title: 'Storybook Addons', - type: 'link', - }, - ], - }, - { - pathSegment: 'environment-variables', - title: 'Environment variables', - type: 'link', - }, - ], - }, - { - pathSegment: 'builders', - title: 'Builders', - type: 'heading', - children: [ - { - pathSegment: 'vite', - title: 'Vite', - type: 'link', - }, - { - pathSegment: 'webpack', - title: 'Webpack', - type: 'link', - }, - { - pathSegment: 'builder-api', - title: 'API', - type: 'link', - }, - ], - }, - { - pathSegment: 'api', - title: 'API', - type: 'heading', - children: [ - { - title: 'main.js|ts configuration', - pathSegment: '', - type: 'menu', - children: [ - { - title: 'Overview', - pathSegment: 'main-config', - type: 'link', - }, - { - title: 'framework', - pathSegment: 'main-config-framework', - type: 'link', - }, - { - title: 'stories', - pathSegment: 'main-config-stories', - type: 'link', - }, - { - title: 'addons', - pathSegment: 'main-config-addons', - type: 'link', - }, - { - title: 'babel', - pathSegment: 'main-config-babel', - type: 'link', - }, - { - title: 'babelDefault', - pathSegment: 'main-config-babel-default', - type: 'link', - }, - { - title: 'build', - pathSegment: 'main-config-build', - type: 'link', - }, - { - title: 'core', - pathSegment: 'main-config-core', - type: 'link', - }, - { - title: 'docs', - pathSegment: 'main-config-docs', - type: 'link', - }, - { - title: 'env', - pathSegment: 'main-config-env', - type: 'link', - }, - { - title: 'features', - pathSegment: 'main-config-features', - type: 'link', - }, - { - title: 'indexers', - pathSegment: 'main-config-indexers', - type: 'link', - }, - { - title: 'logLevel', - pathSegment: 'main-config-log-level', - type: 'link', - }, - { - title: 'managerHead', - pathSegment: 'main-config-manager-head', - type: 'link', - }, - { - title: 'previewAnnotations', - pathSegment: 'main-config-preview-annotations', - type: 'link', - }, - { - title: 'previewBody', - pathSegment: 'main-config-preview-body', - type: 'link', - }, - { - title: 'previewHead', - pathSegment: 'main-config-preview-head', - type: 'link', - }, - { - title: 'refs', - pathSegment: 'main-config-refs', - type: 'link', - }, - { - title: 'staticDirs', - pathSegment: 'main-config-static-dirs', - type: 'link', - }, - { - title: 'swc', - pathSegment: 'main-config-swc', - type: 'link', - }, - { - title: 'typescript', - pathSegment: 'main-config-typescript', - type: 'link', - }, - { - title: 'viteFinal', - pathSegment: 'main-config-vite-final', - type: 'link', - }, - { - title: 'webpackFinal', - pathSegment: 'main-config-webpack-final', - type: 'link', - }, - ], - }, - { - pathSegment: 'csf', - title: 'Component Story Format (CSF)', - type: 'link', - }, - { - pathSegment: 'arg-types', - title: 'ArgTypes', - type: 'link', - }, - { - pathSegment: 'parameters', - title: 'Parameters', - type: 'link', - }, - { - title: 'Doc blocks', - pathSegment: '', - type: 'menu', - children: [ - { - pathSegment: 'doc-block-argtypes', - title: 'ArgTypes', - type: 'link', - }, - { - pathSegment: 'doc-block-canvas', - title: 'Canvas', - type: 'link', - }, - { - pathSegment: 'doc-block-colorpalette', - title: 'ColorPalette', - type: 'link', - }, - { - pathSegment: 'doc-block-controls', - title: 'Controls', - type: 'link', - }, - { - pathSegment: 'doc-block-description', - title: 'Description', - type: 'link', - }, - { - pathSegment: 'doc-block-icongallery', - title: 'IconGallery', - type: 'link', - }, - { - pathSegment: 'doc-block-markdown', - title: 'Markdown', - type: 'link', - }, - { - pathSegment: 'doc-block-meta', - title: 'Meta', - type: 'link', - }, - { - pathSegment: 'doc-block-primary', - title: 'Primary', - type: 'link', - }, - { - pathSegment: 'doc-block-source', - title: 'Source', - type: 'link', - }, - { - pathSegment: 'doc-block-stories', - title: 'Stories', - type: 'link', - }, - { - pathSegment: 'doc-block-story', - title: 'Story', - type: 'link', - }, - { - pathSegment: 'doc-block-subtitle', - title: 'Subtitle', - type: 'link', - }, - { - pathSegment: 'doc-block-title', - title: 'Title', - type: 'link', - }, - { - pathSegment: 'doc-block-typeset', - title: 'Typeset', - type: 'link', - }, - { - pathSegment: 'doc-block-unstyled', - title: 'Unstyled', - type: 'link', - }, - { - pathSegment: 'doc-block-useof', - title: 'useOf', - type: 'link', - }, - ], - }, - { - title: 'Portable stories', - pathSegment: '', - type: 'menu', - children: [ - // Unpublished for now - // { - // pathSegment: 'portable-stories-jest', - // title: 'Jest', - // type: 'link', - // }, - { - pathSegment: 'portable-stories-playwright', - title: 'Playwright', - type: 'link', - }, - // Unpublished for now - // { - // pathSegment: 'portable-stories-vitest', - // title: 'Vitest', - // type: 'link', - // }, - ], - }, - - { - pathSegment: 'new-frameworks', - title: 'Frameworks', - type: 'link', - }, - { - pathSegment: 'cli-options', - title: 'CLI options', - type: 'link', - }, - ], - }, - { - pathSegment: 'contribute', - title: 'Contribute', - type: 'heading', - children: [ - { - pathSegment: 'RFC', - title: 'RFC Process', - type: 'link', - }, - { - pathSegment: 'code', - title: 'Code', - type: 'link', - }, - { - pathSegment: '', - title: 'Documentation', - type: 'menu', - children: [ - { - pathSegment: 'documentation-updates', - title: 'Content', - type: 'link', - }, - { - pathSegment: 'new-snippets', - title: 'Code snippets', - type: 'link', - }, - ], - }, - { - pathSegment: 'framework', - title: 'Framework', - type: 'link', - }, - { - pathSegment: 'how-to-reproduce', - title: 'Reproduce', - type: 'link', - }, - { - pathSegment: 'roadmap', - title: 'Roadmap', - type: 'link', - }, - ], - }, - { - title: 'FAQ', - pathSegment: 'faq', - type: 'link', - }, - { - pathSegment: 'migration-guide', - title: 'Migrate to 8.0', - type: 'heading', - children: [ - { - title: 'Migrate from 6.x to 8.0', - pathSegment: 'from-older-version', - type: 'link', - }, - ], - }, - ], -};