From aaa4ab6c6168bbce2b91f4378e71d59e16390280 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 11 Apr 2024 09:53:55 +0000 Subject: [PATCH 1/8] Update ./docs/versions/next.json for v8.1.0-alpha.7 --- docs/versions/next.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/versions/next.json b/docs/versions/next.json index a2ba413b8e56..2f8990d20967 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.1.0-alpha.6","info":{"plain":"- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!\n- Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!\n- Dependency: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!\n- Dependency: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!\n- Dependency: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!\n- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!\n- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!"}} +{"version":"8.1.0-alpha.7","info":{"plain":"- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!\n- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!\n- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!\n- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!\n- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!\n- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!"}} From 8bb53887ba91ca3d4de22ea4bfe599ddc43e2b15 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 5 Apr 2024 20:48:11 +0800 Subject: [PATCH 2/8] Merge pull request #26751 from storybookjs/fix/disable-vue3-controls Vue: Disable controls for events, slots and expose (cherry picked from commit 166327094b85b8066e00f880556d872028606374) --- .../extractArgTypes.test.ts.snap | 128 +----------------- .../vue3/src/docs/extractArgTypes.ts | 11 +- 2 files changed, 14 insertions(+), 125 deletions(-) diff --git a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap index cbdcb9f51226..164f338725e3 100644 --- a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap +++ b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap @@ -4,7 +4,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for Vue compon { "bar": { "control": { - "disabled": true, + "disable": true, }, "description": "", "name": "bar", @@ -21,7 +21,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for Vue compon }, "baz": { "control": { - "disabled": true, + "disable": true, }, "description": "", "name": "baz", @@ -38,7 +38,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for Vue compon }, "foo": { "control": { - "disabled": true, + "disable": true, }, "description": "", "name": "foo", @@ -60,7 +60,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for component { "bar": { "control": { - "disabled": true, + "disable": true, }, "description": "Test description bar", "name": "bar", @@ -80,7 +80,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for component }, "baz": { "control": { - "disabled": true, + "disable": true, }, "description": "Test description baz", "name": "baz", @@ -103,7 +103,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract expose for component { "count": { "control": { - "disabled": true, + "disable": true, }, "description": "a count number", "name": "count", @@ -120,7 +120,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract expose for component }, "label": { "control": { - "disabled": true, + "disable": true, }, "description": "a label string", "name": "label", @@ -141,9 +141,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract expose for component exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1`] = ` { "array": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description required array object", "name": "array", @@ -170,9 +167,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "arrayOptional": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description optional array object", "name": "arrayOptional", @@ -199,9 +193,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "bar": { - "control": { - "disabled": false, - }, "defaultValue": { "summary": "1", }, @@ -222,9 +213,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "baz": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description baz is required boolean", "name": "baz", @@ -241,9 +229,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "enumValue": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description enum value", "name": "enumValue", @@ -265,9 +250,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "foo": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "@default: "rounded"
@since: v1.0.0
@see: https://vuejs.org/
@deprecated: v1.1.0

string foo", "name": "foo", @@ -284,9 +266,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "inlined": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "", "name": "inlined", @@ -309,9 +288,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "literalFromContext": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description literal type alias that require context", "name": "literalFromContext", @@ -336,9 +312,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "nested": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description nested is required nested object", "name": "nested", @@ -361,9 +334,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "nestedIntersection": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description required nested object with intersection", "name": "nestedIntersection", @@ -390,9 +360,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "nestedOptional": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description optional nested object", "name": "nestedOptional", @@ -431,9 +398,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "recursive": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "", "name": "recursive", @@ -457,9 +421,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "stringArray": { - "control": { - "disabled": false, - }, "defaultValue": { "summary": "["foo", "bar"]", }, @@ -484,9 +445,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "union": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description union is required union type", "name": "union", @@ -513,9 +471,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 }, }, "unionOptional": { - "control": { - "disabled": false, - }, "defaultValue": undefined, "description": "description unionOptional is optional union type", "name": "unionOptional", @@ -551,9 +506,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2`] = ` { "array": { - "control": { - "disabled": false, - }, "description": "description required array object", "name": "array", "table": { @@ -571,9 +523,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "arrayOptional": { - "control": { - "disabled": false, - }, "description": "description optional array object", "name": "arrayOptional", "table": { @@ -591,9 +540,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "bar": { - "control": { - "disabled": false, - }, "description": "description bar is optional number", "name": "bar", "table": { @@ -612,9 +558,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "baz": { - "control": { - "disabled": false, - }, "description": "description baz is required boolean", "name": "baz", "table": { @@ -631,9 +574,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "enumValue": { - "control": { - "disabled": false, - }, "description": "description enum value", "name": "enumValue", "table": { @@ -651,9 +591,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "foo": { - "control": { - "disabled": false, - }, "description": "string foo", "name": "foo", "table": { @@ -670,9 +607,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "inlined": { - "control": { - "disabled": false, - }, "description": undefined, "name": "inlined", "table": { @@ -690,9 +624,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "literalFromContext": { - "control": { - "disabled": false, - }, "description": "description literal type alias that require context", "name": "literalFromContext", "table": { @@ -710,9 +641,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "nested": { - "control": { - "disabled": false, - }, "description": "description nested is required nested object", "name": "nested", "table": { @@ -730,9 +658,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "nestedIntersection": { - "control": { - "disabled": false, - }, "description": "description required nested object with intersection", "name": "nestedIntersection", "table": { @@ -755,9 +680,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "nestedOptional": { - "control": { - "disabled": false, - }, "description": "description optional nested object", "name": "nestedOptional", "table": { @@ -784,9 +706,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "recursive": { - "control": { - "disabled": false, - }, "description": undefined, "name": "recursive", "table": { @@ -804,9 +723,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "stringArray": { - "control": { - "disabled": false, - }, "description": "description stringArray is string array", "name": "stringArray", "table": { @@ -826,9 +742,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "union": { - "control": { - "disabled": false, - }, "description": "description union is required union type", "name": "union", "table": { @@ -853,9 +766,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 }, }, "unionOptional": { - "control": { - "disabled": false, - }, "description": "description unionOptional is optional union type", "name": "unionOptional", "table": { @@ -888,9 +798,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1`] = ` { "default": { - "control": { - "disabled": false, - }, "description": undefined, "name": "default", "table": { @@ -908,9 +815,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 }, }, "named": { - "control": { - "disabled": false, - }, "description": undefined, "name": "named", "table": { @@ -928,9 +832,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 }, }, "no-bind": { - "control": { - "disabled": false, - }, "description": undefined, "name": "no-bind", "table": { @@ -946,9 +847,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 }, }, "vbind": { - "control": { - "disabled": false, - }, "description": undefined, "name": "vbind", "table": { @@ -971,9 +869,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 exports[`extractArgTypes (vue-docgen-api) > should extract slots type for Vue component 1`] = ` { "default": { - "control": { - "disabled": false, - }, "description": "", "name": "default", "table": { @@ -988,9 +883,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots type for Vue co }, }, "named": { - "control": { - "disabled": false, - }, "description": "", "name": "named", "table": { @@ -1005,9 +897,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots type for Vue co }, }, "no-bind": { - "control": { - "disabled": false, - }, "description": "", "name": "no-bind", "table": { @@ -1022,9 +911,6 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots type for Vue co }, }, "vbind": { - "control": { - "disabled": false, - }, "description": "", "name": "vbind", "table": { diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts index 151476491c95..d466cea2e1cd 100644 --- a/code/renderers/vue3/src/docs/extractArgTypes.ts +++ b/code/renderers/vue3/src/docs/extractArgTypes.ts @@ -44,10 +44,13 @@ export const extractArgTypes: ArgTypesExtractor = (component) => { // skip duplicate and global props if (!argType || argTypes[argType.name]) return; - argTypes[argType.name] = { - ...argType, - control: { disabled: !['props', 'slots'].includes(section) }, - }; + // disable controls for events and exposed since they can not be controlled + const sectionsToDisableControls: (typeof section)[] = ['events', 'expose', 'exposed']; + if (sectionsToDisableControls.includes(section)) { + argType.control = { disable: true }; + } + + argTypes[argType.name] = argType; }); }); From 7bf5a3b7ec7af0f4006d14ea08f6a8ef6bcdb157 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Mon, 8 Apr 2024 13:44:56 -0600 Subject: [PATCH 3/8] Merge pull request #26756 from storybookjs/update-addon-mdx-gmf-readme Docs: Fix incorrect link in addon-mdx-gfm README (cherry picked from commit 3c645b5271453f277cf7d6bbeb1d688eea72ec6f) --- code/addons/gfm/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/gfm/README.md b/code/addons/gfm/README.md index 038d46c44d40..8245b7975b2b 100644 --- a/code/addons/gfm/README.md +++ b/code/addons/gfm/README.md @@ -6,6 +6,6 @@ The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Story > This addon will likely be removed in a future version. It's recommended you read this document and follow its instructions instead: -https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm +https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. From 5f60991b67beed1333b570f82b7a468ae014986d Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 9 Apr 2024 15:19:38 +0100 Subject: [PATCH 4/8] Merge pull request #26781 from storybookjs/docs_fix_MDX Docs: MDX minor fixes (cherry picked from commit cd5d79ec8e2b2df9a5a5a02c6c0b70767039735c) --- docs/faq.md | 21 ++++++++++++------- ...storybook-automigration-mdx-legacy.npm.mdx | 3 --- ...torybook-automigration-mdx-legacy.pnpm.mdx | 3 --- ...torybook-automigration-mdx-legacy.yarn.mdx | 3 --- docs/writing-docs/mdx.md | 14 +++++-------- 5 files changed, 19 insertions(+), 25 deletions(-) delete mode 100644 docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx delete mode 100644 docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx delete mode 100644 docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx diff --git a/docs/faq.md b/docs/faq.md index aa597d0f4f57..49783da06df3 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -347,15 +347,17 @@ Vue 2 entered [End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31, 202 -## Why aren't my code blocks highlighted with Storybook MDX +## Why aren't my code blocks highlighted with Storybook MDX? -Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) you can use with your code blocks. Currently, there's a known limitation when you try and register a custom language to get syntax highlighting. We're working on a fix for this And will update this section once it's available. +Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) you can use with your code blocks. Currently, there's a known limitation when you try to register a custom language to get syntax highlighting. We're working on a fix for this and will update this section once it's available. -## Why aren't my MDX stories working in Storybook? +## Why aren't my MDX styles working in Storybook? -MDX can be picky about how your code is formatted with line breaks. This is especially true with code blocks. For example, this will break: +Writing documentation with MDX can be troublesome, especially regarding how your code is formatted when using line breaks with code blocks. For example, this will break: -``` + + +```mdx - ``` + + But this will work: -``` + + +```mdx ``` + + See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information. ## Why are my mocked GraphQL queries failing with Storybook's MSW addon? diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx deleted file mode 100644 index b54577026015..000000000000 --- a/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@latest automigrate mdx1to2 -``` diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx deleted file mode 100644 index 4c17825bf1a8..000000000000 --- a/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest automigrate mdx1to2 -``` diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx deleted file mode 100644 index 277d34f73467..000000000000 --- a/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@latest automigrate mdx1to2 -``` diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md index d40ae287025c..2dd8058f3706 100644 --- a/docs/writing-docs/mdx.md +++ b/docs/writing-docs/mdx.md @@ -121,7 +121,7 @@ The `Meta` block defines where the document will be placed in the sidebar. In th -MDX supports standard markdown ([”commonmark”](https://commonmark.org/)) by default and can be extended to support [GitHub-flavored markdown (GFM)](https://github.github.com/gfm) and other extensions (see [Breaking changes](#breaking-changes), below). +MDX supports standard markdown (["commonmark"](https://commonmark.org/)) by default and can be extended to support [GitHub Flavored Markdown (GFM)](https://github.github.com/gfm/) and other extensions (see the [Troubleshooting section](#troubleshooting) to learn more about some of the current limitations). @@ -325,11 +325,7 @@ By applying this pattern with the Controls addon, all anchors will be ignored in ### Markdown tables aren't rendering correctly -As of MDX 2, GFM is no longer included by default: - -“We turned off GFM features in MDX by default. GFM extends CommonMark to add autolink literals, footnotes, strikethrough, tables, and task lists. If you do want these features, you can use a plugin. How to do so is described in [our guide on GFM](https://mdxjs.com/guides/gfm/).” - -In Storybook, you can apply MDX options, including plugins, in the main configuration file: +If you're extending your documentation to include specific features (e.g., tables, footnotes), you may run into some issues rendering them correctly using the current MDX version supported by Storybook. We recommend enabling the [`remark-gfm`](https://github.com/remarkjs/remark-gfm) plugin in your configuration file (i.e., [`.storybook/main.js|ts`](../configure/index.md)) to render them correctly. @@ -344,7 +340,7 @@ paths={[ -The [`remark-gfm`](https://github.com/remarkjs/remark-gfm) package isn't provided by default during migration. We recommend installing it as a development dependency if you use its features. +The [`remark-gfm`](https://github.com/remarkjs/remark-gfm) package is not included by default with Storybook and must be installed separately as a development dependency. To learn more about how to use it and the other breaking changes introduced by MDX, refer to the [GFM guide](https://mdxjs.com/guides/gfm/) and the [migration guide](https://mdxjs.com/migrating/v2/) provided by the MDX team for more information. @@ -354,11 +350,11 @@ As Storybook relies on [MDX 3](https://mdxjs.com/) to render documentation, some #### Storybook doesn't create documentation for my component stories -If you run into a situation where Storybook is not able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., `.storybook/main.js|ts`) and ensure the `stories` configuration element provides the correct path to your stories location(e.g., `../src/**/*.stories.@(js|jsx|mjs|ts|tsx)`). +If you run into a situation where Storybook is not able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., `.storybook/main.js|ts`) and ensure the `stories` configuration element provides the correct path to your stories location (e.g., `../src/**/*.stories.@(js|jsx|mjs|ts|tsx)`). ### The migration seems flaky and keeps failing -By default, running the [migration command](#automigration) will try and migrate all existing MDX files in your project according to the MDX 2 specification. However, this might not always be possible, and you might run into issues during the migration. To help you troubleshoot those issues, we've prepared some recommendations that might help you. +By default, running the [migration](../configure/upgrading.md) command will prompt you to update the existing MDX files in your project according to the MDX version supported by Storybook. However, this might be a disruptive process, specifically if you're upgrading from a previous version of Storybook where you were using the legacy MDX format. To help you troubleshoot those issues, we've prepared some recommendations that might help you. Start by running the following command inside your project directory: From 816f2606826ba01d4e11c862a4f2a0c734e413bc Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Apr 2024 12:56:28 +0200 Subject: [PATCH 5/8] Merge pull request #26655 from jwilliams-met/patch-1 Webpack: Bump webpack-dev-middleware to patch high security issue (cherry picked from commit 849de75d7c97ee1196b351402cd9ef83906f83fc) --- code/builders/builder-webpack5/package.json | 2 +- code/yarn.lock | 22 +++++++++++++++++++-- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index be70c335dd62..d1dd6bef0267 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -94,7 +94,7 @@ "util": "^0.12.4", "util-deprecate": "^1.0.2", "webpack": "5", - "webpack-dev-middleware": "^6.1.1", + "webpack-dev-middleware": "^6.1.2", "webpack-hot-middleware": "^2.25.1", "webpack-virtual-modules": "^0.5.0" }, diff --git a/code/yarn.lock b/code/yarn.lock index d38001944e61..f736d427c934 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5445,7 +5445,7 @@ __metadata: util: "npm:^0.12.4" util-deprecate: "npm:^1.0.2" webpack: "npm:5" - webpack-dev-middleware: "npm:^6.1.1" + webpack-dev-middleware: "npm:^6.1.2" webpack-hot-middleware: "npm:^2.25.1" webpack-virtual-modules: "npm:^0.5.0" peerDependenciesMeta: @@ -29704,7 +29704,7 @@ __metadata: languageName: node linkType: hard -"webpack-dev-middleware@npm:6.1.1, webpack-dev-middleware@npm:^6.1.1": +"webpack-dev-middleware@npm:6.1.1": version: 6.1.1 resolution: "webpack-dev-middleware@npm:6.1.1" dependencies: @@ -29737,6 +29737,24 @@ __metadata: languageName: node linkType: hard +"webpack-dev-middleware@npm:^6.1.2": + version: 6.1.2 + resolution: "webpack-dev-middleware@npm:6.1.2" + dependencies: + colorette: "npm:^2.0.10" + memfs: "npm:^3.4.12" + mime-types: "npm:^2.1.31" + range-parser: "npm:^1.2.1" + schema-utils: "npm:^4.0.0" + peerDependencies: + webpack: ^5.0.0 + peerDependenciesMeta: + webpack: + optional: true + checksum: 10c0/90c415a770c7db493f4a7d8f3308d761ff63249f628fa8a133eac5a61e849cdf658398e189fc2d95ce0ea884641363f964db6b269c6cea877765321dd7f14b9a + languageName: node + linkType: hard + "webpack-dev-server@npm:4.15.1": version: 4.15.1 resolution: "webpack-dev-server@npm:4.15.1" From 823fe7335c90e396cf4f84fe920fc8198d145e04 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 17:40:52 +0200 Subject: [PATCH 6/8] Merge pull request #26766 from storybookjs/norbert/vta-added-on-upgrade CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x (cherry picked from commit c9fbb76897f5807ac3ef07f15cd561279fbf0f62) --- code/lib/cli/src/automigrate/fixes/index.ts | 2 + .../lib/cli/src/automigrate/fixes/vta.test.ts | 61 +++++++++++++++++++ code/lib/cli/src/automigrate/fixes/vta.ts | 55 +++++++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 code/lib/cli/src/automigrate/fixes/vta.test.ts create mode 100644 code/lib/cli/src/automigrate/fixes/vta.ts diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 022074fa8301..72f3eb9a605d 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -26,6 +26,7 @@ import { removeJestTestingLibrary } from './remove-jest-testing-library'; import { addonsAPI } from './addons-api'; import { mdx1to3 } from './mdx-1-to-3'; import { addonPostCSS } from './addon-postcss'; +import { vta } from './vta'; import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies'; export * from '../types'; @@ -58,6 +59,7 @@ export const allFixes: Fix[] = [ webpack5CompilerSetup, mdx1to3, upgradeStorybookRelatedDependencies, + vta, ]; export const initFixes: Fix[] = [eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/vta.test.ts b/code/lib/cli/src/automigrate/fixes/vta.test.ts new file mode 100644 index 000000000000..ff1cc2109470 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/vta.test.ts @@ -0,0 +1,61 @@ +import { describe, expect, it } from 'vitest'; +import type { StorybookConfig } from '@storybook/types'; +import { vta } from './vta'; + +const check = async ({ + packageManager, + main: mainConfig, + storybookVersion = '7.0.0', +}: { + packageManager: any; + main: Partial & Record; + storybookVersion?: string; +}) => { + return vta.check({ + packageManager, + configDir: '', + mainConfig: mainConfig as any, + storybookVersion, + }); +}; + +describe('no-ops', () => { + it('with addon setup', async () => { + await expect( + check({ + packageManager: {}, + main: { + addons: ['@chromatic-com/storybook'], + }, + }) + ).resolves.toBeFalsy(); + }); + it('with addon setup with options', async () => { + await expect( + check({ + packageManager: {}, + main: { + addons: [ + { + name: '@chromatic-com/storybook', + options: {}, + }, + ], + }, + }) + ).resolves.toBeFalsy(); + }); +}); + +describe('continue', () => { + it('no addons', async () => { + await expect( + check({ + packageManager: {}, + main: { + stories: ['**/*.stories.mdx'], + }, + }) + ).resolves.toBeTruthy(); + }); +}); diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts new file mode 100644 index 000000000000..c86f957298a8 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -0,0 +1,55 @@ +import { dedent } from 'ts-dedent'; +import chalk from 'chalk'; +import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile'; +import type { Fix } from '../types'; + +const logger = console; + +interface Options {} + +/** + */ +export const vta: Fix = { + id: 'visual-tests-addon', + + versionRange: ['<8.0.7', '>=8.0.7'], + + async check({ mainConfig }) { + const hadAddonInstalled = getAddonNames(mainConfig).some((addon) => + addon.includes('@chromatic-com/storybook') + ); + + const skip = hadAddonInstalled; + + if (skip) { + return null; + } + + return {}; + }, + + prompt() { + return dedent` + New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in your stories. The addon is powered by Chromatic, a cloud-based testing tool developed by Storybook's core team. + + Learn more: ${chalk.yellow('storybook.js.org/docs/writing-tests/visual-testing')} + + Install Visual Tests addon in your project? + `; + }, + + async run({ packageManager, dryRun, mainConfigPath, skipInstall }) { + if (!dryRun) { + const packageJson = await packageManager.retrievePackageJson(); + await packageManager.addDependencies( + { installAsDevDependencies: true, skipInstall, packageJson }, + [`@chromatic-com/storybook@^1`] + ); + + await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => { + logger.info(`✅ Adding "@chromatic-com/storybook" addon`); + main.appendValueToArray(['addons'], '@chromatic-dom/storybook'); + }); + } + }, +}; From 17bb409f283120c2de00f5d8efcbe386509ae120 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 11 Apr 2024 12:18:27 +0100 Subject: [PATCH 7/8] Merge pull request #26686 from JohnEndson/next Docs: remove repetitive words (cherry picked from commit 199e635c8f7a76a0512f9042439dbf7d8608ce70) --- MIGRATION.md | 2 +- code/addons/viewport/README.md | 2 +- code/lib/core-server/src/utils/StoryIndexGenerator.ts | 2 +- docs/writing-tests/test-runner.md | 10 +++++----- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 561a9a61b899..a7959b77b8ba 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -5477,7 +5477,7 @@ Currently there is no recommended way of accessing the component options of a st ## From version 4.0.x to 4.1.x -There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage. +There are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage. ### Private addon config diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md index 3766d555f8b3..7975688745fd 100644 --- a/code/addons/viewport/README.md +++ b/code/addons/viewport/README.md @@ -22,7 +22,7 @@ export default { }; ``` -You should now be able to see the viewport addon icon in the the toolbar at the top of the screen. +You should now be able to see the viewport addon icon in the toolbar at the top of the screen. ## Usage diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index a650f04c1ffa..6dea83092d16 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -506,7 +506,7 @@ export class StoryIndexGenerator { // Otherwise the existing entry is created by `autodocs=true` which allowed to be overridden. } else { // If both entries are templates (e.g. you have two CSF files with the same title), then - // we need to merge the entries. We'll use the the first one's name and importPath, + // we need to merge the entries. We'll use the first one's name and importPath, // but ensure we include both as storiesImports so they are both loaded before rendering // the story (for the block & friends) return { diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index 40b50980517e..6a39b2362ad3 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -202,12 +202,12 @@ The test-runner renders a story and executes its [play function](../writing-stor The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered. Listed below are the available hooks and an overview of how to use them. -| Hook | Description | -| ----------- | --------------------------------------------------------------------------------------------------------------- | -| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | -| `setup` | Executes once before all the tests run
`setup() {}` | +| Hook | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------ | +| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | +| `setup` | Executes once before all the tests run
`setup() {}` | | `preVisit` | Executes before a story is initially visited and rendered in the browser
`async preVisit(page, context) {}` | -| `postVisit` | Executes after the story is is visited and fully rendered
`async postVisit(page, context) {}` | +| `postVisit` | Executes after the story is visited and fully rendered
`async postVisit(page, context) {}` | From 7608352a9cf7044d2fea4f8f470d466b6415d28a Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 11 Apr 2024 11:20:51 +0000 Subject: [PATCH 8/8] Write changelog for 8.0.7 [skip ci] --- CHANGELOG.md | 7 +++++++ code/package.json | 3 ++- docs/versions/latest.json | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61ad5d1f5e1e..dc26d8f08de2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 8.0.7 + +- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen! +- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13! +- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman! +- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met! + ## 8.0.6 - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf! diff --git a/code/package.json b/code/package.json index 82a0638d12dc..b732fa680610 100644 --- a/code/package.json +++ b/code/package.json @@ -295,5 +295,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.7" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 20186e787b72..c1910d5897a0 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"8.0.6","info":{"plain":"- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!\n- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!\n- Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!\n- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!"}} +{"version":"8.0.7","info":{"plain":"- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!\n- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!\n- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!\n- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!"}}