From 082e02faa3aa061ebbdc96c2c9c4d5292a4d34f0 Mon Sep 17 00:00:00 2001 From: Cameron Steffen Date: Wed, 4 May 2022 16:04:26 -0500 Subject: [PATCH 01/24] Do not run compodoc in shell In addition to removing unnecessary overhead, this allows for spaces in the workspace root path. --- app/angular/src/builders/build-storybook/index.spec.ts | 2 -- app/angular/src/builders/start-storybook/index.spec.ts | 2 -- app/angular/src/builders/utils/run-compodoc.spec.ts | 8 -------- app/angular/src/builders/utils/run-compodoc.ts | 2 -- 4 files changed, 14 deletions(-) diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts index c396c9cc6d9c..c0c64a8f7867 100644 --- a/app/angular/src/builders/build-storybook/index.spec.ts +++ b/app/angular/src/builders/build-storybook/index.spec.ts @@ -177,8 +177,6 @@ describe('Build Storybook Builder', () => { ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'], { cwd: '', - env: process.env, - shell: true, } ); expect(buildStandaloneMock).toHaveBeenCalledWith({ diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts index 657087f4839e..828148c24d66 100644 --- a/app/angular/src/builders/start-storybook/index.spec.ts +++ b/app/angular/src/builders/start-storybook/index.spec.ts @@ -159,8 +159,6 @@ describe('Start Storybook Builder', () => { ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'], { cwd: '', - env: process.env, - shell: true, } ); expect(buildStandaloneMock).toHaveBeenCalledWith({ diff --git a/app/angular/src/builders/utils/run-compodoc.spec.ts b/app/angular/src/builders/utils/run-compodoc.spec.ts index 3c99cfefc499..900bc6a7669f 100644 --- a/app/angular/src/builders/utils/run-compodoc.spec.ts +++ b/app/angular/src/builders/utils/run-compodoc.spec.ts @@ -20,10 +20,7 @@ const builderContextLoggerMock: LoggerApi = { }; describe('runCompodoc', () => { - const originalEnv = process.env; - beforeEach(() => { - process.env = { FOO: 'bar' }; cpSpawnMock.spawn.mockImplementation(() => ({ stdout: { on: () => {} }, stderr: { on: () => {} }, @@ -32,7 +29,6 @@ describe('runCompodoc', () => { }); afterEach(() => { - process.env = originalEnv; jest.clearAllMocks(); }); @@ -55,8 +51,6 @@ describe('runCompodoc', () => { ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], { cwd: 'path/to/project', - env: { FOO: 'bar' }, - shell: true, } ); }); @@ -80,8 +74,6 @@ describe('runCompodoc', () => { ['compodoc', '-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'], { cwd: 'path/to/project', - env: { FOO: 'bar' }, - shell: true, } ); }); diff --git a/app/angular/src/builders/utils/run-compodoc.ts b/app/angular/src/builders/utils/run-compodoc.ts index 0df330892048..74551841046b 100644 --- a/app/angular/src/builders/utils/run-compodoc.ts +++ b/app/angular/src/builders/utils/run-compodoc.ts @@ -30,8 +30,6 @@ export const runCompodoc = ( context.logger.info(finalCompodocArgs.join(' ')); const child = spawn('npx', finalCompodocArgs, { cwd: context.workspaceRoot, - env: process.env, - shell: true, }); child.stdout.on('data', (data) => { From 86a119b56bde64fae4b7c435ef20a58d266dd663 Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Sat, 7 May 2022 21:28:07 +0200 Subject: [PATCH 02/24] Svelte: Supports action auto configuration --- .../src/client/docs/extractArgTypes.test.ts | 17 +++++------------ app/svelte/src/client/docs/extractArgTypes.ts | 5 +++-- app/svelte/src/client/preview/render.ts | 3 ++- app/svelte/templates/PreviewRender.svelte | 9 ++++++++- .../src/stories/views/ButtonView.svelte | 2 +- 5 files changed, 19 insertions(+), 17 deletions(-) diff --git a/app/svelte/src/client/docs/extractArgTypes.test.ts b/app/svelte/src/client/docs/extractArgTypes.test.ts index ed0921a0cf86..e25ec8bb2853 100644 --- a/app/svelte/src/client/docs/extractArgTypes.test.ts +++ b/app/svelte/src/client/docs/extractArgTypes.test.ts @@ -66,26 +66,22 @@ describe('Extracting Arguments', () => { expect(results).toMatchInlineSnapshot(` Object { "event_afterUpdate": Object { + "action": "afterUpdate", + "control": false, "description": "After Update", "name": "afterUpdate", "table": Object { "category": "events", }, - "type": Object { - "name": "other", - "value": "void", - }, }, "event_click": Object { + "action": "click", + "control": false, "description": "Click Event", "name": "click", "table": Object { "category": "events", }, - "type": Object { - "name": "other", - "value": "void", - }, }, "rounded": Object { "control": Object { @@ -108,6 +104,7 @@ describe('Extracting Arguments', () => { }, }, "slot_default": Object { + "control": false, "description": "Default Slot \`{rounded}\`", @@ -115,10 +112,6 @@ describe('Extracting Arguments', () => { "table": Object { "category": "slots", }, - "type": Object { - "name": "other", - "value": "void", - }, }, "text": Object { "control": Object { diff --git a/app/svelte/src/client/docs/extractArgTypes.ts b/app/svelte/src/client/docs/extractArgTypes.ts index 91e28729c1af..7f68a545cf90 100644 --- a/app/svelte/src/client/docs/extractArgTypes.ts +++ b/app/svelte/src/client/docs/extractArgTypes.ts @@ -56,8 +56,9 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => { docgen.events.forEach((item) => { results[`event_${item.name}`] = { name: item.name, + action: item.name, + control: false, description: item.description, - type: { name: 'other', value: 'void' }, table: { category: 'events', }, @@ -67,10 +68,10 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => { docgen.slots.forEach((item) => { results[`slot_${item.name}`] = { name: item.name, + control: false, description: [item.description, item.params?.map((p) => `\`${p.name}\``).join(' ')] .filter((p) => p) .join('\n\n'), - type: { name: 'other', value: 'void' }, table: { category: 'slots', }, diff --git a/app/svelte/src/client/preview/render.ts b/app/svelte/src/client/preview/render.ts index bb21b56f8221..0ddc79f81e84 100644 --- a/app/svelte/src/client/preview/render.ts +++ b/app/svelte/src/client/preview/render.ts @@ -18,7 +18,7 @@ function cleanUpPreviousStory() { } export function renderToDOM( - { storyFn, kind, name, showMain, showError }: RenderContext, + { storyFn, kind, name, storyContext, showMain, showError }: RenderContext, domElement: HTMLElement ) { cleanUpPreviousStory(); @@ -31,6 +31,7 @@ export function renderToDOM( target, props: { storyFn, + storyContext, name, kind, showError, diff --git a/app/svelte/templates/PreviewRender.svelte b/app/svelte/templates/PreviewRender.svelte index 40c027d6c803..8f98a03fb9f0 100644 --- a/app/svelte/templates/PreviewRender.svelte +++ b/app/svelte/templates/PreviewRender.svelte @@ -6,6 +6,7 @@ export let kind; export let storyFn; export let showError; + export let storyContext; const { /** @type {SvelteComponent} */ @@ -18,6 +19,12 @@ WrapperData = {}, } = storyFn(); + const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes) + .filter(([k, v]) => v.action && props[k] != null) + .map(([k, v]) => [v.action, props[k]])); + + const events = {...eventsFromArgTypes, ...on}; + if (!Component) { showError({ title: `Expecting a Svelte component from the story: "${name}" of "${kind}".`, @@ -34,4 +41,4 @@ decoratorProps={WrapperData} component={Component} props={props} - {on}/> \ No newline at end of file + on={events}/> \ No newline at end of file diff --git a/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte b/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte index 7306df6a054a..e0e809cec8bd 100644 --- a/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte +++ b/examples/svelte-kitchen-sink/src/stories/views/ButtonView.svelte @@ -28,7 +28,7 @@

Button view

- +

A little text to show this is a view.

If we need to test components in a Svelte environment, for instance to test slot behaviour,

then wrapping the component up in a view

From 912e606c626c97502bf41201bd711b1f57662508 Mon Sep 17 00:00:00 2001 From: shippokun Date: Thu, 19 May 2022 00:23:47 +0900 Subject: [PATCH 03/24] chore: remove addon-actions from packages for install --- lib/cli/src/generators/baseGenerator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 1071db277dc2..50eb00383f3c 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -90,7 +90,7 @@ export async function baseGenerator( // make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json - const addonPackages = [...addons, '@storybook/addon-actions']; + const addonPackages = [...addons]; if (hasInteractiveStories(framework)) { addons.push('@storybook/addon-interactions'); From 89ba297d34f8a32b57989696d95ebcf1d2189538 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 1 Jul 2022 15:36:14 +0100 Subject: [PATCH 04/24] removes snippets references to svelte native --- docs/addons/addons-api.md | 1 - docs/addons/writing-addons.md | 1 - docs/api/csf.md | 3 --- docs/api/mdx.md | 1 - docs/configure/environment-variables.md | 1 - docs/configure/images-and-assets.md | 3 --- docs/contribute/new-snippets.md | 2 -- docs/essentials/controls.md | 2 -- docs/essentials/viewport.md | 1 - docs/get-started/setup.md | 1 - docs/get-started/whats-a-story.md | 2 -- docs/writing-stories/args.md | 3 --- docs/writing-stories/decorators.md | 2 -- docs/writing-stories/introduction.md | 7 ------- docs/writing-stories/parameters.md | 1 - 15 files changed, 31 deletions(-) diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md index 5c0e5b2a6463..ec0b1a1ff78b 100644 --- a/docs/addons/addons-api.md +++ b/docs/addons/addons-api.md @@ -235,7 +235,6 @@ Let's say you've got a story like this: 'vue/button-story-with-addon-example.js.mdx', 'angular/button-story-with-addon-example.ts.mdx', 'svelte/button-story-with-addon-example.js.mdx', - 'svelte/button-story-with-addon-example.native-format.mdx', ]} /> diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index 6245585bda3d..4486cb6a7420 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -200,7 +200,6 @@ When Storybook was initialized, it provided a small set of example stories. Chan 'vue/button-story-with-addon-example.js.mdx', 'angular/button-story-with-addon-example.ts.mdx', 'svelte/button-story-with-addon-example.js.mdx', - 'svelte/button-story-with-addon-example.native-format.mdx', ]} /> diff --git a/docs/api/csf.md b/docs/api/csf.md index b96c2fd970e3..e6adfbcd619b 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -44,7 +44,6 @@ With CSF, every named export in the file represents a story object by default. 'react/my-component-story-basic-and-props.ts.mdx', 'vue/my-component-story-basic-and-props.js.mdx', 'svelte/my-component-story-basic-and-props.js.mdx', - 'svelte/my-component-story-basic-and-props.native-format.mdx', 'angular/my-component-story-basic-and-props.ts.mdx', ]} /> @@ -92,7 +91,6 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def 'vue/button-story-click-handler.2.js.mdx', 'vue/button-story-click-handler.3.js.mdx', 'svelte/button-story-click-handler.js.mdx', - 'svelte/button-story-click-handler.native-format.mdx', 'angular/button-story-click-handler.ts.mdx', ]} /> @@ -125,7 +123,6 @@ Or even more simply: 'react/button-story-click-handler-simplificated.js.mdx', 'angular/button-story-click-handler-simplificated.ts.mdx', 'vue/button-story-click-handler-simplificated.js.mdx', - 'svelte/button-story-click-handler-simplificated.native-format.mdx', ]} /> diff --git a/docs/api/mdx.md b/docs/api/mdx.md index 4783ec5f12a3..51c166417c71 100644 --- a/docs/api/mdx.md +++ b/docs/api/mdx.md @@ -44,7 +44,6 @@ For example, here's the story from the `Checkbox` example above, rewritten in CS 'react/checkbox-story-csf.ts.mdx', 'vue/checkbox-story-csf.js.mdx', 'angular/checkbox-story-csf.ts.mdx', - 'svelte/checkbox-story-csf.native-format.mdx', ]} /> diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index 1109db35c15b..238aababb15f 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -60,7 +60,6 @@ Then you can access this environment variable anywhere, even within your stories 'angular/my-component-with-env-variables.mdx.mdx', 'web-components/my-component-with-env-variables.js.mdx', 'svelte/my-component-with-env-variables.js.mdx', - 'svelte/my-component-with-env-variables.native-format.mdx', 'svelte/my-component-with-env-variables.mdx.mdx', ]} /> diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index 8049a22db88a..c30babb303f5 100644 --- a/docs/configure/images-and-assets.md +++ b/docs/configure/images-and-assets.md @@ -24,7 +24,6 @@ Afterward, you can use any asset in your stories: 'angular/component-story-static-asset-with-import.ts.mdx', 'angular/component-story-static-asset-with-import.mdx.mdx', 'svelte/component-story-static-asset-with-import.js.mdx', - 'svelte/component-story-static-asset-with-import.native-format.mdx', 'svelte/component-story-static-asset-with-import.mdx.mdx', ]} /> @@ -61,7 +60,6 @@ Here `../public` is your static directory. Now use it in a component or story li 'angular/component-story-static-asset-without-import.ts.mdx', 'angular/component-story-static-asset-without-import.mdx.mdx', 'svelte/component-story-static-asset-without-import.js.mdx', - 'svelte/component-story-static-asset-without-import.native-format.mdx', 'svelte/component-story-static-asset-without-import.mdx.mdx', ]} /> @@ -112,7 +110,6 @@ Upload your files to an online CDN and reference them. In this example, we’re 'angular/component-story-static-asset-cdn.ts.mdx', 'angular/component-story-static-asset-cdn.mdx.mdx', 'svelte/component-story-static-asset-cdn.js.mdx', - 'svelte/component-story-static-asset-cdn.native-format.mdx', 'svelte/component-story-static-asset-cdn.mdx.mdx', ]} /> diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md index 35a88ea36834..4bb1b6409add 100644 --- a/docs/contribute/new-snippets.md +++ b/docs/contribute/new-snippets.md @@ -47,7 +47,6 @@ Browse the documentation and look for the code snippets you're willing to contri 'vue/your-component.2.js.mdx', 'vue/your-component.3.js.mdx', 'svelte/your-component.js.mdx', - 'svelte/your-component.native-format.mdx', 'web-components/your-component.js.mdx', ]} /> @@ -70,7 +69,6 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks, 'vue/your-component.2.js.mdx', 'vue/your-component.3.js.mdx', 'svelte/your-component.js.mdx', - 'svelte/your-component.native-format.mdx', 'web-components/your-component.js.mdx', 'ember/your-component.js.mdx', //πŸ‘ˆπŸΌ The code snippet you created. ]} diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 5da997b1fc61..0fa30d0f92e1 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -119,7 +119,6 @@ Until now, we only used auto-generated controls based on the component we're wri 'vue/table-story-fully-customize-controls.mdx-3.mdx.mdx', 'angular/table-story-fully-customize-controls.ts.mdx', 'angular/table-story-fully-customize-controls.mdx.mdx', - 'svelte/table-story-fully-customize-controls.native-format.mdx', ]} /> @@ -151,7 +150,6 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu 'angular/component-story-custom-args-complex.ts.mdx', 'angular/component-story-custom-args-complex.mdx.mdx', 'svelte/component-story-custom-args-complex.js.mdx', - 'svelte/component-story-custom-args-complex.native-format.mdx', ]} /> diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index 09b1e8cd856b..bc46620afde5 100644 --- a/docs/essentials/viewport.md +++ b/docs/essentials/viewport.md @@ -126,7 +126,6 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl 'angular/my-component-story-configure-viewports.mdx.mdx', 'web-components/my-component-story-configure-viewports.js.mdx', 'svelte/my-component-story-configure-viewports.js.mdx', - 'svelte/my-component-story-configure-viewports.native-format.mdx', 'svelte/my-component-story-configure-viewports.mdx.mdx', ]} /> diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md index 2959e5685ddd..77aa586a2dc5 100644 --- a/docs/get-started/setup.md +++ b/docs/get-started/setup.md @@ -20,7 +20,6 @@ Pick a simple component from your project, like a Button, and write a `.stories. 'vue/your-component.3.js.mdx', 'vue/your-component.mdx-3.mdx.mdx', 'svelte/your-component.js.mdx', - 'svelte/your-component.native-format.mdx', 'svelte/your-component.mdx.mdx', 'web-components/your-component.js.mdx', 'html/your-component.js.mdx', diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md index c349c1768787..34cf16d75b59 100644 --- a/docs/get-started/whats-a-story.md +++ b/docs/get-started/whats-a-story.md @@ -22,7 +22,6 @@ Let’s start with the `Button` component. A story is a function that describes 'vue/button-story.js.mdx', 'vue/button-story.mdx.mdx', 'svelte/button-story.js.mdx', - 'svelte/button-story.native-format.mdx', 'svelte/button-story.mdx.mdx', 'web-components/button-story.js.mdx', 'html/button-story.js.mdx', @@ -54,7 +53,6 @@ The above story definition can be further improved to take advantage of [Storybo 'angular/button-story-with-args.mdx.mdx', 'web-components/button-story-with-args.js.mdx', 'svelte/button-story-with-args.js.mdx', - 'svelte/button-story-with-args.native-format.mdx', 'svelte/button-story-with-args.mdx.mdx', 'html/button-story-with-args.js.mdx', 'html/button-story-with-args.ts.mdx', diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 6d10a8faab72..2ee7027d196b 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -30,7 +30,6 @@ To define the args of a single story, use the `args` CSF story key: 'angular/button-story-with-args.ts.mdx', 'angular/button-story-with-args.mdx.mdx', 'svelte/button-story-with-args.js.mdx', - 'svelte/button-story-with-args.native-format.mdx', 'svelte/button-story-with-args.mdx.mdx', 'web-components/button-story-with-args.js.mdx', 'html/button-story-with-args.ts.mdx', @@ -70,7 +69,6 @@ You can also define args at the component level; they will apply to all the comp 'angular/button-story-component-args-primary.ts.mdx', 'angular/button-story-component-args-primary.mdx.mdx', 'svelte/button-story-component-args-primary.js.mdx', - 'svelte/button-story-component-args-primary.native-format.mdx', 'svelte/button-story-component-args-primary.mdx.mdx', 'web-components/button-story-component-args-primary.js.mdx', ]} @@ -146,7 +144,6 @@ You can use args in your stories to configure the component's appearance, simila 'vue/page-story-slots.mdx-3.mdx.mdx', 'angular/page-story-slots.ts.mdx', 'angular/page-story-slots.mdx.mdx', - 'svelte/page-story-slots.native-format.mdx', ]} /> diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md index bc8509b7c2d8..717514e6502b 100644 --- a/docs/writing-stories/decorators.md +++ b/docs/writing-stories/decorators.md @@ -26,7 +26,6 @@ Some components require a β€œharness” to render in a useful way. For instance, 'angular/your-component-with-decorator.ts.mdx', 'angular/your-component-with-decorator.mdx.mdx', 'svelte/your-component-with-decorator.js.mdx', - 'svelte/your-component-with-decorator.native-format.mdx', 'svelte/your-component-with-decorator.mdx.mdx', 'web-components/your-component-with-decorator.js.mdx', ]} @@ -121,7 +120,6 @@ To define a decorator for all stories of a component, use the `decorators` key o 'angular/button-story-component-decorator.ts.mdx', 'angular/button-story-component-decorator.mdx.mdx', 'svelte/button-story-component-decorator.js.mdx', - 'svelte/button-story-component-decorator.native-format.mdx', 'svelte/button-story-component-decorator.mdx.mdx', 'web-components/button-story-component-decorator.js.mdx', ]} diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md index 15e4c456516b..380d3f800c7d 100644 --- a/docs/writing-stories/introduction.md +++ b/docs/writing-stories/introduction.md @@ -59,7 +59,6 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r 'vue/button-story.ts-3.ts.mdx', 'angular/button-story.ts.mdx', 'svelte/button-story.js.mdx', - 'svelte/button-story.native-format.mdx', 'web-components/button-story.js.mdx', 'html/button-story.js.mdx', 'html/button-story.ts.mdx', @@ -130,7 +129,6 @@ A story is a function that describes how to render a component. You can have mul 'angular/button-story-with-emojis.ts.mdx', 'angular/button-story-with-emojis.mdx.mdx', 'svelte/button-story-with-emojis.js.mdx', - 'svelte/button-story-with-emojis.native-format.mdx', 'svelte/button-story-with-emojis.mdx.mdx', 'web-components/button-story-with-emojis.js.mdx', 'html/button-story-with-emojis.js.mdx', @@ -158,7 +156,6 @@ Refine this pattern by introducing `args` for your component's stories. It reduc 'vue/button-story-using-args.ts-3.ts.mdx', 'angular/button-story-using-args.ts.mdx', 'svelte/button-story-using-args.js.mdx', - 'svelte/button-story-using-args.native-format.mdx', 'web-components/button-story-using-args.js.mdx', 'html/button-story-using-args.js.mdx', 'html/button-story-using-args.ts.mdx', @@ -261,7 +258,6 @@ For instance, suppose you wanted to test your Button component against a differe 'angular/button-story-with-blue-args.ts.mdx', 'angular/button-story-with-blue-args.mdx.mdx', 'svelte/button-story-with-blue-args.js.mdx', - 'svelte/button-story-with-blue-args.native-format.mdx', 'svelte/button-story-with-blue-args.mdx.mdx', 'web-components/button-story-with-blue-args.js.mdx', 'html/button-story-with-blue-args.js.mdx', @@ -295,7 +291,6 @@ A simple example is adding padding to a component’s stories. Accomplish this u 'angular/button-story-component-decorator.ts.mdx', 'angular/button-story-component-decorator.mdx.mdx', 'svelte/button-story-component-decorator.js.mdx', - 'svelte/button-story-component-decorator.native-format.mdx', 'svelte/button-story-component-decorator.mdx.mdx', 'web-components/button-story-component-decorator.js.mdx', 'html/button-story-component-decorator.js.mdx', @@ -322,7 +317,6 @@ When building design systems or component libraries, you may have two or more co 'vue/list-story-starter.ts-2.ts.mdx', 'vue/list-story-starter.3.js.mdx', 'vue/list-story-starter.ts-3.ts.mdx', - 'svelte/list-story-starter.native-format.mdx', 'web-components/list-story-starter.js.mdx', 'html/list-story-starter.js.mdx', 'html/list-story-starter.ts.mdx', @@ -344,7 +338,6 @@ In such cases, it makes sense to render a different function for each story: 'vue/list-story-expanded.ts-2.ts.mdx', 'vue/list-story-expanded.3.js.mdx', 'vue/list-story-expanded.ts-3.ts.mdx', - 'svelte/list-story-expanded.native-format.mdx', 'web-components/list-story-expanded.js.mdx', 'html/list-story-expanded.js.mdx', 'html/list-story-expanded.ts.mdx', diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md index f7093ef0289c..7758681099dd 100644 --- a/docs/writing-stories/parameters.md +++ b/docs/writing-stories/parameters.md @@ -38,7 +38,6 @@ We can set the parameters for all stories of a component using the `parameters` 'angular/button-story-with-blue-args.ts.mdx', 'angular/button-story-with-blue-args.mdx.mdx', 'svelte/button-story-with-blue-args.js.mdx', - 'svelte/button-story-with-blue-args.native-format.mdx', 'svelte/button-story-with-blue-args.mdx.mdx', 'web-components/button-story-with-blue-args.js.mdx', ]} From 76cb7e7755d87582878d32ae1ca6c6accd26ae70 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 12:57:51 -0700 Subject: [PATCH 05/24] Make `svelte-loader` optional --- app/svelte/package.json | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/svelte/package.json b/app/svelte/package.json index 19f255c5964b..7766c0013367 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -74,9 +74,18 @@ }, "peerDependencies": { "@babel/core": "*", + "@storybook/builder-vite": "*", "svelte": "^3.1.0", "svelte-loader": "*" }, + "peerDependenciesMeta": { + "@storybook/builder-vite": { + "optional": true + }, + "svelte-loader": { + "optional": true + } + }, "engines": { "node": ">=10.13.0" }, From 32f3a86db8cfbd57961e4010adbc654fd36b5d60 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 15:53:53 -0700 Subject: [PATCH 06/24] remove `@storybook/builder-vite` reference --- app/svelte/package.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/svelte/package.json b/app/svelte/package.json index 7766c0013367..2ddf73de058f 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -74,14 +74,10 @@ }, "peerDependencies": { "@babel/core": "*", - "@storybook/builder-vite": "*", "svelte": "^3.1.0", "svelte-loader": "*" }, "peerDependenciesMeta": { - "@storybook/builder-vite": { - "optional": true - }, "svelte-loader": { "optional": true } From 90c59ed5fea8b5717b5e4639f805d46f6f88dda0 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:20:56 -0400 Subject: [PATCH 07/24] Clarify use of .babelrc --- docs/configure/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 7ee09e53ec92..77b757ccb082 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -158,7 +158,7 @@ If you would like, you can also write your Storybook configuration using TypeScr -This babel config will only be used to process files in the `.storybook/` directory, and will not affect your stories. +This babel config will be used to process your stories, as well as your config files. Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook. From 3f2690f15c922f7c07151dce113021ad3ce41a3c Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:21:14 -0400 Subject: [PATCH 08/24] Mention ts-node --- docs/configure/overview.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 77b757ccb082..cc9bfc999aac 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -160,6 +160,8 @@ If you would like, you can also write your Storybook configuration using TypeScr This babel config will be used to process your stories, as well as your config files. +Alternatively, you can install [`ts-node`](https://typestrong.org/ts-node/) in your project, which will be used to process your config files without the need for a `.babelrc`. + Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook. ### Using Storybook Types in Your Configuration From 673dd69f03afdaa100e7509ab75b63e4207b0b93 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:21:31 -0400 Subject: [PATCH 09/24] Format file with prettier --- docs/configure/overview.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/configure/overview.md b/docs/configure/overview.md index cc9bfc999aac..699c50803e55 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -180,20 +180,20 @@ See the vite builder [TypeScript documentation](https://github.com/storybookjs/b -| Configuration element | Description | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` | -| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` | -| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | -| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | -| `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` | -| `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` | -| `features` | Enables Storybook's additional features.
See table below for a list of available features `features: { storyStoreV7: true }` | -| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | -| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | -| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | +| Configuration element | Description | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` | +| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` | +| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | +| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | +| `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` | +| `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` | +| `features` | Enables Storybook's additional features.
See table below for a list of available features `features: { storyStoreV7: true }` | +| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | +| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | +| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | | `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | -| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | ## Configure story rendering From dd5f380648290af37ec560771836d0a28537e737 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:21:50 -0400 Subject: [PATCH 10/24] Remove @babel/preset-env from example --- docs/snippets/common/storybook-ts-config-babelrc.js.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/snippets/common/storybook-ts-config-babelrc.js.mdx b/docs/snippets/common/storybook-ts-config-babelrc.js.mdx index 2fbafc24bc57..8f69b981507b 100644 --- a/docs/snippets/common/storybook-ts-config-babelrc.js.mdx +++ b/docs/snippets/common/storybook-ts-config-babelrc.js.mdx @@ -3,7 +3,6 @@ { "presets": [ - "@babel/preset-env", "@babel/preset-typescript" ] } From 97ef0cd583d774a88358655abb8ae280e0f4d80c Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:29:06 -0400 Subject: [PATCH 11/24] Mention import.meta.env` for vite builder --- docs/configure/environment-variables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index 1109db35c15b..268396a4da1c 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -3,7 +3,7 @@ title: 'Environment variables' --- You can use environment variables in Storybook to change its behavior in different β€œmodes”. -If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env`: +If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env` when using webpack, or `import.meta.env` when using the vite builder: ```shell STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook From 6101cd9233ef2d45b211dc2b3971f1dac229af10 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 20:12:28 -0700 Subject: [PATCH 12/24] update lockfile --- yarn.lock | 3 +++ 1 file changed, 3 insertions(+) diff --git a/yarn.lock b/yarn.lock index 9c430c7b44c1..2c5f4effd818 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8950,6 +8950,9 @@ __metadata: "@babel/core": "*" svelte: ^3.1.0 svelte-loader: "*" + peerDependenciesMeta: + svelte-loader: + optional: true bin: build-storybook: ./bin/build.js start-storybook: ./bin/index.js From c255546dde51f9894d9e018445da87c3fa165a10 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 20:25:59 -0700 Subject: [PATCH 13/24] cleanup: remove webpack dependency --- lib/core-client/package.json | 3 +-- lib/core-common/package.json | 6 +++--- yarn.lock | 1 - 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/core-client/package.json b/lib/core-client/package.json index 42a78a1754c4..fdde9f327daa 100644 --- a/lib/core-client/package.json +++ b/lib/core-client/package.json @@ -63,8 +63,7 @@ }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "webpack": "*" + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "typescript": { diff --git a/lib/core-common/package.json b/lib/core-common/package.json index b18b7c14eef4..743416e18308 100644 --- a/lib/core-common/package.json +++ b/lib/core-common/package.json @@ -88,8 +88,7 @@ "slash": "^3.0.0", "telejson": "^6.0.8", "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2", - "webpack": "4" + "util-deprecate": "^1.0.2" }, "devDependencies": { "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", @@ -97,7 +96,8 @@ "@types/interpret": "^1.1.1", "@types/mock-fs": "^4.13.0", "@types/picomatch": "^2.3.0", - "mock-fs": "^4.13.0" + "mock-fs": "^4.13.0", + "webpack": "4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/yarn.lock b/yarn.lock index 9c430c7b44c1..4bf7aa604d21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7645,7 +7645,6 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - webpack: "*" peerDependenciesMeta: typescript: optional: true From 90fae1f8532e8259e52a60af05e0e0cff72059b0 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 7 Jul 2022 17:55:42 +0100 Subject: [PATCH 14/24] preact snippets CSF 3 --- .../preact/button-story-with-args.js.mdx | 26 ++++++++------- docs/snippets/preact/button-story.js.mdx | 20 +++++++---- ...t-story-with-custom-render-function.js.mdx | 33 +++++++++++++++++++ docs/snippets/preact/your-component.js.mdx | 24 ++++++++------ 4 files changed, 76 insertions(+), 27 deletions(-) create mode 100644 docs/snippets/preact/component-story-with-custom-render-function.js.mdx diff --git a/docs/snippets/preact/button-story-with-args.js.mdx b/docs/snippets/preact/button-story-with-args.js.mdx index 93b3a1b01943..9e7a42247ae3 100644 --- a/docs/snippets/preact/button-story-with-args.js.mdx +++ b/docs/snippets/preact/button-story-with-args.js.mdx @@ -8,19 +8,23 @@ import { Button } from './Button'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/preact/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/preact/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, -} -//πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template = (args) => ; +export const Basic = { + render: () => , +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx index 8c1fd7d10081..5f90996fc267 100644 --- a/docs/snippets/react/button-story-with-addon-example.ts.mdx +++ b/docs/snippets/react/button-story-with-addon-example.ts.mdx @@ -3,15 +3,15 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; import { Button } from './Button'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, //πŸ‘‡ Creates specific parameters for the story @@ -22,5 +22,12 @@ export default { }, } as ComponentMeta; -const Basic: ComponentStory = () => ; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Basic: ComponentStoryObj = { + render: () => , +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx index 430d0187f520..7fcf35be8bde 100644 --- a/docs/snippets/react/button-story-with-args.js.mdx +++ b/docs/snippets/react/button-story-with-args.js.mdx @@ -7,20 +7,17 @@ import { Button } from './Button'; export default { /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, }; -//πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template = (args) => ; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Primary = { + render: () => ; +/* + *πŸ‘‡ Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const Primary: ComponentStoryObj = { + render: () =>