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/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/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. 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/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/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'); + }); + } + }, +}; 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/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/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; }); }); 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" 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/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!"}} 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!"}} 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: 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) {}` |