From 6d89ce30bb3cf8ee61272381cbda8bf5f35a9839 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Apr 2023 10:35:02 +0200 Subject: [PATCH 001/226] Merge pull request #21938 from storybookjs/fix/addon-gfm-node-logger Addon GFM: fix node-logger dependency --- code/addons/gfm/package.json | 2 +- code/yarn.lock | 14 +------------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 52cc337e7cef..9b8e142f5f49 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -51,7 +51,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/node-logger": "7.0.0-beta.52", + "@storybook/node-logger": "7.0.2", "remark-gfm": "^3.0.1", "ts-dedent": "^2.0.0" }, diff --git a/code/yarn.lock b/code/yarn.lock index 1202b4bc30e3..1314cc95aaeb 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5353,7 +5353,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-mdx-gfm@workspace:addons/gfm" dependencies: - "@storybook/node-logger": 7.0.0-beta.52 + "@storybook/node-logger": 7.0.2 remark-gfm: ^3.0.1 ts-dedent: ^2.0.0 typescript: ~4.9.3 @@ -6595,18 +6595,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/node-logger@npm:7.0.0-beta.52": - version: 7.0.0-beta.52 - resolution: "@storybook/node-logger@npm:7.0.0-beta.52" - dependencies: - "@types/npmlog": ^4.1.2 - chalk: ^4.1.0 - npmlog: ^5.0.1 - pretty-hrtime: ^1.0.3 - checksum: 7a35297fb274bc104c3bc14d798c1d30efad95d4a0bf425958e7497ce6f81a14f3750119ab004fbe2f318071bae19bc2c1ad605612535f02c3c3aacc2b987db6 - languageName: node - linkType: hard - "@storybook/postinstall@7.0.2, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall": version: 0.0.0-use.local resolution: "@storybook/postinstall@workspace:lib/postinstall" From b2fea3e2cdd876b2c954ddc664462d23deea224c Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 5 Apr 2023 11:24:16 +0200 Subject: [PATCH 002/226] Merge pull request #21940 from storybookjs/vue2-vite-sandbox Re-enable Vue2 Vite sandbox --- .circleci/config.yml | 10 +++++----- code/lib/cli/src/sandbox-templates.ts | 2 -- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 590f6ba9a71f..ba7d9e3e5397 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -701,22 +701,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 30 + parallelism: 31 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 30 + parallelism: 31 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes - e2e-production: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes - e2e-dev: @@ -724,7 +724,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes # TODO: reenable once we find out the source of flakyness diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 7ef486d507aa..0d5c99661d16 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -205,8 +205,6 @@ const baseTemplates = { 'vue2-vite/2.7-js': { name: 'Vue2 Vite (vue 2.7 JS)', script: 'npx create-vue@2 {{beforeDir}} --default', - // TODO: reenable this once sandbox is available - inDevelopment: true, expected: { framework: '@storybook/vue-vite', renderer: '@storybook/vue', From af0c09e00e0b8edfb57e1b97ffb23d2700c74278 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Apr 2023 12:03:46 +0200 Subject: [PATCH 003/226] Merge pull request #21941 from storybookjs/upgrade-emotion-cache Update `@emotion/cache` version --- code/lib/theming/package.json | 2 +- code/yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 785f754a719b..56529d4a17d5 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -54,7 +54,7 @@ "memoizerific": "^1.11.3" }, "devDependencies": { - "@emotion/cache": "^11.10.3", + "@emotion/cache": "^11.10.7", "@emotion/is-prop-valid": "^1.2.0", "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", diff --git a/code/yarn.lock b/code/yarn.lock index 1314cc95aaeb..fea16564414e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2373,16 +2373,16 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.10.3, @emotion/cache@npm:^11.10.5": - version: 11.10.5 - resolution: "@emotion/cache@npm:11.10.5" +"@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.10.7": + version: 11.10.7 + resolution: "@emotion/cache@npm:11.10.7" dependencies: "@emotion/memoize": ^0.8.0 "@emotion/sheet": ^1.2.1 "@emotion/utils": ^1.2.0 "@emotion/weak-memoize": ^0.3.0 stylis: 4.1.3 - checksum: eeb6891ab04cf17ace0e175742550b97c30df777d6c5b145e91c4c9fbd783c29b4dabe12a8c786b78f37176313a8295c9b90c69d875e6caab5f7e4677a18be91 + checksum: 0175b8be5117342e76e100fca92932a34c3641160c733a34534153eab7f1c1b2cecafee6d9a7a0646acf7be3c52b0654dc34900439316ae473b59a9eb1a1c8f3 languageName: node linkType: hard @@ -7390,7 +7390,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/theming@workspace:lib/theming" dependencies: - "@emotion/cache": ^11.10.3 + "@emotion/cache": ^11.10.7 "@emotion/is-prop-valid": ^1.2.0 "@emotion/react": ^11.10.4 "@emotion/styled": ^11.10.4 From 0e4420f77c7ac6cfb985b2763fd831952384e2f6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 5 Apr 2023 18:23:05 +0800 Subject: [PATCH 004/226] Merge pull request #21945 from storybookjs/shilman/danger-patch-label-check Build: Update dangerfile temporarily to check for patch label --- scripts/dangerfile.ts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/scripts/dangerfile.ts b/scripts/dangerfile.ts index 8d04e2c28472..ee47ecb0eb77 100644 --- a/scripts/dangerfile.ts +++ b/scripts/dangerfile.ts @@ -2,11 +2,12 @@ import { fail, danger } from 'danger'; import { execSync } from 'child_process'; -execSync('npm install lodash'); +execSync('npm install lodash ts-dedent'); const flatten = require('lodash/flatten.js'); const intersection = require('lodash/intersection.js'); const isEmpty = require('lodash/isEmpty.js'); +const { dedent } = require('ts-dedent'); const pkg = require('../code/package.json'); // eslint-disable-line import/newline-after-import const prLogConfig = pkg['pr-log']; @@ -20,6 +21,23 @@ const Versions = { const branchVersion = Versions.MINOR; const checkRequiredLabels = (labels: string[]) => { + if (!labels.includes('patch')) { + fail(dedent` + A 'patch' label is required to merge during stabilization. + + Patch PRs are small bug fixes, build updates, and documentation changes. + They do not include new features or more disruptive bugfixes. + + These changes will be first released on 7.1-alpha, then patched back to 'main' + after they have been verified to be correct and released as 7.0.x patch releases. + + After the stabilization period ends (ETA 2023-04-12), the 'patch' label + will no longer be required to merge into next, and we will merge ALL accepted + PRs to 'next' and release them on 7.1-alpha. Patch PRs will be + patched back to 'main' and released in 7.0.x patch releases. + `); + } + const forbiddenLabels = flatten([ 'ci: do not merge', 'in progress', From 20ee7726de5573b2af1e2402853f10e88f25fb43 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Apr 2023 13:58:36 +0200 Subject: [PATCH 005/226] Merge pull request #21922 from storybookjs/norbert/fix-21887 Bug: Fix incorrect type-file for addon-actions --- code/addons/actions/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index e6c7dac0a572..3b35c439cf9f 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -61,6 +61,9 @@ "manager": [ "dist/manager.d.ts" ], + "decorator": [ + "dist/decorator.d.ts" + ], "preview": [ "dist/preview.d.ts" ] From 2e66ad4fe4876d0a902c3216fe4d2e724e4523fb Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 5 Apr 2023 13:21:20 +0100 Subject: [PATCH 006/226] Merge pull request #21946 from storybookjs/norbert/remove-at-next-mention-in-migrationmd Docs: change the `@next` mentions in `MIGRATION.md` to `@latest` --- MIGRATION.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 048849f31dac..950eee27b650 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -35,7 +35,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -82,7 +82,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [parameters.docs.source.excludeDecorators defaults to true](#parametersdocssourceexcludedecorators-defaults-to-true) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) @@ -297,7 +297,7 @@ ## From version 6.5.x to 7.0.0 -A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@next upgrade --prerelease` or `pnpx storybook@next upgrade --prerelease`. +A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx storybook@latest upgrade --prerelease`. ### 7.0 breaking changes @@ -610,7 +610,7 @@ _Has automigration_ Storybook 7 introduces the concept of `frameworks`, which abstracts configuration for `renderers` (e.g. React, Vue), `builders` (e.g. Webpack, Vite) and defaults to make integrations easier. This requires quite a few changes, depending on what your project is using. **We recommend you to use the automigrations**, but in case the command fails or you'd like to do the changes manually, here's a guide: > Note: -> All of the following changes can be done automatically either via `npx storybook@next upgrade --prerelease` or via the `npx storybook@next automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do. +> All of the following changes can be done automatically either via `npx storybook@latest upgrade --prerelease` or via the `npx storybook@latest automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do. ##### Available framework packages @@ -1032,7 +1032,7 @@ Storybook now uses [Babel mode v7](#babel-mode-v7) exclusively. In 6.x, Storyboo In the new mode, Storybook expects you to provide a configuration file. Depending on the complexity your project, Storybook will fail to run without a babel configuration. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory: ```sh -npx storybook@next babelrc +npx storybook@latest babelrc ``` This command will create a `.babelrc.json` file in your project, containing a few babel plugins which will be installed as dev dependencies. @@ -1510,7 +1510,7 @@ If you get stuck with the [MDX2 upgrade](#mdx2-upgrade), we also provide opt-in To process your `.stories.mdx` files with MDX1, first install the `@storybook/mdx1-csf` package in your project: ``` -yarn add -D @storybook/mdx1-csf@next +yarn add -D @storybook/mdx1-csf@latest ``` Then enable the `legacyMdx1` feature flag in your `.storybook/main.js` file: @@ -1946,7 +1946,7 @@ You can run the existing suite of automigrations to see which ones apply to your ``` -npx sb@next automigrate +npx sb@latest automigrate ``` @@ -1958,7 +1958,7 @@ Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, i ``` -npx sb@next automigrate +npx sb@latest automigrate ``` @@ -2212,7 +2212,7 @@ module.exports = { In the new mode, Storybook expects you to provide a configuration file. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory: ```sh -npx sb@next babelrc +npx sb@latest babelrc ``` This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly. @@ -2796,7 +2796,7 @@ Basic.decorators = [ ... ]; To help you upgrade your stories, we've created a codemod: ``` -npx @storybook/cli@next migrate csf-hoist-story-annotations --glob="**/*.stories.js" +npx @storybook/cli@latest migrate csf-hoist-story-annotations --glob="**/*.stories.js" ``` For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations). @@ -3090,7 +3090,7 @@ We've removed the ability to specify the hierarchy separators (how you control t If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.** ``` -npx sb@next migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)" +npx sb@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)" ``` We also now default to showing "roots", which are non-expandable groupings in the sidebar for the top-level groups. If you'd like to disable this, set the `showRoots` option in `.storybook/manager.js`: @@ -4210,7 +4210,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you - If you aren't using Babel yourself, and don't have .babelrc, install following dependencies: ``` - npm i -D @babel/core babel-loader@next + npm i -D @babel/core babel-loader@latest ``` - If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7` and that you have a `.babelrc` in your project directory. From d9f29a8b3c63c08c217196eb0a1693b39572dd76 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 5 Apr 2023 20:46:05 +0800 Subject: [PATCH 007/226] Merge pull request #21213 from storybookjs/fix-emotion-warnings-for-good Core: Revert Emotion `:first-child` (etc) workarounds --- code/ui/blocks/src/components/Source.tsx | 4 ++-- code/ui/components/src/spaced/Spaced.tsx | 6 ++--- code/ui/components/src/tabs/tabs.tsx | 5 +++- code/ui/manager/src/index.tsx | 29 ++++++++---------------- 4 files changed, 19 insertions(+), 25 deletions(-) diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx index 94d3df6b9ef9..4d72f2f45aed 100644 --- a/code/ui/blocks/src/components/Source.tsx +++ b/code/ui/blocks/src/components/Source.tsx @@ -1,6 +1,6 @@ import type { ComponentProps, FunctionComponent } from 'react'; import React from 'react'; -import { styled, ThemeProvider, convert, themes } from '@storybook/theming'; +import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming'; import { SyntaxHighlighter } from '@storybook/components'; import { EmptyBlock } from './EmptyBlock'; @@ -69,7 +69,7 @@ const SourceSkeletonPlaceholder = styled.div(({ theme }) => ({ marginTop: 1, width: '60%', - [`&:first-child`]: { + [`&:first-child${ignoreSsrWarning}`]: { margin: 0, }, })); diff --git a/code/ui/components/src/spaced/Spaced.tsx b/code/ui/components/src/spaced/Spaced.tsx index 2fdb767fed08..52f0ecf9d7c1 100644 --- a/code/ui/components/src/spaced/Spaced.tsx +++ b/code/ui/components/src/spaced/Spaced.tsx @@ -1,6 +1,6 @@ import type { FC } from 'react'; import React from 'react'; -import { styled } from '@storybook/theming'; +import { styled, ignoreSsrWarning } from '@storybook/theming'; const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input)); @@ -20,7 +20,7 @@ const Container = styled.div( marginLeft: col * theme.layoutMargin, verticalAlign: 'inherit', }, - [`& > *:first-child`]: { + [`& > *:first-child${ignoreSsrWarning}`]: { marginLeft: 0, }, } @@ -28,7 +28,7 @@ const Container = styled.div( '& > *': { marginTop: row * theme.layoutMargin, }, - [`& > *:first-child`]: { + [`& > *:first-child${ignoreSsrWarning}`]: { marginTop: 0, }, }, diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx index 89d95a11baec..454a92376d83 100644 --- a/code/ui/components/src/tabs/tabs.tsx +++ b/code/ui/components/src/tabs/tabs.tsx @@ -10,6 +10,9 @@ import type { ChildrenList } from './tabs.helpers'; import { childrenToList, VisuallyHidden } from './tabs.helpers'; import { useList } from './tabs.hooks'; +const ignoreSsrWarning = + '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */'; + export interface WrapperProps { bordered?: boolean; absolute?: boolean; @@ -84,7 +87,7 @@ const Content = styled.div( bottom: 0 + (bordered ? 1 : 0), top: 40 + (bordered ? 1 : 0), overflow: 'auto', - [`& > *:first-child`]: { + [`& > *:first-child${ignoreSsrWarning}`]: { position: 'absolute', left: 0 + (bordered ? 1 : 0), right: 0 + (bordered ? 1 : 0), diff --git a/code/ui/manager/src/index.tsx b/code/ui/manager/src/index.tsx index 0660ababc796..9f843d0069e5 100644 --- a/code/ui/manager/src/index.tsx +++ b/code/ui/manager/src/index.tsx @@ -6,21 +6,14 @@ import ReactDOM from 'react-dom'; import { Location, LocationProvider, useNavigate } from '@storybook/router'; import { Provider as ManagerProvider } from '@storybook/manager-api'; import type { Combo } from '@storybook/manager-api'; -import { - ThemeProvider, - ensure as ensureTheme, - CacheProvider, - createCache, -} from '@storybook/theming'; +import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming'; + import { HelmetProvider } from 'react-helmet-async'; import App from './app'; import Provider from './provider'; -const emotionCache = createCache({ key: 'sto' }); -emotionCache.compat = true; - // @ts-expect-error (Converted from ts-ignore) ThemeProvider.displayName = 'ThemeProvider'; // @ts-expect-error (Converted from ts-ignore) @@ -59,16 +52,14 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => { : !state.previewInitialized; return ( - - - - - + + + ); }} From 3a16e05478be40f0d8b940d2240c62f715343746 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Apr 2023 14:53:30 +0200 Subject: [PATCH 008/226] Merge pull request #21947 from storybookjs/valentin/fix-npm-ls-unexpected-error-thrown Add platform-specific null piping for stderr for npm list command --- code/lib/cli/src/js-package-manager/NPMProxy.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/js-package-manager/NPMProxy.ts b/code/lib/cli/src/js-package-manager/NPMProxy.ts index db79d2b3f320..709b6703eef8 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.ts @@ -1,4 +1,5 @@ import sort from 'semver/functions/sort'; +import { platform } from 'os'; import { JsPackageManager } from './JsPackageManager'; import type { PackageJson } from './PackageJson'; import type { InstallationMetadata, PackageMetadata } from './types'; @@ -51,7 +52,8 @@ export class NPMProxy extends JsPackageManager { } public findInstallations() { - const commandResult = this.executeCommand('npm', ['ls', '--json', '--depth=99']); + const pipeToNull = platform() === 'win32' ? '2>NUL' : '2>/dev/null'; + const commandResult = this.executeCommand('npm', ['ls', '--json', '--depth=99', pipeToNull]); try { const parsedOutput = JSON.parse(commandResult); From 08ca5d9ee2e8274efb2a01e1391d4f1065e952f7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 5 Apr 2023 20:53:47 +0800 Subject: [PATCH 009/226] Merge pull request #21902 from storybookjs/shilman/21900-revert-source-exclude-decorators Addon-docs: Include decorators by default in source decorators --- MIGRATION.md | 4 ---- code/addons/docs/src/preview.ts | 3 --- 2 files changed, 7 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 950eee27b650..324d07a08cfa 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1618,10 +1618,6 @@ If your story depends on a play function to render correctly, _and_ you are conf This was a legacy global variable from the early days of react docgen. If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`. -#### parameters.docs.source.excludeDecorators defaults to true - -By default we don't render decorators in the Source/Canvas blocks. If you want to render decorators, you can set the parameter to `false`. - ### 7.0 Deprecations and default changes #### storyStoreV7 enabled by default diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts index 22712de48159..0d1183bd0cf1 100644 --- a/code/addons/docs/src/preview.ts +++ b/code/addons/docs/src/preview.ts @@ -4,8 +4,5 @@ export const parameters: any = { const { DocsRenderer } = (await import('./DocsRenderer')) as any; return new DocsRenderer(); }, - source: { - excludeDecorators: true, - }, }, }; From c1e06a933fae63a95e366cec394dec33b8ddfa34 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 5 Apr 2023 20:55:38 +0800 Subject: [PATCH 010/226] Merge pull request #21907 from storybookjs/tom/21649-change-react-decorator-order React: Don't show decorators in JSX snippets --- .../preview-api/src/modules/addons/hooks.ts | 5 ++++- code/renderers/react/src/applyDecorators.ts | 19 ++++++++++++++++ code/renderers/react/src/config.ts | 2 ++ .../template/stories/decorators.stories.tsx | 22 ++++++++++++++++++- 4 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 code/renderers/react/src/applyDecorators.ts diff --git a/code/lib/preview-api/src/modules/addons/hooks.ts b/code/lib/preview-api/src/modules/addons/hooks.ts index c5f5acb3eec3..e695938a444d 100644 --- a/code/lib/preview-api/src/modules/addons/hooks.ts +++ b/code/lib/preview-api/src/modules/addons/hooks.ts @@ -134,7 +134,7 @@ function hookify( decorator: DecoratorFunction ): DecoratorFunction; function hookify(fn: AbstractFunction) { - return (...args: any[]) => { + const hookified = (...args: any[]) => { const { hooks }: { hooks: HooksContext } = typeof args[0] === 'function' ? args[1] : args[0]; @@ -172,6 +172,9 @@ function hookify(fn: AbstractFunction) { hooks.currentDecoratorName = prevDecoratorName; return result; }; + + hookified.originalFn = fn; + return hookified; } // Counter to prevent infinite loops. diff --git a/code/renderers/react/src/applyDecorators.ts b/code/renderers/react/src/applyDecorators.ts new file mode 100644 index 000000000000..cf5c44fa5f80 --- /dev/null +++ b/code/renderers/react/src/applyDecorators.ts @@ -0,0 +1,19 @@ +import { defaultDecorateStory } from '@storybook/preview-api'; +import type { LegacyStoryFn, DecoratorFunction } from '@storybook/types'; + +import type { ReactRenderer } from './types'; +import { jsxDecorator } from './docs/jsxDecorator'; + +export const applyDecorators = ( + storyFn: LegacyStoryFn, + decorators: DecoratorFunction[] +): LegacyStoryFn => { + // @ts-expect-error originalFn is not defined on the type for decorator. This is a temporary fix + // that we will remove soon (likely) in favour of a proper concept of "inner" decorators. + const jsxIndex = decorators.findIndex((d) => d.originalFn === jsxDecorator); + + const reorderedDecorators = + jsxIndex === -1 ? decorators : [...decorators.splice(jsxIndex, 1), ...decorators]; + + return defaultDecorateStory(storyFn, reorderedDecorators); +}; diff --git a/code/renderers/react/src/config.ts b/code/renderers/react/src/config.ts index 0037cc15d2e2..123b577b5f83 100644 --- a/code/renderers/react/src/config.ts +++ b/code/renderers/react/src/config.ts @@ -5,3 +5,5 @@ export const parameters = { renderer: 'react', ...docsParams }; export { decorators, argTypesEnhancers } from './docs/config'; export { render, renderToCanvas } from './render'; + +export { applyDecorators } from './applyDecorators'; diff --git a/code/renderers/react/template/stories/decorators.stories.tsx b/code/renderers/react/template/stories/decorators.stories.tsx index 9fdd9bfb4367..efaf66937289 100644 --- a/code/renderers/react/template/stories/decorators.stories.tsx +++ b/code/renderers/react/template/stories/decorators.stories.tsx @@ -1,11 +1,12 @@ import type { FC } from 'react'; -import React from 'react'; +import React, { useContext, createContext } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; const Component: FC = () =>

Story

; export default { component: Component, + tags: ['autodocs'], decorators: [ (Story) => ( <> @@ -26,3 +27,22 @@ export const All: StoryObj = { ), ], }; + +// This story will error if `parameters.docs.source.excludeDecorators` is true: +// See https://github.com/storybookjs/storybook/issues/21900 +const TestContext = createContext(false); +export const Context: StoryObj = { + // parameters: { docs: { source: { excludeDecorators: true } } }, + decorators: [ + (Story) => ( + + + + ), + ], + render: function Render(args, context) { + const value = useContext(TestContext); + if (!value) throw new Error('TestContext not set, decorator did not run!'); + return

Story

; + }, +}; From e2ef0f0820012290ea16162cd14da01345023d96 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 5 Apr 2023 15:01:03 +0200 Subject: [PATCH 011/226] Merge pull request #21944 from storybookjs/valentin/fix-angular-disappearing-stories-on-docs-page Angular: Fix components disappearing on docs page on property change --- .../client/angular-beta/AbstractRenderer.ts | 25 +++++++++++-------- .../src/client/angular-beta/DocsRenderer.ts | 4 +-- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index 029de1cd02e6..d3aa188aff5d 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -1,4 +1,4 @@ -import { ApplicationRef, enableProdMode, importProvidersFrom, NgModule } from '@angular/core'; +import { ApplicationRef, enableProdMode, NgModule } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { BehaviorSubject, Subject } from 'rxjs'; @@ -14,16 +14,16 @@ type StoryRenderInfo = { moduleMetadataSnapshot: string; }; -const applicationRefs = new Set(); +const applicationRefs = new Map(); export abstract class AbstractRenderer { /** * Wait and destroy the platform */ - public static resetApplications() { + public static resetApplications(domNode?: HTMLElement) { componentNgModules.clear(); - applicationRefs.forEach((appRef) => { - if (!appRef.destroyed) { + applicationRefs.forEach((appRef, appDOMNode) => { + if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) { appRef.destroy(); } }); @@ -50,7 +50,7 @@ export abstract class AbstractRenderer { } }; - protected previousStoryRenderInfo: StoryRenderInfo; + protected previousStoryRenderInfo = new Map(); // Observable to change the properties dynamically without reloading angular module&component protected storyProps$: Subject; @@ -67,7 +67,7 @@ export abstract class AbstractRenderer { } } - protected abstract beforeFullRender(): Promise; + protected abstract beforeFullRender(domNode?: HTMLElement): Promise; protected abstract afterFullRender(): Promise; @@ -100,6 +100,7 @@ export abstract class AbstractRenderer { if ( !this.fullRendererRequired({ + targetDOMNode, storyFnAngular, moduleMetadata: { ...storyFnAngular.moduleMetadata, @@ -112,7 +113,7 @@ export abstract class AbstractRenderer { return; } - await this.beforeFullRender(); + await this.beforeFullRender(targetDOMNode); // Complete last BehaviorSubject and set a new one for the current module if (this.storyProps$) { @@ -140,7 +141,7 @@ export abstract class AbstractRenderer { ], }); - applicationRefs.add(applicationRef); + applicationRefs.set(targetDOMNode, applicationRef); await this.afterFullRender(); } @@ -171,22 +172,24 @@ export abstract class AbstractRenderer { } private fullRendererRequired({ + targetDOMNode, storyFnAngular, moduleMetadata, forced, }: { + targetDOMNode: HTMLElement; storyFnAngular: StoryFnAngularReturnType; moduleMetadata: NgModule; forced: boolean; }) { - const { previousStoryRenderInfo } = this; + const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode); const currentStoryRender = { storyFnAngular, moduleMetadataSnapshot: stringify(moduleMetadata), }; - this.previousStoryRenderInfo = currentStoryRender; + this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender); if ( // check `forceRender` of story RenderContext diff --git a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts index 945881088b82..d51573376fcb 100644 --- a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts @@ -38,8 +38,8 @@ export class DocsRenderer extends AbstractRenderer { await super.render({ ...options, forced: false }); } - async beforeFullRender(): Promise { - DocsRenderer.resetApplications(); + async beforeFullRender(domNode?: HTMLElement): Promise { + DocsRenderer.resetApplications(domNode); } async afterFullRender(): Promise { From a967fe81f569ecc867676d6ed8ff9b6b932ee99c Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 5 Apr 2023 14:10:27 +0100 Subject: [PATCH 012/226] Merge pull request #21936 from storybookjs/kasper/point-upgrade-script-to-latest Docs: Point upgrade script to latest --- docs/snippets/common/storybook-upgrade.npm.js.mdx | 2 +- docs/snippets/common/storybook-upgrade.pnpm.js.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/common/storybook-upgrade.npm.js.mdx b/docs/snippets/common/storybook-upgrade.npm.js.mdx index 6f1f9f5f1157..1778af1b3968 100644 --- a/docs/snippets/common/storybook-upgrade.npm.js.mdx +++ b/docs/snippets/common/storybook-upgrade.npm.js.mdx @@ -1,3 +1,3 @@ ```shell -npx storybook upgrade +npx storybook@latest upgrade ``` diff --git a/docs/snippets/common/storybook-upgrade.pnpm.js.mdx b/docs/snippets/common/storybook-upgrade.pnpm.js.mdx index 67ab5ab4bc78..0490b332dcb7 100644 --- a/docs/snippets/common/storybook-upgrade.pnpm.js.mdx +++ b/docs/snippets/common/storybook-upgrade.pnpm.js.mdx @@ -1,3 +1,3 @@ ```shell -pnpx storybook upgrade +pnpm dlx storybook@latest upgrade ``` From 14154538b2576528b2c45a481d14f2eb23537c91 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 5 Apr 2023 11:45:55 -0600 Subject: [PATCH 013/226] Merge pull request #21845 from storybookjs/chore_update_7_0_refs_templates Chore: (Templates) Updates code references to 7.0 --- code/addons/gfm/src/index.ts | 2 +- code/frameworks/angular/template/cli/Button.stories.ts | 4 ++-- code/frameworks/angular/template/cli/Header.stories.ts | 4 ++-- code/frameworks/angular/template/cli/Page.stories.ts | 4 ++-- code/frameworks/ember/template/cli/Button.stories.js | 6 +++--- code/frameworks/nextjs/template/cli/js/Button.stories.js | 4 ++-- code/frameworks/nextjs/template/cli/js/Header.stories.js | 4 ++-- code/frameworks/nextjs/template/cli/js/Page.stories.js | 4 ++-- .../frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts | 4 ++-- .../frameworks/nextjs/template/cli/ts-3-8/Header.stories.ts | 4 ++-- code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/frameworks/nextjs/template/cli/ts/Button.stories.ts | 4 ++-- code/frameworks/nextjs/template/cli/ts/Header.stories.ts | 4 ++-- code/frameworks/nextjs/template/cli/ts/Page.stories.ts | 4 ++-- code/lib/cli/src/automigrate/fixes/mdx-gfm.ts | 2 +- code/renderers/html/template/cli/js/Button.stories.js | 4 ++-- code/renderers/html/template/cli/js/Header.stories.js | 6 +++--- code/renderers/html/template/cli/js/Page.stories.js | 4 ++-- code/renderers/html/template/cli/ts-3-8/Button.stories.ts | 2 +- code/renderers/html/template/cli/ts-3-8/Header.stories.ts | 6 +++--- code/renderers/html/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/renderers/html/template/cli/ts-4-9/Button.stories.ts | 2 +- code/renderers/html/template/cli/ts-4-9/Header.stories.ts | 6 +++--- code/renderers/html/template/cli/ts-4-9/Page.stories.ts | 4 ++-- code/renderers/preact/template/cli/Button.stories.jsx | 4 ++-- code/renderers/preact/template/cli/Header.stories.jsx | 4 ++-- code/renderers/preact/template/cli/Page.stories.jsx | 4 ++-- code/renderers/react/template/cli/js/Button.stories.js | 4 ++-- code/renderers/react/template/cli/js/Header.stories.js | 4 ++-- code/renderers/react/template/cli/js/Page.stories.js | 4 ++-- code/renderers/react/template/cli/ts-3-8/Button.stories.ts | 2 +- code/renderers/react/template/cli/ts-3-8/Header.stories.ts | 2 +- code/renderers/react/template/cli/ts-4-9/Button.stories.ts | 4 ++-- code/renderers/react/template/cli/ts-4-9/Header.stories.ts | 4 ++-- code/renderers/react/template/cli/ts-4-9/Page.stories.ts | 4 ++-- code/renderers/svelte/template/cli/js/Button.stories.js | 4 ++-- code/renderers/svelte/template/cli/js/Header.stories.js | 4 ++-- code/renderers/svelte/template/cli/js/Page.stories.js | 4 ++-- code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts | 4 ++-- code/renderers/svelte/template/cli/ts-3-8/Header.stories.ts | 4 ++-- code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/renderers/svelte/template/cli/ts-4-9/Button.stories.ts | 4 ++-- code/renderers/svelte/template/cli/ts-4-9/Header.stories.ts | 4 ++-- code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts | 4 ++-- code/renderers/vue/template/cli/Button.stories.js | 4 ++-- code/renderers/vue/template/cli/Header.stories.js | 4 ++-- code/renderers/vue/template/cli/Page.stories.js | 4 ++-- code/renderers/vue3/template/cli/js/Button.stories.js | 4 ++-- code/renderers/vue3/template/cli/js/Header.stories.js | 4 ++-- code/renderers/vue3/template/cli/js/Page.stories.js | 4 ++-- code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts | 6 +++--- code/renderers/vue3/template/cli/ts-3-8/Header.stories.ts | 6 +++--- code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts | 6 +++--- code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts | 6 +++--- code/renderers/vue3/template/cli/ts-4-9/Header.stories.ts | 6 +++--- code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts | 6 +++--- .../web-components/template/cli/js/Button.stories.js | 4 ++-- .../web-components/template/cli/js/Header.stories.js | 2 +- .../web-components/template/cli/js/Page.stories.js | 2 +- .../web-components/template/cli/ts-3-8/Button.stories.ts | 4 ++-- .../web-components/template/cli/ts-3-8/Header.stories.ts | 2 +- .../web-components/template/cli/ts-3-8/Page.stories.ts | 2 +- .../web-components/template/cli/ts-4-9/Button.stories.ts | 4 ++-- .../web-components/template/cli/ts-4-9/Header.stories.ts | 2 +- .../web-components/template/cli/ts-4-9/Page.stories.ts | 2 +- 65 files changed, 128 insertions(+), 128 deletions(-) diff --git a/code/addons/gfm/src/index.ts b/code/addons/gfm/src/index.ts index 76981b982a1b..ecfc725fc231 100644 --- a/code/addons/gfm/src/index.ts +++ b/code/addons/gfm/src/index.ts @@ -13,7 +13,7 @@ export const mdxLoaderOptions = async (config: any) => { deprecate(dedent` The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version. It's recommended you read this document: - https://storybook.js.org/docs/7.0/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm + https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. `); diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts index 85ce82c88270..8f280fb0c763 100644 --- a/code/frameworks/angular/template/cli/Button.stories.ts +++ b/code/frameworks/angular/template/cli/Button.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; import Button from './button.component'; -// More on how to set up stories at: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction +// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction const meta: Meta