From 5bd78d30a742e439b9b023b493b1ee99bd213f71 Mon Sep 17 00:00:00 2001 From: Vytautas Date: Wed, 2 Aug 2023 10:42:15 +0800 Subject: [PATCH 001/106] fix: table of contents leak into stories --- code/ui/blocks/src/components/TableOfContents.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/code/ui/blocks/src/components/TableOfContents.tsx b/code/ui/blocks/src/components/TableOfContents.tsx index 892f1e137f20..7d7063f3d343 100644 --- a/code/ui/blocks/src/components/TableOfContents.tsx +++ b/code/ui/blocks/src/components/TableOfContents.tsx @@ -139,14 +139,13 @@ export const TableOfContents = ({ tocSelector: '.toc-wrapper', contentSelector: contentsSelector ?? '.sbdocs-content', headingSelector: headingSelector ?? 'h3', - ignoreSelector: ignoreSelector ?? '.skip-toc', - headingsOffset: 40, - scrollSmoothOffset: -40, /** * Ignore headings that did not * come from the main markdown code. */ - // ignoreSelector: ':not(.sbdocs), .hide-from-toc', + ignoreSelector: ignoreSelector ?? '.docblock-source *, .docs-story *, .skip-toc', + headingsOffset: 40, + scrollSmoothOffset: -40, orderedList: false, /** * Prevent default linking behavior, From 93a5503a6b9fc7db91e1a26db0a38aed39f86ae2 Mon Sep 17 00:00:00 2001 From: Vytautas Date: Wed, 2 Aug 2023 10:59:22 +0800 Subject: [PATCH 002/106] docs: update TOC docs --- docs/writing-docs/autodocs.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md index 45f886d0c770..2a0969431f5b 100644 --- a/docs/writing-docs/autodocs.md +++ b/docs/writing-docs/autodocs.md @@ -130,14 +130,14 @@ Storybook's auto-generated documentation pages can be quite long and difficult t By default, the table of contents on the documentation page will only show the `h3` headings that are automatically generated. However, if you want to customize the table of contents, you can add more parameters to the `toc` property. The following options and examples of how to use them are available. -| Option | Description | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| `contentsSelector` | Defines the container's CSS selector for search for the headings
`toc: { contentsSelector: '.sbdocs-content' }` | -| `disable` | Hides the table of contents for the documentation pages
`toc: { disable: true }` | -| `headingSelector` | Defines the list of headings to feature in the table of contents
`toc: { headingSelector: 'h1, h2, h3' }` | -| `ignoreSelector` | Configures the table of contents to ignore specific headings or stories
`toc: { ignoreSelector: 'h2' }` | -| `title` | Defines a title caption for the table of contents.
Accepts one of: `string`, `null`, React element
`toc: { title: 'Table of Contents' }` | -| `unsafeTocbotOptions` | Provides additional [`TocBot`](https://tscanlin.github.io/tocbot/) configuration options
`toc: { unsafeTocbotOptions: { orderedList: true } }` | +| Option | Description | +| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `contentsSelector` | Defines the container's CSS selector for search for the headings
`toc: { contentsSelector: '.sbdocs-content' }` | +| `disable` | Hides the table of contents for the documentation pages
`toc: { disable: true }` | +| `headingSelector` | Defines the list of headings to feature in the table of contents
`toc: { headingSelector: 'h1, h2, h3' }` | +| `ignoreSelector` | Configures the table of contents to ignore specific headings or stories. By default, the table of contents will ignore all content placed within Story blocks
`toc: { ignoreSelector: '.docs-story h2' }` | +| `title` | Defines a title caption for the table of contents.
Accepts one of: `string`, `null`, React element
`toc: { title: 'Table of Contents' }` | +| `unsafeTocbotOptions` | Provides additional [`TocBot`](https://tscanlin.github.io/tocbot/) configuration options
`toc: { unsafeTocbotOptions: { orderedList: true } }` |
From c8ecec6af942aade41666bbcaaadd65f337b18ec Mon Sep 17 00:00:00 2001 From: Vytautas Date: Wed, 2 Aug 2023 10:59:58 +0800 Subject: [PATCH 003/106] fix: update TOC ignoreSelector --- code/ui/blocks/src/components/TableOfContents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/components/TableOfContents.tsx b/code/ui/blocks/src/components/TableOfContents.tsx index 7d7063f3d343..3aaced0d1651 100644 --- a/code/ui/blocks/src/components/TableOfContents.tsx +++ b/code/ui/blocks/src/components/TableOfContents.tsx @@ -143,7 +143,7 @@ export const TableOfContents = ({ * Ignore headings that did not * come from the main markdown code. */ - ignoreSelector: ignoreSelector ?? '.docblock-source *, .docs-story *, .skip-toc', + ignoreSelector: ignoreSelector ?? '.docs-story *, .skip-toc', headingsOffset: 40, scrollSmoothOffset: -40, orderedList: false, From d8e8900aef1794e845df0b984a80de070fb96843 Mon Sep 17 00:00:00 2001 From: piratetaco <145042187+piratetaco@users.noreply.github.com> Date: Wed, 24 Jan 2024 10:43:24 -0600 Subject: [PATCH 004/106] fix(next): forward Image exports through mock to support getImageProps --- code/frameworks/nextjs/src/images/next-image.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index f2e2d9d1467c..aaf617b85813 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -1,6 +1,6 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config -import OriginalNextImage from 'sb-original/next/image'; +import * as NextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; @@ -11,6 +11,7 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image- import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; +const OriginalNextImage = NextImage.default const ImageContext = ImageContextValue as typeof ImageContextType; const MockedNextImage = React.forwardRef( @@ -30,4 +31,5 @@ const MockedNextImage = React.forwardRef Date: Wed, 24 Jan 2024 11:02:19 -0600 Subject: [PATCH 005/106] fix: short and sweet cleaner reexport --- code/frameworks/nextjs/src/images/next-image.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index aaf617b85813..4d3229265085 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -1,6 +1,6 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config -import * as NextImage from 'sb-original/next/image'; +import OriginalNextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; @@ -11,7 +11,6 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image- import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; -const OriginalNextImage = NextImage.default const ImageContext = ImageContextValue as typeof ImageContextType; const MockedNextImage = React.forwardRef( @@ -31,5 +30,5 @@ const MockedNextImage = React.forwardRef Date: Wed, 24 Jan 2024 11:43:05 -0600 Subject: [PATCH 006/106] fix: apply defaultLoader to getImageProps mock --- code/frameworks/nextjs/src/images/next-image.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 4d3229265085..36dde69cecac 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -1,7 +1,8 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config -import OriginalNextImage from 'sb-original/next/image'; +import * as NextImageNamespace from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; + import React from 'react'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -11,6 +12,8 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image- import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; +const OriginalNextImage = NextImageNamespace.default +const { getImageProps: originalGetImageProps } = NextImageNamespace const ImageContext = ImageContextValue as typeof ImageContextType; const MockedNextImage = React.forwardRef( @@ -30,5 +33,6 @@ const MockedNextImage = React.forwardRef originalGetImageProps?.({ loader: defaultLoader, ...props}) + export default MockedNextImage; -export * from 'sb-original/next/image'; From 01a1de380000325ef4bfad49dca21029a4967d14 Mon Sep 17 00:00:00 2001 From: piratetaco <145042187+piratetaco@users.noreply.github.com> Date: Wed, 24 Jan 2024 12:00:36 -0600 Subject: [PATCH 007/106] type mock getImageProps --- code/frameworks/nextjs/src/images/next-image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 36dde69cecac..1511acb640e0 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -33,6 +33,6 @@ const MockedNextImage = React.forwardRef originalGetImageProps?.({ loader: defaultLoader, ...props}) +export const getImageProps = (props: _NextImage.ImageProps) => originalGetImageProps?.({ loader: defaultLoader, ...props}) export default MockedNextImage; From 16e22d10629efaf3e0bc0394abbbe47f1b2be256 Mon Sep 17 00:00:00 2001 From: piratetaco <145042187+piratetaco@users.noreply.github.com> Date: Thu, 25 Jan 2024 09:39:37 -0600 Subject: [PATCH 008/106] docs: create get-image-props.stories.tsx --- .../get-image-props.stories.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx new file mode 100644 index 000000000000..fcd8d15f5a9c --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx @@ -0,0 +1,34 @@ +import { type ImageProps, getImageProps } from 'next/image'; +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +import Accessibility from '../../assets/accessibility.svg'; +import Testing from '../../assets/testing.png'; + +// referenced from https://nextjs.org/docs/pages/api-reference/components/image#theme-detection-picture +const Component = (props: Omit) => { + const { + props: { srcSet: dark }, + } = getImageProps({ src: Accessibility, ...props }); + const { + // capture rest on one to spread to img as default; it doesn't matter which barring art direction + props: { srcSet: light, ...rest }, + } = getImageProps({ src: Testing, ...props }); + + return ( + + + + + + ); +}; + +export default { + component: Component, + args: { + alt: 'getImageProps Example', + } +} as Meta; + +export const Default: StoryObj = {}; From 5568ae341c83cf00829fab3bf191442534732c9c Mon Sep 17 00:00:00 2001 From: piratetaco <145042187+piratetaco@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:36 -0600 Subject: [PATCH 009/106] Update next-image.tsx semi-colons --- code/frameworks/nextjs/src/images/next-image.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 1511acb640e0..dde5fc6c03d3 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -12,8 +12,8 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image- import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; -const OriginalNextImage = NextImageNamespace.default -const { getImageProps: originalGetImageProps } = NextImageNamespace +const OriginalNextImage = NextImageNamespace.default; +const { getImageProps: originalGetImageProps } = NextImageNamespace; const ImageContext = ImageContextValue as typeof ImageContextType; const MockedNextImage = React.forwardRef( @@ -33,6 +33,7 @@ const MockedNextImage = React.forwardRef originalGetImageProps?.({ loader: defaultLoader, ...props}) +export const getImageProps = (props: _NextImage.ImageProps) => + originalGetImageProps?.({ loader: defaultLoader, ...props}) export default MockedNextImage; From d197a176a1705352547a4fe9be584a34173806d2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 31 Jan 2024 15:14:29 +0100 Subject: [PATCH 010/106] Fix linting --- code/frameworks/nextjs/src/images/next-image.tsx | 2 +- .../stories_nextjs-default-ts/get-image-props.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index dde5fc6c03d3..ea1e1f2eb844 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -34,6 +34,6 @@ const MockedNextImage = React.forwardRef - originalGetImageProps?.({ loader: defaultLoader, ...props}) + originalGetImageProps?.({ loader: defaultLoader, ...props }); export default MockedNextImage; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx index fcd8d15f5a9c..97802c57d203 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx @@ -28,7 +28,7 @@ export default { component: Component, args: { alt: 'getImageProps Example', - } + }, } as Meta; export const Default: StoryObj = {}; From 02094d214824204b61e4526af27d4f988e6d3584 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 31 Jan 2024 15:14:35 +0100 Subject: [PATCH 011/106] Update Next.js --- code/frameworks/nextjs/package.json | 2 +- code/yarn.lock | 106 +++++++++++++++------------- 2 files changed, 57 insertions(+), 51 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7922773e700a..de9ffba159b7 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -128,7 +128,7 @@ "@types/babel__preset-env": "^7", "@types/loader-utils": "^2.0.5", "@types/react-refresh": "^0", - "next": "^14.0.2", + "next": "^14.1.0", "typescript": "^5.3.2", "webpack": "^5.65.0" }, diff --git a/code/yarn.lock b/code/yarn.lock index 7ba452bc433f..71daa18e2e13 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3683,72 +3683,72 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:14.0.4": - version: 14.0.4 - resolution: "@next/env@npm:14.0.4" - checksum: 59b893d30aea0556379a24f6e4eac830677feb149bd8416b72383ea2600ce194fa22a79b2dd86e0b295c4a8f0702e461f48edaff1ac9173eddef42a4cce7fd98 +"@next/env@npm:14.1.0": + version: 14.1.0 + resolution: "@next/env@npm:14.1.0" + checksum: f45ce1e3dad87cdbddc58b06bd411f44a6d21dfc2c344d02a5e1b07f56fbc9a39e192c0b0917df9f2e9e4e2156306a8c78f173ca4b53932c2793e67797462a23 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-darwin-arm64@npm:14.0.4" +"@next/swc-darwin-arm64@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-darwin-arm64@npm:14.1.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-darwin-x64@npm:14.0.4" +"@next/swc-darwin-x64@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-darwin-x64@npm:14.1.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-linux-arm64-gnu@npm:14.0.4" +"@next/swc-linux-arm64-gnu@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-linux-arm64-gnu@npm:14.1.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-linux-arm64-musl@npm:14.0.4" +"@next/swc-linux-arm64-musl@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-linux-arm64-musl@npm:14.1.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-linux-x64-gnu@npm:14.0.4" +"@next/swc-linux-x64-gnu@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-linux-x64-gnu@npm:14.1.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-linux-x64-musl@npm:14.0.4" +"@next/swc-linux-x64-musl@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-linux-x64-musl@npm:14.1.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-win32-arm64-msvc@npm:14.0.4" +"@next/swc-win32-arm64-msvc@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-win32-arm64-msvc@npm:14.1.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-win32-ia32-msvc@npm:14.0.4" +"@next/swc-win32-ia32-msvc@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-win32-ia32-msvc@npm:14.1.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-win32-x64-msvc@npm:14.0.4" +"@next/swc-win32-x64-msvc@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-win32-x64-msvc@npm:14.1.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -5973,7 +5973,7 @@ __metadata: fs-extra: "npm:^11.1.0" image-size: "npm:^1.0.0" loader-utils: "npm:^3.2.1" - next: "npm:^14.0.2" + next: "npm:^14.1.0" node-polyfill-webpack-plugin: "npm:^2.0.1" pnp-webpack-plugin: "npm:^1.7.0" postcss: "npm:^8.4.21" @@ -11141,13 +11141,20 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565": +"caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565": version: 1.0.30001570 resolution: "caniuse-lite@npm:1.0.30001570" checksum: e47230d2016edea56e002fa462a5289f697b48dcfbf703fb01aecc6c98ad4ecaf945ab23c253cb7af056c2d05f266e4e4cbebf45132100e2c9367439cb95b95b languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001579": + version: 1.0.30001581 + resolution: "caniuse-lite@npm:1.0.30001581" + checksum: 34b048156514eab5932212807428905cbecdef918f7c3d2153d5e8b6885d929e5c0b649f9e135cb1e03e413fbad8e00d1f24ed04cbcca52adc660ef98cad9032 + languageName: node + linkType: hard + "case-sensitive-paths-webpack-plugin@npm:^2.4.0": version: 2.4.0 resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0" @@ -21310,27 +21317,26 @@ __metadata: languageName: node linkType: hard -"next@npm:^14.0.2": - version: 14.0.4 - resolution: "next@npm:14.0.4" +"next@npm:^14.1.0": + version: 14.1.0 + resolution: "next@npm:14.1.0" dependencies: - "@next/env": "npm:14.0.4" - "@next/swc-darwin-arm64": "npm:14.0.4" - "@next/swc-darwin-x64": "npm:14.0.4" - "@next/swc-linux-arm64-gnu": "npm:14.0.4" - "@next/swc-linux-arm64-musl": "npm:14.0.4" - "@next/swc-linux-x64-gnu": "npm:14.0.4" - "@next/swc-linux-x64-musl": "npm:14.0.4" - "@next/swc-win32-arm64-msvc": "npm:14.0.4" - "@next/swc-win32-ia32-msvc": "npm:14.0.4" - "@next/swc-win32-x64-msvc": "npm:14.0.4" + "@next/env": "npm:14.1.0" + "@next/swc-darwin-arm64": "npm:14.1.0" + "@next/swc-darwin-x64": "npm:14.1.0" + "@next/swc-linux-arm64-gnu": "npm:14.1.0" + "@next/swc-linux-arm64-musl": "npm:14.1.0" + "@next/swc-linux-x64-gnu": "npm:14.1.0" + "@next/swc-linux-x64-musl": "npm:14.1.0" + "@next/swc-win32-arm64-msvc": "npm:14.1.0" + "@next/swc-win32-ia32-msvc": "npm:14.1.0" + "@next/swc-win32-x64-msvc": "npm:14.1.0" "@swc/helpers": "npm:0.5.2" busboy: "npm:1.6.0" - caniuse-lite: "npm:^1.0.30001406" + caniuse-lite: "npm:^1.0.30001579" graceful-fs: "npm:^4.2.11" postcss: "npm:8.4.31" styled-jsx: "npm:5.1.1" - watchpack: "npm:2.4.0" peerDependencies: "@opentelemetry/api": ^1.1.0 react: ^18.2.0 @@ -21362,7 +21368,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: e6c829fd473d8c3605b2b62d15e1bf41e9d90cf59a2c213b4adeadff2846999bc9a653ffef18f6aa13cc9f5d6de02469c222acf5a4184901a4690a4504bd468f + checksum: dbb1ef8d22eec29a9127d28ed46eb34f14e3f7f7b4e4b91dc96027feb4d9ead554a804275484d9a54026e6e55d632d3997561e598c1fb8e8956e77614f39765f languageName: node linkType: hard @@ -29335,7 +29341,7 @@ __metadata: languageName: node linkType: hard -"watchpack@npm:2.4.0, watchpack@npm:^2.2.0, watchpack@npm:^2.4.0": +"watchpack@npm:^2.2.0, watchpack@npm:^2.4.0": version: 2.4.0 resolution: "watchpack@npm:2.4.0" dependencies: From 512dfb8f81f04c54899b1e583d32685ab8c35fb9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 31 Jan 2024 15:20:28 +0100 Subject: [PATCH 012/106] Rename ImageProps Story --- .../{get-image-props.stories.tsx => GetImageProps.stories.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename code/frameworks/nextjs/template/stories_nextjs-default-ts/{get-image-props.stories.tsx => GetImageProps.stories.tsx} (100%) diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx similarity index 100% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx rename to code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx From 88b781002eaa5d7cf0a6c964eb70fe340311061f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 31 Jan 2024 15:37:49 +0100 Subject: [PATCH 013/106] Fix type issues --- code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts index 0d47f4cc64e2..d70579d8fc72 100644 --- a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts +++ b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts @@ -92,6 +92,8 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp swcCacheDir, relativeFilePathFromRoot, serverComponents, + // @ts-expect-error Relevant for Next.js < 14.1 + // TODO: Remove this when Next.js < 14.1 is no longer supported isReactServerLayer, }); From d2147cc914f83f3d091614fbee36e10d114be664 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 1 Feb 2024 14:47:47 +0100 Subject: [PATCH 014/106] Add GetImageProps.stories.jsx file --- .../GetImageProps.stories.jsx} | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts/GetImageProps.stories.tsx => stories_nextjs-default-js/GetImageProps.stories.jsx} (76%) diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx similarity index 76% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx rename to code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx index 97802c57d203..7c8e75a09083 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx @@ -1,12 +1,11 @@ -import { type ImageProps, getImageProps } from 'next/image'; +import { getImageProps } from 'next/image'; import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; import Accessibility from '../../assets/accessibility.svg'; import Testing from '../../assets/testing.png'; // referenced from https://nextjs.org/docs/pages/api-reference/components/image#theme-detection-picture -const Component = (props: Omit) => { +const Component = (props) => { const { props: { srcSet: dark }, } = getImageProps({ src: Accessibility, ...props }); @@ -29,6 +28,6 @@ export default { args: { alt: 'getImageProps Example', }, -} as Meta; +}; -export const Default: StoryObj = {}; +export const Default = {}; From 777f1bfaaaf1fbd29a25c8a02aae63bc114c86d2 Mon Sep 17 00:00:00 2001 From: Rob Waight <43173714+rwaight@users.noreply.github.com> Date: Thu, 1 Feb 2024 11:21:37 -0600 Subject: [PATCH 015/106] Update example to import a raw markdown file Improve the rendered documentation for importing markdown files using the markdown block --- docs/api/doc-block-markdown.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/api/doc-block-markdown.md b/docs/api/doc-block-markdown.md index 8e05ca60d08a..5842a583cc42 100644 --- a/docs/api/doc-block-markdown.md +++ b/docs/api/doc-block-markdown.md @@ -26,8 +26,20 @@ import { Button } from "@storybook/design-system"; ```md // DON'T do this, will error import ReadMe from './README.md'; +``` + + + +```md // DO this, will work import ReadMe from './README.md?raw'; +``` + + + +```md +// Importing a raw markdown file +import ReadMe from './README.md?raw'; import { Markdown } from '@storybook/blocks'; From 1ae9e0b69bfe28e59cff9590454841f957142b49 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 2 Feb 2024 14:57:02 +0100 Subject: [PATCH 016/106] Bump user-event to 14.5.2 --- code/lib/test/package.json | 2 +- code/yarn.lock | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 21b78a6df9da..0ee6bc229cfd 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -49,7 +49,7 @@ "@storybook/preview-api": "workspace:*", "@testing-library/dom": "^9.3.1", "@testing-library/jest-dom": "^6.4.0", - "@testing-library/user-event": "14.3.0", + "@testing-library/user-event": "^14.5.2", "@vitest/expect": "1.1.3", "@vitest/spy": "^1.1.3", "chai": "^4.3.7", diff --git a/code/yarn.lock b/code/yarn.lock index 3eb52a8fc859..54559b75fe2b 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6639,7 +6639,7 @@ __metadata: "@storybook/preview-api": "workspace:*" "@testing-library/dom": "npm:^9.3.1" "@testing-library/jest-dom": "npm:^6.4.0" - "@testing-library/user-event": "npm:14.3.0" + "@testing-library/user-event": "npm:^14.5.2" "@vitest/expect": "npm:1.1.3" "@vitest/spy": "npm:^1.1.3" chai: "npm:^4.3.7" @@ -6960,21 +6960,21 @@ __metadata: languageName: node linkType: hard -"@testing-library/user-event@npm:14.3.0": - version: 14.3.0 - resolution: "@testing-library/user-event@npm:14.3.0" +"@testing-library/user-event@npm:^14.4.0, @testing-library/user-event@npm:^14.4.3": + version: 14.5.1 + resolution: "@testing-library/user-event@npm:14.5.1" peerDependencies: "@testing-library/dom": ">=7.21.4" - checksum: 8a0e708709f2510287568dff668bc7d6f5c4e7e17407452b7aa0fcf74732dccf511c63fc76ac514d753cb1f0586c1def59ba7f5245a9523715d37a8f198745d3 + checksum: 1e00d6ead23377885b906db6e46e259161a0efb4138f7527481d7435f3c8f65cb7e3eab2900e2ac1886fa6dd03416e773a3a60dea87a9a2086a7127dee315f6f languageName: node linkType: hard -"@testing-library/user-event@npm:^14.4.0, @testing-library/user-event@npm:^14.4.3": - version: 14.5.1 - resolution: "@testing-library/user-event@npm:14.5.1" +"@testing-library/user-event@npm:^14.5.2": + version: 14.5.2 + resolution: "@testing-library/user-event@npm:14.5.2" peerDependencies: "@testing-library/dom": ">=7.21.4" - checksum: 1e00d6ead23377885b906db6e46e259161a0efb4138f7527481d7435f3c8f65cb7e3eab2900e2ac1886fa6dd03416e773a3a60dea87a9a2086a7127dee315f6f + checksum: 68a0c2aa28a3c8e6eb05cafee29705438d7d8a9427423ce5064d44f19c29e89b5636de46dd2f28620fb10abba75c67130185bbc3aa23ac1163a227a5f36641e1 languageName: node linkType: hard From c125ec60c5fef06ad3f72c2bb13a12c74e089588 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 7 Feb 2024 12:46:04 +0100 Subject: [PATCH 017/106] Autogenerate SupportedFrameworks --- code/lib/cli/src/dirs.ts | 3 +- code/lib/cli/src/generators/baseGenerator.ts | 3 +- code/lib/cli/src/helpers.ts | 34 +++++++++++++----- code/lib/cli/src/project_types.ts | 4 +-- .../src/utils/get-storybook-info.ts | 4 +-- code/lib/types/package.json | 1 + .../scripts/generate-available-frameworks.js | 36 +++++++++++++++++++ code/lib/types/src/index.ts | 1 + code/lib/types/src/modules/frameworks.ts | 24 +++++++++++++ 9 files changed, 95 insertions(+), 15 deletions(-) create mode 100644 code/lib/types/scripts/generate-available-frameworks.js create mode 100644 code/lib/types/src/modules/frameworks.ts diff --git a/code/lib/cli/src/dirs.ts b/code/lib/cli/src/dirs.ts index 213b1877aaee..1f41620b4ea6 100644 --- a/code/lib/cli/src/dirs.ts +++ b/code/lib/cli/src/dirs.ts @@ -6,9 +6,10 @@ import * as tempy from 'tempy'; import invariant from 'tiny-invariant'; import { externalFrameworks } from './project_types'; -import type { SupportedFrameworks, SupportedRenderers } from './project_types'; +import type { SupportedRenderers } from './project_types'; import type { JsPackageManager } from '@storybook/core-common'; import { versions } from '@storybook/core-common'; +import type { SupportedFrameworks } from '@storybook/types'; export function getCliDir() { return dirname(require.resolve('@storybook/cli/package.json')); diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 3c3cae9e5e5e..2f85d0af4549 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -5,8 +5,9 @@ import ora from 'ora'; import invariant from 'tiny-invariant'; import type { JsPackageManager } from '@storybook/core-common'; import { getPackageDetails, versions as packageVersions } from '@storybook/core-common'; +import type { SupportedFrameworks } from '@storybook/types'; import type { NpmOptions } from '../NpmOptions'; -import type { SupportedRenderers, SupportedFrameworks, Builder } from '../project_types'; +import type { SupportedRenderers, Builder } from '../project_types'; import { SupportedLanguage, externalFrameworks } from '../project_types'; import { copyTemplateFiles } from '../helpers'; import { configureMain, configurePreview } from './configure'; diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 95c22ee624f1..167340059828 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -13,7 +13,8 @@ import type { PackageJson, PackageJsonWithDepsAndDevDeps, } from '@storybook/core-common'; -import type { SupportedFrameworks, SupportedRenderers } from './project_types'; +import type { SupportedFrameworks } from '@storybook/types'; +import type { SupportedRenderers } from './project_types'; import { SupportedLanguage } from './project_types'; import { versions as storybookMonorepoPackages } from '@storybook/core-common'; @@ -134,19 +135,36 @@ const frameworkToRenderer: Record< SupportedFrameworks | SupportedRenderers, SupportedRenderers | 'vue' > = { + // frameworks angular: 'angular', ember: 'ember', - html: 'html', + 'html-vite': 'html', + 'html-webpack5': 'html', nextjs: 'react', - preact: 'preact', + 'preact-vite': 'preact', + 'preact-webpack5': 'preact', qwik: 'qwik', - react: 'react', - 'react-native': 'react', - server: 'react', + 'react-vite': 'react', + 'react-webpack5': 'react', + 'server-webpack5': 'server', solid: 'solid', - svelte: 'svelte', + 'svelte-vite': 'svelte', + 'svelte-webpack5': 'svelte', sveltekit: 'svelte', - vue3: 'vue', + 'vue-vite': 'vue', + 'vue-webpack5': 'vue', + 'vue3-vite': 'vue3', + 'vue3-webpack5': 'vue3', + 'web-components-vite': 'web-components', + 'web-components-webpack5': 'web-components', + // renderers + html: 'html', + preact: 'preact', + 'react-native': 'react-native', + react: 'react', + server: 'server', + svelte: 'svelte', + vue3: 'vue3', 'web-components': 'web-components', }; diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index 0a0073d84664..e781b3e16db8 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -1,4 +1,5 @@ import { minVersion, validRange } from 'semver'; +import type { SupportedFrameworks } from '@storybook/types'; function eqMajor(versionRange: string, major: number) { // Uses validRange to avoid a throw from minVersion if an invalid range gets passed @@ -21,9 +22,6 @@ export const externalFrameworks: ExternalFramework[] = [ { name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' }, ]; -// Should match @storybook/ -export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid' | 'ember'; - // Should match @storybook/ export type SupportedRenderers = | 'react' diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts index dd462a6b0370..6dda1cd20699 100644 --- a/code/lib/core-common/src/utils/get-storybook-info.ts +++ b/code/lib/core-common/src/utils/get-storybook-info.ts @@ -1,6 +1,6 @@ import path from 'path'; import fse from 'fs-extra'; -import type { CoreCommon_StorybookInfo, PackageJson } from '@storybook/types'; +import type { CoreCommon_StorybookInfo, PackageJson, SupportedFrameworks } from '@storybook/types'; import { getStorybookConfiguration } from './get-storybook-configuration'; export const rendererPackages: Record = { @@ -19,7 +19,7 @@ export const rendererPackages: Record = { 'storybook-solidjs': 'solid', }; -export const frameworkPackages: Record = { +export const frameworkPackages: Record = { '@storybook/angular': 'angular', '@storybook/ember': 'ember', '@storybook/html-vite': 'html-vite', diff --git a/code/lib/types/package.json b/code/lib/types/package.json index e2b155001ae7..6d1f4b281635 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -58,6 +58,7 @@ "access": "public" }, "bundler": { + "pre": "./scripts/generate-available-frameworks.js", "entries": [ "./src/index.ts" ] diff --git a/code/lib/types/scripts/generate-available-frameworks.js b/code/lib/types/scripts/generate-available-frameworks.js new file mode 100644 index 000000000000..f3f0af79f6f1 --- /dev/null +++ b/code/lib/types/scripts/generate-available-frameworks.js @@ -0,0 +1,36 @@ +// read ./code/frameworks subfolders and generate a list of available frameworks +// save this list into ./code/lib/cli/src/frameworks.ts and export it as a union type. The name of the type is `SupportedFrameworks`. Add additionally 'qwik' and `solid` to that list. + +import { readdir, writeFile } from 'node:fs/promises'; +import path from 'node:path'; +import prettier from 'prettier'; +import dedent from 'ts-dedent'; + +const thirdPartyFrameworks = ['qwik', 'solid']; + +const run = async () => { + const frameworks = await readdir(path.join(__dirname, '..', '..', '..', 'frameworks')); + const supportedFrameworks = frameworks.map((framework) => `'${framework}'`).join(' | '); + const fileContent = dedent` + // auto generated file, do not edit + // the file gets generated by the script ./code/lib/types/scripts/generate-available-frameworks.js + export type SupportedFrameworks = ${supportedFrameworks} | ${thirdPartyFrameworks + .map((framework) => `'${framework}'`) + .join(' | ')}; +`; + // format fileContent by prettier + const frameworksFile = path.join(__dirname, '..', 'src', 'modules', 'frameworks.ts'); + const prettierConfig = await prettier.resolveConfig(frameworksFile); + + const formattedFileContent = await prettier.format(fileContent, { + ...prettierConfig, + parser: 'typescript', + }); + + await writeFile(frameworksFile, formattedFileContent); +}; + +run().catch((e) => { + console.error(e); + process.exit(1); +}); diff --git a/code/lib/types/src/index.ts b/code/lib/types/src/index.ts index 756b3d2634cb..0eb7547ccb6b 100644 --- a/code/lib/types/src/index.ts +++ b/code/lib/types/src/index.ts @@ -10,3 +10,4 @@ export * from './modules/api-stories'; export * from './modules/indexer'; export * from './modules/composedStory'; export * from './modules/channelApi'; +export * from './modules/frameworks'; diff --git a/code/lib/types/src/modules/frameworks.ts b/code/lib/types/src/modules/frameworks.ts new file mode 100644 index 000000000000..0785763f46e5 --- /dev/null +++ b/code/lib/types/src/modules/frameworks.ts @@ -0,0 +1,24 @@ +// auto generated file, do not edit +// the file gets generated by the script ./code/lib/types/scripts/generate-available-frameworks.js +export type SupportedFrameworks = + | 'angular' + | 'ember' + | 'html-vite' + | 'html-webpack5' + | 'nextjs' + | 'preact-vite' + | 'preact-webpack5' + | 'react-vite' + | 'react-webpack5' + | 'server-webpack5' + | 'svelte-vite' + | 'svelte-webpack5' + | 'sveltekit' + | 'vue-vite' + | 'vue-webpack5' + | 'vue3-vite' + | 'vue3-webpack5' + | 'web-components-vite' + | 'web-components-webpack5' + | 'qwik' + | 'solid'; From d351504a58df41f9cb96edbeee90bd5f6d30a2c1 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 8 Feb 2024 21:17:33 +0000 Subject: [PATCH 018/106] Docs: Remove references to the storiesOf API --- code/lib/preview-api/README-client-api.md | 6 +- code/lib/preview-api/docs/storiesOf.md | 97 --------- docs/api/main-config-indexers.md | 4 +- docs/configure/frameworks-feature-support.md | 10 +- docs/faq.md | 206 +++++++++---------- 5 files changed, 112 insertions(+), 211 deletions(-) delete mode 100644 code/lib/preview-api/docs/storiesOf.md diff --git a/code/lib/preview-api/README-client-api.md b/code/lib/preview-api/README-client-api.md index c459b4c8d425..84861e4f2ca9 100644 --- a/code/lib/preview-api/README-client-api.md +++ b/code/lib/preview-api/README-client-api.md @@ -1,10 +1,12 @@ -# `@storybook/client-api` -- Deprecated Story APIs (`storiesOf`) +# `@storybook/client-api` -- Removed Story APIs (`storiesOf`) **NOTE** This API is deprecated, and the CSF format is preferred for all stories. ## `storiesOf` API -The `@storybook/client` API provides the [`storiesOf()` API](./docs/storiesOf.md), which is proxied through to the CSF API. +The `@storybook/client` package provided backward compatibility for the `storiesOf` API supported until the previous stable Storybook version. With the release of Storybook 8 the `storiesOf` API was removed and is no longer supported or maintained. + + ### Internals diff --git a/code/lib/preview-api/docs/storiesOf.md b/code/lib/preview-api/docs/storiesOf.md deleted file mode 100644 index 08e7009a9d0d..000000000000 --- a/code/lib/preview-api/docs/storiesOf.md +++ /dev/null @@ -1,97 +0,0 @@ -## storiesOf (Legacy) API - -`storiesOf` is Storybook's Legacy API for adding stories. Up until Storybook 5.2, it has been the primary way to create stories in Storybook. - -In Storybook 5.2 we introduced a simpler and more portable [Component Story Format](https://storybook.js.org/docs/react/api/csf), and all future tools and infrastructure will be oriented towards CSF. Therefore, we recommend migrating your stories out of `storiesOf` API, and even provide [automated tools to do this](#component-story-format-migration). - -That said, the `storiesOf` API is no longer actively maintained and has been removed as part of the Storybook 8 release. If you're working with a custom indexer or similar tooling that implements this API, we encourage using custom story indexers instead. Read our [Indexer API documentation](https://storybook.js.org/docs/api/main-config-indexers) for more information. - -## storiesOf API - -A Storybook is a collection of stories. Each story represents a single visual state of a component. - -Here's a basic story file in the `storiesOf` API: - -```js -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; -import Button from '../components/Button'; - -storiesOf('Button', module) - .add('with text', () => ) - .add('with some emoji', () => ( - - )); -``` - -The string argument to `storiesOf` is the component title. If you pass a string like `'Widgets|Button/Button'` it can also be used to position your component's story within Storybook's story hierarchy. - -The second argument of `storiesOf` is a webpack `module`, which is available on the global (per-file) scope. Storybook needs it to enable hot-module-replacement. If it's not included you'll need to refresh your browser with each change you make. - -Each `.add` call takes a story name, a story function that returns a renderable object (JSX in the case of React), and optionally some parameters, which are described below. - -## Decorators and parameters - -[Decorators](https://storybook.js.org/docs/react/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) can be specified globally, at the component level, or locally at the story level. - -In the `storiesOf` API, story-level parameters are provided as a third argument to `.add`: - -```js -storiesOf('Button', module).add( - 'with text', - () => , - { notes: someNotes } -); -``` - -Story-level decorators are provided via parameters: - -```js -storiesOf('Button', module).add( - 'with text', - () => , - { decorators: [withKnobs] } -); -``` - -We can control how the component's stories will render with parameters and decorators. You can use as many `.addDecorators` as you need (but make sure you add them all before your first story), but you can only use one `.addParameters`, as you can see in the example below: - -```js -storiesOf('Button', module) - .addParameters({ backgrounds: { values: [{ name: 'red', value: '#f00' }] } }) - .addDecorator((Story) => ( -
- -
- )) - .addDecorator((Story) => ( -
- -
- )) - .add('with text', () => ) - .add('with some emoji', () => ( - - )); -``` - -Parameters and decorators can also be used globally, you can define them in your .storybook/preview.js. Take a look [here](https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters) to learn more about global parameters and [here](https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators) for global decorators. - -## Component Story Format migration - -To make it easier to adopt the new [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf), we've created an automatic migration tool to transform `storiesOf` API to Module format. - -```sh -sb migrate storiesof-to-csf --glob=src/**/*.stories.js -``` - -For more information, see the CLI's [Codemod README](https://github.com/storybookjs/storybook/tree/next/code/lib/codemod). diff --git a/docs/api/main-config-indexers.md b/docs/api/main-config-indexers.md index 256dd9b2c990..79e7fa2f2651 100644 --- a/docs/api/main-config-indexers.md +++ b/docs/api/main-config-indexers.md @@ -351,9 +351,7 @@ function JsonStoriesPlugin(): PluginOption { Generating stories with an alternative API -You can use a custom indexer and builder plugin to create your own API for defining stories, such as imperatively defining stories similar to the legacy [`storiesOf`](https://github.com/storybookjs/storybook/blob/main/code/lib/preview-api/docs/storiesOf.md) format. - -The [dynamic stories proof of concept](https://stackblitz.com/edit/github-h2rgfk?file=README.md) is an elaborate, functional example of doing just that. It contains everything needed to support such a feature, including the indexer, a Vite plugin and a Webpack loader. +You can use a custom indexer and builder plugin to create your API to define stories extending the CSF format. To learn more, see the following [proof of concept](https://stackblitz.com/edit/github-h2rgfk?file=README.md) to set up a custom indexer to generate stories dynamically. It contains everything needed to support such a feature, including the indexer, a Vite plugin, and a Webpack loader. diff --git a/docs/configure/frameworks-feature-support.md b/docs/configure/frameworks-feature-support.md index 7ae41614e248..79013ad8fc4b 100644 --- a/docs/configure/frameworks-feature-support.md +++ b/docs/configure/frameworks-feature-support.md @@ -110,8 +110,8 @@ Community frameworks have fewer contributors which means they may not be as up t To align the Storybook ecosystem with the current state of frontend development, the following features and addons are now deprecated, no longer maintained, and will be removed in future versions of Storybook -| Feature | Status | -| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../essentials/controls.md) instead. | -| [Storyshots](../writing-tests/snapshot-testing.md) | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives. | -| [`StoriesOf`](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md) | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../api/csf.md) instead for writing stories.
See the [migration guide](../migration-guide.md#storiesof-to-csf) for more information. | +| Feature | Status | +| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../essentials/controls.md) instead. | +| [Storyshots](../writing-tests/snapshot-testing.md) | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives. | +| StoriesOf | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../api/csf.md) instead for writing stories.
See the [migration guide](../migration-guide.md#storiesof-to-csf) for more information. | diff --git a/docs/faq.md b/docs/faq.md index 6e6ce176787a..895f556160d6 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -230,112 +230,110 @@ With the release of version 6.0, we updated our documentation as well. That does We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo. -| Section | Page | Current Location | Version 5.3 location | Version 5.0 location | -| ---------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -| N/A | Why Storybook | [See current documentation](./why-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) | -| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | -| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) | -| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | -| Write stories | Introduction | [See current documentation](./writing-stories/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented | -| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) | -| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Write docs | Autodocs | [See current documentation](./writing-docs/autodocs.md) | See versioned addon documentation | Non existing feature or undocumented | -| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented | -| | Doc Blocks | [See current documentation](./writing-docs/doc-blocks.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) | -| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) | -| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) | -| | Import stories in tests/Unit tests | [See current documentation](./writing-tests/stories-in-unit-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | -| | Import stories in tests/End-to-end testing | [See current documentation](./writing-tests/stories-in-end-to-end-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | -| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) | -| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) | -| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) | -| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) | -| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) | -| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented | -| Configure | Overview | [See current documentation](./configure/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Integration/Frameworks | [See current documentation](./configure/frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Integration/Framework support for frameworks | [See current documentation](./configure/frameworks-feature-support.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Integration/Compilers | [See current documentation](./configure/compilers.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) | -| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) | -| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation | -| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation | -| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) | -| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | -| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) | -| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | -| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) | -| Builders | Introduction | [See current documentation](./builders/index.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) | -| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| Addons | Introduction | [See current documentation](./addons/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) | -| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented | -| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) | -| API | @storybook/blocks/ArgTypes | [See current documentation](./api/doc-block-argtypes.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Canvas | [See current documentation](./api/doc-block-canvas.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/ColorPalette | [See current documentation](./api/doc-block-colorpalette.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Controls | [See current documentation](./api/doc-block-controls.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Description | [See current documentation](./api/doc-description.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/IconGallery | [See current documentation](./api/doc-block-icongallery.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Markdown | [See current documentation](./api/doc-block-markdown.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Meta | [See current documentation](./api/doc-block-meta.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Primary | [See current documentation](./api/doc-block-primary.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Source | [See current documentation](./api/doc-block-source.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Stories | [See current documentation](./api/doc-block-stories.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Story | [See current documentation](./api/doc-block-story.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Subtitle | [See current documentation](./api/doc-block-subtitle.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Title | [See current documentation](./api/doc-block-title.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Typeset | [See current documentation](./api/doc-block-typeset.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Unstyled | [See current documentation](./api/doc-block-unstyled.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/useOf | [See current documentation](./api/doc-block-useof.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented | -| | Stories/StoriesOF format (see note below) | [See current documentation](https://github.com/storybookjs/storybook/blob/main/code/lib/preview-api/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented | -| | ArgTypes | [See current documentation](./api/arg-types.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/Overview | [See current documentation](./api/main-config.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/framework | [See current documentation](./api/main-config-framework.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/stories | [See current documentation](./api/main-config-stories.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/addons | [See current documentation](./api/main-config-addons.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/babel | [See current documentation](./api/main-config-babel.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/babelDefault | [See current documentation](./api/main-config-babel-default.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/build | [See current documentation](./api/main-config-build.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/core | [See current documentation](./api/main-config-core.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/docs | [See current documentation](./api/main-config-docs.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/env | [See current documentation](./api/main-config-env.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/features | [See current documentation](./api/main-config-features.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/indexers | [See current documentation](./api/main-config-indexers.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/logLevel | [See current documentation](./api/main-config-log-level.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/managerHead | [See current documentation](./api/main-config-manager-head.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/previewAnnotations | [See current documentation](./api/main-config-preview-annotations.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/previewBody | [See current documentation](./api/main-config-preview-body.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/previewHead | [See current documentation](./api/main-config-preview-head.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/refs | [See current documentation](./api/main-config-refs.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/staticDirs | [See current documentation](./api/main-config-static-dirs.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/swc | [See current documentation](./api/main-config-swc.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/typescript | [See current documentation](./api/main-config-typescript.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/viteFinal | [See current documentation](./api/main-config-vite-final.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/webpackFinal | [See current documentation](./api/main-config-webpack-final.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) | - - +| Section | Page | Current Location | Version 5.3 location | Version 5.0 location | +| ---------------- | ----------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| N/A | Why Storybook | [See current documentation](./why-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) | +| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | +| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) | +| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | +| Write stories | Introduction | [See current documentation](./writing-stories/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented | +| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) | +| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Write docs | Autodocs | [See current documentation](./writing-docs/autodocs.md) | See versioned addon documentation | Non existing feature or undocumented | +| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented | +| | Doc Blocks | [See current documentation](./writing-docs/doc-blocks.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) | +| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) | +| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) | +| | Import stories in tests/Unit tests | [See current documentation](./writing-tests/stories-in-unit-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | +| | Import stories in tests/End-to-end testing | [See current documentation](./writing-tests/stories-in-end-to-end-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | +| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) | +| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) | +| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) | +| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) | +| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) | +| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented | +| Configure | Overview | [See current documentation](./configure/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Integration/Frameworks | [See current documentation](./configure/frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Integration/Framework support for frameworks | [See current documentation](./configure/frameworks-feature-support.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Integration/Compilers | [See current documentation](./configure/compilers.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) | +| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) | +| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation | +| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation | +| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) | +| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | +| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) | +| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | +| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) | +| Builders | Introduction | [See current documentation](./builders/index.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) | +| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| Addons | Introduction | [See current documentation](./addons/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) | +| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented | +| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) | +| API | @storybook/blocks/ArgTypes | [See current documentation](./api/doc-block-argtypes.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Canvas | [See current documentation](./api/doc-block-canvas.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/ColorPalette | [See current documentation](./api/doc-block-colorpalette.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Controls | [See current documentation](./api/doc-block-controls.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Description | [See current documentation](./api/doc-description.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/IconGallery | [See current documentation](./api/doc-block-icongallery.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Markdown | [See current documentation](./api/doc-block-markdown.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Meta | [See current documentation](./api/doc-block-meta.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Primary | [See current documentation](./api/doc-block-primary.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Source | [See current documentation](./api/doc-block-source.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Stories | [See current documentation](./api/doc-block-stories.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Story | [See current documentation](./api/doc-block-story.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Subtitle | [See current documentation](./api/doc-block-subtitle.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Title | [See current documentation](./api/doc-block-title.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Typeset | [See current documentation](./api/doc-block-typeset.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Unstyled | [See current documentation](./api/doc-block-unstyled.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/useOf | [See current documentation](./api/doc-block-useof.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Stories/Component Story Format (see note below) | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented | +| | ArgTypes | [See current documentation](./api/arg-types.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/Overview | [See current documentation](./api/main-config.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/framework | [See current documentation](./api/main-config-framework.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/stories | [See current documentation](./api/main-config-stories.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/addons | [See current documentation](./api/main-config-addons.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/babel | [See current documentation](./api/main-config-babel.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/babelDefault | [See current documentation](./api/main-config-babel-default.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/build | [See current documentation](./api/main-config-build.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/core | [See current documentation](./api/main-config-core.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/docs | [See current documentation](./api/main-config-docs.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/env | [See current documentation](./api/main-config-env.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/features | [See current documentation](./api/main-config-features.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/indexers | [See current documentation](./api/main-config-indexers.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/logLevel | [See current documentation](./api/main-config-log-level.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/managerHead | [See current documentation](./api/main-config-manager-head.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewAnnotations | [See current documentation](./api/main-config-preview-annotations.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewBody | [See current documentation](./api/main-config-preview-body.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewHead | [See current documentation](./api/main-config-preview-head.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/refs | [See current documentation](./api/main-config-refs.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/staticDirs | [See current documentation](./api/main-config-static-dirs.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/swc | [See current documentation](./api/main-config-swc.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/typescript | [See current documentation](./api/main-config-typescript.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/viteFinal | [See current documentation](./api/main-config-vite-final.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/webpackFinal | [See current documentation](./api/main-config-webpack-final.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) | + -With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the `storiesOf` format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future. +If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide.md#storiesof-to-csf) for more information. However, if you need, you can still access the old documentation for `storiesOf` [here](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.md). From 9c8805234f7886c204fc8df2b5bb858d78d7effc Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 12 Feb 2024 14:49:34 +0100 Subject: [PATCH 019/106] Add Webpack5 Compiler automigration --- code/lib/cli/src/automigrate/fixes/index.ts | 2 + .../fixes/webpack5-compiler-setup.test.ts | 441 ++++++++++++++++++ .../fixes/webpack5-compiler-setup.ts | 180 +++++++ .../src/automigrate/helpers/mainConfigFile.ts | 24 +- code/lib/cli/src/automigrate/index.ts | 2 +- code/lib/cli/src/helpers.ts | 25 + code/lib/cli/src/project_types.ts | 15 + code/lib/types/src/modules/core-common.ts | 3 + 8 files changed, 690 insertions(+), 2 deletions(-) create mode 100644 code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts create mode 100644 code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 27f8a80b3140..606e87221192 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -20,6 +20,7 @@ import { wrapRequire } from './wrap-require'; import { reactDocgen } from './react-docgen'; import { removeReactDependency } from './prompt-remove-react'; import { storyshotsMigration } from './storyshots-migration'; +import { webpack5Migration } from './webpack5-compiler-setup'; export * from '../types'; @@ -44,6 +45,7 @@ export const allFixes: Fix[] = [ reactDocgen, storyshotsMigration, removeReactDependency, + webpack5Migration, ]; export const initFixes: Fix[] = [eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts new file mode 100644 index 000000000000..580a5b8324e6 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -0,0 +1,441 @@ +import { vi, describe, it, expect, afterEach, beforeEach } from 'vitest'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager } from '@storybook/core-common'; +import { webpack5Migration } from './webpack5-compiler-setup'; +import { CoreWebpackCompilers } from '../../project_types'; + +const check = async ({ + packageManager, + mainConfig, + storybookVersion = '8.0.0', +}: { + packageManager?: Partial; + main?: Partial & Record; + storybookVersion?: string; + mainConfig?: Partial; +}) => { + return webpack5Migration.check({ + packageManager: packageManager as any, + configDir: '', + storybookVersion, + mainConfig: mainConfig as any, + }); +}; + +const promptMocks = vi.hoisted(() => { + return { + default: vi.fn(), + }; +}); + +vi.mock('prompts', () => { + return { + default: promptMocks.default, + }; +}); + +// mock chalk yellow and cyan +vi.mock('chalk', () => { + return { + default: { + yellow: (str: string) => str, + cyan: (str: string) => str, + }, + }; +}); + +describe('check function', () => { + describe('webpack5Migration check function', () => { + beforeEach(() => { + promptMocks.default.mockResolvedValue({ + compiler: 'swc', + }); + }); + + afterEach(() => { + vi.resetAllMocks(); + }); + + describe('return null', async () => { + it('should return null if the builder is not webpack5', async () => { + const result = check({ + mainConfig: { + framework: { + name: '@storybook/react-vite', + }, + }, + }); + + await expect(result).resolves.toBeNull(); + }); + + it('should return null if the framework is Angular', async () => { + const result = check({ + mainConfig: { + framework: '@storybook/angular', + }, + }); + + await expect(result).resolves.toBeNull(); + // ... + }); + + it('should return null if the framework is Ember', async () => { + const result = check({ + mainConfig: { + framework: { + name: '@storybook/ember', + }, + }, + }); + + await expect(result).resolves.toBeNull(); + }); + + it('should return null if the framework is Webpack5 based but a different framework builder is used', async () => { + const result = check({ + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { + builder: '@storybook/builder-vite', + }, + }, + }, + }); + + await expect(result).resolves.toBeNull(); + }); + + it('should return null if the framework is Webpack5 based but a different core builder is used', async () => { + const result = check({ + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + }, + core: { + builder: '@storybook/builder-vite', + }, + }, + }); + + await expect(result).resolves.toBeNull(); + }); + + it('should return null if the framework is CRA based', async () => { + const result = check({ + packageManager: { + getPackageVersion: (name) => { + if (name === 'react-scripts') { + return Promise.resolve('5.0.0'); + } + + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + }, + }, + }); + + await expect(result).resolves.toBeNull(); + }); + }); + + describe('useSWC', () => { + it('should return shouldRemoveSWCFlag: true when useSWC flag is set to true', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: true, + }, + }, + }, + }, + }); + + expect(result).contains({ + shouldRemoveSWCFlag: true, + }); + }); + + it('should return shouldRemoveSWCFlag: true when useSWC flag is set to false', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: false, + }, + }, + }, + }, + }); + + expect(result).contains({ + shouldRemoveSWCFlag: true, + }); + }); + + it('should return shouldRemoveSWCFlag: false when useSWC flag is not set', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { + builder: {}, + }, + }, + }, + }); + + expect(result).contains({ + shouldRemoveSWCFlag: false, + }); + }); + }); + + describe('Next.js', () => { + it('should return isNextJs: true when the framework is nextjs', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/nextjs', + }, + }, + }); + + expect(result).contains({ + isNextJs: true, + }); + }); + + it('should return isNextJs: false when the framework is not nextjs', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + }, + }, + }); + + expect(result).contains({ + isNextJs: false, + }); + }); + }); + + describe('return options', () => { + it('should return compiler: babel when useSWC flag is not set and the user selects babel during prompt', async () => { + promptMocks.default.mockResolvedValue({ + compiler: 'babel', + }); + + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + }, + }, + }); + + expect(result).contains({ + compiler: 'babel', + compilerPackageName: '@storybook/addon-webpack5-compiler-babel', + }); + }); + + describe('user selects swc', () => { + it('should return compiler: swc when useSWC flag is not set and the user selects swc during prompt', async () => { + promptMocks.default.mockResolvedValue({ + compiler: 'swc', + }); + + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + }, + }, + }); + + expect(result).contains({ + compiler: 'swc', + compilerPackageName: '@storybook/addon-webpack5-compiler-swc', + }); + }); + }); + + it('should return compiler: swc when useSWC flag is set', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: true, + }, + }, + }, + }, + }); + + expect(result).contains({ + compiler: 'swc', + compilerPackageName: '@storybook/addon-webpack5-compiler-swc', + }); + }); + + it('should return options if the framework is unknown but webpack5 was detected', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + if (name === 'webpack') { + return Promise.resolve('5.0.0'); + } + + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/unknown', + }, + }, + }); + + expect(result).not.toBeNull(); + }); + }); + }); + + describe('prompt', () => { + it('shouldRemoveSWCFlag = true', async () => { + const prompt = webpack5Migration.prompt({ + shouldRemoveSWCFlag: true, + isNextJs: false, + compilerPackageName: '@storybook/addon-webpack5-compiler-swc', + compiler: CoreWebpackCompilers.SWC, + }); + + expect(prompt).toMatchInlineSnapshot(` + "We need to update your Storybook configuration for Webpack 5. + The framework.options.builder.useSWC flag will be removed. + + The @storybook/addon-webpack5-compiler-swc addon will be added to your project. It adds SWC as the compiler for your Storybook. + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. + You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" + `); + }); + + it('shouldRemoveSWCFlag = false', async () => { + const prompt = webpack5Migration.prompt({ + shouldRemoveSWCFlag: false, + isNextJs: false, + compilerPackageName: '@storybook/addon-webpack5-compiler-swc', + compiler: CoreWebpackCompilers.SWC, + }); + + expect(prompt).toMatchInlineSnapshot(` + "The @storybook/addon-webpack5-compiler-swc addon will be added to your project. It adds SWC as the compiler for your Storybook. + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. + You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" + `); + }); + + it('isNextJs = true', () => { + const prompt = webpack5Migration.prompt({ + shouldRemoveSWCFlag: true, + isNextJs: true, + compilerPackageName: undefined, + compiler: undefined, + }); + + expect(prompt).toMatchInlineSnapshot(` + "We need to update your Storybook configuration for Webpack 5. + The framework.options.builder.useSWC flag will be removed. + + Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself. + If you have a babel.config.js file in your project, Storybook will use Babel as the compiler. + If you have a babel.config.js file in your project and you have set experimental.forceSwcTransforms = true in your next.config.js file, Storybook will use SWC as the compiler. + If you don't have a babel.config.js file in your project, Storybook will use SWC as the compiler." + `); + }); + + it('isNextjs = false AND compilerPackageName = @storybook/addon-webpack5-compiler-swc AND compiler = swc', () => { + const prompt = webpack5Migration.prompt({ + shouldRemoveSWCFlag: false, + isNextJs: false, + compilerPackageName: '@storybook/addon-webpack5-compiler-swc', + compiler: CoreWebpackCompilers.SWC, + }); + + expect(prompt).toMatchInlineSnapshot(` + "The @storybook/addon-webpack5-compiler-swc addon will be added to your project. It adds SWC as the compiler for your Storybook. + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. + You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" + `); + }); + + it('isNextjs = false AND compilerPackageName = @storybook/addon-webpack5-compiler-babel AND compiler = babel', () => { + const prompt = webpack5Migration.prompt({ + shouldRemoveSWCFlag: false, + isNextJs: false, + compilerPackageName: '@storybook/addon-webpack5-compiler-babel', + compiler: CoreWebpackCompilers.Babel, + }); + + expect(prompt).toMatchInlineSnapshot(` + "The @storybook/addon-webpack5-compiler-babel addon will be added to your project. It adds Babel as the compiler for your Storybook. + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. + You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" + `); + }); + }); +}); diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts new file mode 100644 index 000000000000..b895d4b6ef12 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -0,0 +1,180 @@ +import prompts from 'prompts'; +import type { SupportedFrameworks } from '@storybook/types'; +import { frameworkPackages } from '@storybook/core-common'; +import type { Fix } from '../types'; +import { + getBuilderPackageName, + getFrameworkOptions, + getFrameworkPackageName, + updateMainConfig, +} from '../helpers/mainConfigFile'; +import { frameworkToDefaultBuilder } from '../../helpers'; +import { + CoreBuilder, + CoreWebpackCompilers, + builderNameToCoreBuilder, + compilerNameToCoreCompiler, +} from '../../project_types'; +import dedent from 'ts-dedent'; +import chalk from 'chalk'; +import { add } from '../../add'; + +type Options = { + compiler?: CoreWebpackCompilers; + compilerPackageName?: keyof typeof compilerNameToCoreCompiler | undefined; + shouldRemoveSWCFlag: boolean; + isNextJs: boolean; +}; + +export const webpack5Migration: Fix = { + id: 'webpack5-compiler-setup', + + async check({ mainConfig, packageManager }) { + const frameworkName = Object.entries(frameworkPackages).find( + ([name]) => name === getFrameworkPackageName(mainConfig) + )?.[1]; + + const builderPackageName = getBuilderPackageName(mainConfig); + const customCoreBuilder = builderPackageName + ? builderNameToCoreBuilder[builderPackageName] + : null; + + const defaultCoreBuilder = frameworkName + ? frameworkToDefaultBuilder[frameworkName] + : await (async () => { + const webpackVersion = await packageManager.getPackageVersion('webpack'); + return !!webpackVersion ? CoreBuilder.Webpack5 : CoreBuilder.Vite; + })(); + + const builder = customCoreBuilder || defaultCoreBuilder; + + if (builder !== CoreBuilder.Webpack5) { + return null; + } + + const excludedFrameworks: SupportedFrameworks[] = ['angular', 'ember']; + + const isExcludedFramework = frameworkName ? excludedFrameworks.includes(frameworkName) : false; + + if (isExcludedFramework) { + return null; + } + + const hasReactScriptsDependency = !!(await packageManager.getPackageVersion('react-scripts')); + + if (hasReactScriptsDependency) { + return null; + } + + const frameworkOptions = getFrameworkOptions(mainConfig); + + const defaultCompiler = frameworkOptions?.builder?.useSWC + ? CoreWebpackCompilers.SWC + : CoreWebpackCompilers.Babel; + + const compiler: CoreWebpackCompilers = + defaultCompiler === CoreWebpackCompilers.Babel + ? await askUserForCompilerChoice() + : CoreWebpackCompilers.SWC; + + const compilerPackageName = Object.entries(compilerNameToCoreCompiler).find( + ([, coreCompiler]) => coreCompiler === compiler + )?.[0]; + + if (frameworkName === 'nextjs') { + return { + compiler: undefined, + compilerPackageName: undefined, + shouldRemoveSWCFlag: false, + isNextJs: true, + }; + } + + return { + compiler, + compilerPackageName, + shouldRemoveSWCFlag: frameworkOptions?.builder ? 'useSWC' in frameworkOptions.builder : false, + isNextJs: false, + }; + }, + + prompt({ compiler, compilerPackageName, shouldRemoveSWCFlag, isNextJs }) { + const message = []; + + if (shouldRemoveSWCFlag) { + message.push(dedent` + We need to update your Storybook configuration for Webpack 5. + The ${chalk.yellow('framework.options.builder.useSWC')} flag will be removed.`); + } + + if (isNextJs) { + message.push(dedent` + Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself. + If you have a ${chalk.yellow( + 'babel.config.js' + )} file in your project, Storybook will use Babel as the compiler. + If you have a ${chalk.yellow( + 'babel.config.js' + )} file in your project and you have set ${chalk.yellow( + 'experimental.forceSwcTransforms = true' + )} in your next.config.js file, Storybook will use SWC as the compiler. + If you don't have a babel.config.js file in your project, Storybook will use SWC as the compiler. + `); + } else if (compilerPackageName) { + message.push(dedent` + The ${chalk.cyan(compilerPackageName)} addon will be added to your project. It adds ${ + compiler === CoreWebpackCompilers.Babel ? 'Babel' : 'SWC' + } as the compiler for your Storybook. + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. + You can find more information here: ${chalk.yellow( + 'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support' + )} + `); + } + + return message.join('\n\n'); + }, + + async run({ result, mainConfigPath, packageManager, skipInstall, dryRun }) { + const { compilerPackageName, shouldRemoveSWCFlag, isNextJs } = result; + + if (shouldRemoveSWCFlag) { + await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, (main) => { + main.removeField(['framework', 'options', 'builder', 'useSWC']); + }); + } + + if (!isNextJs && compilerPackageName) { + await add(compilerPackageName, { + packageManager: packageManager.type, + skipPostinstall: !!skipInstall, + }); + } + }, +}; + +async function askUserForCompilerChoice() { + const response = await prompts<'compiler'>({ + type: 'select', + name: 'compiler', + message: `Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project: +Babel - A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. +SWC - Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility. +Which compiler would you like to use?`, + choices: [ + { + title: 'Babel', + description: 'Choose Babel for a vast ecosystem and battle-tested reliability.', + value: CoreWebpackCompilers.Babel, + }, + { + title: 'SWC', + description: 'Choose SWC for fast builds and simple configuration.', + value: CoreWebpackCompilers.SWC, + }, + ], + initial: 0, + }); + + return response.compiler as CoreWebpackCompilers; +} diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts index c721dae39a31..491bcbe219ef 100644 --- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts +++ b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts @@ -42,20 +42,42 @@ export const getFrameworkPackageName = (mainConfig?: StorybookConfigRaw) => { * @returns - The package name of the builder. If not found, returns null. */ export const getBuilderPackageName = (mainConfig?: StorybookConfigRaw) => { - const packageNameOrPath = + const frameworkOptions = getFrameworkOptions(mainConfig); + + const frameworkBuilder = frameworkOptions?.builder; + + const frameworkBuilderName = + typeof frameworkBuilder === 'string' ? frameworkBuilder : frameworkBuilder?.options?.name; + + const coreBuilderName = typeof mainConfig?.core?.builder === 'string' ? mainConfig.core.builder : mainConfig?.core?.builder?.name; + const packageNameOrPath = coreBuilderName ?? frameworkBuilderName; + if (!packageNameOrPath) { return null; } + console.log({ packageNameOrPath }); + const normalizedPath = path.normalize(packageNameOrPath).replace(new RegExp(/\\/, 'g'), '/'); return builderPackages.find((pkg) => normalizedPath.endsWith(pkg)) || packageNameOrPath; }; +/** + * Given a Storybook configuration object, retrieves the configuration for the framework. + * @param mainConfig - The main Storybook configuration object to lookup. + * @returns - The configuration for the framework. If not found, returns null. + */ +export const getFrameworkOptions = ( + mainConfig?: StorybookConfigRaw +): Record | null => { + return typeof mainConfig?.framework === 'string' ? null : mainConfig?.framework?.options ?? null; +}; + /** * Returns a renderer package name given a framework package name. * @param frameworkPackageName - The package name of the framework to lookup. diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index 3adeff5e0ead..f63e77e79773 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -231,7 +231,7 @@ export async function runFixes({ if (result) { logger.info(`\n๐Ÿ”Ž found a '${chalk.cyan(f.id)}' migration:`); - const message = f.prompt(result); + const message = await f.prompt(result); logger.info( boxen(message, { diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 167340059828..5659216412a7 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -15,6 +15,7 @@ import type { } from '@storybook/core-common'; import type { SupportedFrameworks } from '@storybook/types'; import type { SupportedRenderers } from './project_types'; +import { CoreBuilder } from './project_types'; import { SupportedLanguage } from './project_types'; import { versions as storybookMonorepoPackages } from '@storybook/core-common'; @@ -168,6 +169,30 @@ const frameworkToRenderer: Record< 'web-components': 'web-components', }; +export const frameworkToDefaultBuilder: Record = { + angular: CoreBuilder.Webpack5, + ember: CoreBuilder.Webpack5, + 'html-vite': CoreBuilder.Vite, + 'html-webpack5': CoreBuilder.Webpack5, + nextjs: CoreBuilder.Webpack5, + 'preact-vite': CoreBuilder.Vite, + 'preact-webpack5': CoreBuilder.Webpack5, + qwik: CoreBuilder.Vite, + 'react-vite': CoreBuilder.Vite, + 'react-webpack5': CoreBuilder.Webpack5, + 'server-webpack5': CoreBuilder.Webpack5, + solid: CoreBuilder.Vite, + 'svelte-vite': CoreBuilder.Vite, + 'svelte-webpack5': CoreBuilder.Webpack5, + sveltekit: CoreBuilder.Vite, + 'vue-vite': CoreBuilder.Vite, + 'vue-webpack5': CoreBuilder.Webpack5, + 'vue3-vite': CoreBuilder.Vite, + 'vue3-webpack5': CoreBuilder.Webpack5, + 'web-components-vite': CoreBuilder.Vite, + 'web-components-webpack5': CoreBuilder.Webpack5, +}; + export async function copyTemplateFiles({ packageManager, renderer, diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index e781b3e16db8..3a5cda3781ef 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -77,6 +77,21 @@ export enum CoreBuilder { Vite = 'vite', } +export enum CoreWebpackCompilers { + Babel = 'babel', + SWC = 'swc', +} + +export const compilerNameToCoreCompiler: Record = { + '@storybook/addon-webpack5-compiler-babel': CoreWebpackCompilers.Babel, + '@storybook/addon-webpack5-compiler-swc': CoreWebpackCompilers.SWC, +}; + +export const builderNameToCoreBuilder: Record = { + '@storybook/builder-webpack5': CoreBuilder.Webpack5, + '@storybook/builder-vite': CoreBuilder.Vite, +}; + // The `& {}` bit allows for auto-complete, see: https://github.com/microsoft/TypeScript/issues/29729 export type Builder = CoreBuilder | (string & {}); diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 7a6bd8a99699..cc03d0ca7089 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -19,6 +19,9 @@ interface ServerChannel { } export interface CoreConfig { + /** + * @deprecated Use `framework.options.builder` instead. This will be removed in Storybook 9.0 + */ builder?: | BuilderName | { From 7c77bf9056d6f539f9b4daf2a17ccd25c3d374d0 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 12 Feb 2024 14:50:26 +0100 Subject: [PATCH 020/106] Adjust vitest.workspace.ts to fix Wallaby tooling --- code/vitest.workspace.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/vitest.workspace.ts b/code/vitest.workspace.ts index fda0ab58e871..c6d2efbc51ad 100644 --- a/code/vitest.workspace.ts +++ b/code/vitest.workspace.ts @@ -15,7 +15,7 @@ export default defineWorkspace([ export const vitestCommonConfig = defineConfig({ test: { clearMocks: true, - setupFiles: [resolve('./vitest-setup.ts')], + setupFiles: [resolve(__dirname, './vitest-setup.ts')], globals: true, }, }); From 02a7b1610d8a54588291b2bdede79eef017cd601 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 12 Feb 2024 14:52:25 +0100 Subject: [PATCH 021/106] Remove console.log --- code/lib/cli/src/automigrate/helpers/mainConfigFile.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts index 491bcbe219ef..2ba805c95614 100644 --- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts +++ b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts @@ -60,8 +60,6 @@ export const getBuilderPackageName = (mainConfig?: StorybookConfigRaw) => { return null; } - console.log({ packageNameOrPath }); - const normalizedPath = path.normalize(packageNameOrPath).replace(new RegExp(/\\/, 'g'), '/'); return builderPackages.find((pkg) => normalizedPath.endsWith(pkg)) || packageNameOrPath; From 82355f657006fae41bbff4d6642a6ca115601f05 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 12 Feb 2024 14:53:09 +0100 Subject: [PATCH 022/106] Undo prompt awaiting --- code/lib/cli/src/automigrate/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index f63e77e79773..3adeff5e0ead 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -231,7 +231,7 @@ export async function runFixes({ if (result) { logger.info(`\n๐Ÿ”Ž found a '${chalk.cyan(f.id)}' migration:`); - const message = await f.prompt(result); + const message = f.prompt(result); logger.info( boxen(message, { From 14d3d12c7c07abe9783ce70f8f7ec46ffda05baf Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 12 Feb 2024 14:54:06 +0100 Subject: [PATCH 023/106] Remove unnecessary comment --- code/lib/types/scripts/generate-available-frameworks.js | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/types/scripts/generate-available-frameworks.js b/code/lib/types/scripts/generate-available-frameworks.js index f3f0af79f6f1..dced66c06707 100644 --- a/code/lib/types/scripts/generate-available-frameworks.js +++ b/code/lib/types/scripts/generate-available-frameworks.js @@ -18,7 +18,6 @@ const run = async () => { .map((framework) => `'${framework}'`) .join(' | ')}; `; - // format fileContent by prettier const frameworksFile = path.join(__dirname, '..', 'src', 'modules', 'frameworks.ts'); const prettierConfig = await prettier.resolveConfig(frameworksFile); From 50ec83be51805490be5a15e2155633d1ae16763a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 12 Feb 2024 14:54:42 +0100 Subject: [PATCH 024/106] Remove deprecation --- code/lib/types/src/modules/core-common.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index cc03d0ca7089..7a6bd8a99699 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -19,9 +19,6 @@ interface ServerChannel { } export interface CoreConfig { - /** - * @deprecated Use `framework.options.builder` instead. This will be removed in Storybook 9.0 - */ builder?: | BuilderName | { From 074d5daca1c94729455e05f7f7ebc9abdf21b80c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 15:06:05 +0100 Subject: [PATCH 025/106] Add remove argtypes-regex automigration --- code/lib/cli/package.json | 1 + code/lib/cli/src/automigrate/fixes/index.ts | 2 + .../fixes/remove-argtypes-regex.ts | 78 +++++++++++++++++++ code/lib/codemod/package.json | 2 + .../src/transforms/find-implicit-spies.ts | 50 ++++++++++++ code/yarn.lock | 1 + 6 files changed, 134 insertions(+) create mode 100644 code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts create mode 100644 code/lib/codemod/src/transforms/find-implicit-spies.ts diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 2ea8e20d58b0..d691e0323f7f 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -56,6 +56,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@babel/core": "^7.23.0", "@babel/types": "^7.23.0", "@ndelangen/get-tarball": "^3.0.7", "@storybook/codemod": "workspace:*", diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 27f8a80b3140..ff060341a7c8 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -20,6 +20,7 @@ import { wrapRequire } from './wrap-require'; import { reactDocgen } from './react-docgen'; import { removeReactDependency } from './prompt-remove-react'; import { storyshotsMigration } from './storyshots-migration'; +import { removeArgtypesRegex } from './remove-argtypes-regex'; export * from '../types'; @@ -34,6 +35,7 @@ export const allFixes: Fix[] = [ sbBinary, sbScripts, incompatibleAddons, + removeArgtypesRegex, removedGlobalClientAPIs, mdx1to2, mdxgfm, diff --git a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts new file mode 100644 index 000000000000..5bdc46071881 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts @@ -0,0 +1,78 @@ +import type { Fix } from '../types'; +import * as fs from 'node:fs/promises'; +import * as babel from '@babel/core'; +import { BabelFile, NodePath } from '@babel/core'; +import { babelParse } from '@storybook/csf-tools'; +import dedent from 'ts-dedent'; +import chalk from 'chalk'; + +export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPath: string }> = { + id: 'remove-argtypes-regex', + promptOnly: true, + async check({ previewConfigPath }) { + if (!previewConfigPath) return null; + + const previewFile = await fs.readFile(previewConfigPath, { encoding: 'utf-8' }); + + // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 + const file: BabelFile = new babel.File( + { filename: previewConfigPath }, + { code: previewFile, ast: babelParse(previewFile) } + ); + + let argTypesRegex; + + file.path.traverse({ + Identifier: (path) => { + if (path.node.name === 'argTypesRegex') { + argTypesRegex = path; + } + }, + }); + + return argTypesRegex ? { argTypesRegex, previewConfigPath } : null; + }, + prompt({ argTypesRegex, previewConfigPath }) { + const snippet = dedent` + import { fn } from '@storybook/test'; + export default { + args: { onClick: fn() }, // will log to the action panel when clicked + };`; + + // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 + const file: BabelFile = new babel.File( + { file: 'story.tsx' }, + { code: snippet, ast: babelParse(snippet) } + ); + + let formattedSnippet; + file.path.traverse({ + Identifier: (path) => { + if (path.node.name === 'fn') { + formattedSnippet = path.buildCodeFrameError(``).message; + } + }, + }); + + return dedent` + ${chalk.bold('Attention')}: We've detected that you're using argTypesRegex: + + ${argTypesRegex.buildCodeFrameError(`${previewConfigPath}`).message} + + In Storybook 8, we recommend removing this regex, and assigning explicit spies with the ${chalk.cyan( + 'fn' + )} function instead: + ${formattedSnippet} + + Even if you keep using the argTypesRegex, you will need to above pattern if you want to use spies in your play function. + Implicit spies (based on a combination of argTypesRegex and docgen) is not supported anymore in Storybook 8. + + Use the following command to check for spy usages in your play functions: + ${chalk.cyan( + 'npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"' + )} + + Make sure to assign an explicit ${chalk.cyan('fn')} to your args for those usages. + `; + }, +}; diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 04fa46508190..303ab36f49de 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -29,6 +29,7 @@ "./dist/transforms/add-component-parameters.js": "./dist/transforms/add-component-parameters.js", "./dist/transforms/csf-2-to-3.js": "./dist/transforms/csf-2-to-3.js", "./dist/transforms/csf-hoist-story-annotations.js": "./dist/transforms/csf-hoist-story-annotations.js", + "./dist/transforms/find-implicit-spies.js": "./dist/transforms/find-implicit-spies.js", "./dist/transforms/move-builtin-addons.js": "./dist/transforms/move-builtin-addons.js", "./dist/transforms/mdx-to-csf.js": "./dist/transforms/mdx-to-csf.js", "./dist/transforms/storiesof-to-csf.js": "./dist/transforms/storiesof-to-csf.js", @@ -92,6 +93,7 @@ "./src/transforms/add-component-parameters.js", "./src/transforms/csf-2-to-3.ts", "./src/transforms/csf-hoist-story-annotations.js", + "./src/transforms/find-implicit-spies.ts", "./src/transforms/mdx-to-csf.ts", "./src/transforms/move-builtin-addons.js", "./src/transforms/storiesof-to-csf.js", diff --git a/code/lib/codemod/src/transforms/find-implicit-spies.ts b/code/lib/codemod/src/transforms/find-implicit-spies.ts new file mode 100644 index 000000000000..594bb1cfc1c8 --- /dev/null +++ b/code/lib/codemod/src/transforms/find-implicit-spies.ts @@ -0,0 +1,50 @@ +/* eslint-disable no-underscore-dangle */ +import type { FileInfo } from 'jscodeshift'; +import { loadCsf } from '@storybook/csf-tools'; +import type { BabelFile } from '@babel/core'; +import * as babel from '@babel/core'; + +function findImplicitSpies(path: babel.NodePath, file: string) { + path.traverse({ + Identifier: (identifier) => { + if (/^on[A-Z].*/.test(identifier.node.name)) { + console.warn(identifier.buildCodeFrameError(`${file} Possible implicit spy found`).message); + } + }, + }); +} + +export default async function transform(info: FileInfo) { + const csf = loadCsf(info.source, { makeTitle: (title) => title }); + const fileNode = csf._ast; + // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 + const file: BabelFile = new babel.File( + { filename: info.path }, + { code: info.source, ast: fileNode } + ); + + file.path.traverse({ + // CSF2 play function Story.play = + AssignmentExpression: (path) => { + const left = path.get('left'); + if (!left.isMemberExpression()) return; + + const property = left.get('property'); + if (property.isIdentifier() && property.node.name === 'play') { + findImplicitSpies(path, info.path); + } + }, + + // CSF3 play function: const Story = {play: () => {} }; + ObjectProperty: (path) => { + const key = path.get('key'); + if (key.isIdentifier() && key.node.name === 'play') { + findImplicitSpies(path, info.path); + } + }, + }); + + return; +} + +export const parser = 'tsx'; diff --git a/code/yarn.lock b/code/yarn.lock index 755a51216c17..d8200e4a3cd4 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5354,6 +5354,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" dependencies: + "@babel/core": "npm:^7.23.0" "@babel/types": "npm:^7.23.0" "@ndelangen/get-tarball": "npm:^3.0.7" "@storybook/codemod": "workspace:*" From ce77d9f97e220af288d151e510f0383afb136522 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 15:27:28 +0100 Subject: [PATCH 026/106] Add a test --- .../__tests__/find-implicit-spies.test.ts | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts diff --git a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts new file mode 100644 index 000000000000..0d4cbbe3cee6 --- /dev/null +++ b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts @@ -0,0 +1,43 @@ +import { beforeEach, expect, test, vi } from 'vitest'; +import transform from '../find-implicit-spies'; +import dedent from 'ts-dedent'; +import ansiRegex from 'ansi-regex'; + +expect.addSnapshotSerializer({ + print: (val, print) => print((val as string).replace(ansiRegex(), '')), + test: (value) => typeof value === 'string' && ansiRegex().test(value), +}); + +const tsTransform = async (source: string) => transform({ source, path: 'Component.stories.tsx' }); + +const warn = vi.spyOn(console, 'warn'); + +beforeEach(() => { + warn.mockImplementation(() => {}); +}); + +test('replace jest and testing-library with the test package', async () => { + const input = dedent` + Interactions.play = async ({ args }) => { + await userEvent.click(screen.getByRole("button")); + await expect(args.onButtonIconClick).toHaveBeenCalled(); + }; + + `; + + await tsTransform(input); + + expect(warn.mock.calls).toMatchInlineSnapshot(` + [ + [ + "Component.stories.tsx Possible implicit spy found + 1 | Interactions.play = async ({ args }) => { + 2 | await userEvent.click(screen.getByRole("button")); + > 3 | await expect(args.onButtonIconClick).toHaveBeenCalled(); + | ^^^^^^^^^^^^^^^^^ + 4 | }; + 5 |", + ], + ] + `); +}); From dcb87ef8fbb929fb4134bcc9dbf09d0cef6e9c4c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 15:43:47 +0100 Subject: [PATCH 027/106] Fix eslint --- code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts index 5bdc46071881..153d988630c9 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts @@ -1,7 +1,7 @@ import type { Fix } from '../types'; import * as fs from 'node:fs/promises'; import * as babel from '@babel/core'; -import { BabelFile, NodePath } from '@babel/core'; +import type { BabelFile, NodePath } from '@babel/core'; import { babelParse } from '@storybook/csf-tools'; import dedent from 'ts-dedent'; import chalk from 'chalk'; From 24f232dd4b981da83f59a313966bacc2e0e8b785 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 12 Feb 2024 16:11:52 +0100 Subject: [PATCH 028/106] Update frameworks --- code/lib/types/src/modules/frameworks.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/lib/types/src/modules/frameworks.ts b/code/lib/types/src/modules/frameworks.ts index 0785763f46e5..c1ea25abe7b0 100644 --- a/code/lib/types/src/modules/frameworks.ts +++ b/code/lib/types/src/modules/frameworks.ts @@ -14,8 +14,6 @@ export type SupportedFrameworks = | 'svelte-vite' | 'svelte-webpack5' | 'sveltekit' - | 'vue-vite' - | 'vue-webpack5' | 'vue3-vite' | 'vue3-webpack5' | 'web-components-vite' From 000b7dec927df519735cb8bb67fb0dcf9d46aaff Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 12 Feb 2024 16:56:29 +0100 Subject: [PATCH 029/106] Update helpers to remove vue-vite vue-webpack5 keys from frameworkToRenderer --- code/lib/cli/src/helpers.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 5659216412a7..09249f2e5523 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -152,8 +152,6 @@ const frameworkToRenderer: Record< 'svelte-vite': 'svelte', 'svelte-webpack5': 'svelte', sveltekit: 'svelte', - 'vue-vite': 'vue', - 'vue-webpack5': 'vue', 'vue3-vite': 'vue3', 'vue3-webpack5': 'vue3', 'web-components-vite': 'web-components', @@ -185,8 +183,6 @@ export const frameworkToDefaultBuilder: Record 'svelte-vite': CoreBuilder.Vite, 'svelte-webpack5': CoreBuilder.Webpack5, sveltekit: CoreBuilder.Vite, - 'vue-vite': CoreBuilder.Vite, - 'vue-webpack5': CoreBuilder.Webpack5, 'vue3-vite': CoreBuilder.Vite, 'vue3-webpack5': CoreBuilder.Webpack5, 'web-components-vite': CoreBuilder.Vite, From 671c325c9a8ee35974385a09493ea85412a03fa5 Mon Sep 17 00:00:00 2001 From: Rob Waight <43173714+rwaight@users.noreply.github.com> Date: Mon, 12 Feb 2024 11:17:37 -0600 Subject: [PATCH 030/106] Update import markdown example --- docs/api/doc-block-markdown.md | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/docs/api/doc-block-markdown.md b/docs/api/doc-block-markdown.md index 5842a583cc42..e37ba196ee97 100644 --- a/docs/api/doc-block-markdown.md +++ b/docs/api/doc-block-markdown.md @@ -24,22 +24,12 @@ import { Button } from "@storybook/design-system"; ```md + + // DON'T do this, will error import ReadMe from './README.md'; -``` - - - -```md // DO this, will work import ReadMe from './README.md?raw'; -``` - - - -```md -// Importing a raw markdown file -import ReadMe from './README.md?raw'; import { Markdown } from '@storybook/blocks'; From dbd4ea5a10f43755a4f95632b271afb9309332ae Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 13 Feb 2024 10:55:59 +0100 Subject: [PATCH 031/106] Pass shouldRemoveSWCFlag option also when Next.js is detected --- .../fixes/webpack5-compiler-setup.test.ts | 25 ++++++++++++++++ .../fixes/webpack5-compiler-setup.ts | 30 +++++++++++-------- 2 files changed, 43 insertions(+), 12 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts index 580a5b8324e6..d7f7e9564389 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -236,6 +236,31 @@ describe('check function', () => { }); }); + it('should return isNextJs: true AND should return shouldRemoveSWCFlag: true when useSWC flag is set', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/nextjs', + options: { + builder: { + useSWC: true, + }, + }, + }, + }, + }); + + expect(result).contains({ + shouldRemoveSWCFlag: true, + isNextJs: true, + }); + }); + it('should return isNextJs: false when the framework is not nextjs', async () => { const result = await check({ packageManager: { diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index b895d4b6ef12..b72e21ac2ca1 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -81,11 +81,15 @@ export const webpack5Migration: Fix = { ([, coreCompiler]) => coreCompiler === compiler )?.[0]; + const shouldRemoveSWCFlag = frameworkOptions?.builder + ? 'useSWC' in frameworkOptions.builder + : false; + if (frameworkName === 'nextjs') { return { compiler: undefined, compilerPackageName: undefined, - shouldRemoveSWCFlag: false, + shouldRemoveSWCFlag, isNextJs: true, }; } @@ -93,7 +97,7 @@ export const webpack5Migration: Fix = { return { compiler, compilerPackageName, - shouldRemoveSWCFlag: frameworkOptions?.builder ? 'useSWC' in frameworkOptions.builder : false, + shouldRemoveSWCFlag, isNextJs: false, }; }, @@ -109,16 +113,18 @@ export const webpack5Migration: Fix = { if (isNextJs) { message.push(dedent` - Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself. - If you have a ${chalk.yellow( - 'babel.config.js' - )} file in your project, Storybook will use Babel as the compiler. - If you have a ${chalk.yellow( - 'babel.config.js' - )} file in your project and you have set ${chalk.yellow( - 'experimental.forceSwcTransforms = true' - )} in your next.config.js file, Storybook will use SWC as the compiler. - If you don't have a babel.config.js file in your project, Storybook will use SWC as the compiler. + Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself:\n + - If you have a ${chalk.yellow( + 'babel.config.js' + )} file in your project, Storybook will use Babel as the compiler. + - If you have a ${chalk.yellow('babel.config.js')} file in your project and you have set + ${chalk.yellow('experimental.forceSwcTransforms = true')} in your ${chalk.yellow( + 'next.config.js' + )} file, + Storybook will use SWC as the compiler. + - If you don't have a ${chalk.yellow( + 'babel.config.js' + )} file in your project, Storybook will use SWC as the compiler. `); } else if (compilerPackageName) { message.push(dedent` From 359f4dc8dbc7b2a25cdbad25ee65105f1dd957c2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 13 Feb 2024 12:55:16 +0100 Subject: [PATCH 032/106] Update snapshot --- .../automigrate/fixes/webpack5-compiler-setup.test.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts index d7f7e9564389..1de040d2a6c6 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -426,10 +426,13 @@ describe('check function', () => { "We need to update your Storybook configuration for Webpack 5. The framework.options.builder.useSWC flag will be removed. - Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself. - If you have a babel.config.js file in your project, Storybook will use Babel as the compiler. - If you have a babel.config.js file in your project and you have set experimental.forceSwcTransforms = true in your next.config.js file, Storybook will use SWC as the compiler. - If you don't have a babel.config.js file in your project, Storybook will use SWC as the compiler." + Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself: + + - If you have a babel.config.js file in your project, Storybook will use Babel as the compiler. + - If you have a babel.config.js file in your project and you have set + experimental.forceSwcTransforms = true in your next.config.js file, + Storybook will use SWC as the compiler. + - If you don't have a babel.config.js file in your project, Storybook will use SWC as the compiler." `); }); From 64a160b7db2b44c0b02482e48374a60e5ebd4947 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 13 Feb 2024 13:59:01 +0100 Subject: [PATCH 033/106] Text formatting --- .../cli/src/automigrate/fixes/webpack5-compiler-setup.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index b72e21ac2ca1..1411b30ddfcf 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -163,9 +163,9 @@ async function askUserForCompilerChoice() { const response = await prompts<'compiler'>({ type: 'select', name: 'compiler', - message: `Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project: -Babel - A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. -SWC - Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility. + message: `Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project:\n + - Babel: A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. + - SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility.\n Which compiler would you like to use?`, choices: [ { From 87bf8f0d5492ce7a25a86b8f69670db85ff49579 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 13 Feb 2024 23:10:49 +0100 Subject: [PATCH 034/106] use aliases instead of dedupe to deduplicate storybook dependencies in vite --- code/addons/docs/src/preset.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 45c832b5fe42..4980763320fb 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -149,8 +149,14 @@ export const viteFinal = async (config: any, options: Options) => { react, 'react-dom': reactDom, '@mdx-js/react': mdx, + /** + * The following aliases are used to ensure a single instance of these packages are used in situations where they are duplicated + * The packages will be duplicated by the package manager when the user has react installed with another version than 18.2.0 + */ + '@storybook/theming': require.resolve('@storybook/theming'), + '@storybook/components': require.resolve('@storybook/components'), + '@storybook/blocks': require.resolve('@storybook/blocks'), }, - dedupe: ['@storybook/theming', '@storybook/components', '@storybook/blocks'], }, }), }; From c64041e4b66462715eb4c8ca22c4cb1afd0ef956 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 13 Feb 2024 23:45:41 +0100 Subject: [PATCH 035/106] add missing dirname to require.resolve calls --- code/addons/docs/src/preset.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 4980763320fb..68c7efb39f8b 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -153,9 +153,9 @@ export const viteFinal = async (config: any, options: Options) => { * The following aliases are used to ensure a single instance of these packages are used in situations where they are duplicated * The packages will be duplicated by the package manager when the user has react installed with another version than 18.2.0 */ - '@storybook/theming': require.resolve('@storybook/theming'), - '@storybook/components': require.resolve('@storybook/components'), - '@storybook/blocks': require.resolve('@storybook/blocks'), + '@storybook/theming': dirname(require.resolve('@storybook/theming')), + '@storybook/components': dirname(require.resolve('@storybook/components')), + '@storybook/blocks': dirname(require.resolve('@storybook/blocks')), }, }, }), From 152d96d1d8a84043bbd99fa85f0389d8f39f052d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 14 Feb 2024 15:37:01 +0100 Subject: [PATCH 036/106] Do add spy to action for explicit actions --- code/addons/actions/src/runtime/action.ts | 1 + code/addons/interactions/src/preview.ts | 52 +++++++++++++++-------- 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/code/addons/actions/src/runtime/action.ts b/code/addons/actions/src/runtime/action.ts index f6779d1a1a64..a647a8eb0d1b 100644 --- a/code/addons/actions/src/runtime/action.ts +++ b/code/addons/actions/src/runtime/action.ts @@ -103,6 +103,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti channel.emit(EVENT_ID, actionDisplayToEmit); }; handler.isAction = true; + handler.implicit = options.implicit; return handler; } diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index d751cbf7bc58..ef10d79b3ca0 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -1,22 +1,41 @@ /* eslint-disable no-underscore-dangle */ -import type { - Args, - LoaderFunction, - PlayFunction, - PlayFunctionContext, - StepLabel, -} from '@storybook/types'; +import type { Args, ArgsEnhancer, Renderer } from '@storybook/types'; import { instrument } from '@storybook/instrumenter'; +import { fn } from '@storybook/test'; -export const { step: runStep } = instrument( - { - step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => - play(context), - }, - { intercept: true } -); +const addSpies = (value: unknown, depth = 0): any => { + // Make sure to not get in infinite loops with self referencing args + if (depth > 5) return value; -const instrumentSpies: LoaderFunction = ({ initialArgs }) => { + if (value == null) return value; + if ( + typeof value === 'function' && + 'isAction' in value && + value.isAction && + !('implicit' in value && value.implicit) && + !('_isMockFunction' in value && value._isMockFunction) + ) { + return fn(value as any); + } + + if (Array.isArray(value)) { + return value.map((item) => addSpies(item, depth++)); + } + + if (typeof value === 'object') { + // We have to mutate the original object for this to survive HMR. + + for (const [k, v] of Object.entries(value)) { + (value as Record)[k] = addSpies(v, depth++); + } + return value; + } + return value; +}; + +const wrapActionsInSpyFns: ArgsEnhancer = ({ initialArgs }) => addSpies(initialArgs); + +const instrumentSpies: ArgsEnhancer = ({ initialArgs }) => { const argTypesWithAction = Object.entries(initialArgs).filter( ([, value]) => typeof value === 'function' && @@ -29,13 +48,12 @@ const instrumentSpies: LoaderFunction = ({ initialArgs }) => { const instrumented = instrument({ [key]: () => value }, { retain: true })[key]; acc[key] = instrumented(); // this enhancer is being called multiple times - value._instrumented = true; return acc; }, {} as Args); }; -export const argsEnhancers = [instrumentSpies]; +export const argsEnhancers = [wrapActionsInSpyFns, instrumentSpies]; export const parameters = { throwPlayFunctionExceptions: false, From 846114ba15690d6d522b13361f87c22147e1e4ac Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 14 Feb 2024 18:08:39 +0100 Subject: [PATCH 037/106] print a clear warning/instruction when users encounter https://github.com/storybookjs/storybook/issues/23972 --- .../core-common/src/utils/load-main-config.ts | 52 ++++++++++++++++++- code/lib/core-server/src/build-dev.ts | 2 +- 2 files changed, 51 insertions(+), 3 deletions(-) diff --git a/code/lib/core-common/src/utils/load-main-config.ts b/code/lib/core-common/src/utils/load-main-config.ts index 492ede4f669d..5d418e979b46 100644 --- a/code/lib/core-common/src/utils/load-main-config.ts +++ b/code/lib/core-common/src/utils/load-main-config.ts @@ -1,7 +1,9 @@ -import path from 'path'; +import path, { relative } from 'path'; import type { StorybookConfig } from '@storybook/types'; import { serverRequire, serverResolve } from './interpret-require'; import { validateConfigurationFiles } from './validate-configuration-files'; +import { readFile } from 'fs/promises'; +import chalk from 'chalk'; export async function loadMainConfig({ configDir = '.storybook', @@ -18,5 +20,51 @@ export async function loadMainConfig({ delete require.cache[mainJsPath]; } - return serverRequire(mainJsPath); + try { + const out = await serverRequire(mainJsPath); + return out; + } catch (e) { + if (!(e instanceof Error)) { + throw e; + } + if (e.message.match(/Cannot use import statement outside a module/)) { + const a = relative(process.cwd(), mainJsPath); + const line = e.stack?.match(new RegExp(`${a}:(\\d+):(\\d+)`))?.[1]; + const message = [ + `Storybook failed to load ${a}..`, + '', + `It looks like the file tried to load/import an ESM only module.`, + `Support for this is currently limited in ${a}.`, + `You can import ESM modules in your main file, but only as imperative imports.`, + '', + ]; + + if (line) { + const contents = await readFile(mainJsPath, 'utf-8'); + const lines = contents.split('\n'); + const num = parseInt(line, 10) - 1; + + message.push( + chalk.white( + `In your ${chalk.yellow(a)} file, this line threw an error: ${chalk.bold.cyan( + num + )}, which looks like this:` + ), + chalk.grey(lines[num]) + ); + } + message.push( + '', + `Convert the declarative import to an imperative import where they are used.` + ); + + const out = new Error(message.join('\n')); + + delete out.stack; + + throw out; + } + throw e; + // + } } diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 67990ff2d430..4cb0de5efca6 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -15,7 +15,7 @@ import { telemetry, oneWayHash } from '@storybook/telemetry'; import { join, relative, resolve } from 'path'; import { deprecate } from '@storybook/node-logger'; -import dedent from 'ts-dedent'; +import { dedent } from 'ts-dedent'; import { readFile } from 'fs-extra'; import { MissingBuilderError } from '@storybook/core-events/server-errors'; import { storybookDevServer } from './dev-server'; From dbe2b595fb4629a690c019d6c4a16f246af73ba9 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 15 Feb 2024 10:44:38 +0100 Subject: [PATCH 038/106] Addon Themes: make type generic less strict --- code/addons/themes/src/decorators/class-name.decorator.tsx | 3 ++- code/addons/themes/src/decorators/data-attribute.decorator.tsx | 3 ++- code/addons/themes/src/decorators/provider.decorator.tsx | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/code/addons/themes/src/decorators/class-name.decorator.tsx b/code/addons/themes/src/decorators/class-name.decorator.tsx index ccbe4fbf7f31..0306c5ea9912 100644 --- a/code/addons/themes/src/decorators/class-name.decorator.tsx +++ b/code/addons/themes/src/decorators/class-name.decorator.tsx @@ -13,7 +13,8 @@ const DEFAULT_ELEMENT_SELECTOR = 'html'; const classStringToArray = (classString: string) => classString.split(' ').filter(Boolean); -export const withThemeByClassName = ({ +// TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. any> +export const withThemeByClassName = ({ themes, defaultTheme, parentSelector = DEFAULT_ELEMENT_SELECTOR, diff --git a/code/addons/themes/src/decorators/data-attribute.decorator.tsx b/code/addons/themes/src/decorators/data-attribute.decorator.tsx index 546885db8d62..4009fd9073a0 100644 --- a/code/addons/themes/src/decorators/data-attribute.decorator.tsx +++ b/code/addons/themes/src/decorators/data-attribute.decorator.tsx @@ -12,7 +12,8 @@ export interface DataAttributeStrategyConfiguration { const DEFAULT_ELEMENT_SELECTOR = 'html'; const DEFAULT_DATA_ATTRIBUTE = 'data-theme'; -export const withThemeByDataAttribute = ({ +// TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. any> +export const withThemeByDataAttribute = ({ themes, defaultTheme, parentSelector = DEFAULT_ELEMENT_SELECTOR, diff --git a/code/addons/themes/src/decorators/provider.decorator.tsx b/code/addons/themes/src/decorators/provider.decorator.tsx index 6063034eb859..0466a29e6ac8 100644 --- a/code/addons/themes/src/decorators/provider.decorator.tsx +++ b/code/addons/themes/src/decorators/provider.decorator.tsx @@ -16,7 +16,8 @@ export interface ProviderStrategyConfiguration { const pluckThemeFromKeyPairTuple = ([_, themeConfig]: [string, Theme]): Theme => themeConfig; -export const withThemeFromJSXProvider = ({ +// TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. any> +export const withThemeFromJSXProvider = ({ Provider, GlobalStyles, defaultTheme, From dc879b47d0d2d7f97f61104f0d39219f8ad1158c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Feb 2024 12:22:21 +0100 Subject: [PATCH 039/106] Do add spy to action for explicit actions --- code/addons/interactions/src/preview.ts | 50 +++++++------------ .../template/stories/basics.stories.ts | 1 + code/lib/instrumenter/src/instrumenter.ts | 4 +- 3 files changed, 22 insertions(+), 33 deletions(-) diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index ef10d79b3ca0..5428b58d28ee 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -1,59 +1,45 @@ -/* eslint-disable no-underscore-dangle */ -import type { Args, ArgsEnhancer, Renderer } from '@storybook/types'; -import { instrument } from '@storybook/instrumenter'; -import { fn } from '@storybook/test'; +import type { ArgsEnhancer, Renderer } from '@storybook/types'; +import { fn, isMockFunction } from '@storybook/test'; -const addSpies = (value: unknown, depth = 0): any => { +const traverseArgs = (value: unknown, depth = 0, key?: string): any => { // Make sure to not get in infinite loops with self referencing args if (depth > 5) return value; - if (value == null) return value; + if (isMockFunction(value)) { + // Makes sure we get the arg name in the interactions panel + if (key) value.mockName(key); + return value; + } + + // wrap explicit actions in a spy if ( typeof value === 'function' && 'isAction' in value && value.isAction && - !('implicit' in value && value.implicit) && - !('_isMockFunction' in value && value._isMockFunction) + !('implicit' in value && value.implicit) ) { - return fn(value as any); + const mock = fn(value as any); + if (key) mock.mockName(key); + return mock; } if (Array.isArray(value)) { - return value.map((item) => addSpies(item, depth++)); + return value.map((item) => traverseArgs(item, depth++)); } if (typeof value === 'object') { // We have to mutate the original object for this to survive HMR. - for (const [k, v] of Object.entries(value)) { - (value as Record)[k] = addSpies(v, depth++); + (value as Record)[k] = traverseArgs(v, depth++, key); } return value; } return value; }; -const wrapActionsInSpyFns: ArgsEnhancer = ({ initialArgs }) => addSpies(initialArgs); - -const instrumentSpies: ArgsEnhancer = ({ initialArgs }) => { - const argTypesWithAction = Object.entries(initialArgs).filter( - ([, value]) => - typeof value === 'function' && - '_isMockFunction' in value && - value._isMockFunction && - !value._instrumented - ); - - return argTypesWithAction.reduce((acc, [key, value]) => { - const instrumented = instrument({ [key]: () => value }, { retain: true })[key]; - acc[key] = instrumented(); - // this enhancer is being called multiple times - value._instrumented = true; - return acc; - }, {} as Args); -}; +const wrapActionsInSpyFns: ArgsEnhancer = ({ initialArgs }) => traverseArgs(initialArgs); -export const argsEnhancers = [wrapActionsInSpyFns, instrumentSpies]; +export const argsEnhancers = [wrapActionsInSpyFns]; export const parameters = { throwPlayFunctionExceptions: false, diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index cf6e34eddf2c..8c1cd0a94922 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -8,6 +8,7 @@ import { waitForElementToBeRemoved, within, } from '@storybook/test'; +import { action } from '@storybook/addon-actions'; export default { component: globalThis.Components.Form, diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts index 71713bc50a6a..3eeb6ea86ed8 100644 --- a/code/lib/instrumenter/src/instrumenter.ts +++ b/code/lib/instrumenter/src/instrumenter.ts @@ -432,7 +432,9 @@ export class Instrumenter { return { __element__: { prefix, localName, id, classNames, innerText } }; } if (typeof value === 'function') { - return { __function__: { name: value.name } }; + return { + __function__: { name: 'getMockName' in value ? value.getMockName() : value.name }, + }; } if (typeof value === 'symbol') { return { __symbol__: { description: value.description } }; From 0ec21a2aa87bc5c5e9355ea1c4af91bd33ede770 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Feb 2024 12:50:35 +0100 Subject: [PATCH 040/106] Only traverse plain objects --- code/addons/interactions/src/preview.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index 5428b58d28ee..86717c09b46a 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -27,7 +27,7 @@ const traverseArgs = (value: unknown, depth = 0, key?: string): any => { return value.map((item) => traverseArgs(item, depth++)); } - if (typeof value === 'object') { + if (typeof value === 'object' && value.constructor === Object) { // We have to mutate the original object for this to survive HMR. for (const [k, v] of Object.entries(value)) { (value as Record)[k] = traverseArgs(v, depth++, key); From b0955e630266160da5a86ee97d81b57fa231b7c6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Feb 2024 13:54:37 +0100 Subject: [PATCH 041/106] make message more useful --- .../lib/core-common/src/utils/load-main-config.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/code/lib/core-common/src/utils/load-main-config.ts b/code/lib/core-common/src/utils/load-main-config.ts index 5d418e979b46..85e3e9b0791b 100644 --- a/code/lib/core-common/src/utils/load-main-config.ts +++ b/code/lib/core-common/src/utils/load-main-config.ts @@ -28,14 +28,14 @@ export async function loadMainConfig({ throw e; } if (e.message.match(/Cannot use import statement outside a module/)) { - const a = relative(process.cwd(), mainJsPath); - const line = e.stack?.match(new RegExp(`${a}:(\\d+):(\\d+)`))?.[1]; + const location = relative(process.cwd(), mainJsPath); + const line = e.stack?.match(new RegExp(`${location}:(\\d+):(\\d+)`))?.[1]; const message = [ - `Storybook failed to load ${a}..`, + `Storybook failed to load ${location}..`, '', `It looks like the file tried to load/import an ESM only module.`, - `Support for this is currently limited in ${a}.`, - `You can import ESM modules in your main file, but only as imperative imports.`, + `Support for this is currently limited in ${location}.`, + `You can import ESM modules in your main file, but only as dynamic import.`, '', ]; @@ -46,7 +46,7 @@ export async function loadMainConfig({ message.push( chalk.white( - `In your ${chalk.yellow(a)} file, this line threw an error: ${chalk.bold.cyan( + `In your ${chalk.yellow(location)} file, this line threw an error: ${chalk.bold.cyan( num )}, which looks like this:` ), @@ -55,7 +55,8 @@ export async function loadMainConfig({ } message.push( '', - `Convert the declarative import to an imperative import where they are used.` + chalk.white(`Convert the dynamic import to an dynamic import where they are used.`), + chalk.white(`Example:`) + ' ' + chalk.gray(`await import();`) ); const out = new Error(message.join('\n')); From f70ed9e6f9a2bab92e8ca76f05dc915f91a5c9c7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Feb 2024 14:18:27 +0100 Subject: [PATCH 042/106] use server error class --- .../core-common/src/utils/load-main-config.ts | 39 +++++----------- code/lib/core-events/package.json | 1 + .../core-events/src/errors/server-errors.ts | 44 +++++++++++++++++++ code/yarn.lock | 1 + 4 files changed, 58 insertions(+), 27 deletions(-) diff --git a/code/lib/core-common/src/utils/load-main-config.ts b/code/lib/core-common/src/utils/load-main-config.ts index 85e3e9b0791b..b61c51dfa832 100644 --- a/code/lib/core-common/src/utils/load-main-config.ts +++ b/code/lib/core-common/src/utils/load-main-config.ts @@ -3,7 +3,7 @@ import type { StorybookConfig } from '@storybook/types'; import { serverRequire, serverResolve } from './interpret-require'; import { validateConfigurationFiles } from './validate-configuration-files'; import { readFile } from 'fs/promises'; -import chalk from 'chalk'; +import { MainFileESMOnlyImportError } from '@storybook/core-events/server-errors'; export async function loadMainConfig({ configDir = '.storybook', @@ -29,37 +29,22 @@ export async function loadMainConfig({ } if (e.message.match(/Cannot use import statement outside a module/)) { const location = relative(process.cwd(), mainJsPath); - const line = e.stack?.match(new RegExp(`${location}:(\\d+):(\\d+)`))?.[1]; - const message = [ - `Storybook failed to load ${location}..`, - '', - `It looks like the file tried to load/import an ESM only module.`, - `Support for this is currently limited in ${location}.`, - `You can import ESM modules in your main file, but only as dynamic import.`, - '', - ]; + const numFromStack = e.stack?.match(new RegExp(`${location}:(\\d+):(\\d+)`))?.[1]; + let num; + let line; - if (line) { + if (numFromStack) { const contents = await readFile(mainJsPath, 'utf-8'); const lines = contents.split('\n'); - const num = parseInt(line, 10) - 1; - - message.push( - chalk.white( - `In your ${chalk.yellow(location)} file, this line threw an error: ${chalk.bold.cyan( - num - )}, which looks like this:` - ), - chalk.grey(lines[num]) - ); + num = parseInt(numFromStack, 10) - 1; + line = lines[num]; } - message.push( - '', - chalk.white(`Convert the dynamic import to an dynamic import where they are used.`), - chalk.white(`Example:`) + ' ' + chalk.gray(`await import();`) - ); - const out = new Error(message.join('\n')); + const out = new MainFileESMOnlyImportError({ + line, + location, + num, + }); delete out.stack; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index e582c124ddd9..ce38d8041438 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -81,6 +81,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { + "chalk": "^4.1.0", "typescript": "^5.3.2" }, "publishConfig": { diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 2b522ad291f3..c4414189a96e 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -1,3 +1,4 @@ +import chalk from 'chalk'; import dedent from 'ts-dedent'; import { StorybookError } from './storybook-error'; @@ -394,6 +395,49 @@ export class NoMatchingExportError extends StorybookError { } } +export class MainFileESMOnlyImportError extends StorybookError { + readonly category = Category.CORE_SERVER; + + readonly code = 5; + + constructor( + public data: { location: string; line: string | undefined; num: number | undefined } + ) { + super(); + } + + template() { + const message = [ + `Storybook failed to load ${location}..`, + '', + `It looks like the file tried to load/import an ESM only module.`, + `Support for this is currently limited in ${location}.`, + `You can import ESM modules in your main file, but only as dynamic import.`, + '', + ]; + if (this.data.line) { + message.push( + chalk.white( + `In your ${chalk.yellow( + this.data.location + )} file, this line threw an error: ${chalk.bold.cyan( + this.data.num + )}, which looks like this:` + ), + chalk.grey(this.data.line) + ); + } + + message.push( + '', + chalk.white(`Convert the dynamic import to an dynamic import where they are used.`), + chalk.white(`Example:`) + ' ' + chalk.gray(`await import();`) + ); + + return message.join('\n'); + } +} + export class GenerateNewProjectOnInitError extends StorybookError { readonly category = Category.CLI_INIT; diff --git a/code/yarn.lock b/code/yarn.lock index 755a51216c17..11a4a61e2df2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5528,6 +5528,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: + chalk: "npm:^4.1.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" languageName: unknown From a9f8b34469322cea9f9cc251e4fb3eab0978ecfd Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Feb 2024 14:21:23 +0100 Subject: [PATCH 043/106] change to named exports --- code/lib/core-events/src/errors/server-errors.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index c4414189a96e..30418e86e4ce 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -1,4 +1,4 @@ -import chalk from 'chalk'; +import { bold, gray, grey, white, yellow } from 'chalk'; import dedent from 'ts-dedent'; import { StorybookError } from './storybook-error'; @@ -417,21 +417,19 @@ export class MainFileESMOnlyImportError extends StorybookError { ]; if (this.data.line) { message.push( - chalk.white( - `In your ${chalk.yellow( - this.data.location - )} file, this line threw an error: ${chalk.bold.cyan( + white( + `In your ${yellow(this.data.location)} file, this line threw an error: ${bold.cyan( this.data.num )}, which looks like this:` ), - chalk.grey(this.data.line) + grey(this.data.line) ); } message.push( '', - chalk.white(`Convert the dynamic import to an dynamic import where they are used.`), - chalk.white(`Example:`) + ' ' + chalk.gray(`await import();`) + white(`Convert the dynamic import to an dynamic import where they are used.`), + white(`Example:`) + ' ' + gray(`await import();`) ); return message.join('\n'); From 4664dc19e8a73e878ff34507e542ac35a7701972 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 15 Feb 2024 13:26:52 +0000 Subject: [PATCH 044/106] Update CHANGELOG.md for v7.6.16 [skip ci] --- CHANGELOG.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c0d554b6714..39e2411abc61 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,12 @@ -## 7.6.15 +## 7.6.16 +- Addon Themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)! - Interaction: Make sure that adding spies doesn't cause infinite loops with self referencing args [#26019](https://github.com/storybookjs/storybook/pull/26019), thanks @kasperpeulen! +## 7.6.15 + +This release accidentally didn't contain anything. + ## 7.6.14 - Core: Fix boolean `true` args in URL getting ignored - [#25950](https://github.com/storybookjs/storybook/pull/25950), thanks [@JReinhold](https://github.com/JReinhold)! From e50fb33ebb9ab029f9b8a513e10c84817ec07e29 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Feb 2024 14:28:52 +0100 Subject: [PATCH 045/106] Fix key passing --- code/addons/interactions/src/preview.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index 86717c09b46a..e39f80c07f33 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -2,6 +2,7 @@ import type { ArgsEnhancer, Renderer } from '@storybook/types'; import { fn, isMockFunction } from '@storybook/test'; const traverseArgs = (value: unknown, depth = 0, key?: string): any => { + console.log(1); // Make sure to not get in infinite loops with self referencing args if (depth > 5) return value; if (value == null) return value; @@ -30,7 +31,7 @@ const traverseArgs = (value: unknown, depth = 0, key?: string): any => { if (typeof value === 'object' && value.constructor === Object) { // We have to mutate the original object for this to survive HMR. for (const [k, v] of Object.entries(value)) { - (value as Record)[k] = traverseArgs(v, depth++, key); + (value as Record)[k] = traverseArgs(v, depth++, k); } return value; } From c61535716f095e1b8b431c4501ed9a7abfad8bde Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Feb 2024 14:30:30 +0100 Subject: [PATCH 046/106] fixes --- code/lib/core-events/src/errors/server-errors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 30418e86e4ce..884dd0c4dbf1 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -408,10 +408,10 @@ export class MainFileESMOnlyImportError extends StorybookError { template() { const message = [ - `Storybook failed to load ${location}..`, + `Storybook failed to load ${this.data.location}..`, '', `It looks like the file tried to load/import an ESM only module.`, - `Support for this is currently limited in ${location}.`, + `Support for this is currently limited in ${this.data.location}.`, `You can import ESM modules in your main file, but only as dynamic import.`, '', ]; From fe0448b15c94d2ab1eeeb13b9bd10bad5983b0e5 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Feb 2024 14:57:40 +0100 Subject: [PATCH 047/106] Remove log --- code/addons/interactions/src/preview.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index e39f80c07f33..aba07ab3c414 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -2,7 +2,6 @@ import type { ArgsEnhancer, Renderer } from '@storybook/types'; import { fn, isMockFunction } from '@storybook/test'; const traverseArgs = (value: unknown, depth = 0, key?: string): any => { - console.log(1); // Make sure to not get in infinite loops with self referencing args if (depth > 5) return value; if (value == null) return value; From 23ff2df69ab1a3e6535186d66d64cde08cbdfd35 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Feb 2024 15:00:09 +0100 Subject: [PATCH 048/106] exclude the typescript property from basetype --- code/frameworks/react-vite/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/react-vite/src/types.ts b/code/frameworks/react-vite/src/types.ts index 0f31ea91db51..2499ae4bf93a 100644 --- a/code/frameworks/react-vite/src/types.ts +++ b/code/frameworks/react-vite/src/types.ts @@ -56,7 +56,7 @@ type TypescriptOptions = TypescriptOptionsBase & { */ export type StorybookConfig = Omit< StorybookConfigBase, - keyof StorybookConfigVite | keyof StorybookConfigFramework + keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript' > & StorybookConfigVite & StorybookConfigFramework & { From e08fa518a9b48b8ad6c1163323aa08ab61bbc28c Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 15 Feb 2024 14:22:26 +0000 Subject: [PATCH 049/106] Feedback addressed --- code/lib/preview-api/README-client-api.md | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/code/lib/preview-api/README-client-api.md b/code/lib/preview-api/README-client-api.md index 84861e4f2ca9..80a88f3b0cab 100644 --- a/code/lib/preview-api/README-client-api.md +++ b/code/lib/preview-api/README-client-api.md @@ -1,18 +1,3 @@ # `@storybook/client-api` -- Removed Story APIs (`storiesOf`) -**NOTE** This API is deprecated, and the CSF format is preferred for all stories. - -## `storiesOf` API - -The `@storybook/client` package provided backward compatibility for the `storiesOf` API supported until the previous stable Storybook version. With the release of Storybook 8 the `storiesOf` API was removed and is no longer supported or maintained. - - - -### Internals - -In order to appear to the store like the CSF API, a call to `storiesOf().add()` does the following: - -- Tracks the story added in a synthetic `StoryIndex` data structure -- Constructs a `moduleExports` object that is equivalent to the exports from a CSF file that produced the same stories. - -In order to achieve the old `storySort` functionality, the client API also needs access to the project annotations. +**NOTE** This API is deprecated, and the CSF format is preferred for all stories. \ No newline at end of file From 2c0ba07c685b12e785f26ac3295248f3a6892e93 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 14 Feb 2024 21:25:16 -0700 Subject: [PATCH 050/106] Add migration note about `addons.setConfig` --- MIGRATION.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 391c868cfa5b..77d77356d46e 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -127,6 +127,7 @@ - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) - [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks) - [Dark mode detection](#dark-mode-detection) + - [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api) - [7.0 core addons changes](#70-core-addons-changes) - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator) - [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter) @@ -468,7 +469,10 @@ In Storybook 7, these packages existed for backwards compatibility, but were mar - `@storybook/store` - this package has been merged into `@storybook/preview-api`. - `@storybook/api` - this package has been replaced with `@storybook/manager-api`. -This section explains the rationale, and the required changed you might have to make: [New Addons API](#new-addons-api) +These sections explain the rationale, and the required changes you might have to make: + +- [New Addons API](#new-addons-api) +- [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api) ### Framework-specific Vite plugins have to be explicitly added @@ -2029,6 +2033,19 @@ Earlier versions used the light theme by default, so if you don't set a theme an To learn more about theming, read our [documentation](https://storybook.js.org/docs/react/configure/theming). +#### `addons.setConfig` should now be imported from `@storybook/manager-api`. + +The previous package, `@storybook/addons`, is now deprecated and will be removed in 8.0. + +```diff +- import { addons } from '@storybook/addons'; ++ import { addons } from '@storybook/manager-api'; + +addons.setConfig({ + // ... +}) +``` + ### 7.0 core addons changes #### Removed auto injection of @storybook/addon-actions decorator From f24784d9cd0b3b349b3e9030eb08a61b651e0967 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Feb 2024 17:14:02 +0100 Subject: [PATCH 051/106] fix the logic adding the caret to upgrade --- code/lib/cli/src/upgrade.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index e9f4a8151b1c..7f704a0542d7 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -238,10 +238,16 @@ export const doUpgrade = async ({ return dependency in versions; }) as Array; return monorepoDependencies.map((dependency) => { + let char = '^'; + if (isOutdated) { + char = ''; + } + if (isCanary) { + char = ''; + } /* add ^ modifier to the version if this is the latest stable or prerelease version example outputs: @storybook/react@^8.0.0 */ - const maybeCaret = (!isOutdated || isPrerelease) && !isCanary ? '^' : ''; - return `${dependency}@${maybeCaret}${versions[dependency]}`; + return `${dependency}@${char}${versions[dependency]}`; }); }; From 2a82b796ed549999c100daa1207044b5fcdcf82b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 15 Feb 2024 17:16:03 +0100 Subject: [PATCH 052/106] Revert "fix the logic adding the caret to upgrade" This reverts commit f24784d9cd0b3b349b3e9030eb08a61b651e0967. --- code/lib/cli/src/upgrade.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 7f704a0542d7..e9f4a8151b1c 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -238,16 +238,10 @@ export const doUpgrade = async ({ return dependency in versions; }) as Array; return monorepoDependencies.map((dependency) => { - let char = '^'; - if (isOutdated) { - char = ''; - } - if (isCanary) { - char = ''; - } /* add ^ modifier to the version if this is the latest stable or prerelease version example outputs: @storybook/react@^8.0.0 */ - return `${dependency}@${char}${versions[dependency]}`; + const maybeCaret = (!isOutdated || isPrerelease) && !isCanary ? '^' : ''; + return `${dependency}@${maybeCaret}${versions[dependency]}`; }); }; From 2e9b355a130ce8802244662fd7646b29ba374eef Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Feb 2024 19:48:15 +0100 Subject: [PATCH 053/106] Fix depth issue --- code/addons/interactions/src/preview.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index aba07ab3c414..b7a910ee19ea 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -24,13 +24,15 @@ const traverseArgs = (value: unknown, depth = 0, key?: string): any => { } if (Array.isArray(value)) { - return value.map((item) => traverseArgs(item, depth++)); + depth++; + return value.map((item) => traverseArgs(item, depth)); } if (typeof value === 'object' && value.constructor === Object) { + depth++; // We have to mutate the original object for this to survive HMR. for (const [k, v] of Object.entries(value)) { - (value as Record)[k] = traverseArgs(v, depth++, k); + (value as Record)[k] = traverseArgs(v, depth, k); } return value; } From 1576b2a75340d90ed2dad48e6e0d4a963083793e Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Feb 2024 20:12:20 +0100 Subject: [PATCH 054/106] Add step back --- code/addons/interactions/src/preview.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index b7a910ee19ea..e0cc0aeae87a 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -1,5 +1,20 @@ -import type { ArgsEnhancer, Renderer } from '@storybook/types'; +import type { + ArgsEnhancer, + PlayFunction, + PlayFunctionContext, + Renderer, + StepLabel, +} from '@storybook/types'; import { fn, isMockFunction } from '@storybook/test'; +import { instrument } from '@storybook/instrumenter'; + +export const { step: runStep } = instrument( + { + step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => + play(context), + }, + { intercept: true } +); const traverseArgs = (value: unknown, depth = 0, key?: string): any => { // Make sure to not get in infinite loops with self referencing args From 95c70483ba7104e768b6d4918b456f76b436bfe2 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Feb 2024 20:14:09 +0100 Subject: [PATCH 055/106] Remove --- code/addons/interactions/template/stories/basics.stories.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index 8c1cd0a94922..cf6e34eddf2c 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -8,7 +8,6 @@ import { waitForElementToBeRemoved, within, } from '@storybook/test'; -import { action } from '@storybook/addon-actions'; export default { component: globalThis.Components.Form, From 5131e1f4a85176bd7afb1c6049bd02ee89279bfe Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 16 Feb 2024 11:54:13 +1100 Subject: [PATCH 056/106] Fix bug that meant we always warned about TS plugin --- code/builders/builder-vite/src/build.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index ebf4f030e8b8..1cd14d1b2d8d 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -41,7 +41,7 @@ export async function build(options: Options) { const turbosnapPluginName = 'rollup-plugin-turbosnap'; const hasTurbosnapPlugin = - finalConfig.plugins && hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]); + finalConfig.plugins && (await hasVitePlugins(finalConfig.plugins, [turbosnapPluginName])); if (hasTurbosnapPlugin) { logger.warn(dedent`Found '${turbosnapPluginName}' which is now included by default in Storybook 8. Removing from your plugins list. Ensure you pass \`--webpack-stats-json\` to generate stats. From da249fa1152b7cea1234326b46e96a774680f848 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Fri, 16 Feb 2024 10:17:03 +0000 Subject: [PATCH 057/106] Write changelog for 8.0.0-beta.3 [skip ci] --- CHANGELOG.prerelease.md | 10 ++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 620e9307a8a7..fc34e6697f26 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,13 @@ +## 8.0.0-beta.3 + +- Actions: Add spy to action for explicit actions - [#26033](https://github.com/storybookjs/storybook/pull/26033), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Addon Themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)! +- Addon-docs: Fix pnpm+Vite failing to build with `@storybook/theming` Rollup error - [#26024](https://github.com/storybookjs/storybook/pull/26024), thanks [@JReinhold](https://github.com/JReinhold)! +- CLI: Refactor to add autoblockers - [#25934](https://github.com/storybookjs/storybook/pull/25934), thanks [@ndelangen](https://github.com/ndelangen)! +- Codemod: Migrate to test package - [#25958](https://github.com/storybookjs/storybook/pull/25958), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Portable stories: Only provide a play function wrapper if it exists - [#25974](https://github.com/storybookjs/storybook/pull/25974), thanks [@yannbf](https://github.com/yannbf)! +- Test: Bump user-event to 14.5.2 - [#25889](https://github.com/storybookjs/storybook/pull/25889), thanks [@kasperpeulen](https://github.com/kasperpeulen)! + ## 8.0.0-beta.2 - Core: Fix boolean `true` args in URL getting ignored - [#25950](https://github.com/storybookjs/storybook/pull/25950), thanks [@JReinhold](https://github.com/JReinhold)! diff --git a/code/package.json b/code/package.json index ae2ef37fd85a..ec5bb2c3de6e 100644 --- a/code/package.json +++ b/code/package.json @@ -292,5 +292,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.0-beta.3" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 615ec622d172..b54db583e0d0 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-beta.2","info":{"plain":"- Core: Fix boolean `true` args in URL getting ignored - [#25950](https://github.com/storybookjs/storybook/pull/25950), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Move @types packages to dev deps in core-common - [#25387](https://github.com/storybookjs/storybook/pull/25387), thanks [@kyletsang](https://github.com/kyletsang)!\n- Maintenance: Rename testing-utils paths to portable-stories - [#25888](https://github.com/storybookjs/storybook/pull/25888), thanks [@yannbf](https://github.com/yannbf)!\n- Portable stories: Pass story context to the play function of a composed story - [#25943](https://github.com/storybookjs/storybook/pull/25943), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Fix `display=true` warning in console - [#25951](https://github.com/storybookjs/storybook/pull/25951), thanks [@JReinhold](https://github.com/JReinhold)!\n- UI: Update deprecated Icons with the new @storybook/icons in addons - [#25822](https://github.com/storybookjs/storybook/pull/25822), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Vite: Add a `rollup-plugin-webpack-stats` to allow stats from preview builds - [#25923](https://github.com/storybookjs/storybook/pull/25923), thanks [@tmeasday](https://github.com/tmeasday)!"}} +{"version":"8.0.0-beta.3","info":{"plain":"- Actions: Add spy to action for explicit actions - [#26033](https://github.com/storybookjs/storybook/pull/26033), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Addon Themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)!\n- Addon-docs: Fix pnpm+Vite failing to build with `@storybook/theming` Rollup error - [#26024](https://github.com/storybookjs/storybook/pull/26024), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Refactor to add autoblockers - [#25934](https://github.com/storybookjs/storybook/pull/25934), thanks [@ndelangen](https://github.com/ndelangen)!\n- Codemod: Migrate to test package - [#25958](https://github.com/storybookjs/storybook/pull/25958), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Portable stories: Only provide a play function wrapper if it exists - [#25974](https://github.com/storybookjs/storybook/pull/25974), thanks [@yannbf](https://github.com/yannbf)!\n- Test: Bump user-event to 14.5.2 - [#25889](https://github.com/storybookjs/storybook/pull/25889), thanks [@kasperpeulen](https://github.com/kasperpeulen)!"}} From 8112bdb549fd2c185b70b7773297d08980f4885b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 16 Feb 2024 13:31:46 +0100 Subject: [PATCH 058/106] upgrade `eslint-plugin-storybook` --- code/package.json | 2 +- code/yarn.lock | 18 +++++++++--------- scripts/package.json | 2 +- scripts/yarn.lock | 18 +++++++++--------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/code/package.json b/code/package.json index ae2ef37fd85a..1b4de397d6e3 100644 --- a/code/package.json +++ b/code/package.json @@ -194,7 +194,7 @@ "eslint": "^8.56.0", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-local-rules": "portal:../scripts/eslint-plugin-local-rules", - "eslint-plugin-storybook": "^0.6.15", + "eslint-plugin-storybook": "^0.8.0", "fs-extra": "^11.1.0", "github-release-from-changelog": "^2.1.1", "glob": "^10.0.0", diff --git a/code/yarn.lock b/code/yarn.lock index eb5c7d503c70..4e3563021869 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6431,7 +6431,7 @@ __metadata: eslint: "npm:^8.56.0" eslint-import-resolver-typescript: "npm:^3.6.1" eslint-plugin-local-rules: "portal:../scripts/eslint-plugin-local-rules" - eslint-plugin-storybook: "npm:^0.6.15" + eslint-plugin-storybook: "npm:^0.8.0" fs-extra: "npm:^11.1.0" github-release-from-changelog: "npm:^2.1.1" glob: "npm:^10.0.0" @@ -8302,7 +8302,7 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/utils@npm:5.62.0, @typescript-eslint/utils@npm:^5.45.0": +"@typescript-eslint/utils@npm:5.62.0, @typescript-eslint/utils@npm:^5.62.0": version: 5.62.0 resolution: "@typescript-eslint/utils@npm:5.62.0" dependencies: @@ -14205,17 +14205,17 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:^0.6.15": - version: 0.6.15 - resolution: "eslint-plugin-storybook@npm:0.6.15" +"eslint-plugin-storybook@npm:^0.8.0": + version: 0.8.0 + resolution: "eslint-plugin-storybook@npm:0.8.0" dependencies: "@storybook/csf": "npm:^0.0.1" - "@typescript-eslint/utils": "npm:^5.45.0" - requireindex: "npm:^1.1.0" + "@typescript-eslint/utils": "npm:^5.62.0" + requireindex: "npm:^1.2.0" ts-dedent: "npm:^2.2.0" peerDependencies: eslint: ">=6" - checksum: c61f5f2af72b614c30e8b36644672cfa25ca28e963e5e6cfab438f0cb287a6270f875a2dd8cd600a04c9864b9c549e269d95ea8da88c412e2b868fcd6a3605a4 + checksum: c76f6decdd4c826cd6a8bb613085e0cde804f4648093a0464a39867cc0ba4e1d34be15ff91eed827730da5efbbf55ae5e71af648bb0b461946d5e41384669ab8 languageName: node linkType: hard @@ -24972,7 +24972,7 @@ __metadata: languageName: node linkType: hard -"requireindex@npm:^1.1.0, requireindex@npm:^1.2.0": +"requireindex@npm:^1.2.0": version: 1.2.0 resolution: "requireindex@npm:1.2.0" checksum: 7fb42aed73bf8de9acc4d6716cf07acc7fbe180e58729433bafcf702e76e7bb10e54f8266c06bfec62d752e0ac14d50e8758833de539e6f4e2cd642077866153 diff --git a/scripts/package.json b/scripts/package.json index 1bb83d136ea6..01818aa20d40 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -126,7 +126,7 @@ "esbuild-plugin-alias": "^0.2.1", "esbuild-register": "^3.5.0", "eslint": "^8.56.0", - "eslint-plugin-storybook": "^0.6.15", + "eslint-plugin-storybook": "^0.8.0", "execa": "^6.1.0", "express": "^4.17.3", "fast-folder-size": "^2.1.0", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index c92afc1e9ed1..180d2bf8f179 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2786,7 +2786,7 @@ __metadata: esbuild-plugin-alias: "npm:^0.2.1" esbuild-register: "npm:^3.5.0" eslint: "npm:^8.56.0" - eslint-plugin-storybook: "npm:^0.6.15" + eslint-plugin-storybook: "npm:^0.8.0" execa: "npm:^6.1.0" express: "npm:^4.17.3" fast-folder-size: "npm:^2.1.0" @@ -3654,7 +3654,7 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/utils@npm:5.62.0, @typescript-eslint/utils@npm:^5.45.0": +"@typescript-eslint/utils@npm:5.62.0, @typescript-eslint/utils@npm:^5.62.0": version: 5.62.0 resolution: "@typescript-eslint/utils@npm:5.62.0" dependencies: @@ -6935,17 +6935,17 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:^0.6.15": - version: 0.6.15 - resolution: "eslint-plugin-storybook@npm:0.6.15" +"eslint-plugin-storybook@npm:^0.8.0": + version: 0.8.0 + resolution: "eslint-plugin-storybook@npm:0.8.0" dependencies: "@storybook/csf": "npm:^0.0.1" - "@typescript-eslint/utils": "npm:^5.45.0" - requireindex: "npm:^1.1.0" + "@typescript-eslint/utils": "npm:^5.62.0" + requireindex: "npm:^1.2.0" ts-dedent: "npm:^2.2.0" peerDependencies: eslint: ">=6" - checksum: c61f5f2af72b614c30e8b36644672cfa25ca28e963e5e6cfab438f0cb287a6270f875a2dd8cd600a04c9864b9c549e269d95ea8da88c412e2b868fcd6a3605a4 + checksum: c76f6decdd4c826cd6a8bb613085e0cde804f4648093a0464a39867cc0ba4e1d34be15ff91eed827730da5efbbf55ae5e71af648bb0b461946d5e41384669ab8 languageName: node linkType: hard @@ -13262,7 +13262,7 @@ __metadata: languageName: node linkType: hard -"requireindex@npm:^1.1.0, requireindex@npm:^1.2.0": +"requireindex@npm:^1.2.0": version: 1.2.0 resolution: "requireindex@npm:1.2.0" checksum: 7fb42aed73bf8de9acc4d6716cf07acc7fbe180e58729433bafcf702e76e7bb10e54f8266c06bfec62d752e0ac14d50e8758833de539e6f4e2cd642077866153 From 65916d37508fcab983497ff604b16e6e59cef5ff Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 16 Feb 2024 12:52:57 +0000 Subject: [PATCH 059/106] additional feedback addressed --- code/lib/preview-api/README-client-api.md | 3 --- code/lib/preview-api/README.md | 1 - docs/faq.md | 2 +- 3 files changed, 1 insertion(+), 5 deletions(-) delete mode 100644 code/lib/preview-api/README-client-api.md diff --git a/code/lib/preview-api/README-client-api.md b/code/lib/preview-api/README-client-api.md deleted file mode 100644 index 80a88f3b0cab..000000000000 --- a/code/lib/preview-api/README-client-api.md +++ /dev/null @@ -1,3 +0,0 @@ -# `@storybook/client-api` -- Removed Story APIs (`storiesOf`) - -**NOTE** This API is deprecated, and the CSF format is preferred for all stories. \ No newline at end of file diff --git a/code/lib/preview-api/README.md b/code/lib/preview-api/README.md index 864bbbb11e7f..cb5788bbb0f4 100644 --- a/code/lib/preview-api/README.md +++ b/code/lib/preview-api/README.md @@ -7,7 +7,6 @@ TODO write proper documentation of this package This package used to be multiple packages (they have been combined into this one): - `@storybook/addons` [read (old) docs](./README-addons.md) -- `@storybook/client-api` [read (old) docs](./README-client-api.md) - `@storybook/core-client` [read (old) docs](./README-core-client.md) - `@storybook/preview-web` [read (old) docs](./README-preview-web.md) - `@storybook/store` [read (old) docs](./README-store.md) diff --git a/docs/faq.md b/docs/faq.md index 895f556160d6..1cceba208102 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -333,7 +333,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S -If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide.md#storiesof-to-csf) for more information. However, if you need, you can still access the old documentation for `storiesOf` [here](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.md). +If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide.md#storiesof-to-csf) for more information. However, if you need, you can still access the old `storiesOf` [documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.md) for reference. From c9e988fa5cab2f5afe3e33ce805bfe1e879633c2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 16 Feb 2024 14:45:21 +0100 Subject: [PATCH 060/106] Update webpack5Migration to webpack5CompilerSetup --- code/lib/cli/src/automigrate/fixes/index.ts | 4 ++-- .../fixes/webpack5-compiler-setup.test.ts | 14 +++++++------- .../automigrate/fixes/webpack5-compiler-setup.ts | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 12006cd619b3..d1612045cd7f 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -21,7 +21,7 @@ import { wrapRequire } from './wrap-require'; import { reactDocgen } from './react-docgen'; import { removeReactDependency } from './prompt-remove-react'; import { storyshotsMigration } from './storyshots-migration'; -import { webpack5Migration } from './webpack5-compiler-setup'; +import { webpack5CompilerSetup } from './webpack5-compiler-setup'; import { removeJestTestingLibrary } from './remove-jest-testing-library'; export * from '../types'; @@ -49,7 +49,7 @@ export const allFixes: Fix[] = [ reactDocgen, storyshotsMigration, removeReactDependency, - webpack5Migration, + webpack5CompilerSetup, ]; export const initFixes: Fix[] = [eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts index 1de040d2a6c6..a7768b9b10be 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -1,7 +1,7 @@ import { vi, describe, it, expect, afterEach, beforeEach } from 'vitest'; import type { StorybookConfig } from '@storybook/types'; import type { JsPackageManager } from '@storybook/core-common'; -import { webpack5Migration } from './webpack5-compiler-setup'; +import { webpack5CompilerSetup } from './webpack5-compiler-setup'; import { CoreWebpackCompilers } from '../../project_types'; const check = async ({ @@ -14,7 +14,7 @@ const check = async ({ storybookVersion?: string; mainConfig?: Partial; }) => { - return webpack5Migration.check({ + return webpack5CompilerSetup.check({ packageManager: packageManager as any, configDir: '', storybookVersion, @@ -382,7 +382,7 @@ describe('check function', () => { describe('prompt', () => { it('shouldRemoveSWCFlag = true', async () => { - const prompt = webpack5Migration.prompt({ + const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: true, isNextJs: false, compilerPackageName: '@storybook/addon-webpack5-compiler-swc', @@ -400,7 +400,7 @@ describe('check function', () => { }); it('shouldRemoveSWCFlag = false', async () => { - const prompt = webpack5Migration.prompt({ + const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: false, isNextJs: false, compilerPackageName: '@storybook/addon-webpack5-compiler-swc', @@ -415,7 +415,7 @@ describe('check function', () => { }); it('isNextJs = true', () => { - const prompt = webpack5Migration.prompt({ + const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: true, isNextJs: true, compilerPackageName: undefined, @@ -437,7 +437,7 @@ describe('check function', () => { }); it('isNextjs = false AND compilerPackageName = @storybook/addon-webpack5-compiler-swc AND compiler = swc', () => { - const prompt = webpack5Migration.prompt({ + const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: false, isNextJs: false, compilerPackageName: '@storybook/addon-webpack5-compiler-swc', @@ -452,7 +452,7 @@ describe('check function', () => { }); it('isNextjs = false AND compilerPackageName = @storybook/addon-webpack5-compiler-babel AND compiler = babel', () => { - const prompt = webpack5Migration.prompt({ + const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: false, isNextJs: false, compilerPackageName: '@storybook/addon-webpack5-compiler-babel', diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index 1411b30ddfcf..647707c9d10c 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -26,7 +26,7 @@ type Options = { isNextJs: boolean; }; -export const webpack5Migration: Fix = { +export const webpack5CompilerSetup: Fix = { id: 'webpack5-compiler-setup', async check({ mainConfig, packageManager }) { From 5b988d0f35072a4da18d9eec65db110a3b4a8b96 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 16 Feb 2024 14:53:16 +0100 Subject: [PATCH 061/106] Don't warn if explicit arg or argType is found --- .../__tests__/find-implicit-spies.test.ts | 48 +++++-- .../src/transforms/find-implicit-spies.ts | 132 +++++++++++++++--- 2 files changed, 151 insertions(+), 29 deletions(-) diff --git a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts index 0d4cbbe3cee6..c3885605e8ed 100644 --- a/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts +++ b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts @@ -16,13 +16,30 @@ beforeEach(() => { warn.mockImplementation(() => {}); }); -test('replace jest and testing-library with the test package', async () => { +test('Warn for possible implicit actions', async () => { const input = dedent` - Interactions.play = async ({ args }) => { + export default { title: 'foo/bar', args: {onClick: fn() }, argTypes: { onHover: {action: true} } }; + const Template = (args) => { }; + export const A = Template.bind({}); + A.args = { onBla: fn() }; + A.play = async ({ args }) => { await userEvent.click(screen.getByRole("button")); - await expect(args.onButtonIconClick).toHaveBeenCalled(); + await expect(args.onImplicit).toHaveBeenCalled(); + await expect(args.onClick).toHaveBeenCalled(); + await expect(args.onHover).toHaveBeenCalled(); + await expect(args.onBla).toHaveBeenCalled(); + }; + + export const B = { + args: {onBla: fn() }, + play: async ({ args }) => { + await userEvent.click(screen.getByRole("button")); + await expect(args.onImplicit).toHaveBeenCalled(); + await expect(args.onClick).toHaveBeenCalled(); + await expect(args.onHover).toHaveBeenCalled(); + await expect(args.onBla).toHaveBeenCalled(); + } }; - `; await tsTransform(input); @@ -31,12 +48,23 @@ test('replace jest and testing-library with the test package', async () => { [ [ "Component.stories.tsx Possible implicit spy found - 1 | Interactions.play = async ({ args }) => { - 2 | await userEvent.click(screen.getByRole("button")); - > 3 | await expect(args.onButtonIconClick).toHaveBeenCalled(); - | ^^^^^^^^^^^^^^^^^ - 4 | }; - 5 |", + 5 | A.play = async ({ args }) => { + 6 | await userEvent.click(screen.getByRole("button")); + > 7 | await expect(args.onImplicit).toHaveBeenCalled(); + | ^^^^^^^^^^ + 8 | await expect(args.onClick).toHaveBeenCalled(); + 9 | await expect(args.onHover).toHaveBeenCalled(); + 10 | await expect(args.onBla).toHaveBeenCalled();", + ], + [ + "Component.stories.tsx Possible implicit spy found + 15 | play: async ({ args }) => { + 16 | await userEvent.click(screen.getByRole("button")); + > 17 | await expect(args.onImplicit).toHaveBeenCalled(); + | ^^^^^^^^^^ + 18 | await expect(args.onClick).toHaveBeenCalled(); + 19 | await expect(args.onHover).toHaveBeenCalled(); + 20 | await expect(args.onBla).toHaveBeenCalled();", ], ] `); diff --git a/code/lib/codemod/src/transforms/find-implicit-spies.ts b/code/lib/codemod/src/transforms/find-implicit-spies.ts index 594bb1cfc1c8..558cde383aa7 100644 --- a/code/lib/codemod/src/transforms/find-implicit-spies.ts +++ b/code/lib/codemod/src/transforms/find-implicit-spies.ts @@ -3,47 +3,141 @@ import type { FileInfo } from 'jscodeshift'; import { loadCsf } from '@storybook/csf-tools'; import type { BabelFile } from '@babel/core'; import * as babel from '@babel/core'; +import { isIdentifier, isObjectExpression, isObjectProperty } from '@babel/types'; -function findImplicitSpies(path: babel.NodePath, file: string) { +function findImplicitSpies(path: babel.NodePath, file: string, keys: string[]) { path.traverse({ Identifier: (identifier) => { - if (/^on[A-Z].*/.test(identifier.node.name)) { + if (!keys.includes(identifier.node.name) && /^on[A-Z].*/.test(identifier.node.name)) { console.warn(identifier.buildCodeFrameError(`${file} Possible implicit spy found`).message); } }, }); } -export default async function transform(info: FileInfo) { - const csf = loadCsf(info.source, { makeTitle: (title) => title }); - const fileNode = csf._ast; - // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 - const file: BabelFile = new babel.File( - { filename: info.path }, - { code: info.source, ast: fileNode } - ); +function getAnnotationKeys(file: BabelFile, storyName: string, annotationName: string) { + const argKeys: string[] = []; file.path.traverse({ - // CSF2 play function Story.play = + // CSF2 play function Story.args = AssignmentExpression: (path) => { const left = path.get('left'); if (!left.isMemberExpression()) return; + const object = left.get('object'); + + if (!(object.isIdentifier() && object.node.name === storyName)) return; const property = left.get('property'); - if (property.isIdentifier() && property.node.name === 'play') { - findImplicitSpies(path, info.path); + const right = path.get('right'); + if ( + property.isIdentifier() && + property.node.name === annotationName && + right.isObjectExpression() + ) { + argKeys.push( + ...right.node.properties.flatMap((value) => + isObjectProperty(value) && isIdentifier(value.key) ? [value.key.name] : [] + ) + ); } }, + // CSF3 const Story = {args: () => {} }; + VariableDeclarator: (path) => { + const id = path.get('id'); + const init = path.get('init'); + if (!(id.isIdentifier() && id.node.name === storyName) || !init.isObjectExpression()) return; - // CSF3 play function: const Story = {play: () => {} }; - ObjectProperty: (path) => { - const key = path.get('key'); - if (key.isIdentifier() && key.node.name === 'play') { - findImplicitSpies(path, info.path); - } + const args = init + .get('properties') + .flatMap((it) => (it.isObjectProperty() ? [it] : [])) + .find((it) => { + const argKey = it.get('key'); + return argKey.isIdentifier() && argKey.node.name === annotationName; + }); + + if (!args) return; + const argsValue = args.get('value'); + + if (!argsValue || !argsValue.isObjectExpression()) return; + argKeys.push( + ...argsValue.node.properties.flatMap((value) => + isObjectProperty(value) && isIdentifier(value.key) ? [value.key.name] : [] + ) + ); }, }); + return argKeys; +} + +const getObjectExpressionKeys = (node: babel.Node | undefined) => { + return isObjectExpression(node) + ? node.properties.flatMap((value) => + isObjectProperty(value) && isIdentifier(value.key) ? [value.key.name] : [] + ) + : []; +}; + +export default async function transform(info: FileInfo) { + const csf = loadCsf(info.source, { makeTitle: (title) => title }); + const fileNode = csf._ast; + // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 + const file: BabelFile = new babel.File( + { filename: info.path }, + { code: info.source, ast: fileNode } + ); + + csf.parse(); + + const metaKeys = [ + ...getObjectExpressionKeys(csf._metaAnnotations.args), + ...getObjectExpressionKeys(csf._metaAnnotations.argTypes), + ]; + + Object.entries(csf.stories).forEach(([key, { name }]) => { + if (!name) return; + const allKeys = [ + ...metaKeys, + ...getAnnotationKeys(file, name, 'args'), + ...getAnnotationKeys(file, name, 'argTypes'), + ]; + + file.path.traverse({ + // CSF2 play function Story.play = + AssignmentExpression: (path) => { + const left = path.get('left'); + if (!left.isMemberExpression()) return; + const object = left.get('object'); + + if (!(object.isIdentifier() && object.node.name === name)) return; + + const property = left.get('property'); + if (property.isIdentifier() && property.node.name === 'play') { + findImplicitSpies(path, info.path, allKeys); + } + }, + + // CSF3 play function: const Story = {play: () => {} }; + VariableDeclarator: (path) => { + const id = path.get('id'); + const init = path.get('init'); + if (!(id.isIdentifier() && id.node.name === name) || !init.isObjectExpression()) return; + + const play = init + .get('properties') + .flatMap((it) => (it.isObjectProperty() ? [it] : [])) + .find((it) => { + const argKey = it.get('key'); + return argKey.isIdentifier() && argKey.node.name === 'play'; + }); + + if (play) { + findImplicitSpies(play, info.path, allKeys); + } + }, + }); + }); + return; } From 6261cdfd59a560f01e7a161674d1d22a6f37203c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 16 Feb 2024 15:30:33 +0100 Subject: [PATCH 062/106] Prompt the user at the end to select a specific compiler --- .../fixes/webpack5-compiler-setup.test.ts | 161 ++++++++++-------- .../fixes/webpack5-compiler-setup.ts | 66 ++++--- 2 files changed, 132 insertions(+), 95 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts index a7768b9b10be..0b0ddc98e2fd 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -1,4 +1,4 @@ -import { vi, describe, it, expect, afterEach, beforeEach } from 'vitest'; +import { vi, describe, it, expect } from 'vitest'; import type { StorybookConfig } from '@storybook/types'; import type { JsPackageManager } from '@storybook/core-common'; import { webpack5CompilerSetup } from './webpack5-compiler-setup'; @@ -46,17 +46,30 @@ vi.mock('chalk', () => { describe('check function', () => { describe('webpack5Migration check function', () => { - beforeEach(() => { - promptMocks.default.mockResolvedValue({ - compiler: 'swc', - }); - }); + describe('return null', async () => { + it('should return null if one of the addons is already installed', async () => { + const result = check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + addons: ['@storybook/addon-webpack5-compiler-swc'], + framework: { + name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: true, + }, + }, + }, + }, + }); - afterEach(() => { - vi.resetAllMocks(); - }); + expect(result).resolves.toBeNull(); + }); - describe('return null', async () => { it('should return null if the builder is not webpack5', async () => { const result = check({ mainConfig: { @@ -256,8 +269,8 @@ describe('check function', () => { }); expect(result).contains({ - shouldRemoveSWCFlag: true, isNextJs: true, + shouldRemoveSWCFlag: true, }); }); @@ -282,11 +295,7 @@ describe('check function', () => { }); describe('return options', () => { - it('should return compiler: babel when useSWC flag is not set and the user selects babel during prompt', async () => { - promptMocks.default.mockResolvedValue({ - compiler: 'babel', - }); - + it('should return defaultCompiler: babel when useSWC flag is not set', async () => { const result = await check({ packageManager: { getPackageVersion: (name) => { @@ -301,17 +310,12 @@ describe('check function', () => { }); expect(result).contains({ - compiler: 'babel', - compilerPackageName: '@storybook/addon-webpack5-compiler-babel', + defaultCompiler: CoreWebpackCompilers.Babel, }); }); describe('user selects swc', () => { - it('should return compiler: swc when useSWC flag is not set and the user selects swc during prompt', async () => { - promptMocks.default.mockResolvedValue({ - compiler: 'swc', - }); - + it('should return defaultCompiler: swc when useSWC flag is set', async () => { const result = await check({ packageManager: { getPackageVersion: (name) => { @@ -321,42 +325,21 @@ describe('check function', () => { mainConfig: { framework: { name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: true, + }, + }, }, }, }); expect(result).contains({ - compiler: 'swc', - compilerPackageName: '@storybook/addon-webpack5-compiler-swc', + defaultCompiler: CoreWebpackCompilers.SWC, }); }); }); - it('should return compiler: swc when useSWC flag is set', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, - }, - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - options: { - builder: { - useSWC: true, - }, - }, - }, - }, - }); - - expect(result).contains({ - compiler: 'swc', - compilerPackageName: '@storybook/addon-webpack5-compiler-swc', - }); - }); - it('should return options if the framework is unknown but webpack5 was detected', async () => { const result = await check({ packageManager: { @@ -385,30 +368,58 @@ describe('check function', () => { const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: true, isNextJs: false, - compilerPackageName: '@storybook/addon-webpack5-compiler-swc', - compiler: CoreWebpackCompilers.SWC, + defaultCompiler: CoreWebpackCompilers.SWC, }); expect(prompt).toMatchInlineSnapshot(` - "We need to update your Storybook configuration for Webpack 5. - The framework.options.builder.useSWC flag will be removed. + "We need to update your Storybook configuration for Webpack 5. + The framework.options.builder.useSWC flag will be removed. + + Storybook's Webpack5 builder is now compiler agnostic, meaning you have to install an additional addon to set up a compiler for Webpack5. + + We have detected, that you want to use SWC as the compiler for Webpack5. - The @storybook/addon-webpack5-compiler-swc addon will be added to your project. It adds SWC as the compiler for your Storybook. - After the migration, you can switch Webpack5 compilers by swapping the addon in your project. - You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" - `); + In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config. + + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. + You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" + `); }); it('shouldRemoveSWCFlag = false', async () => { const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: false, isNextJs: false, - compilerPackageName: '@storybook/addon-webpack5-compiler-swc', - compiler: CoreWebpackCompilers.SWC, + defaultCompiler: CoreWebpackCompilers.SWC, }); expect(prompt).toMatchInlineSnapshot(` - "The @storybook/addon-webpack5-compiler-swc addon will be added to your project. It adds SWC as the compiler for your Storybook. + "Storybook's Webpack5 builder is now compiler agnostic, meaning you have to install an additional addon to set up a compiler for Webpack5. + + We have detected, that you want to use SWC as the compiler for Webpack5. + + In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config. + + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. + You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" + `); + }); + + it('defaultCompiler = babel', async () => { + const prompt = webpack5CompilerSetup.prompt({ + shouldRemoveSWCFlag: false, + isNextJs: false, + defaultCompiler: CoreWebpackCompilers.Babel, + }); + + expect(prompt).toMatchInlineSnapshot(` + "Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project: + + - Babel: A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. + - SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility. + + In the next step, Storybook will ask you to choose a compiler to automatically set it up for you. + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" `); @@ -418,8 +429,7 @@ describe('check function', () => { const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: true, isNextJs: true, - compilerPackageName: undefined, - compiler: undefined, + defaultCompiler: CoreWebpackCompilers.SWC, }); expect(prompt).toMatchInlineSnapshot(` @@ -436,31 +446,40 @@ describe('check function', () => { `); }); - it('isNextjs = false AND compilerPackageName = @storybook/addon-webpack5-compiler-swc AND compiler = swc', () => { + it('isNextjs = false AND defaultCompiler = swc', () => { const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: false, isNextJs: false, - compilerPackageName: '@storybook/addon-webpack5-compiler-swc', - compiler: CoreWebpackCompilers.SWC, + defaultCompiler: CoreWebpackCompilers.SWC, }); expect(prompt).toMatchInlineSnapshot(` - "The @storybook/addon-webpack5-compiler-swc addon will be added to your project. It adds SWC as the compiler for your Storybook. + "Storybook's Webpack5 builder is now compiler agnostic, meaning you have to install an additional addon to set up a compiler for Webpack5. + + We have detected, that you want to use SWC as the compiler for Webpack5. + + In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config. + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" `); }); - it('isNextjs = false AND compilerPackageName = @storybook/addon-webpack5-compiler-babel AND compiler = babel', () => { + it('isNextjs = false AND defaultCompiler = babel', () => { const prompt = webpack5CompilerSetup.prompt({ shouldRemoveSWCFlag: false, isNextJs: false, - compilerPackageName: '@storybook/addon-webpack5-compiler-babel', - compiler: CoreWebpackCompilers.Babel, + defaultCompiler: CoreWebpackCompilers.Babel, }); expect(prompt).toMatchInlineSnapshot(` - "The @storybook/addon-webpack5-compiler-babel addon will be added to your project. It adds Babel as the compiler for your Storybook. + "Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project: + + - Babel: A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. + - SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility. + + In the next step, Storybook will ask you to choose a compiler to automatically set it up for you. + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" `); diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index 647707c9d10c..778b099f272a 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -3,6 +3,7 @@ import type { SupportedFrameworks } from '@storybook/types'; import { frameworkPackages } from '@storybook/core-common'; import type { Fix } from '../types'; import { + getAddonNames, getBuilderPackageName, getFrameworkOptions, getFrameworkPackageName, @@ -20,8 +21,7 @@ import chalk from 'chalk'; import { add } from '../../add'; type Options = { - compiler?: CoreWebpackCompilers; - compilerPackageName?: keyof typeof compilerNameToCoreCompiler | undefined; + defaultCompiler?: CoreWebpackCompilers; shouldRemoveSWCFlag: boolean; isNextJs: boolean; }; @@ -30,6 +30,17 @@ export const webpack5CompilerSetup: Fix = { id: 'webpack5-compiler-setup', async check({ mainConfig, packageManager }) { + const addons = getAddonNames(mainConfig); + + if ( + addons.find( + (addon) => + addon.includes(CoreWebpackCompilers.Babel) || addon.includes(CoreWebpackCompilers.SWC) + ) + ) { + return null; + } + const frameworkName = Object.entries(frameworkPackages).find( ([name]) => name === getFrameworkPackageName(mainConfig) )?.[1]; @@ -72,15 +83,6 @@ export const webpack5CompilerSetup: Fix = { ? CoreWebpackCompilers.SWC : CoreWebpackCompilers.Babel; - const compiler: CoreWebpackCompilers = - defaultCompiler === CoreWebpackCompilers.Babel - ? await askUserForCompilerChoice() - : CoreWebpackCompilers.SWC; - - const compilerPackageName = Object.entries(compilerNameToCoreCompiler).find( - ([, coreCompiler]) => coreCompiler === compiler - )?.[0]; - const shouldRemoveSWCFlag = frameworkOptions?.builder ? 'useSWC' in frameworkOptions.builder : false; @@ -95,14 +97,13 @@ export const webpack5CompilerSetup: Fix = { } return { - compiler, - compilerPackageName, + defaultCompiler, shouldRemoveSWCFlag, isNextJs: false, }; }, - prompt({ compiler, compilerPackageName, shouldRemoveSWCFlag, isNextJs }) { + prompt({ defaultCompiler, shouldRemoveSWCFlag, isNextJs }) { const message = []; if (shouldRemoveSWCFlag) { @@ -126,11 +127,22 @@ export const webpack5CompilerSetup: Fix = { 'babel.config.js' )} file in your project, Storybook will use SWC as the compiler. `); - } else if (compilerPackageName) { + } else if (defaultCompiler === CoreWebpackCompilers.Babel) { message.push(dedent` - The ${chalk.cyan(compilerPackageName)} addon will be added to your project. It adds ${ - compiler === CoreWebpackCompilers.Babel ? 'Babel' : 'SWC' - } as the compiler for your Storybook. + Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project:\n + - Babel: A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. + - SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility.\n + In the next step, Storybook will ask you to choose a compiler to automatically set it up for you.\n + After the migration, you can switch Webpack5 compilers by swapping the addon in your project. + You can find more information here: ${chalk.yellow( + 'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support' + )} + `); + } else { + message.push(dedent` + Storybook's Webpack5 builder is now compiler agnostic, meaning you have to install an additional addon to set up a compiler for Webpack5.\n + We have detected, that you want to use SWC as the compiler for Webpack5.\n + In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.\n After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: ${chalk.yellow( 'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support' @@ -142,7 +154,7 @@ export const webpack5CompilerSetup: Fix = { }, async run({ result, mainConfigPath, packageManager, skipInstall, dryRun }) { - const { compilerPackageName, shouldRemoveSWCFlag, isNextJs } = result; + const { defaultCompiler, shouldRemoveSWCFlag, isNextJs } = result; if (shouldRemoveSWCFlag) { await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, (main) => { @@ -150,7 +162,16 @@ export const webpack5CompilerSetup: Fix = { }); } - if (!isNextJs && compilerPackageName) { + if (!isNextJs) { + const compiler: CoreWebpackCompilers = + defaultCompiler === CoreWebpackCompilers.Babel + ? await askUserForCompilerChoice() + : CoreWebpackCompilers.SWC; + + const compilerPackageName = Object.entries(compilerNameToCoreCompiler).find( + ([, coreCompiler]) => coreCompiler === compiler + )![0]; + await add(compilerPackageName, { packageManager: packageManager.type, skipPostinstall: !!skipInstall, @@ -163,10 +184,7 @@ async function askUserForCompilerChoice() { const response = await prompts<'compiler'>({ type: 'select', name: 'compiler', - message: `Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project:\n - - Babel: A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. - - SWC: Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility.\n -Which compiler would you like to use?`, + message: `Which compiler would you like to use?`, choices: [ { title: 'Babel', From 21945adfa403cfed1b73c1e4f50e6faf32cabe26 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 16 Feb 2024 16:03:13 +0100 Subject: [PATCH 063/106] throw when mainConfig is missing or unable to be evaluated, also throw when version is missing --- code/lib/cli/src/upgrade.ts | 46 +------------- .../core-common/src/utils/load-main-config.ts | 12 +++- .../src/utils/validate-configuration-files.ts | 6 +- .../core-events/src/errors/server-errors.ts | 61 ++++++++++++++++++- 4 files changed, 74 insertions(+), 51 deletions(-) diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index e9f4a8151b1c..7f8485aae5d6 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -6,6 +6,7 @@ import { withTelemetry } from '@storybook/core-server'; import { UpgradeStorybookToLowerVersionError, UpgradeStorybookToSameVersionError, + UpgradeStorybookUnknownCurrentVersionError, } from '@storybook/core-events/server-errors'; import chalk from 'chalk'; @@ -189,26 +190,11 @@ export const doUpgrade = async ({ ); const configDir = userSpecifiedConfigDir || inferredConfigDir || '.storybook'; - let mainConfigLoadingError = ''; - - const mainConfig = await loadMainConfig({ configDir }).catch((err) => { - mainConfigLoadingError = String(err); - return false; - }); + const mainConfig = await loadMainConfig({ configDir }); // GUARDS if (!storybookVersion) { - logger.info(missingStorybookVersionMessage()); - results = { preCheckFailure: PreCheckFailure.UNDETECTED_SB_VERSION }; - } else if ( - typeof mainConfigPath === 'undefined' || - mainConfigLoadingError.includes('No configuration files have been found') - ) { - logger.info(mainjsNotFoundMessage(configDir)); - results = { preCheckFailure: PreCheckFailure.MAINJS_NOT_FOUND }; - } else if (typeof mainConfig === 'boolean') { - logger.info(mainjsExecutionFailureMessage(mainConfigPath, mainConfigLoadingError)); - results = { preCheckFailure: PreCheckFailure.MAINJS_EVALUATION }; + throw new UpgradeStorybookUnknownCurrentVersionError(); } // BLOCKERS @@ -293,32 +279,6 @@ export const doUpgrade = async ({ } }; -function missingStorybookVersionMessage(): string { - return dedent` - [Storybook automigrate] โŒ Unable to determine Storybook version so that the automigrations will be skipped. - ๐Ÿค” Are you running automigrate from your project directory? Please specify your Storybook config directory with the --config-dir flag. - `; -} - -function mainjsExecutionFailureMessage( - mainConfigPath: string, - mainConfigLoadingError: string -): string { - return dedent` - [Storybook automigrate] โŒ Failed trying to evaluate ${chalk.blue( - mainConfigPath - )} with the following error: ${mainConfigLoadingError} - - Please fix the error and try again. - `; -} - -function mainjsNotFoundMessage(configDir: string): string { - return dedent`[Storybook automigrate] Could not find or evaluate your Storybook main.js config directory at ${chalk.blue( - configDir - )} so the automigrations will be skipped. You might be running this command in a monorepo or a non-standard project structure. If that is the case, please rerun this command by specifying the path to your Storybook config directory via the --config-dir option.`; -} - export async function upgrade(options: UpgradeOptions): Promise { await withTelemetry('upgrade', { cliOptions: options }, () => doUpgrade(options)); } diff --git a/code/lib/core-common/src/utils/load-main-config.ts b/code/lib/core-common/src/utils/load-main-config.ts index b61c51dfa832..cbd2785fa10a 100644 --- a/code/lib/core-common/src/utils/load-main-config.ts +++ b/code/lib/core-common/src/utils/load-main-config.ts @@ -3,7 +3,10 @@ import type { StorybookConfig } from '@storybook/types'; import { serverRequire, serverResolve } from './interpret-require'; import { validateConfigurationFiles } from './validate-configuration-files'; import { readFile } from 'fs/promises'; -import { MainFileESMOnlyImportError } from '@storybook/core-events/server-errors'; +import { + MainFileESMOnlyImportError, + MainFileFailedEvaluationError, +} from '@storybook/core-events/server-errors'; export async function loadMainConfig({ configDir = '.storybook', @@ -50,7 +53,10 @@ export async function loadMainConfig({ throw out; } - throw e; - // + + throw new MainFileFailedEvaluationError({ + location: relative(process.cwd(), mainJsPath), + error: e, + }); } } diff --git a/code/lib/core-common/src/utils/validate-configuration-files.ts b/code/lib/core-common/src/utils/validate-configuration-files.ts index 57e1cffeab79..0f7c1ecaaeb5 100644 --- a/code/lib/core-common/src/utils/validate-configuration-files.ts +++ b/code/lib/core-common/src/utils/validate-configuration-files.ts @@ -5,6 +5,7 @@ import slash from 'slash'; import { once } from '@storybook/node-logger'; import { boost } from './interpret-files'; +import { MainFileMissingError } from '@storybook/core-events/server-errors'; export async function validateConfigurationFiles(configDir: string) { const extensionsPattern = `{${Array.from(boost).join(',')}}`; @@ -20,9 +21,6 @@ export async function validateConfigurationFiles(configDir: string) { } if (!mainConfigPath) { - throw new Error(dedent` - No configuration files have been found in your configDir (${path.resolve(configDir)}). - Storybook needs "main.js" file, please add it (or pass a custom config dir flag to Storybook to tell where your main.js file is located at). - `); + throw new MainFileMissingError({ location: configDir }); } } diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 884dd0c4dbf1..d210f1c23021 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -400,6 +400,9 @@ export class MainFileESMOnlyImportError extends StorybookError { readonly code = 5; + public documentation = + 'https://github.com/storybookjs/storybook/issues/23972#issuecomment-1948534058'; + constructor( public data: { location: string; line: string | undefined; num: number | undefined } ) { @@ -428,7 +431,7 @@ export class MainFileESMOnlyImportError extends StorybookError { message.push( '', - white(`Convert the dynamic import to an dynamic import where they are used.`), + white(`Convert the static import to an dynamic import where they are used.`), white(`Example:`) + ' ' + gray(`await import();`) ); @@ -436,6 +439,47 @@ export class MainFileESMOnlyImportError extends StorybookError { } } +export class MainFileMissingError extends StorybookError { + readonly category = Category.CORE_SERVER; + + readonly code = 6; + + public readonly documentation = 'https://storybook.js.org/docs/configure'; + + constructor(public data: { location: string }) { + super(); + } + + template() { + return dedent` + No configuration files have been found in your configDir: ${yellow(this.data.location)}. + Storybook needs "main.js" file, please add it. + + You can pass a --config-dir flag to tell Storybook, where your main.js file is located at). + `; + } +} + +export class MainFileFailedEvaluationError extends StorybookError { + readonly category = Category.CORE_SERVER; + + readonly code = 7; + + public readonly documentation = 'https://storybook.js.org/docs/configure'; + + constructor(public data: { location: string; error: Error }) { + super(); + } + + template() { + return dedent` + Storybook couldn't evaluate your ${yellow(this.data.location)} file. + + ${this.data.error.message} + `; + } +} + export class GenerateNewProjectOnInitError extends StorybookError { readonly category = Category.CLI_INIT; @@ -510,3 +554,18 @@ export class UpgradeStorybookToSameVersionError extends StorybookError { `; } } + +export class UpgradeStorybookUnknownCurrentVersionError extends StorybookError { + readonly category = Category.CLI_UPGRADE; + + readonly code = 5; + + template() { + return dedent` + We couldn't determine the current version of Storybook in your project. + + Are you running the storybook CLI in a project without Storybook? + It might help if you specify your Storybook config directory with the --config-dir flag. + `; + } +} From a321a58d7280f9b4475a89d0f8b0b2f907c7d725 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 16 Feb 2024 16:58:33 +0100 Subject: [PATCH 064/106] improve --- code/lib/cli/src/upgrade.ts | 1 - .../core-common/src/utils/load-main-config.ts | 4 ++-- .../core-events/src/errors/server-errors.ts | 24 ++++++++++++------- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 7f8485aae5d6..cb96bd797912 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -23,7 +23,6 @@ import { } from '@storybook/core-common'; import { automigrate } from './automigrate/index'; import { autoblock } from './autoblock/index'; -import { PreCheckFailure } from './automigrate/types'; type Package = { package: string; diff --git a/code/lib/core-common/src/utils/load-main-config.ts b/code/lib/core-common/src/utils/load-main-config.ts index cbd2785fa10a..b5001418597c 100644 --- a/code/lib/core-common/src/utils/load-main-config.ts +++ b/code/lib/core-common/src/utils/load-main-config.ts @@ -5,7 +5,7 @@ import { validateConfigurationFiles } from './validate-configuration-files'; import { readFile } from 'fs/promises'; import { MainFileESMOnlyImportError, - MainFileFailedEvaluationError, + MainFileEvaluationError, } from '@storybook/core-events/server-errors'; export async function loadMainConfig({ @@ -54,7 +54,7 @@ export async function loadMainConfig({ throw out; } - throw new MainFileFailedEvaluationError({ + throw new MainFileEvaluationError({ location: relative(process.cwd(), mainJsPath), error: e, }); diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index d210f1c23021..acdce05da1df 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -1,4 +1,4 @@ -import { bold, gray, grey, white, yellow } from 'chalk'; +import { bold, gray, grey, white, yellow, underline } from 'chalk'; import dedent from 'ts-dedent'; import { StorybookError } from './storybook-error'; @@ -421,9 +421,9 @@ export class MainFileESMOnlyImportError extends StorybookError { if (this.data.line) { message.push( white( - `In your ${yellow(this.data.location)} file, this line threw an error: ${bold.cyan( + `In your ${yellow(this.data.location)} file, line ${bold.cyan( this.data.num - )}, which looks like this:` + )} threw an error, which looks like this:` ), grey(this.data.line) ); @@ -431,8 +431,10 @@ export class MainFileESMOnlyImportError extends StorybookError { message.push( '', - white(`Convert the static import to an dynamic import where they are used.`), - white(`Example:`) + ' ' + gray(`await import();`) + white(`Convert the static import to an dynamic import ${underline('where they are used')}.`), + white(`Example:`) + ' ' + gray(`await import();`), + '', + 'For more information, please read the documentation link below.' ); return message.join('\n'); @@ -444,6 +446,8 @@ export class MainFileMissingError extends StorybookError { readonly code = 6; + readonly stack = ''; + public readonly documentation = 'https://storybook.js.org/docs/configure'; constructor(public data: { location: string }) { @@ -460,22 +464,26 @@ export class MainFileMissingError extends StorybookError { } } -export class MainFileFailedEvaluationError extends StorybookError { +export class MainFileEvaluationError extends StorybookError { readonly category = Category.CORE_SERVER; readonly code = 7; - public readonly documentation = 'https://storybook.js.org/docs/configure'; + readonly stack = ''; constructor(public data: { location: string; error: Error }) { super(); } template() { + const errorText = white( + (this.data.error.stack || this.data.error.message).replaceAll(process.cwd(), '') + ); + return dedent` Storybook couldn't evaluate your ${yellow(this.data.location)} file. - ${this.data.error.message} + ${errorText} `; } } From c4db489a4b35da39f6a926747f033d14d939f40a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 16 Feb 2024 18:32:05 +0100 Subject: [PATCH 065/106] Re-enable flaky tests --- code/e2e-tests/addon-docs.spec.ts | 3 +-- code/e2e-tests/tags.spec.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 9be08c4b674a..4ae3da33e99e 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -34,8 +34,7 @@ test.describe('addon-docs', () => { await expect(anotherStory).toContainText('Another button, just to show multiple stories'); }); - // FIXME - get rid of the flake - test.skip('should show source=code view for stories', async ({ page }) => { + test('should show source=code view for stories', async ({ page }) => { const skipped = [ // SSv6 does not render stories in the correct order in our sandboxes 'internal\\/ssv6', diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts index e3d79723c8f8..37fb76fb814c 100644 --- a/code/e2e-tests/tags.spec.ts +++ b/code/e2e-tests/tags.spec.ts @@ -3,8 +3,7 @@ import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; -// FIXME - get rid of the flake -test.describe.skip('tags', () => { +test.describe('tags', () => { test.beforeEach(async ({ page }) => { await page.goto(storybookUrl); await new SbPage(page).waitUntilLoaded(); From 9b53955e4e8d08a564fd2f5608168da12de2fa42 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Feb 2024 10:55:09 +0800 Subject: [PATCH 066/106] Update CHANGELOG.prerelease.md --- CHANGELOG.prerelease.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index fc34e6697f26..e7d6ae22d03b 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,7 +1,7 @@ ## 8.0.0-beta.3 -- Actions: Add spy to action for explicit actions - [#26033](https://github.com/storybookjs/storybook/pull/26033), thanks [@kasperpeulen](https://github.com/kasperpeulen)! -- Addon Themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)! +- Addon-actions: Add spy to action for explicit actions - [#26033](https://github.com/storybookjs/storybook/pull/26033), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Addon-themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)! - Addon-docs: Fix pnpm+Vite failing to build with `@storybook/theming` Rollup error - [#26024](https://github.com/storybookjs/storybook/pull/26024), thanks [@JReinhold](https://github.com/JReinhold)! - CLI: Refactor to add autoblockers - [#25934](https://github.com/storybookjs/storybook/pull/25934), thanks [@ndelangen](https://github.com/ndelangen)! - Codemod: Migrate to test package - [#25958](https://github.com/storybookjs/storybook/pull/25958), thanks [@kasperpeulen](https://github.com/kasperpeulen)! From bd7ce6f5f83c1cbb6bf32b841ba705023ad416e8 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sat, 17 Feb 2024 02:58:08 +0000 Subject: [PATCH 067/106] Bump version from "8.0.0-beta.2" to "8.0.0-beta.3" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-manager/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/channels/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/client-logger/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-common/package.json | 2 +- code/lib/core-common/src/versions.ts | 158 +++++++++--------- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/docs-tools/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/manager-api/src/version.ts | 2 +- code/lib/node-logger/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/preview/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/router/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/telemetry/package.json | 2 +- code/lib/test/package.json | 2 +- code/lib/theming/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- 82 files changed, 161 insertions(+), 162 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index ae09048b7f43..9d59b4555ccb 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 7f67bd1206c6..cb6d14cdabd8 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index d0735711dad2..fc57826dd378 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index ece248545b76..1c16d2c0a1a2 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 4455f7a0890c..b4a139a5f8b4 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 6ff40fb86d80..22794fd4ce9b 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index b80b72c7fc93..03d674a63778 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 00aaed7b475f..c70c356a70a6 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 0cf9b95103fd..5a47c37f3d55 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index dc65c436571a..879b5dabff75 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 58bba6fc839f..1ea447fba557 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index d790f15d3b06..136e50cfdcd8 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index f7657f6cf0f7..ac06e9f2783a 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 7ab40549e9fa..8be3f92b9d91 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "View a storyโ€™s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index a0b8e601f203..e58c37701697 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 61e4794a1048..87101fc2d444 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 3f8ed938ff27..f5c3b0622880 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Build responsive components by adjusting Storybookโ€™s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index bac171608295..02f7b800666e 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 5e5a9277d64b..f10e112debd4 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index ebcccddcdeb6..f9973efbd8ef 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index a5cd680014a7..2b15ffc53fb9 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 8b1bbcbc7208..0da35b6230cc 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 78ae2ded1c53..53c979465eae 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index d800e8bc0bc0..34e9a2c4683e 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index d4e3346a826b..775d93dd8350 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index c34b21e89ad7..61ccf7227f24 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index b33e68211d80..f23ee7e89337 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 053aa9b35282..a6915b2f3a2b 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 32215f431682..eabf1dc8fd1a 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 8855bfd2e442..a45a9d4d2578 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 961969e507f7..7b98115e4a81 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index ff1f2b245f63..7a8873ce09c8 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 83f70b36b126..84a467fc9c79 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index eed6922b71bc..d5a7dd79da94 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index c05c303d988f..5c69e711b015 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 224a0ee3b6ed..11d6e352f8bc 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index e9974bfdf16d..605eda5184ea 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 0be834c503cc..e8f7d01f238b 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 27b64dae50cd..f886f9297ad6 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 7a26a80642cb..4a422350b299 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 2ea8e20d58b0..aee4d038a5e1 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index d75bb42b8ab4..c580bf8b6a38 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 259aae0056a3..f7736511b81d 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 9a963332582d..741f4ca4a657 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts index 28ddbab5e59a..dbd2ec2a6d3c 100644 --- a/code/lib/core-common/src/versions.ts +++ b/code/lib/core-common/src/versions.ts @@ -1,82 +1,82 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.0.0-beta.2', - '@storybook/addon-actions': '8.0.0-beta.2', - '@storybook/addon-backgrounds': '8.0.0-beta.2', - '@storybook/addon-controls': '8.0.0-beta.2', - '@storybook/addon-docs': '8.0.0-beta.2', - '@storybook/addon-essentials': '8.0.0-beta.2', - '@storybook/addon-highlight': '8.0.0-beta.2', - '@storybook/addon-interactions': '8.0.0-beta.2', - '@storybook/addon-jest': '8.0.0-beta.2', - '@storybook/addon-links': '8.0.0-beta.2', - '@storybook/addon-mdx-gfm': '8.0.0-beta.2', - '@storybook/addon-measure': '8.0.0-beta.2', - '@storybook/addon-outline': '8.0.0-beta.2', - '@storybook/addon-storysource': '8.0.0-beta.2', - '@storybook/addon-themes': '8.0.0-beta.2', - '@storybook/addon-toolbars': '8.0.0-beta.2', - '@storybook/addon-viewport': '8.0.0-beta.2', - '@storybook/angular': '8.0.0-beta.2', - '@storybook/blocks': '8.0.0-beta.2', - '@storybook/builder-manager': '8.0.0-beta.2', - '@storybook/builder-vite': '8.0.0-beta.2', - '@storybook/builder-webpack5': '8.0.0-beta.2', - '@storybook/channels': '8.0.0-beta.2', - '@storybook/cli': '8.0.0-beta.2', - '@storybook/client-logger': '8.0.0-beta.2', - '@storybook/codemod': '8.0.0-beta.2', - '@storybook/components': '8.0.0-beta.2', - '@storybook/core-common': '8.0.0-beta.2', - '@storybook/core-events': '8.0.0-beta.2', - '@storybook/core-server': '8.0.0-beta.2', - '@storybook/core-webpack': '8.0.0-beta.2', - '@storybook/csf-plugin': '8.0.0-beta.2', - '@storybook/csf-tools': '8.0.0-beta.2', - '@storybook/docs-tools': '8.0.0-beta.2', - '@storybook/ember': '8.0.0-beta.2', - '@storybook/html': '8.0.0-beta.2', - '@storybook/html-vite': '8.0.0-beta.2', - '@storybook/html-webpack5': '8.0.0-beta.2', - '@storybook/instrumenter': '8.0.0-beta.2', - '@storybook/manager': '8.0.0-beta.2', - '@storybook/manager-api': '8.0.0-beta.2', - '@storybook/nextjs': '8.0.0-beta.2', - '@storybook/node-logger': '8.0.0-beta.2', - '@storybook/preact': '8.0.0-beta.2', - '@storybook/preact-vite': '8.0.0-beta.2', - '@storybook/preact-webpack5': '8.0.0-beta.2', - '@storybook/preset-create-react-app': '8.0.0-beta.2', - '@storybook/preset-html-webpack': '8.0.0-beta.2', - '@storybook/preset-preact-webpack': '8.0.0-beta.2', - '@storybook/preset-react-webpack': '8.0.0-beta.2', - '@storybook/preset-server-webpack': '8.0.0-beta.2', - '@storybook/preset-svelte-webpack': '8.0.0-beta.2', - '@storybook/preset-vue3-webpack': '8.0.0-beta.2', - '@storybook/preview': '8.0.0-beta.2', - '@storybook/preview-api': '8.0.0-beta.2', - '@storybook/react': '8.0.0-beta.2', - '@storybook/react-dom-shim': '8.0.0-beta.2', - '@storybook/react-vite': '8.0.0-beta.2', - '@storybook/react-webpack5': '8.0.0-beta.2', - '@storybook/router': '8.0.0-beta.2', - '@storybook/server': '8.0.0-beta.2', - '@storybook/server-webpack5': '8.0.0-beta.2', - '@storybook/source-loader': '8.0.0-beta.2', - '@storybook/svelte': '8.0.0-beta.2', - '@storybook/svelte-vite': '8.0.0-beta.2', - '@storybook/svelte-webpack5': '8.0.0-beta.2', - '@storybook/sveltekit': '8.0.0-beta.2', - '@storybook/telemetry': '8.0.0-beta.2', - '@storybook/test': '8.0.0-beta.2', - '@storybook/theming': '8.0.0-beta.2', - '@storybook/types': '8.0.0-beta.2', - '@storybook/vue3': '8.0.0-beta.2', - '@storybook/vue3-vite': '8.0.0-beta.2', - '@storybook/vue3-webpack5': '8.0.0-beta.2', - '@storybook/web-components': '8.0.0-beta.2', - '@storybook/web-components-vite': '8.0.0-beta.2', - '@storybook/web-components-webpack5': '8.0.0-beta.2', - sb: '8.0.0-beta.2', - storybook: '8.0.0-beta.2', + '@storybook/addon-a11y': '8.0.0-beta.3', + '@storybook/addon-actions': '8.0.0-beta.3', + '@storybook/addon-backgrounds': '8.0.0-beta.3', + '@storybook/addon-controls': '8.0.0-beta.3', + '@storybook/addon-docs': '8.0.0-beta.3', + '@storybook/addon-essentials': '8.0.0-beta.3', + '@storybook/addon-highlight': '8.0.0-beta.3', + '@storybook/addon-interactions': '8.0.0-beta.3', + '@storybook/addon-jest': '8.0.0-beta.3', + '@storybook/addon-links': '8.0.0-beta.3', + '@storybook/addon-mdx-gfm': '8.0.0-beta.3', + '@storybook/addon-measure': '8.0.0-beta.3', + '@storybook/addon-outline': '8.0.0-beta.3', + '@storybook/addon-storysource': '8.0.0-beta.3', + '@storybook/addon-themes': '8.0.0-beta.3', + '@storybook/addon-toolbars': '8.0.0-beta.3', + '@storybook/addon-viewport': '8.0.0-beta.3', + '@storybook/angular': '8.0.0-beta.3', + '@storybook/blocks': '8.0.0-beta.3', + '@storybook/builder-manager': '8.0.0-beta.3', + '@storybook/builder-vite': '8.0.0-beta.3', + '@storybook/builder-webpack5': '8.0.0-beta.3', + '@storybook/channels': '8.0.0-beta.3', + '@storybook/cli': '8.0.0-beta.3', + '@storybook/client-logger': '8.0.0-beta.3', + '@storybook/codemod': '8.0.0-beta.3', + '@storybook/components': '8.0.0-beta.3', + '@storybook/core-common': '8.0.0-beta.3', + '@storybook/core-events': '8.0.0-beta.3', + '@storybook/core-server': '8.0.0-beta.3', + '@storybook/core-webpack': '8.0.0-beta.3', + '@storybook/csf-plugin': '8.0.0-beta.3', + '@storybook/csf-tools': '8.0.0-beta.3', + '@storybook/docs-tools': '8.0.0-beta.3', + '@storybook/ember': '8.0.0-beta.3', + '@storybook/html': '8.0.0-beta.3', + '@storybook/html-vite': '8.0.0-beta.3', + '@storybook/html-webpack5': '8.0.0-beta.3', + '@storybook/instrumenter': '8.0.0-beta.3', + '@storybook/manager': '8.0.0-beta.3', + '@storybook/manager-api': '8.0.0-beta.3', + '@storybook/nextjs': '8.0.0-beta.3', + '@storybook/node-logger': '8.0.0-beta.3', + '@storybook/preact': '8.0.0-beta.3', + '@storybook/preact-vite': '8.0.0-beta.3', + '@storybook/preact-webpack5': '8.0.0-beta.3', + '@storybook/preset-create-react-app': '8.0.0-beta.3', + '@storybook/preset-html-webpack': '8.0.0-beta.3', + '@storybook/preset-preact-webpack': '8.0.0-beta.3', + '@storybook/preset-react-webpack': '8.0.0-beta.3', + '@storybook/preset-server-webpack': '8.0.0-beta.3', + '@storybook/preset-svelte-webpack': '8.0.0-beta.3', + '@storybook/preset-vue3-webpack': '8.0.0-beta.3', + '@storybook/preview': '8.0.0-beta.3', + '@storybook/preview-api': '8.0.0-beta.3', + '@storybook/react': '8.0.0-beta.3', + '@storybook/react-dom-shim': '8.0.0-beta.3', + '@storybook/react-vite': '8.0.0-beta.3', + '@storybook/react-webpack5': '8.0.0-beta.3', + '@storybook/router': '8.0.0-beta.3', + '@storybook/server': '8.0.0-beta.3', + '@storybook/server-webpack5': '8.0.0-beta.3', + '@storybook/source-loader': '8.0.0-beta.3', + '@storybook/svelte': '8.0.0-beta.3', + '@storybook/svelte-vite': '8.0.0-beta.3', + '@storybook/svelte-webpack5': '8.0.0-beta.3', + '@storybook/sveltekit': '8.0.0-beta.3', + '@storybook/telemetry': '8.0.0-beta.3', + '@storybook/test': '8.0.0-beta.3', + '@storybook/theming': '8.0.0-beta.3', + '@storybook/types': '8.0.0-beta.3', + '@storybook/vue3': '8.0.0-beta.3', + '@storybook/vue3-vite': '8.0.0-beta.3', + '@storybook/vue3-webpack5': '8.0.0-beta.3', + '@storybook/web-components': '8.0.0-beta.3', + '@storybook/web-components-vite': '8.0.0-beta.3', + '@storybook/web-components-webpack5': '8.0.0-beta.3', + sb: '8.0.0-beta.3', + storybook: '8.0.0-beta.3', }; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index e582c124ddd9..cd2c69d2d398 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 1d00fe7feb56..ac629c9e7099 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 29ed3fa3ac6f..0f78c1756919 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 8fbe1df9e82a..82864dc2369c 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index a34e88502aa8..e8fd36980ec6 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 3db128a20be1..cf07ca527f96 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index d09086c92186..46fd7c21bf93 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 8d8d7003ac71..572f7169d407 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 2a37c88d9038..f8568794cba1 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.0.0-beta.2'; +export const version = '8.0.0-beta.3'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 32b27fc56792..0ecd759a4732 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 4fd21320cb69..14c43ccfc5c7 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 6d8eb3ddf8b1..d3608366daed 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 2eff5f1f9b77..2292055e0a64 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 926d45aa0ef5..202947c825b4 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 978970834cc1..210533725374 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index 6792a8b06d75..c122dace59dd 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 1dd68eca5258..4612b14b9a6c 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 0f5d3d6289be..c7d1849ed03b 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 1849c1a5b2c1..8cf31032d038 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index ec5bb2c3de6e..84afe61a2813 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -292,6 +292,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.0.0-beta.3" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 888077e98cd5..d41183fc2ebb 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 5ed62bbe8a09..b0b501034332 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 9bf4e57057b3..4e202e5647cf 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 1178459c5875..16b752c225c8 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 429a852c91aa..7b11697edd49 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 06dc39cc959e..f1bc815da7f1 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 1ee320a0a21f..ab979bf25def 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 21989c8648d9..787770b94505 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 4b22d0909b43..0a3faa3bdc8f 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 1aab923414bf..edc6d843aa79 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 5cca1880cb39..62088980bc5f 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index e1eb7d92163d..b4756c28a4cb 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 1803817d1357..ea46a6860ce5 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index ff50940d4c28..10394c503b82 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 0369a178e992..5719ea26e0be 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/components/package.json b/code/ui/components/package.json index a02aa17fbc32..2b83383a05f4 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index b4046fecbf0f..86814f97bbdf 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.0.0-beta.2", + "version": "8.0.0-beta.3", "description": "Core Storybook UI", "keywords": [ "storybook" From aea7ea3dbee02aec0bc769b8dfab58f6c8d5c4fc Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Feb 2024 14:55:21 +0800 Subject: [PATCH 068/106] Core: Add addon removal telemetry --- code/lib/cli/src/generate.ts | 21 +++++++++++++++---- .../core-server/src/presets/common-preset.ts | 16 +++++++++----- code/lib/telemetry/src/types.ts | 3 ++- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index 250cd200d206..b4e02c322b46 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -6,13 +6,19 @@ import { sync as readUpSync } from 'read-pkg-up'; import invariant from 'tiny-invariant'; import { logger } from '@storybook/node-logger'; -import { addToGlobalContext } from '@storybook/telemetry'; -import { parseList, getEnvConfig, JsPackageManagerFactory, versions } from '@storybook/core-common'; +import { addToGlobalContext, telemetry } from '@storybook/telemetry'; +import { + parseList, + getEnvConfig, + JsPackageManagerFactory, + versions, + removeAddon as remove, +} from '@storybook/core-common'; +import { withTelemetry } from '@storybook/core-server'; import type { CommandOptions } from './generators/types'; import { initiate } from './initiate'; import { add } from './add'; -import { removeAddon as remove } from '@storybook/core-common'; import { migrate } from './migrate'; import { upgrade, type UpgradeOptions } from './upgrade'; import { sandbox } from './sandbox'; @@ -71,7 +77,14 @@ command('remove ') '--package-manager ', 'Force package manager for installing dependencies' ) - .action((addonName: string, options: any) => remove(addonName, options)); + .action((addonName: string, options: any) => + withTelemetry('remove', { cliOptions: options }, async () => { + await remove(addonName, options); + if (!options.disableTelemetry) { + await telemetry('remove', { addon: addonName, source: 'cli' }); + } + }) + ); command('upgrade') .description(`Upgrade your Storybook packages to v${versions.storybook}`) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 4e0c183ea7c1..6dcd6366eff0 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -7,7 +7,7 @@ import { getPreviewBodyTemplate, getPreviewHeadTemplate, loadEnvs, - removeAddon, + removeAddon as removeAddonBase, } from '@storybook/core-common'; import type { CLIOptions, @@ -162,10 +162,16 @@ const optionalEnvToBoolean = (input: string | undefined): boolean | undefined => }; // eslint-disable-next-line @typescript-eslint/naming-convention -export const experimental_serverAPI = (extension: Record) => ({ - ...extension, - removeAddon, -}); +export const experimental_serverAPI = (extension: Record, options: Options) => { + let removeAddon = removeAddonBase; + if (!options.disableTelemetry) { + removeAddon = async (id: string, opts: any) => { + await telemetry('remove', { addon: id, source: 'api' }); + return removeAddonBase(id, opts); + }; + } + return { ...extension, removeAddon }; +}; /** * If for some reason this config is not applied, the reason is that diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts index 8f091703bcae..846e7adb9556 100644 --- a/code/lib/telemetry/src/types.ts +++ b/code/lib/telemetry/src/types.ts @@ -15,7 +15,8 @@ export type EventType = | 'error' | 'error-metadata' | 'version-update' - | 'core-config'; + | 'core-config' + | 'remove'; export interface Dependency { version: string | undefined; From b34b44d6ef7805a730b0a70dc2b2168edf3da808 Mon Sep 17 00:00:00 2001 From: Hendrik Schmitz Date: Mon, 19 Feb 2024 08:50:28 +0100 Subject: [PATCH 069/106] Core: Update ip version to fix CVE-2023-42282 --- code/lib/core-server/package.json | 2 +- code/yarn.lock | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index ac629c9e7099..ff37db230991 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -83,7 +83,7 @@ "express": "^4.17.3", "fs-extra": "^11.1.0", "globby": "^11.0.2", - "ip": "^2.0.0", + "ip": "^2.0.1", "lodash": "^4.17.21", "open": "^8.4.0", "pretty-hrtime": "^1.0.3", diff --git a/code/yarn.lock b/code/yarn.lock index 2c786bd21e03..86f09cd405d2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5571,7 +5571,7 @@ __metadata: express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^11.0.2" - ip: "npm:^2.0.0" + ip: "npm:^2.0.1" lodash: "npm:^4.17.21" node-fetch: "npm:^3.3.1" open: "npm:^8.4.0" @@ -17277,6 +17277,13 @@ __metadata: languageName: node linkType: hard +"ip@npm:^2.0.1": + version: 2.0.1 + resolution: "ip@npm:2.0.1" + checksum: cab8eb3e88d0abe23e4724829621ec4c4c5cb41a7f936a2e626c947128c1be16ed543448d42af7cca95379f9892bfcacc1ccd8d09bc7e8bea0e86d492ce33616 + languageName: node + linkType: hard + "ipaddr.js@npm:1.9.1": version: 1.9.1 resolution: "ipaddr.js@npm:1.9.1" From e0e439e713444c653aa101ae4665452b55d97c26 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 19 Feb 2024 09:31:02 +0100 Subject: [PATCH 070/106] Update automigrate fixes prompt types --- .../fixes/angular-builders-multiproject.ts | 2 +- .../automigrate/fixes/incompatible-addons.ts | 2 +- .../automigrate/fixes/prompt-remove-react.ts | 2 +- .../fixes/remove-global-client-apis.ts | 2 +- .../fixes/remove-jest-testing-library.ts | 2 +- .../automigrate/fixes/storyshots-migration.ts | 2 +- .../fixes/webpack5-compiler-setup.ts | 4 ++ code/lib/cli/src/automigrate/index.ts | 39 ++++++++++++++++--- code/lib/cli/src/automigrate/types.ts | 10 ++++- 9 files changed, 53 insertions(+), 12 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts b/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts index 9bf74a288416..d57fbd28a10c 100644 --- a/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts +++ b/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts @@ -10,7 +10,7 @@ interface AngularBuildersMultiprojectRunOptions {} export const angularBuildersMultiproject: Fix = { id: 'angular-builders-multiproject', - promptOnly: true, + promptType: 'manual', async check({ packageManager, mainConfig }) { // Skip in case of NX diff --git a/code/lib/cli/src/automigrate/fixes/incompatible-addons.ts b/code/lib/cli/src/automigrate/fixes/incompatible-addons.ts index ce9d01ccd96a..469383834cc1 100644 --- a/code/lib/cli/src/automigrate/fixes/incompatible-addons.ts +++ b/code/lib/cli/src/automigrate/fixes/incompatible-addons.ts @@ -9,7 +9,7 @@ interface IncompatibleAddonsOptions { export const incompatibleAddons: Fix = { id: 'incompatible-addons', - promptOnly: true, + promptType: 'manual', async check({ mainConfig, packageManager }) { const incompatibleAddonList = await getIncompatibleAddons(mainConfig, packageManager); diff --git a/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts b/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts index eb93ce015b08..a7586a03ff15 100644 --- a/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts +++ b/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts @@ -5,7 +5,7 @@ import type { Fix } from '../types'; export const removeReactDependency: Fix<{}> = { id: 'remove-react-dependency', - promptOnly: true, + promptType: 'manual', async check({ packageManager, mainConfig, storybookVersion }) { // when the user is using the react renderer, we should not prompt them to remove react diff --git a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts b/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts index 4a1304dae1a6..2f25e5277096 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts @@ -19,7 +19,7 @@ interface GlobalClientAPIOptions { export const removedGlobalClientAPIs: Fix = { id: 'removedglobalclientapis', - promptOnly: true, + promptType: 'manual', async check({ previewConfigPath }) { if (previewConfigPath) { diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts index 87cf964468b3..ba238dd2740a 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts @@ -4,7 +4,7 @@ import type { Fix } from '../types'; export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> = { id: 'remove-jest-testing-library', - promptOnly: true, + promptType: 'manual', async check({ mainConfig, packageManager }) { const deps = await packageManager.getAllDependencies(); diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts index 6d047f88449f..6d132037c3e0 100644 --- a/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts +++ b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts @@ -4,7 +4,7 @@ import type { Fix } from '../types'; export const storyshotsMigration: Fix = { id: 'storyshots-migration', - promptOnly: true, + promptType: 'manual', async check({ mainConfig, packageManager }) { const allDeps = await packageManager.getAllDependencies(); diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index 778b099f272a..192b6ca54f70 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -29,6 +29,10 @@ type Options = { export const webpack5CompilerSetup: Fix = { id: 'webpack5-compiler-setup', + promptType(result) { + return result.isNextJs && !result.shouldRemoveSWCFlag ? 'notified' : 'auto'; + }, + async check({ mainConfig, packageManager }) { const addons = getAddonNames(mainConfig); diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index 19d4ee8922e9..f29a5263160a 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -20,6 +20,7 @@ import type { FixSummary, PreCheckFailure, AutofixOptionsFromCLI, + Prompt, } from './fixes'; import { FixStatus, allFixes } from './fixes'; import { cleanLog } from './helpers/cleanLog'; @@ -217,15 +218,29 @@ export async function runFixes({ } if (result) { + const promptType: Prompt = + typeof f.promptType === 'function' ? await f.promptType(result) : f.promptType ?? 'auto'; + logger.info(`\n๐Ÿ”Ž found a '${chalk.cyan(f.id)}' migration:`); const message = f.prompt(result); + const getTitle = () => { + switch (promptType) { + case 'auto': + return 'Automigration detected'; + case 'manual': + return 'Manual migration detected'; + case 'notified': + return 'Migration notification'; + } + }; + logger.info( boxen(message, { borderStyle: 'round', padding: 1, borderColor: '#F1618C', - title: f.promptOnly ? 'Manual migration detected' : 'Automigration detected', + title: getTitle(), }) ); @@ -236,11 +251,11 @@ export async function runFixes({ runAnswer = { fix: false }; } else if (yes) { runAnswer = { fix: true }; - if (f.promptOnly) { + if (promptType === 'manual') { fixResults[f.id] = FixStatus.MANUAL_SUCCEEDED; fixSummary.manual.push(f.id); } - } else if (f.promptOnly) { + } else if (promptType === 'manual') { fixResults[f.id] = FixStatus.MANUAL_SUCCEEDED; fixSummary.manual.push(f.id); @@ -266,7 +281,7 @@ export async function runFixes({ fixResults[f.id] = FixStatus.MANUAL_SKIPPED; break; } - } else { + } else if (promptType === 'auto') { runAnswer = await prompts( { type: 'confirm', @@ -280,12 +295,26 @@ export async function runFixes({ }, } ); + } else if (promptType === 'notified') { + runAnswer = await prompts( + { + type: 'confirm', + name: 'fix', + message: `Do you want to continue?`, + initial: true, + }, + { + onCancel: () => { + throw new Error(); + }, + } + ); } } catch (err) { break; } - if (!f.promptOnly) { + if (promptType === 'auto') { invariant(runAnswer, 'runAnswer must be defined if not promptOnly'); if (runAnswer.fix) { try { diff --git a/code/lib/cli/src/automigrate/types.ts b/code/lib/cli/src/automigrate/types.ts index 97d20c09dc45..6ef4f243b9ea 100644 --- a/code/lib/cli/src/automigrate/types.ts +++ b/code/lib/cli/src/automigrate/types.ts @@ -19,9 +19,17 @@ export interface RunOptions { skipInstall?: boolean; } +/** + * promptType defines how the user will be prompted to apply an automigration fix + * - auto: the fix will be applied automatically + * - manual: the user will be prompted to apply the fix + * - notified: the user will be notified about the some changes. A fix isn't required + */ +export type Prompt = 'auto' | 'manual' | 'notified'; + export interface Fix { id: string; - promptOnly?: boolean; + promptType?: Prompt | ((result: ResultType) => Promise | Prompt); check: (options: CheckOptions) => Promise; prompt: (result: ResultType) => string; run?: (options: RunOptions) => Promise; From ece437c3fc502638313b3bb00b917e8c0f234f04 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 19 Feb 2024 09:40:09 +0100 Subject: [PATCH 071/106] Add tests --- .../fixes/webpack5-compiler-setup.test.ts | 582 +++++++++--------- .../fixes/webpack5-compiler-setup.ts | 4 +- 2 files changed, 308 insertions(+), 278 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts index 0b0ddc98e2fd..db437fbb13df 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -44,258 +44,277 @@ vi.mock('chalk', () => { }; }); -describe('check function', () => { - describe('webpack5Migration check function', () => { - describe('return null', async () => { - it('should return null if one of the addons is already installed', async () => { - const result = check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, +describe('webpack5Migration check function', () => { + describe('return null', async () => { + it('should return null if one of the addons is already installed', async () => { + const result = check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); }, - mainConfig: { - addons: ['@storybook/addon-webpack5-compiler-swc'], - framework: { - name: '@storybook/react-webpack5', - options: { - builder: { - useSWC: true, - }, + }, + mainConfig: { + addons: ['@storybook/addon-webpack5-compiler-swc'], + framework: { + name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: true, }, }, }, - }); - - expect(result).resolves.toBeNull(); + }, }); - it('should return null if the builder is not webpack5', async () => { - const result = check({ - mainConfig: { - framework: { - name: '@storybook/react-vite', - }, - }, - }); - - await expect(result).resolves.toBeNull(); - }); + expect(result).resolves.toBeNull(); + }); - it('should return null if the framework is Angular', async () => { - const result = check({ - mainConfig: { - framework: '@storybook/angular', + it('should return null if the builder is not webpack5', async () => { + const result = check({ + mainConfig: { + framework: { + name: '@storybook/react-vite', }, - }); - - await expect(result).resolves.toBeNull(); - // ... + }, }); - it('should return null if the framework is Ember', async () => { - const result = check({ - mainConfig: { - framework: { - name: '@storybook/ember', - }, - }, - }); + await expect(result).resolves.toBeNull(); + }); - await expect(result).resolves.toBeNull(); + it('should return null if the framework is Angular', async () => { + const result = check({ + mainConfig: { + framework: '@storybook/angular', + }, }); - it('should return null if the framework is Webpack5 based but a different framework builder is used', async () => { - const result = check({ - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - options: { - builder: '@storybook/builder-vite', - }, - }, - }, - }); + await expect(result).resolves.toBeNull(); + // ... + }); - await expect(result).resolves.toBeNull(); + it('should return null if the framework is Ember', async () => { + const result = check({ + mainConfig: { + framework: { + name: '@storybook/ember', + }, + }, }); - it('should return null if the framework is Webpack5 based but a different core builder is used', async () => { - const result = check({ - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - }, - core: { + await expect(result).resolves.toBeNull(); + }); + + it('should return null if the framework is Webpack5 based but a different framework builder is used', async () => { + const result = check({ + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { builder: '@storybook/builder-vite', }, }, - }); - - await expect(result).resolves.toBeNull(); + }, }); - it('should return null if the framework is CRA based', async () => { - const result = check({ - packageManager: { - getPackageVersion: (name) => { - if (name === 'react-scripts') { - return Promise.resolve('5.0.0'); - } + await expect(result).resolves.toBeNull(); + }); - return Promise.resolve(null); - }, + it('should return null if the framework is Webpack5 based but a different core builder is used', async () => { + const result = check({ + mainConfig: { + framework: { + name: '@storybook/react-webpack5', }, - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - }, + core: { + builder: '@storybook/builder-vite', }, - }); + }, + }); + + await expect(result).resolves.toBeNull(); + }); + + it('should return null if the framework is CRA based', async () => { + const result = check({ + packageManager: { + getPackageVersion: (name) => { + if (name === 'react-scripts') { + return Promise.resolve('5.0.0'); + } - await expect(result).resolves.toBeNull(); + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + }, + }, }); + + await expect(result).resolves.toBeNull(); }); + }); - describe('useSWC', () => { - it('should return shouldRemoveSWCFlag: true when useSWC flag is set to true', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, + describe('useSWC', () => { + it('should return shouldRemoveSWCFlag: true when useSWC flag is set to true', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); }, - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - options: { - builder: { - useSWC: true, - }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: true, }, }, }, - }); + }, + }); - expect(result).contains({ - shouldRemoveSWCFlag: true, - }); + expect(result).contains({ + shouldRemoveSWCFlag: true, }); + }); - it('should return shouldRemoveSWCFlag: true when useSWC flag is set to false', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, + it('should return shouldRemoveSWCFlag: true when useSWC flag is set to false', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); }, - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - options: { - builder: { - useSWC: false, - }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: false, }, }, }, - }); + }, + }); - expect(result).contains({ - shouldRemoveSWCFlag: true, - }); + expect(result).contains({ + shouldRemoveSWCFlag: true, }); + }); - it('should return shouldRemoveSWCFlag: false when useSWC flag is not set', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, + it('should return shouldRemoveSWCFlag: false when useSWC flag is not set', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); }, - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - options: { - builder: {}, - }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + options: { + builder: {}, }, }, - }); + }, + }); - expect(result).contains({ - shouldRemoveSWCFlag: false, - }); + expect(result).contains({ + shouldRemoveSWCFlag: false, }); }); + }); - describe('Next.js', () => { - it('should return isNextJs: true when the framework is nextjs', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, + describe('Next.js', () => { + it('should return isNextJs: true when the framework is nextjs', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); }, - mainConfig: { - framework: { - name: '@storybook/nextjs', - }, + }, + mainConfig: { + framework: { + name: '@storybook/nextjs', }, - }); + }, + }); - expect(result).contains({ - isNextJs: true, - }); + expect(result).contains({ + isNextJs: true, }); + }); - it('should return isNextJs: true AND should return shouldRemoveSWCFlag: true when useSWC flag is set', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, + it('should return isNextJs: true AND should return shouldRemoveSWCFlag: true when useSWC flag is set', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); }, - mainConfig: { - framework: { - name: '@storybook/nextjs', - options: { - builder: { - useSWC: true, - }, + }, + mainConfig: { + framework: { + name: '@storybook/nextjs', + options: { + builder: { + useSWC: true, }, }, }, - }); + }, + }); - expect(result).contains({ - isNextJs: true, - shouldRemoveSWCFlag: true, - }); + expect(result).contains({ + isNextJs: true, + shouldRemoveSWCFlag: true, }); + }); - it('should return isNextJs: false when the framework is not nextjs', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, + it('should return isNextJs: false when the framework is not nextjs', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); }, - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', }, - }); + }, + }); - expect(result).contains({ - isNextJs: false, - }); + expect(result).contains({ + isNextJs: false, }); }); + }); + + describe('return options', () => { + it('should return defaultCompiler: babel when useSWC flag is not set', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/react-webpack5', + }, + }, + }); - describe('return options', () => { - it('should return defaultCompiler: babel when useSWC flag is not set', async () => { + expect(result).contains({ + defaultCompiler: CoreWebpackCompilers.Babel, + }); + }); + + describe('user selects swc', () => { + it('should return defaultCompiler: swc when useSWC flag is set', async () => { const result = await check({ packageManager: { getPackageVersion: (name) => { @@ -305,73 +324,85 @@ describe('check function', () => { mainConfig: { framework: { name: '@storybook/react-webpack5', + options: { + builder: { + useSWC: true, + }, + }, }, }, }); expect(result).contains({ - defaultCompiler: CoreWebpackCompilers.Babel, + defaultCompiler: CoreWebpackCompilers.SWC, }); }); + }); - describe('user selects swc', () => { - it('should return defaultCompiler: swc when useSWC flag is set', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - return Promise.resolve(null); - }, - }, - mainConfig: { - framework: { - name: '@storybook/react-webpack5', - options: { - builder: { - useSWC: true, - }, - }, - }, - }, - }); + it('should return options if the framework is unknown but webpack5 was detected', async () => { + const result = await check({ + packageManager: { + getPackageVersion: (name) => { + if (name === 'webpack') { + return Promise.resolve('5.0.0'); + } - expect(result).contains({ - defaultCompiler: CoreWebpackCompilers.SWC, - }); - }); + return Promise.resolve(null); + }, + }, + mainConfig: { + framework: { + name: '@storybook/unknown', + }, + }, }); - it('should return options if the framework is unknown but webpack5 was detected', async () => { - const result = await check({ - packageManager: { - getPackageVersion: (name) => { - if (name === 'webpack') { - return Promise.resolve('5.0.0'); - } + expect(result).not.toBeNull(); + }); + }); +}); - return Promise.resolve(null); - }, - }, - mainConfig: { - framework: { - name: '@storybook/unknown', - }, - }, - }); +describe('promptOnly', () => { + it('should return notified if isNextJs = true and shouldRemoveSWCFlag = false', () => { + const promptType = webpack5CompilerSetup.promptType({ + isNextJs: true, + shouldRemoveSWCFlag: false, + defaultCompiler: undefined, + }); - expect(result).not.toBeNull(); - }); + expect(promptType).toBe('notified'); + }); + + it('should return auto if isNextJs = false', () => { + const promptType = webpack5CompilerSetup.promptType({ + isNextJs: false, + shouldRemoveSWCFlag: false, + defaultCompiler: undefined, }); + + expect(promptType).toBe('auto'); }); - describe('prompt', () => { - it('shouldRemoveSWCFlag = true', async () => { - const prompt = webpack5CompilerSetup.prompt({ - shouldRemoveSWCFlag: true, - isNextJs: false, - defaultCompiler: CoreWebpackCompilers.SWC, - }); + it('should return auto if shouldRemoveSWCFlag is true', () => { + const promptType = webpack5CompilerSetup.promptType({ + isNextJs: true, + shouldRemoveSWCFlag: true, + defaultCompiler: undefined, + }); - expect(prompt).toMatchInlineSnapshot(` + expect(promptType).toBe('auto'); + }); +}); + +describe('prompt', () => { + it('shouldRemoveSWCFlag = true', async () => { + const prompt = webpack5CompilerSetup.prompt({ + shouldRemoveSWCFlag: true, + isNextJs: false, + defaultCompiler: CoreWebpackCompilers.SWC, + }); + + expect(prompt).toMatchInlineSnapshot(` "We need to update your Storybook configuration for Webpack 5. The framework.options.builder.useSWC flag will be removed. @@ -384,16 +415,16 @@ describe('check function', () => { After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" `); - }); + }); - it('shouldRemoveSWCFlag = false', async () => { - const prompt = webpack5CompilerSetup.prompt({ - shouldRemoveSWCFlag: false, - isNextJs: false, - defaultCompiler: CoreWebpackCompilers.SWC, - }); + it('shouldRemoveSWCFlag = false', async () => { + const prompt = webpack5CompilerSetup.prompt({ + shouldRemoveSWCFlag: false, + isNextJs: false, + defaultCompiler: CoreWebpackCompilers.SWC, + }); - expect(prompt).toMatchInlineSnapshot(` + expect(prompt).toMatchInlineSnapshot(` "Storybook's Webpack5 builder is now compiler agnostic, meaning you have to install an additional addon to set up a compiler for Webpack5. We have detected, that you want to use SWC as the compiler for Webpack5. @@ -403,16 +434,16 @@ describe('check function', () => { After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" `); - }); + }); - it('defaultCompiler = babel', async () => { - const prompt = webpack5CompilerSetup.prompt({ - shouldRemoveSWCFlag: false, - isNextJs: false, - defaultCompiler: CoreWebpackCompilers.Babel, - }); + it('defaultCompiler = babel', async () => { + const prompt = webpack5CompilerSetup.prompt({ + shouldRemoveSWCFlag: false, + isNextJs: false, + defaultCompiler: CoreWebpackCompilers.Babel, + }); - expect(prompt).toMatchInlineSnapshot(` + expect(prompt).toMatchInlineSnapshot(` "Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project: - Babel: A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. @@ -423,16 +454,16 @@ describe('check function', () => { After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" `); - }); + }); - it('isNextJs = true', () => { - const prompt = webpack5CompilerSetup.prompt({ - shouldRemoveSWCFlag: true, - isNextJs: true, - defaultCompiler: CoreWebpackCompilers.SWC, - }); + it('isNextJs = true', () => { + const prompt = webpack5CompilerSetup.prompt({ + shouldRemoveSWCFlag: true, + isNextJs: true, + defaultCompiler: CoreWebpackCompilers.SWC, + }); - expect(prompt).toMatchInlineSnapshot(` + expect(prompt).toMatchInlineSnapshot(` "We need to update your Storybook configuration for Webpack 5. The framework.options.builder.useSWC flag will be removed. @@ -444,16 +475,16 @@ describe('check function', () => { Storybook will use SWC as the compiler. - If you don't have a babel.config.js file in your project, Storybook will use SWC as the compiler." `); - }); + }); - it('isNextjs = false AND defaultCompiler = swc', () => { - const prompt = webpack5CompilerSetup.prompt({ - shouldRemoveSWCFlag: false, - isNextJs: false, - defaultCompiler: CoreWebpackCompilers.SWC, - }); + it('isNextjs = false AND defaultCompiler = swc', () => { + const prompt = webpack5CompilerSetup.prompt({ + shouldRemoveSWCFlag: false, + isNextJs: false, + defaultCompiler: CoreWebpackCompilers.SWC, + }); - expect(prompt).toMatchInlineSnapshot(` + expect(prompt).toMatchInlineSnapshot(` "Storybook's Webpack5 builder is now compiler agnostic, meaning you have to install an additional addon to set up a compiler for Webpack5. We have detected, that you want to use SWC as the compiler for Webpack5. @@ -463,16 +494,16 @@ describe('check function', () => { After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" `); - }); + }); - it('isNextjs = false AND defaultCompiler = babel', () => { - const prompt = webpack5CompilerSetup.prompt({ - shouldRemoveSWCFlag: false, - isNextJs: false, - defaultCompiler: CoreWebpackCompilers.Babel, - }); + it('isNextjs = false AND defaultCompiler = babel', () => { + const prompt = webpack5CompilerSetup.prompt({ + shouldRemoveSWCFlag: false, + isNextJs: false, + defaultCompiler: CoreWebpackCompilers.Babel, + }); - expect(prompt).toMatchInlineSnapshot(` + expect(prompt).toMatchInlineSnapshot(` "Storybook's Webpack5 builder is now compiler agnostic, meaning you can choose a compiler addon that best fits your project: - Babel: A vast ecosystem and is battle-tested. It's a robust choice if you have an extensive Babel setup or need specific Babel plugins for your project. @@ -483,6 +514,5 @@ describe('check function', () => { After the migration, you can switch Webpack5 compilers by swapping the addon in your project. You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support" `); - }); }); }); diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index 192b6ca54f70..c4ef5740412d 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -26,7 +26,7 @@ type Options = { isNextJs: boolean; }; -export const webpack5CompilerSetup: Fix = { +export const webpack5CompilerSetup = { id: 'webpack5-compiler-setup', promptType(result) { @@ -182,7 +182,7 @@ export const webpack5CompilerSetup: Fix = { }); } }, -}; +} satisfies Fix; async function askUserForCompilerChoice() { const response = await prompts<'compiler'>({ From fd6a748190f09d9fee906357daaead829ca4243f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 09:46:34 +0100 Subject: [PATCH 072/106] rename incorrectly named type interfaces --- code/lib/cli/src/automigrate/fixes/vite-config-file.ts | 4 ++-- code/lib/cli/src/automigrate/fixes/vite4.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts index f8047a839af9..1719035fc220 100644 --- a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts +++ b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts @@ -5,7 +5,7 @@ import { getFrameworkPackageName } from '../helpers/mainConfigFile'; import { frameworkToRenderer } from '../../helpers'; import { frameworkPackages } from '@storybook/core-common'; -interface Webpack5RunOptions { +interface ViteConfigFileRunOptions { plugins: string[]; existed: boolean; } @@ -108,4 +108,4 @@ export const viteConfigFile = { This change was necessary to support newer versions of Vite. `; }, -} satisfies Fix; +} satisfies Fix; diff --git a/code/lib/cli/src/automigrate/fixes/vite4.ts b/code/lib/cli/src/automigrate/fixes/vite4.ts index d04c4abd10d7..f85cc4d57cef 100644 --- a/code/lib/cli/src/automigrate/fixes/vite4.ts +++ b/code/lib/cli/src/automigrate/fixes/vite4.ts @@ -5,7 +5,7 @@ import type { Fix } from '../types'; const logger = console; -interface Webpack5RunOptions { +interface Vite4RunOptions { viteVersion: string | null; } @@ -40,4 +40,4 @@ export const vite4 = { await packageManager.addDependencies({ installAsDevDependencies: true }, deps); } }, -} satisfies Fix; +} satisfies Fix; From 1307cd3ed491275326b602b0ab81bc66a18a5bf1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 10:12:57 +0100 Subject: [PATCH 073/106] resolve https://github.com/storybookjs/storybook/pull/25934#pullrequestreview-1881973378 --- .../lib/cli/src/automigrate/fixes/vite-config-file.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts index 1719035fc220..63fdb659d4d6 100644 --- a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts +++ b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts @@ -14,7 +14,7 @@ export const viteConfigFile = { id: 'viteConfigFile', async check({ mainConfig, packageManager }) { - const viteConfigPath = await findUp([ + let viteConfigPath = await findUp([ 'vite.config.js', 'vite.config.mjs', 'vite.config.cjs', @@ -45,6 +45,15 @@ export const viteConfigFile = { const rendererName = frameworkToRenderer[frameworkName as keyof typeof frameworkToRenderer]; + if ( + !viteConfigFile && + mainConfig.core?.builder && + typeof mainConfig.core?.builder !== 'string' && + mainConfig.core?.builder.options + ) { + viteConfigPath = mainConfig.core?.builder.options.viteConfigPath; + } + if (!viteConfigPath && isUsingViteBuilder) { const plugins = []; From 4ee04785a90b7584383ea0f9559eb795c3e3d2c7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 10:44:17 +0100 Subject: [PATCH 074/106] change var to boolean --- .../src/automigrate/fixes/vite-config-file.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts index 63fdb659d4d6..899c3807ed3a 100644 --- a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts +++ b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts @@ -14,12 +14,12 @@ export const viteConfigFile = { id: 'viteConfigFile', async check({ mainConfig, packageManager }) { - let viteConfigPath = await findUp([ + let isViteConfigFileFound = !!(await findUp([ 'vite.config.js', 'vite.config.mjs', 'vite.config.cjs', 'vite.config.ts', - ]); + ])); const rendererToVitePluginMap: Record = { preact: '@preact/preset-vite', @@ -46,15 +46,15 @@ export const viteConfigFile = { const rendererName = frameworkToRenderer[frameworkName as keyof typeof frameworkToRenderer]; if ( - !viteConfigFile && + !isViteConfigFileFound && mainConfig.core?.builder && typeof mainConfig.core?.builder !== 'string' && mainConfig.core?.builder.options ) { - viteConfigPath = mainConfig.core?.builder.options.viteConfigPath; + isViteConfigFileFound = !!mainConfig.core?.builder.options.viteConfigPath; } - if (!viteConfigPath && isUsingViteBuilder) { + if (!isViteConfigFileFound && isUsingViteBuilder) { const plugins = []; if (rendererToVitePluginMap[rendererName]) { @@ -63,7 +63,7 @@ export const viteConfigFile = { return { plugins, - existed: !!viteConfigPath, + existed: isViteConfigFileFound, }; } @@ -75,7 +75,7 @@ export const viteConfigFile = { const pluginVersion = await packageManager.getPackageVersion(plugin); - if (viteConfigPath && isUsingViteBuilder && !pluginVersion) { + if (isViteConfigFileFound && isUsingViteBuilder && !pluginVersion) { const plugins = []; if (plugin) { @@ -84,7 +84,7 @@ export const viteConfigFile = { return { plugins, - existed: !viteConfigPath, + existed: !isViteConfigFileFound, }; } From aeba7508d366ef7624d7d144e7376beff8baf77f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 19 Feb 2024 10:53:49 +0100 Subject: [PATCH 075/106] Support both supported babel.config.js files in Next.js --- code/frameworks/nextjs/src/preset.ts | 3 ++- .../src/automigrate/fixes/webpack5-compiler-setup.ts | 10 ++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index bb7ac0ddf153..e76db8104d1b 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -117,7 +117,8 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, }); const babelRCPath = join(getProjectRoot(), '.babelrc'); - const hasBabelConfig = fs.existsSync(babelRCPath); + const babelConfigPath = join(getProjectRoot(), 'babel.config.js'); + const hasBabelConfig = fs.existsSync(babelRCPath) || fs.existsSync(babelConfigPath); const nextjsVersion = getNextjsVersion(); const isDevelopment = options.configType !== 'PRODUCTION'; diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index c4ef5740412d..0f95772ba214 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -120,16 +120,18 @@ export const webpack5CompilerSetup = { message.push(dedent` Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself:\n - If you have a ${chalk.yellow( - 'babel.config.js' + '.babelrc' )} file in your project, Storybook will use Babel as the compiler. - - If you have a ${chalk.yellow('babel.config.js')} file in your project and you have set + - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow( + 'babel.config.js' + )}) file in your project and you have set ${chalk.yellow('experimental.forceSwcTransforms = true')} in your ${chalk.yellow( 'next.config.js' )} file, Storybook will use SWC as the compiler. - - If you don't have a ${chalk.yellow( + - If you don't have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow( 'babel.config.js' - )} file in your project, Storybook will use SWC as the compiler. + )}) file in your project, Storybook will use SWC as the compiler. `); } else if (defaultCompiler === CoreWebpackCompilers.Babel) { message.push(dedent` From cbe6f3136e5b774a70f01dd55e028d3dbd54964e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 19 Feb 2024 10:54:23 +0100 Subject: [PATCH 076/106] Update prompt value from 'notified' to 'notification' --- code/lib/cli/src/automigrate/index.ts | 2 +- code/lib/cli/src/automigrate/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index f29a5263160a..0a5980230c76 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -230,7 +230,7 @@ export async function runFixes({ return 'Automigration detected'; case 'manual': return 'Manual migration detected'; - case 'notified': + case 'notification': return 'Migration notification'; } }; diff --git a/code/lib/cli/src/automigrate/types.ts b/code/lib/cli/src/automigrate/types.ts index 6ef4f243b9ea..98c9524afe87 100644 --- a/code/lib/cli/src/automigrate/types.ts +++ b/code/lib/cli/src/automigrate/types.ts @@ -25,7 +25,7 @@ export interface RunOptions { * - manual: the user will be prompted to apply the fix * - notified: the user will be notified about the some changes. A fix isn't required */ -export type Prompt = 'auto' | 'manual' | 'notified'; +export type Prompt = 'auto' | 'manual' | 'notification'; export interface Fix { id: string; From bbcaba152c02aa0f413ec9f14bc4f1d4796a05ae Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 19 Feb 2024 10:55:22 +0100 Subject: [PATCH 077/106] Update tests --- .../fixes/webpack5-compiler-setup.test.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts index db437fbb13df..426496fcac22 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -464,17 +464,17 @@ describe('prompt', () => { }); expect(prompt).toMatchInlineSnapshot(` - "We need to update your Storybook configuration for Webpack 5. - The framework.options.builder.useSWC flag will be removed. + "We need to update your Storybook configuration for Webpack 5. + The framework.options.builder.useSWC flag will be removed. - Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself: + Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself: - - If you have a babel.config.js file in your project, Storybook will use Babel as the compiler. - - If you have a babel.config.js file in your project and you have set - experimental.forceSwcTransforms = true in your next.config.js file, - Storybook will use SWC as the compiler. - - If you don't have a babel.config.js file in your project, Storybook will use SWC as the compiler." - `); + - If you have a .babelrc file in your project, Storybook will use Babel as the compiler. + - If you have a .babelrc (or babel.config.js) file in your project and you have set + experimental.forceSwcTransforms = true in your next.config.js file, + Storybook will use SWC as the compiler. + - If you don't have a .babelrc (or babel.config.js) file in your project, Storybook will use SWC as the compiler." + `); }); it('isNextjs = false AND defaultCompiler = swc', () => { From cbed15010ff22fd13b701365bec68971323bdb55 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 19 Feb 2024 10:56:56 +0100 Subject: [PATCH 078/106] Update webpack5 compiler setup to use Babel or SWC based on project configuration --- .../src/automigrate/fixes/webpack5-compiler-setup.test.ts | 2 +- .../cli/src/automigrate/fixes/webpack5-compiler-setup.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts index 426496fcac22..5cc0d34dd892 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -469,7 +469,7 @@ describe('prompt', () => { Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself: - - If you have a .babelrc file in your project, Storybook will use Babel as the compiler. + - If you have a .babelrc (or babel.config.js) file in your project, Storybook will use Babel as the compiler. - If you have a .babelrc (or babel.config.js) file in your project and you have set experimental.forceSwcTransforms = true in your next.config.js file, Storybook will use SWC as the compiler. diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index 0f95772ba214..99e70d8bec6a 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -119,9 +119,9 @@ export const webpack5CompilerSetup = { if (isNextJs) { message.push(dedent` Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself:\n - - If you have a ${chalk.yellow( - '.babelrc' - )} file in your project, Storybook will use Babel as the compiler. + - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow( + 'babel.config.js' + )}) file in your project, Storybook will use Babel as the compiler. - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow( 'babel.config.js' )}) file in your project and you have set From 675c289f3a0dd61b32012b61f8acacf0c2a0859c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 19 Feb 2024 11:42:21 +0100 Subject: [PATCH 079/106] Fix promptType value in webpack5-compiler-setup --- .../cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts | 4 ++-- code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts | 2 +- code/lib/cli/src/automigrate/index.ts | 2 +- code/lib/cli/src/automigrate/types.ts | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts index 5cc0d34dd892..dcebc1f28b8b 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts @@ -363,14 +363,14 @@ describe('webpack5Migration check function', () => { }); describe('promptOnly', () => { - it('should return notified if isNextJs = true and shouldRemoveSWCFlag = false', () => { + it('should return notification if isNextJs = true and shouldRemoveSWCFlag = false', () => { const promptType = webpack5CompilerSetup.promptType({ isNextJs: true, shouldRemoveSWCFlag: false, defaultCompiler: undefined, }); - expect(promptType).toBe('notified'); + expect(promptType).toBe('notification'); }); it('should return auto if isNextJs = false', () => { diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts index 99e70d8bec6a..a22f8a55fdd0 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts @@ -30,7 +30,7 @@ export const webpack5CompilerSetup = { id: 'webpack5-compiler-setup', promptType(result) { - return result.isNextJs && !result.shouldRemoveSWCFlag ? 'notified' : 'auto'; + return result.isNextJs && !result.shouldRemoveSWCFlag ? 'notification' : 'auto'; }, async check({ mainConfig, packageManager }) { diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index 0a5980230c76..1e78d57863ce 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -295,7 +295,7 @@ export async function runFixes({ }, } ); - } else if (promptType === 'notified') { + } else if (promptType === 'notification') { runAnswer = await prompts( { type: 'confirm', diff --git a/code/lib/cli/src/automigrate/types.ts b/code/lib/cli/src/automigrate/types.ts index 98c9524afe87..510cdcda24c1 100644 --- a/code/lib/cli/src/automigrate/types.ts +++ b/code/lib/cli/src/automigrate/types.ts @@ -23,7 +23,7 @@ export interface RunOptions { * promptType defines how the user will be prompted to apply an automigration fix * - auto: the fix will be applied automatically * - manual: the user will be prompted to apply the fix - * - notified: the user will be notified about the some changes. A fix isn't required + * - notification: the user will be notified about the some changes. A fix isn't required */ export type Prompt = 'auto' | 'manual' | 'notification'; From f090f7abf58b81404ca908a1843228888ec97a11 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 19 Feb 2024 21:44:44 +1100 Subject: [PATCH 080/106] Fix name of Vite TS plugin --- code/builders/builder-vite/src/build.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 1cd14d1b2d8d..ff8f46c8bed3 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -53,6 +53,9 @@ export async function build(options: Options) { await viteBuild(await sanitizeEnvVars(options, finalConfig)); - const statsPlugin = findPlugin(finalConfig, 'rollup-plugin-webpack-stats') as WebpackStatsPlugin; + const statsPlugin = findPlugin( + finalConfig, + 'storybook:rollup-plugin-webpack-stats' + ) as WebpackStatsPlugin; return statsPlugin?.storybookGetStats(); } From d47fe18e54b1bc8dbf227ddb5e856be9f5f79089 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 19 Feb 2024 12:28:27 +0100 Subject: [PATCH 081/106] Update promptType to 'manual' in removeArgtypesRegex fix --- code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts index 153d988630c9..6e5d26583453 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts @@ -8,7 +8,7 @@ import chalk from 'chalk'; export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPath: string }> = { id: 'remove-argtypes-regex', - promptOnly: true, + promptType: 'manual', async check({ previewConfigPath }) { if (!previewConfigPath) return null; From 952dba5774039c78c2c62ab8ff421b360de278a9 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 19 Feb 2024 12:08:07 +0100 Subject: [PATCH 082/106] Warn when argTypesRegex is used together with the visual test addon --- .../src/utils/get-storybook-info.ts | 2 +- code/lib/core-server/package.json | 1 + code/lib/core-server/src/build-dev.ts | 9 +- .../src/utils/warnWhenUsingArgTypesRegex.ts | 54 ++++++++++++ code/yarn.lock | 84 +++++++++++++++++++ 5 files changed, 147 insertions(+), 3 deletions(-) create mode 100644 code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts index 642db99a7485..2c90d90fd674 100644 --- a/code/lib/core-common/src/utils/get-storybook-info.ts +++ b/code/lib/core-common/src/utils/get-storybook-info.ts @@ -94,7 +94,7 @@ export const findConfigFile = (prefix: string, configDir: string) => { return extension ? `${filePrefix}.${extension}` : null; }; -const getConfigInfo = (packageJson: PackageJson, configDir?: string) => { +export const getConfigInfo = (packageJson: PackageJson, configDir?: string) => { let storybookConfigDir = configDir ?? '.storybook'; const storybookScript = packageJson.scripts?.['storybook']; if (storybookScript && !configDir) { diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index ff37db230991..dc024488a7f8 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -56,6 +56,7 @@ }, "dependencies": { "@aw-web-design/x-default-browser": "1.4.126", + "@babel/core": "^7.23.9", "@discoveryjs/json-ext": "^0.5.3", "@storybook/builder-manager": "workspace:*", "@storybook/channels": "workspace:*", diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 67990ff2d430..cfab99ef9f2e 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -11,7 +11,7 @@ import { import prompts from 'prompts'; import invariant from 'tiny-invariant'; import { global } from '@storybook/global'; -import { telemetry, oneWayHash } from '@storybook/telemetry'; +import { oneWayHash, telemetry } from '@storybook/telemetry'; import { join, relative, resolve } from 'path'; import { deprecate } from '@storybook/node-logger'; @@ -22,9 +22,10 @@ import { storybookDevServer } from './dev-server'; import { outputStats } from './utils/output-stats'; import { outputStartupInformation } from './utils/output-startup-information'; import { updateCheck } from './utils/update-check'; -import { getServerPort, getServerChannelUrl } from './utils/server-address'; +import { getServerChannelUrl, getServerPort } from './utils/server-address'; import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders'; import { warnOnIncompatibleAddons } from './utils/warnOnIncompatibleAddons'; +import { warnWhenUsingArgTypesRegex } from './utils/warnWhenUsingArgTypesRegex'; import { buildOrThrow } from './utils/build-or-throw'; export async function buildDevStandalone( @@ -93,6 +94,10 @@ export async function buildDevStandalone( console.warn('Storybook failed to check addon compatibility', e); } + try { + await warnWhenUsingArgTypesRegex(packageJson, configDir, config); + } catch (e) {} + // Load first pass: We need to determine the builder // We need to do this because builders might introduce 'overridePresets' which we need to take into account // We hope to remove this in SB8 diff --git a/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts b/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts new file mode 100644 index 000000000000..1518dd3f8aca --- /dev/null +++ b/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts @@ -0,0 +1,54 @@ +import type { PackageJson, StorybookConfig } from '@storybook/types'; +import { getConfigInfo } from '@storybook/core-common'; +import { readFile } from 'fs-extra'; +import * as babel from '@babel/core'; +import type { BabelFile } from '@babel/core'; +import { babelParse } from '@storybook/csf-tools'; +import dedent from 'ts-dedent'; +import chalk from 'chalk'; + +export async function warnWhenUsingArgTypesRegex( + packageJson: PackageJson, + configDir: string, + config: StorybookConfig +) { + const { previewConfig } = getConfigInfo(packageJson, configDir); + const previewContent = previewConfig ? await readFile(previewConfig, 'utf8') : ''; + + const hasVisualTestAddon = + config?.addons?.some((it) => + typeof it === 'string' + ? it === '@chromatic-com/storybook' + : it.name === '@chromatic-com/storybook' + ) ?? false; + + if (hasVisualTestAddon && previewConfig && previewContent.includes('argTypesRegex')) { + // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 + const file: BabelFile = new babel.File( + { filename: previewConfig }, + { code: previewContent, ast: babelParse(previewContent) } + ); + + file.path.traverse({ + Identifier: (path) => { + if (path.node.name === 'argTypesRegex') { + const message = dedent` + ${chalk.bold('Attention')}: We've detected that you're using ${chalk.cyan( + 'actions.argTypesRegex' + )} together with the visual test addon: + + ${path.buildCodeFrameError(previewConfig).message} + + We recommend removing the ${chalk.cyan( + 'argTypesRegex' + )} and assigning explicit action with the ${chalk.cyan( + 'fn' + )} function from ${chalk.cyan('@storybook/test')} instead. + The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props. + `; + console.warn(message); + } + }, + }); + } +} diff --git a/code/yarn.lock b/code/yarn.lock index 86f09cd405d2..8b5a956afd3f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -467,6 +467,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.23.9": + version: 7.23.9 + resolution: "@babel/core@npm:7.23.9" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.23.5" + "@babel/generator": "npm:^7.23.6" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helpers": "npm:^7.23.9" + "@babel/parser": "npm:^7.23.9" + "@babel/template": "npm:^7.23.9" + "@babel/traverse": "npm:^7.23.9" + "@babel/types": "npm:^7.23.9" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 03883300bf1252ab4c9ba5b52f161232dd52873dbe5cde9289bb2bb26e935c42682493acbac9194a59a3b6cbd17f4c4c84030db8d6d482588afe64531532ff9b + languageName: node + linkType: hard + "@babel/generator@npm:7.23.0": version: 7.23.0 resolution: "@babel/generator@npm:7.23.0" @@ -740,6 +763,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.23.9": + version: 7.23.9 + resolution: "@babel/helpers@npm:7.23.9" + dependencies: + "@babel/template": "npm:^7.23.9" + "@babel/traverse": "npm:^7.23.9" + "@babel/types": "npm:^7.23.9" + checksum: f69fd0aca96a6fb8bd6dd044cd8a5c0f1851072d4ce23355345b9493c4032e76d1217f86b70df795e127553cf7f3fcd1587ede9d1b03b95e8b62681ca2165b87 + languageName: node + linkType: hard + "@babel/highlight@npm:^7.23.4": version: 7.23.4 resolution: "@babel/highlight@npm:7.23.4" @@ -760,6 +794,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.23.9": + version: 7.23.9 + resolution: "@babel/parser@npm:7.23.9" + bin: + parser: ./bin/babel-parser.js + checksum: 7df97386431366d4810538db4b9ec538f4377096f720c0591c7587a16f6810e62747e9fbbfa1ff99257fd4330035e4fb1b5b77c7bd3b97ce0d2e3780a6618975 + languageName: node + linkType: hard + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.15, @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": version: 7.23.3 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" @@ -2220,6 +2263,17 @@ __metadata: languageName: node linkType: hard +"@babel/template@npm:^7.23.9": + version: 7.23.9 + resolution: "@babel/template@npm:7.23.9" + dependencies: + "@babel/code-frame": "npm:^7.23.5" + "@babel/parser": "npm:^7.23.9" + "@babel/types": "npm:^7.23.9" + checksum: 0e8b60119433787742bc08ae762bbd8d6755611c4cabbcb7627b292ec901a55af65d93d1c88572326069efb64136ef151ec91ffb74b2df7689bbab237030833a + languageName: node + linkType: hard + "@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.7, @babel/traverse@npm:^7.4.5": version: 7.23.7 resolution: "@babel/traverse@npm:7.23.7" @@ -2238,6 +2292,24 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.23.9": + version: 7.23.9 + resolution: "@babel/traverse@npm:7.23.9" + dependencies: + "@babel/code-frame": "npm:^7.23.5" + "@babel/generator": "npm:^7.23.6" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.23.9" + "@babel/types": "npm:^7.23.9" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: d1615d1d02f04d47111a7ea4446a1a6275668ca39082f31d51f08380de9502e19862be434eaa34b022ce9a17dbb8f9e2b73a746c654d9575f3a680a7ffdf5630 + languageName: node + linkType: hard + "@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.23.6 resolution: "@babel/types@npm:7.23.6" @@ -2249,6 +2321,17 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.23.9": + version: 7.23.9 + resolution: "@babel/types@npm:7.23.9" + dependencies: + "@babel/helper-string-parser": "npm:^7.23.4" + "@babel/helper-validator-identifier": "npm:^7.22.20" + to-fast-properties: "npm:^2.0.0" + checksum: edc7bb180ce7e4d2aea10c6972fb10474341ac39ba8fdc4a27ffb328368dfdfbf40fca18e441bbe7c483774500d5c05e222cec276c242e952853dcaf4eb884f7 + languageName: node + linkType: hard + "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -5538,6 +5621,7 @@ __metadata: resolution: "@storybook/core-server@workspace:lib/core-server" dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" + "@babel/core": "npm:^7.23.9" "@discoveryjs/json-ext": "npm:^0.5.3" "@storybook/addon-docs": "workspace:*" "@storybook/builder-manager": "workspace:*" From 88cea6fc73e9556a7a2dbbd417574b82ca6423b3 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 19 Feb 2024 14:36:46 +0100 Subject: [PATCH 083/106] Update code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts Co-authored-by: Valentin Palkovic --- code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts index 6e5d26583453..0402773df5ea 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts @@ -73,6 +73,8 @@ export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPa )} Make sure to assign an explicit ${chalk.cyan('fn')} to your args for those usages. + + For more information please visit our migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function `; }, }; From 15c84372baaf9a27d5186bb547a1e3888542f7ac Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 19 Feb 2024 14:59:55 +0100 Subject: [PATCH 084/106] Add link to docs --- code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts b/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts index 1518dd3f8aca..fa336373a8a4 100644 --- a/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts +++ b/code/lib/core-server/src/utils/warnWhenUsingArgTypesRegex.ts @@ -43,7 +43,9 @@ export async function warnWhenUsingArgTypesRegex( 'argTypesRegex' )} and assigning explicit action with the ${chalk.cyan( 'fn' - )} function from ${chalk.cyan('@storybook/test')} instead. + )} function from ${chalk.cyan('@storybook/test')} instead: + https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function + The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props. `; console.warn(message); From 7ca1efa105120c63b24507979efaaee24590300b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 15:04:35 +0100 Subject: [PATCH 085/106] add a line ignoring the storybook generated log files to git ignore --- code/lib/cli/src/initiate.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 703002ec7cca..1f968cc1347c 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -10,6 +10,7 @@ import { JsPackageManagerFactory, commandLog, paddedLog, + getProjectRoot, } from '@storybook/core-common'; import type { JsPackageManager } from '@storybook/core-common'; @@ -38,6 +39,8 @@ import serverGenerator from './generators/SERVER'; import type { NpmOptions } from './NpmOptions'; import type { CommandOptions, GeneratorOptions } from './generators/types'; import { currentDirectoryIsEmpty, scaffoldNewProject } from './scaffold-new-project'; +import findUp from 'find-up'; +import { appendFile } from 'fs/promises'; const logger = console; @@ -369,6 +372,12 @@ export async function doInitiate( return { shouldRunDev: false }; } + const foundGitIgnoreFile = await findUp('.gitignore', { cwd: process.cwd() }); + const rootDirectory = getProjectRoot(); + if (foundGitIgnoreFile && foundGitIgnoreFile.includes(rootDirectory)) { + await appendFile(foundGitIgnoreFile, '\n*storybook.log'); + } + const storybookCommand = projectType === ProjectType.ANGULAR ? `ng run ${installResult.projectName}:storybook` From 3029661df76ca8b56700ade38ce6827b9e5d69a9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 15:19:01 +0100 Subject: [PATCH 086/106] order imports a bit --- code/lib/cli/src/initiate.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 1f968cc1347c..5c87e88d0e5a 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -1,4 +1,6 @@ +import { appendFile, readFile } from 'fs/promises'; import type { PackageJson } from 'read-pkg-up'; +import findUp from 'find-up'; import chalk from 'chalk'; import prompts from 'prompts'; import { telemetry } from '@storybook/telemetry'; @@ -39,8 +41,6 @@ import serverGenerator from './generators/SERVER'; import type { NpmOptions } from './NpmOptions'; import type { CommandOptions, GeneratorOptions } from './generators/types'; import { currentDirectoryIsEmpty, scaffoldNewProject } from './scaffold-new-project'; -import findUp from 'find-up'; -import { appendFile } from 'fs/promises'; const logger = console; @@ -375,7 +375,10 @@ export async function doInitiate( const foundGitIgnoreFile = await findUp('.gitignore', { cwd: process.cwd() }); const rootDirectory = getProjectRoot(); if (foundGitIgnoreFile && foundGitIgnoreFile.includes(rootDirectory)) { - await appendFile(foundGitIgnoreFile, '\n*storybook.log'); + const contents = await readFile(foundGitIgnoreFile, 'utf-8'); + if (!contents.includes('*storybook.log')) { + await appendFile(foundGitIgnoreFile, '\n*storybook.log'); + } } const storybookCommand = From 8422756247169a123dc1222b5b05e3a345a7166f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 15:44:39 +0100 Subject: [PATCH 087/106] remove the logging to file feature from autoblockers --- .../src/autoblock/block-dependencies-versions.ts | 3 --- code/lib/cli/src/autoblock/block-node-version.ts | 3 --- code/lib/cli/src/autoblock/block-stories-mdx.ts | 11 +++++------ code/lib/cli/src/autoblock/block-storystorev6.ts | 5 ----- code/lib/cli/src/autoblock/index.ts | 16 +--------------- code/lib/cli/src/autoblock/types.ts | 7 ------- 6 files changed, 6 insertions(+), 39 deletions(-) diff --git a/code/lib/cli/src/autoblock/block-dependencies-versions.ts b/code/lib/cli/src/autoblock/block-dependencies-versions.ts index 284562aa9f6d..fb052e60c62e 100644 --- a/code/lib/cli/src/autoblock/block-dependencies-versions.ts +++ b/code/lib/cli/src/autoblock/block-dependencies-versions.ts @@ -43,9 +43,6 @@ export const blocker = createBlocker({ return acc; }, false); }, - message(options, data) { - return `Found ${data.packageName} version: ${data.installedVersion}, please upgrade to ${data.minimumVersion} or higher.`; - }, log(options, data) { switch (data.packageName) { case 'react-scripts': diff --git a/code/lib/cli/src/autoblock/block-node-version.ts b/code/lib/cli/src/autoblock/block-node-version.ts index 220b29823e4e..8d67cdd51018 100644 --- a/code/lib/cli/src/autoblock/block-node-version.ts +++ b/code/lib/cli/src/autoblock/block-node-version.ts @@ -11,9 +11,6 @@ export const blocker = createBlocker({ } return false; }, - message(options, data) { - return `Please use Node.js v18 or higher.`; - }, log(options, data) { return dedent` We've detected you're using Node.js v${data.nodeVersion}. diff --git a/code/lib/cli/src/autoblock/block-stories-mdx.ts b/code/lib/cli/src/autoblock/block-stories-mdx.ts index b868d913ecd0..3c1fadeda351 100644 --- a/code/lib/cli/src/autoblock/block-stories-mdx.ts +++ b/code/lib/cli/src/autoblock/block-stories-mdx.ts @@ -11,12 +11,7 @@ export const blocker = createBlocker({ } return { files }; }, - message(options, data) { - return `Found ${data.files.length} stories.mdx ${ - data.files.length === 1 ? 'file' : 'files' - }, these must be migrated.`; - }, - log() { + log(options, data) { return dedent` Support for *.stories.mdx files has been removed. Please see the migration guide for more information: @@ -26,6 +21,10 @@ export const blocker = createBlocker({ Check the migration guide for more information: https://mdxjs.com/blog/v3/ + Found ${data.files.length} stories.mdx ${ + data.files.length === 1 ? 'file' : 'files' + }, these must be migrated. + Manually run the migration script to convert your stories.mdx files to CSF format documented here: https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf `; diff --git a/code/lib/cli/src/autoblock/block-storystorev6.ts b/code/lib/cli/src/autoblock/block-storystorev6.ts index 40a9f8822ac9..cd9eaffb6a7a 100644 --- a/code/lib/cli/src/autoblock/block-storystorev6.ts +++ b/code/lib/cli/src/autoblock/block-storystorev6.ts @@ -1,4 +1,3 @@ -import { relative } from 'path'; import { createBlocker } from './types'; import { dedent } from 'ts-dedent'; import type { StorybookConfigRaw } from '@storybook/types'; @@ -15,10 +14,6 @@ export const blocker = createBlocker({ } return false; }, - message(options, data) { - const mainConfigPath = relative(process.cwd(), options.mainConfigPath); - return `StoryStoreV7 feature must be removed from ${mainConfigPath}`; - }, log() { return dedent` StoryStoreV7 feature must be removed from your Storybook configuration. diff --git a/code/lib/cli/src/autoblock/index.ts b/code/lib/cli/src/autoblock/index.ts index ca8116d890cb..a6c45a2318ba 100644 --- a/code/lib/cli/src/autoblock/index.ts +++ b/code/lib/cli/src/autoblock/index.ts @@ -2,7 +2,6 @@ import type { AutoblockOptions, Blocker } from './types'; import { logger } from '@storybook/node-logger'; import chalk from 'chalk'; import boxen from 'boxen'; -import { writeFile } from 'node:fs/promises'; const excludesFalse = (x: T | false): x is T => x !== false; @@ -34,7 +33,6 @@ export const autoblock = async ( return { id: blocker.id, value: true, - message: blocker.message(options, result), log: blocker.log(options, result), }; } else { @@ -46,12 +44,9 @@ export const autoblock = async ( const faults = out.filter(excludesFalse); if (faults.length > 0) { - const LOG_FILE_NAME = 'migration-storybook.log'; - const messages = { welcome: `Blocking your upgrade because of the following issues:`, reminder: chalk.yellow('Fix the above issues and try running the upgrade command again.'), - logfile: chalk.yellow(`You can find more details in ./${LOG_FILE_NAME}.`), }; const borderColor = '#FC521F'; @@ -59,22 +54,13 @@ export const autoblock = async ( logger.plain( boxen( [messages.welcome] - .concat(faults.map((i) => i.message)) + .concat(faults.map((i) => i.log)) .concat([messages.reminder]) - .concat([messages.logfile]) .join('\n\n'), { borderStyle: 'round', padding: 1, borderColor } ) ); - await writeFile( - LOG_FILE_NAME, - faults.map((i) => '(' + i.id + '):\n' + i.log).join('\n\n----\n\n'), - { - encoding: 'utf-8', - } - ); - return faults[0].id; } diff --git a/code/lib/cli/src/autoblock/types.ts b/code/lib/cli/src/autoblock/types.ts index 62be9625c76e..39e6c728921a 100644 --- a/code/lib/cli/src/autoblock/types.ts +++ b/code/lib/cli/src/autoblock/types.ts @@ -21,13 +21,6 @@ export interface Blocker { * @returns A truthy value to activate the block, return false to proceed. */ check: (options: AutoblockOptions) => Promise; - /** - * Format a message to be printed to the log-file. - * @param context - * @param data returned from the check method. - * @returns The string to print to the terminal. - */ - message: (options: AutoblockOptions, data: T) => string; /** * Format a message to be printed to the log-file. * @param context From 16311805589b376f2efa6a28ea3049ccd9da6d41 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 15:45:20 +0100 Subject: [PATCH 088/106] Revert "remove the logging to file feature from autoblockers" This reverts commit 8422756247169a123dc1222b5b05e3a345a7166f. --- .../src/autoblock/block-dependencies-versions.ts | 3 +++ code/lib/cli/src/autoblock/block-node-version.ts | 3 +++ code/lib/cli/src/autoblock/block-stories-mdx.ts | 11 ++++++----- code/lib/cli/src/autoblock/block-storystorev6.ts | 5 +++++ code/lib/cli/src/autoblock/index.ts | 16 +++++++++++++++- code/lib/cli/src/autoblock/types.ts | 7 +++++++ 6 files changed, 39 insertions(+), 6 deletions(-) diff --git a/code/lib/cli/src/autoblock/block-dependencies-versions.ts b/code/lib/cli/src/autoblock/block-dependencies-versions.ts index fb052e60c62e..284562aa9f6d 100644 --- a/code/lib/cli/src/autoblock/block-dependencies-versions.ts +++ b/code/lib/cli/src/autoblock/block-dependencies-versions.ts @@ -43,6 +43,9 @@ export const blocker = createBlocker({ return acc; }, false); }, + message(options, data) { + return `Found ${data.packageName} version: ${data.installedVersion}, please upgrade to ${data.minimumVersion} or higher.`; + }, log(options, data) { switch (data.packageName) { case 'react-scripts': diff --git a/code/lib/cli/src/autoblock/block-node-version.ts b/code/lib/cli/src/autoblock/block-node-version.ts index 8d67cdd51018..220b29823e4e 100644 --- a/code/lib/cli/src/autoblock/block-node-version.ts +++ b/code/lib/cli/src/autoblock/block-node-version.ts @@ -11,6 +11,9 @@ export const blocker = createBlocker({ } return false; }, + message(options, data) { + return `Please use Node.js v18 or higher.`; + }, log(options, data) { return dedent` We've detected you're using Node.js v${data.nodeVersion}. diff --git a/code/lib/cli/src/autoblock/block-stories-mdx.ts b/code/lib/cli/src/autoblock/block-stories-mdx.ts index 3c1fadeda351..b868d913ecd0 100644 --- a/code/lib/cli/src/autoblock/block-stories-mdx.ts +++ b/code/lib/cli/src/autoblock/block-stories-mdx.ts @@ -11,7 +11,12 @@ export const blocker = createBlocker({ } return { files }; }, - log(options, data) { + message(options, data) { + return `Found ${data.files.length} stories.mdx ${ + data.files.length === 1 ? 'file' : 'files' + }, these must be migrated.`; + }, + log() { return dedent` Support for *.stories.mdx files has been removed. Please see the migration guide for more information: @@ -21,10 +26,6 @@ export const blocker = createBlocker({ Check the migration guide for more information: https://mdxjs.com/blog/v3/ - Found ${data.files.length} stories.mdx ${ - data.files.length === 1 ? 'file' : 'files' - }, these must be migrated. - Manually run the migration script to convert your stories.mdx files to CSF format documented here: https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf `; diff --git a/code/lib/cli/src/autoblock/block-storystorev6.ts b/code/lib/cli/src/autoblock/block-storystorev6.ts index cd9eaffb6a7a..40a9f8822ac9 100644 --- a/code/lib/cli/src/autoblock/block-storystorev6.ts +++ b/code/lib/cli/src/autoblock/block-storystorev6.ts @@ -1,3 +1,4 @@ +import { relative } from 'path'; import { createBlocker } from './types'; import { dedent } from 'ts-dedent'; import type { StorybookConfigRaw } from '@storybook/types'; @@ -14,6 +15,10 @@ export const blocker = createBlocker({ } return false; }, + message(options, data) { + const mainConfigPath = relative(process.cwd(), options.mainConfigPath); + return `StoryStoreV7 feature must be removed from ${mainConfigPath}`; + }, log() { return dedent` StoryStoreV7 feature must be removed from your Storybook configuration. diff --git a/code/lib/cli/src/autoblock/index.ts b/code/lib/cli/src/autoblock/index.ts index a6c45a2318ba..ca8116d890cb 100644 --- a/code/lib/cli/src/autoblock/index.ts +++ b/code/lib/cli/src/autoblock/index.ts @@ -2,6 +2,7 @@ import type { AutoblockOptions, Blocker } from './types'; import { logger } from '@storybook/node-logger'; import chalk from 'chalk'; import boxen from 'boxen'; +import { writeFile } from 'node:fs/promises'; const excludesFalse = (x: T | false): x is T => x !== false; @@ -33,6 +34,7 @@ export const autoblock = async ( return { id: blocker.id, value: true, + message: blocker.message(options, result), log: blocker.log(options, result), }; } else { @@ -44,9 +46,12 @@ export const autoblock = async ( const faults = out.filter(excludesFalse); if (faults.length > 0) { + const LOG_FILE_NAME = 'migration-storybook.log'; + const messages = { welcome: `Blocking your upgrade because of the following issues:`, reminder: chalk.yellow('Fix the above issues and try running the upgrade command again.'), + logfile: chalk.yellow(`You can find more details in ./${LOG_FILE_NAME}.`), }; const borderColor = '#FC521F'; @@ -54,13 +59,22 @@ export const autoblock = async ( logger.plain( boxen( [messages.welcome] - .concat(faults.map((i) => i.log)) + .concat(faults.map((i) => i.message)) .concat([messages.reminder]) + .concat([messages.logfile]) .join('\n\n'), { borderStyle: 'round', padding: 1, borderColor } ) ); + await writeFile( + LOG_FILE_NAME, + faults.map((i) => '(' + i.id + '):\n' + i.log).join('\n\n----\n\n'), + { + encoding: 'utf-8', + } + ); + return faults[0].id; } diff --git a/code/lib/cli/src/autoblock/types.ts b/code/lib/cli/src/autoblock/types.ts index 39e6c728921a..62be9625c76e 100644 --- a/code/lib/cli/src/autoblock/types.ts +++ b/code/lib/cli/src/autoblock/types.ts @@ -21,6 +21,13 @@ export interface Blocker { * @returns A truthy value to activate the block, return false to proceed. */ check: (options: AutoblockOptions) => Promise; + /** + * Format a message to be printed to the log-file. + * @param context + * @param data returned from the check method. + * @returns The string to print to the terminal. + */ + message: (options: AutoblockOptions, data: T) => string; /** * Format a message to be printed to the log-file. * @param context From bc8f1b74edb953b908c743ec40f0bab91e770ce2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 15:50:34 +0100 Subject: [PATCH 089/106] remove the logging to file feature from autoblockers --- .../src/autoblock/block-dependencies-versions.ts | 3 --- code/lib/cli/src/autoblock/block-node-version.ts | 3 --- code/lib/cli/src/autoblock/block-stories-mdx.ts | 11 +++++------ code/lib/cli/src/autoblock/block-storystorev6.ts | 5 ----- code/lib/cli/src/autoblock/index.ts | 16 +--------------- code/lib/cli/src/autoblock/types.ts | 7 ------- 6 files changed, 6 insertions(+), 39 deletions(-) diff --git a/code/lib/cli/src/autoblock/block-dependencies-versions.ts b/code/lib/cli/src/autoblock/block-dependencies-versions.ts index 284562aa9f6d..fb052e60c62e 100644 --- a/code/lib/cli/src/autoblock/block-dependencies-versions.ts +++ b/code/lib/cli/src/autoblock/block-dependencies-versions.ts @@ -43,9 +43,6 @@ export const blocker = createBlocker({ return acc; }, false); }, - message(options, data) { - return `Found ${data.packageName} version: ${data.installedVersion}, please upgrade to ${data.minimumVersion} or higher.`; - }, log(options, data) { switch (data.packageName) { case 'react-scripts': diff --git a/code/lib/cli/src/autoblock/block-node-version.ts b/code/lib/cli/src/autoblock/block-node-version.ts index 220b29823e4e..8d67cdd51018 100644 --- a/code/lib/cli/src/autoblock/block-node-version.ts +++ b/code/lib/cli/src/autoblock/block-node-version.ts @@ -11,9 +11,6 @@ export const blocker = createBlocker({ } return false; }, - message(options, data) { - return `Please use Node.js v18 or higher.`; - }, log(options, data) { return dedent` We've detected you're using Node.js v${data.nodeVersion}. diff --git a/code/lib/cli/src/autoblock/block-stories-mdx.ts b/code/lib/cli/src/autoblock/block-stories-mdx.ts index b868d913ecd0..3c1fadeda351 100644 --- a/code/lib/cli/src/autoblock/block-stories-mdx.ts +++ b/code/lib/cli/src/autoblock/block-stories-mdx.ts @@ -11,12 +11,7 @@ export const blocker = createBlocker({ } return { files }; }, - message(options, data) { - return `Found ${data.files.length} stories.mdx ${ - data.files.length === 1 ? 'file' : 'files' - }, these must be migrated.`; - }, - log() { + log(options, data) { return dedent` Support for *.stories.mdx files has been removed. Please see the migration guide for more information: @@ -26,6 +21,10 @@ export const blocker = createBlocker({ Check the migration guide for more information: https://mdxjs.com/blog/v3/ + Found ${data.files.length} stories.mdx ${ + data.files.length === 1 ? 'file' : 'files' + }, these must be migrated. + Manually run the migration script to convert your stories.mdx files to CSF format documented here: https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf `; diff --git a/code/lib/cli/src/autoblock/block-storystorev6.ts b/code/lib/cli/src/autoblock/block-storystorev6.ts index 40a9f8822ac9..cd9eaffb6a7a 100644 --- a/code/lib/cli/src/autoblock/block-storystorev6.ts +++ b/code/lib/cli/src/autoblock/block-storystorev6.ts @@ -1,4 +1,3 @@ -import { relative } from 'path'; import { createBlocker } from './types'; import { dedent } from 'ts-dedent'; import type { StorybookConfigRaw } from '@storybook/types'; @@ -15,10 +14,6 @@ export const blocker = createBlocker({ } return false; }, - message(options, data) { - const mainConfigPath = relative(process.cwd(), options.mainConfigPath); - return `StoryStoreV7 feature must be removed from ${mainConfigPath}`; - }, log() { return dedent` StoryStoreV7 feature must be removed from your Storybook configuration. diff --git a/code/lib/cli/src/autoblock/index.ts b/code/lib/cli/src/autoblock/index.ts index ca8116d890cb..a6c45a2318ba 100644 --- a/code/lib/cli/src/autoblock/index.ts +++ b/code/lib/cli/src/autoblock/index.ts @@ -2,7 +2,6 @@ import type { AutoblockOptions, Blocker } from './types'; import { logger } from '@storybook/node-logger'; import chalk from 'chalk'; import boxen from 'boxen'; -import { writeFile } from 'node:fs/promises'; const excludesFalse = (x: T | false): x is T => x !== false; @@ -34,7 +33,6 @@ export const autoblock = async ( return { id: blocker.id, value: true, - message: blocker.message(options, result), log: blocker.log(options, result), }; } else { @@ -46,12 +44,9 @@ export const autoblock = async ( const faults = out.filter(excludesFalse); if (faults.length > 0) { - const LOG_FILE_NAME = 'migration-storybook.log'; - const messages = { welcome: `Blocking your upgrade because of the following issues:`, reminder: chalk.yellow('Fix the above issues and try running the upgrade command again.'), - logfile: chalk.yellow(`You can find more details in ./${LOG_FILE_NAME}.`), }; const borderColor = '#FC521F'; @@ -59,22 +54,13 @@ export const autoblock = async ( logger.plain( boxen( [messages.welcome] - .concat(faults.map((i) => i.message)) + .concat(faults.map((i) => i.log)) .concat([messages.reminder]) - .concat([messages.logfile]) .join('\n\n'), { borderStyle: 'round', padding: 1, borderColor } ) ); - await writeFile( - LOG_FILE_NAME, - faults.map((i) => '(' + i.id + '):\n' + i.log).join('\n\n----\n\n'), - { - encoding: 'utf-8', - } - ); - return faults[0].id; } diff --git a/code/lib/cli/src/autoblock/types.ts b/code/lib/cli/src/autoblock/types.ts index 62be9625c76e..39e6c728921a 100644 --- a/code/lib/cli/src/autoblock/types.ts +++ b/code/lib/cli/src/autoblock/types.ts @@ -21,13 +21,6 @@ export interface Blocker { * @returns A truthy value to activate the block, return false to proceed. */ check: (options: AutoblockOptions) => Promise; - /** - * Format a message to be printed to the log-file. - * @param context - * @param data returned from the check method. - * @returns The string to print to the terminal. - */ - message: (options: AutoblockOptions, data: T) => string; /** * Format a message to be printed to the log-file. * @param context From 82d231b8a255b2ad5fbfe4565d4e8c6e5d7e060d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 16:13:19 +0100 Subject: [PATCH 090/106] apply changes to tests --- code/lib/cli/src/autoblock/index.test.ts | 36 +++++++++--------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/code/lib/cli/src/autoblock/index.test.ts b/code/lib/cli/src/autoblock/index.test.ts index ce5fa3170411..265789ec7a07 100644 --- a/code/lib/cli/src/autoblock/index.test.ts +++ b/code/lib/cli/src/autoblock/index.test.ts @@ -2,7 +2,6 @@ import { expect, test, vi } from 'vitest'; import { autoblock } from './index'; import { JsPackageManagerFactory } from '@storybook/core-common'; import { createBlocker } from './types'; -import { writeFile as writeFileRaw } from 'node:fs/promises'; import { logger } from '@storybook/node-logger'; vi.mock('node:fs/promises', () => ({ @@ -19,26 +18,21 @@ vi.mock('@storybook/node-logger', () => ({ }, })); -const writeFile = vi.mocked(writeFileRaw); - const blockers = { alwaysPass: createBlocker({ id: 'alwaysPass', check: async () => false, - message: () => 'Always pass', log: () => 'Always pass', }), alwaysFail: createBlocker({ id: 'alwaysFail', check: async () => ({ bad: true }), - message: () => 'Always fail', - log: () => '...', + log: () => 'Always fail', }), alwaysFail2: createBlocker({ id: 'alwaysFail2', check: async () => ({ disaster: true }), - message: () => 'Always fail 2', - log: () => '...', + log: () => 'Always fail 2', }), } as const; @@ -75,17 +69,15 @@ test('1 fail', async () => { Promise.resolve({ blocker: blockers.alwaysPass }), Promise.resolve({ blocker: blockers.alwaysFail }), ]); - expect(writeFile).toHaveBeenCalledWith( - expect.any(String), - expect.stringContaining('alwaysFail'), - expect.any(Object) - ); + expect(result).toBe('alwaysFail'); expect(logger.plain).toHaveBeenCalledWith(expect.stringContaining('Oh no..')); + expect(logger.plain.mock.calls[1][0]).toMatchInlineSnapshot(` + "Blocking your upgrade because of the following issues: - expect(writeFile.mock.calls[0][1]).toMatchInlineSnapshot(` - "(alwaysFail): - ..." + Always fail + + Fix the above issues and try running the upgrade command again." `); }); @@ -95,14 +87,14 @@ test('multiple fails', async () => { Promise.resolve({ blocker: blockers.alwaysFail }), Promise.resolve({ blocker: blockers.alwaysFail2 }), ]); - expect(writeFile.mock.calls[0][1]).toMatchInlineSnapshot(` - "(alwaysFail): - ... + expect(logger.plain.mock.calls[1][0]).toMatchInlineSnapshot(` + "Blocking your upgrade because of the following issues: + + Always fail - ---- + Always fail 2 - (alwaysFail2): - ..." + Fix the above issues and try running the upgrade command again." `); expect(result).toBe('alwaysFail'); From cd4b84880624d69463b4f4f71148bfff1b6d2fb4 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 19 Feb 2024 15:19:07 +0000 Subject: [PATCH 091/106] Docs: Fix conditional rendering of sections --- docs/api/csf.md | 7 ++++--- docs/writing-stories/args.md | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/api/csf.md b/docs/api/csf.md index 5ddbab04d894..b91f45fd57a4 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -204,7 +204,7 @@ A good use case for the `play` function is a form component. With previous Story When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction. - + ## Custom render functions @@ -226,6 +226,7 @@ Starting in Storybook 6.4, you can write your stories as JavaScript objects, red 'solid/component-story-with-custom-render-function.ts.mdx', ]} usesCsf3 + csf2Path="api/csf#snippet-component-story-with-custom-render-function" /> @@ -430,7 +431,7 @@ Now, let's rewrite it as a story object in CSF 3 with an explicit `render` funct ]} /> - + Learn more about [render functions](#custom-render-functions). @@ -452,7 +453,7 @@ CSF 3 provides default render functions for each renderer. If all you're doing i - + For more information, see the section on [custom render functions](#custom-render-functions). diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 49952701c8b0..c6b44c7ea88e 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -160,7 +160,7 @@ Args are useful when writing stories for composite components that are assembled - + From e20a8c2c0e7fba8f86324d587ab48d34bc7661a6 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 19 Feb 2024 16:19:49 +0100 Subject: [PATCH 092/106] Avoid long lines, as wrapping lines is buggy in boxen --- .../src/automigrate/fixes/remove-argtypes-regex.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts index 153d988630c9..273c0c648e78 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts @@ -59,13 +59,14 @@ export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPa ${argTypesRegex.buildCodeFrameError(`${previewConfigPath}`).message} - In Storybook 8, we recommend removing this regex, and assigning explicit spies with the ${chalk.cyan( - 'fn' - )} function instead: + In Storybook 8, we recommend removing this regex. + Assign explicit spies with the ${chalk.cyan('fn')} function instead: ${formattedSnippet} - Even if you keep using the argTypesRegex, you will need to above pattern if you want to use spies in your play function. - Implicit spies (based on a combination of argTypesRegex and docgen) is not supported anymore in Storybook 8. + The above pattern is needed when using spies in the play function, ${chalk.bold( + 'even' + )} if you keep using argTypesRegex. + Implicit spies (based on a combination of argTypesRegex and docgen) is not supported in Storybook 8. Use the following command to check for spy usages in your play functions: ${chalk.cyan( From 933be7fa7fdf4673cff65376cb417d2c981c4684 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 16:38:43 +0100 Subject: [PATCH 093/106] strip ansi to make it render the same on CI --- code/lib/cli/package.json | 1 + code/lib/cli/src/autoblock/index.test.ts | 13 ++++++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index aee4d038a5e1..35b9f511aa32 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -98,6 +98,7 @@ "@types/util-deprecate": "^1.0.0", "boxen": "^7.1.1", "slash": "^5.0.0", + "strip-ansi": "^7.1.0", "strip-json-comments": "^3.1.1", "typescript": "^5.3.2" }, diff --git a/code/lib/cli/src/autoblock/index.test.ts b/code/lib/cli/src/autoblock/index.test.ts index 265789ec7a07..18be67a4e6d8 100644 --- a/code/lib/cli/src/autoblock/index.test.ts +++ b/code/lib/cli/src/autoblock/index.test.ts @@ -2,7 +2,8 @@ import { expect, test, vi } from 'vitest'; import { autoblock } from './index'; import { JsPackageManagerFactory } from '@storybook/core-common'; import { createBlocker } from './types'; -import { logger } from '@storybook/node-logger'; +import { logger as loggerRaw } from '@storybook/node-logger'; +import stripAnsi from 'strip-ansi'; vi.mock('node:fs/promises', () => ({ writeFile: vi.fn(), @@ -18,6 +19,8 @@ vi.mock('@storybook/node-logger', () => ({ }, })); +const logger = vi.mocked(loggerRaw); + const blockers = { alwaysPass: createBlocker({ id: 'alwaysPass', @@ -72,12 +75,12 @@ test('1 fail', async () => { expect(result).toBe('alwaysFail'); expect(logger.plain).toHaveBeenCalledWith(expect.stringContaining('Oh no..')); - expect(logger.plain.mock.calls[1][0]).toMatchInlineSnapshot(` + expect(stripAnsi(logger.plain.mock.calls[1][0])).toMatchInlineSnapshot(` "Blocking your upgrade because of the following issues: Always fail - Fix the above issues and try running the upgrade command again." + Fix the above issues and try running the upgrade command again." `); }); @@ -87,14 +90,14 @@ test('multiple fails', async () => { Promise.resolve({ blocker: blockers.alwaysFail }), Promise.resolve({ blocker: blockers.alwaysFail2 }), ]); - expect(logger.plain.mock.calls[1][0]).toMatchInlineSnapshot(` + expect(stripAnsi(logger.plain.mock.calls[1][0])).toMatchInlineSnapshot(` "Blocking your upgrade because of the following issues: Always fail Always fail 2 - Fix the above issues and try running the upgrade command again." + Fix the above issues and try running the upgrade command again." `); expect(result).toBe('alwaysFail'); From 125005381690e194f5e10ed158b9cf26fe8ac1ce Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 16:39:04 +0100 Subject: [PATCH 094/106] fix lockfile --- code/yarn.lock | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/yarn.lock b/code/yarn.lock index 86f09cd405d2..74fa8877ed0b 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5390,6 +5390,7 @@ __metadata: read-pkg-up: "npm:^7.0.1" semver: "npm:^7.3.7" slash: "npm:^5.0.0" + strip-ansi: "npm:^7.1.0" strip-json-comments: "npm:^3.1.1" tempy: "npm:^1.0.1" tiny-invariant: "npm:^1.3.1" @@ -26793,7 +26794,7 @@ __metadata: languageName: node linkType: hard -"strip-ansi@npm:^7.0.0, strip-ansi@npm:^7.0.1": +"strip-ansi@npm:^7.0.0, strip-ansi@npm:^7.0.1, strip-ansi@npm:^7.1.0": version: 7.1.0 resolution: "strip-ansi@npm:7.1.0" dependencies: From e83e47ce872f7d2afe06024946ea8f6f1f90a7bf Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 17:31:41 +0100 Subject: [PATCH 095/106] apply more migrations listed in https://github.com/storybookjs/storybook/issues/25433 --- code/lib/cli/src/automigrate/fixes/mdx-gfm.ts | 1 + .../automigrate/fixes/remove-legacymdx1.ts | 56 +++++++++++++++++++ code/lib/types/src/modules/core-common.ts | 5 -- docs/api/main-config-features.md | 1 - 4 files changed, 57 insertions(+), 6 deletions(-) create mode 100644 code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts diff --git a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts b/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts index f844decf1443..7fc07b63349e 100644 --- a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts +++ b/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts @@ -54,6 +54,7 @@ export const mdxgfm: Fix = { return files.some((f) => f.endsWith('.mdx')); }, Promise.resolve(false)); + // @ts-expect-error (user might be upgrading from an older version that still had it) const usesMDX1 = mainConfig?.features?.legacyMdx1 === true || false; const skip = usesMDX1 || diff --git a/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts b/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts new file mode 100644 index 000000000000..5cfd26792eec --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts @@ -0,0 +1,56 @@ +import { dedent } from 'ts-dedent'; + +import { writeConfig } from '@storybook/csf-tools'; + +import type { Fix } from '../types'; +import { updateMainConfig } from '../helpers/mainConfigFile'; + +const logger = console; + +interface RemoveLegacyMDX1Options { + hasFeature: boolean; +} + +/** + * Does the user have 'legacyMdx1' in their main.ts? + * + * If so, prompt them to upgrade to delete it. + */ +export const removeLegacyMDX1: Fix = { + id: 'builder-vite', + + async check({ mainConfig }) { + if (mainConfig.features) { + // + return { + hasFeature: !!Object.hasOwn(mainConfig.features, 'legacyMdx1'), + }; + } + + return null; + }, + + prompt({}) { + return dedent` + You have features.legacyMdx1 in your Storybook main config file, this feature has been removed, shall we remove it from you main.ts file? + + Link: https://storybook.js.org/docs/7.6/migration-guide + `; + }, + + async run({ dryRun, mainConfigPath, skipInstall, packageManager }) { + logger.info(`โœ… Removing legacyMdx1 feature`); + if (!dryRun) { + await updateMainConfig({ dryRun: !!dryRun, mainConfigPath }, async (main) => { + main.removeField(['features', 'legacyMdx1']); + await writeConfig(main); + }); + + const packageJson = await packageManager.retrievePackageJson(); + + await packageManager.removeDependencies({ skipInstall: skipInstall, packageJson }, [ + '@storybook/mdx1-csf', + ]); + } + }, +}; diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 7a6bd8a99699..380508211121 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -355,11 +355,6 @@ export interface StorybookConfigRaw { */ argTypeTargetsV7?: boolean; - /** - * Use legacy MDX1, to help smooth migration to 7.0 - */ - legacyMdx1?: boolean; - /** * Apply decorators from preview.js before decorators from addons or frameworks */ diff --git a/docs/api/main-config-features.md b/docs/api/main-config-features.md index afbab0b01695..1d773b6e1eaf 100644 --- a/docs/api/main-config-features.md +++ b/docs/api/main-config-features.md @@ -10,7 +10,6 @@ Type: { argTypeTargetsV7?: boolean; legacyDecoratorFileOrder?: boolean; - legacyMdx1?: boolean; } ``` From 7ad2663d49f375489de8a68477fc560b255a79be Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Feb 2024 17:42:14 +0100 Subject: [PATCH 096/106] add to barrel --- code/lib/cli/src/automigrate/fixes/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 263abf85cf6f..68b642586f2b 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -5,6 +5,7 @@ import { webpack5 } from './webpack5'; import { vite4 } from './vite4'; import { vue3 } from './vue3'; import { mdxgfm } from './mdx-gfm'; +import { removeLegacyMDX1 } from './remove-legacymdx1'; import { eslintPlugin } from './eslint-plugin'; import { builderVite } from './builder-vite'; import { viteConfigFile } from './vite-config-file'; @@ -51,6 +52,7 @@ export const allFixes: Fix[] = [ reactDocgen, storyshotsMigration, removeReactDependency, + removeLegacyMDX1, webpack5CompilerSetup, ]; From 096d56d3e0cbe5b175c8ede30f8f5e97fe1a6c76 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 20 Feb 2024 09:18:59 +0100 Subject: [PATCH 097/106] Update code/lib/cli/src/initiate.ts Co-authored-by: Valentin Palkovic --- code/lib/cli/src/initiate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 5c87e88d0e5a..3d647f923a43 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -372,7 +372,7 @@ export async function doInitiate( return { shouldRunDev: false }; } - const foundGitIgnoreFile = await findUp('.gitignore', { cwd: process.cwd() }); + const foundGitIgnoreFile = await findUp('.gitignore'); const rootDirectory = getProjectRoot(); if (foundGitIgnoreFile && foundGitIgnoreFile.includes(rootDirectory)) { const contents = await readFile(foundGitIgnoreFile, 'utf-8'); From c11a91bce5781f9ee12177ee33013b8d4fb81e3a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 20 Feb 2024 09:21:25 +0100 Subject: [PATCH 098/106] fix type issue --- code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts b/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts index dab0a301ac41..c917fe321ee9 100644 --- a/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts +++ b/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts @@ -40,6 +40,7 @@ describe('no-ops', () => { packageManager: {}, main: { features: { + // @ts-expect-error (user might be upgrading from a version that had this option) legacyMdx1: true, }, }, From 8204e353842bfdaec1a45b57d5e3006f1e10cf7d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 20 Feb 2024 10:29:10 +0100 Subject: [PATCH 099/106] Adjust wording --- code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts b/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts index 5cfd26792eec..57f90e8403af 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts @@ -32,9 +32,9 @@ export const removeLegacyMDX1: Fix = { prompt({}) { return dedent` - You have features.legacyMdx1 in your Storybook main config file, this feature has been removed, shall we remove it from you main.ts file? + You have features.legacyMdx1 in your Storybook main config file. This feature has been removed. Shall we remove it from your Storybook main config file? - Link: https://storybook.js.org/docs/7.6/migration-guide + Link: https://storybook.js.org/docs/8.0/migration-guide `; }, From 332c593f8fb44fe62dabad1377da0517b42543f8 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 20 Feb 2024 10:58:12 +0000 Subject: [PATCH 100/106] Update CHANGELOG.md for v7.6.17 [skip ci] --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 39e2411abc61..649310bf1c11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 7.6.17 + +- Addon-docs: Fix Table of Contents heading leak - [#23677](https://github.com/storybookjs/storybook/pull/23677), thanks [@vmizg](https://github.com/vmizg)! +- Core: Update ip version to fix CVE-2023-42282 - [#26086](https://github.com/storybookjs/storybook/pull/26086), thanks [@drik98](https://github.com/drik98)! + ## 7.6.16 - Addon Themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)! From 6e4666a28fbb693bc89c8161219479b2bb4f79a0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 20 Feb 2024 12:12:52 +0100 Subject: [PATCH 101/106] Apply suggestions from code review Co-authored-by: Yann Braga --- code/lib/core-events/src/errors/server-errors.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index acdce05da1df..cf913ab0d228 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -411,10 +411,10 @@ export class MainFileESMOnlyImportError extends StorybookError { template() { const message = [ - `Storybook failed to load ${this.data.location}..`, + `Storybook failed to load ${this.data.location}`, '', `It looks like the file tried to load/import an ESM only module.`, - `Support for this is currently limited in ${this.data.location}.`, + `Support for this is currently limited in ${this.data.location}`, `You can import ESM modules in your main file, but only as dynamic import.`, '', ]; @@ -423,7 +423,7 @@ export class MainFileESMOnlyImportError extends StorybookError { white( `In your ${yellow(this.data.location)} file, line ${bold.cyan( this.data.num - )} threw an error, which looks like this:` + )} threw an error:` ), grey(this.data.line) ); @@ -431,10 +431,9 @@ export class MainFileESMOnlyImportError extends StorybookError { message.push( '', - white(`Convert the static import to an dynamic import ${underline('where they are used')}.`), + white(`Convert the static import to a dynamic import ${underline('where they are used')}.`), white(`Example:`) + ' ' + gray(`await import();`), '', - 'For more information, please read the documentation link below.' ); return message.join('\n'); @@ -457,7 +456,7 @@ export class MainFileMissingError extends StorybookError { template() { return dedent` No configuration files have been found in your configDir: ${yellow(this.data.location)}. - Storybook needs "main.js" file, please add it. + Storybook needs a "main.js" file, please add it. You can pass a --config-dir flag to tell Storybook, where your main.js file is located at). `; @@ -572,7 +571,7 @@ export class UpgradeStorybookUnknownCurrentVersionError extends StorybookError { return dedent` We couldn't determine the current version of Storybook in your project. - Are you running the storybook CLI in a project without Storybook? + Are you running the Storybook CLI in a project without Storybook? It might help if you specify your Storybook config directory with the --config-dir flag. `; } From 3a87bffc044404079e195208ed4155f4f615c648 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 20 Feb 2024 12:54:46 +0100 Subject: [PATCH 102/106] cleanup --- code/lib/core-events/src/errors/server-errors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index cf913ab0d228..a9a9e758d70e 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -433,7 +433,7 @@ export class MainFileESMOnlyImportError extends StorybookError { '', white(`Convert the static import to a dynamic import ${underline('where they are used')}.`), white(`Example:`) + ' ' + gray(`await import();`), - '', + '' ); return message.join('\n'); From d112816e573fc78413aa6a701c886615d90e7495 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 20 Feb 2024 14:06:07 +0100 Subject: [PATCH 103/106] Remove deprecated SvelteComponentTyped in favor of SvelteComponent --- code/renderers/svelte/src/public-types.test.ts | 4 ++-- code/renderers/svelte/src/public-types.ts | 8 ++++---- code/renderers/svelte/src/types.ts | 12 ++++++------ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts index 54773fe2de91..42e43bcb9111 100644 --- a/code/renderers/svelte/src/public-types.test.ts +++ b/code/renderers/svelte/src/public-types.test.ts @@ -3,7 +3,7 @@ import { describe, it } from 'vitest'; import { satisfies } from '@storybook/core-common'; import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types'; import { expectTypeOf } from 'expect-type'; -import type { ComponentProps, SvelteComponentTyped } from 'svelte'; +import type { ComponentProps, SvelteComponent } from 'svelte'; import Button from './__test__/Button.svelte'; import Decorator1 from './__test__/Decorator.svelte'; import Decorator2 from './__test__/Decorator2.svelte'; @@ -11,7 +11,7 @@ import Decorator2 from './__test__/Decorator2.svelte'; import type { Decorator, Meta, StoryObj } from './public-types'; import type { SvelteRenderer } from './types'; -type SvelteStory = StoryAnnotations< +type SvelteStory = StoryAnnotations< SvelteRenderer, Args, RequiredArgs diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts index ac03670f698a..54ba3e28e466 100644 --- a/code/renderers/svelte/src/public-types.ts +++ b/code/renderers/svelte/src/public-types.ts @@ -12,7 +12,7 @@ import type { ProjectAnnotations, } from '@storybook/types'; -import type { ComponentType, ComponentProps, SvelteComponentTyped } from 'svelte'; +import type { ComponentType, ComponentProps, SvelteComponent } from 'svelte'; import type { SetOptional, Simplify } from 'type-fest'; import type { SvelteRenderer } from './types'; @@ -23,7 +23,7 @@ export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; * * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export) */ -export type Meta = CmpOrArgs extends SvelteComponentTyped +export type Meta = CmpOrArgs extends SvelteComponent ? ComponentAnnotations, Props> : ComponentAnnotations; /** @@ -31,7 +31,7 @@ export type Meta = CmpOrArgs extends SvelteComponentTyped = TCmpOrArgs extends SvelteComponentTyped +export type StoryFn = TCmpOrArgs extends SvelteComponent ? AnnotatedStoryFn : AnnotatedStoryFn; @@ -54,7 +54,7 @@ export type StoryObj = MetaOrCmpOrArgs extends { SetOptional> > : never - : MetaOrCmpOrArgs extends SvelteComponentTyped + : MetaOrCmpOrArgs extends SvelteComponent ? StoryAnnotations, ComponentProps> : StoryAnnotations; diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts index 43d42e010677..3bbc8e2e7878 100644 --- a/code/renderers/svelte/src/types.ts +++ b/code/renderers/svelte/src/types.ts @@ -1,5 +1,5 @@ import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types'; -import type { ComponentConstructorOptions, ComponentEvents, SvelteComponentTyped } from 'svelte'; +import type { ComponentConstructorOptions, ComponentEvents, SvelteComponent } from 'svelte'; export type StoryContext = StoryContextBase; @@ -26,13 +26,13 @@ type ComponentType< Props extends Record = any, Events extends Record = any, > = new (options: ComponentConstructorOptions) => { - [P in keyof SvelteComponentTyped as P extends `$$${string}` - ? never - : P]: SvelteComponentTyped[P]; + [P in keyof SvelteComponent as P extends `$$${string}` ? never : P]: SvelteComponent< + Props, + Events + >[P]; }; -export interface SvelteRenderer - extends WebRenderer { +export interface SvelteRenderer extends WebRenderer { component: ComponentType ? this['T'] : any>; storyResult: this['T'] extends Record ? SvelteStoryResult> From c86284be645e56c559c7f0e1882e81697263e61b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 20 Feb 2024 15:25:18 +0100 Subject: [PATCH 104/106] Build: Make sure portable stories won't break in Node environments --- .../src/modules/preview-web/render/StoryRender.test.ts | 1 + .../preview-api/src/modules/store/csf/portable-stories.test.ts | 1 + code/lib/preview-api/vitest.config.ts | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 73845a00348d..df4b37b840ae 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -1,3 +1,4 @@ +// @vitest-environment jsdom import { describe, it, expect, vi } from 'vitest'; import { Channel } from '@storybook/channels'; import type { Renderer, StoryIndexEntry } from '@storybook/types'; diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts index 2ad7f7500f5b..af775f27360b 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts @@ -1,3 +1,4 @@ +// @vitest-environment node import { describe, expect, vi, it } from 'vitest'; import { composeStory, composeStories } from './portable-stories'; diff --git a/code/lib/preview-api/vitest.config.ts b/code/lib/preview-api/vitest.config.ts index 622642938f21..ddec70e554d4 100644 --- a/code/lib/preview-api/vitest.config.ts +++ b/code/lib/preview-api/vitest.config.ts @@ -6,7 +6,7 @@ export default mergeConfig( vitestCommonConfig, defineConfig({ test: { - environment: 'jsdom', + environment: 'node', name: __dirname.split(sep).slice(-2).join(posix.sep), }, }) From 5dc206d7d91c0031d3e031fdcc2289d285f7a1ab Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 20 Feb 2024 17:28:33 +0000 Subject: [PATCH 105/106] Write changelog for 8.0.0-beta.4 [skip ci] --- CHANGELOG.prerelease.md | 19 +++++++++++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index e7d6ae22d03b..72fc40a832a8 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,22 @@ +## 8.0.0-beta.4 + +- Addon-actions: Warn when argTypesRegex is used together with the visual test addon - [#26094](https://github.com/storybookjs/storybook/pull/26094), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Addon-docs: Fix Table of Contents heading leak - [#23677](https://github.com/storybookjs/storybook/pull/23677), thanks [@vmizg](https://github.com/vmizg)! +- CLI: Add `legacyMdx1` & `@storybook/mdx1-csf` automigration - [#26102](https://github.com/storybookjs/storybook/pull/26102), thanks [@ndelangen](https://github.com/ndelangen)! +- CLI: Add line ignoring storybook's `.log` files upon `init` - [#26099](https://github.com/storybookjs/storybook/pull/26099), thanks [@ndelangen](https://github.com/ndelangen)! +- CLI: Add support for custom vite config to autoblocker - [#26087](https://github.com/storybookjs/storybook/pull/26087), thanks [@ndelangen](https://github.com/ndelangen)! +- CLI: Add webpack5 compiler automigration - [#26000](https://github.com/storybookjs/storybook/pull/26000), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- CLI: Remove argTypesRegex automigration - [#26001](https://github.com/storybookjs/storybook/pull/26001), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- CLI: Remove the logging to file feature from autoblockers - [#26100](https://github.com/storybookjs/storybook/pull/26100), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Add addon removal telemetry - [#26077](https://github.com/storybookjs/storybook/pull/26077), thanks [@shilman](https://github.com/shilman)! +- Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Update ip version to fix CVE-2023-42282 - [#26086](https://github.com/storybookjs/storybook/pull/26086), thanks [@drik98](https://github.com/drik98)! +- Next.js: Support getImageProps API - [#25745](https://github.com/storybookjs/storybook/pull/25745), thanks [@piratetaco](https://github.com/piratetaco)! +- Svelte: Remove deprecated SvelteComponentTyped in favor of SvelteComponent - [#26113](https://github.com/storybookjs/storybook/pull/26113), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Vite: Fix bug that meant we always warned about TS plugin - [#26051](https://github.com/storybookjs/storybook/pull/26051), thanks [@tmeasday](https://github.com/tmeasday)! +- Vite: Fix config typing issue of the `typescript` property - [#26046](https://github.com/storybookjs/storybook/pull/26046), thanks [@ndelangen](https://github.com/ndelangen)! +- Vite: Fix issue getting preview stats with Vite builder - [#26093](https://github.com/storybookjs/storybook/pull/26093), thanks [@tmeasday](https://github.com/tmeasday)! + ## 8.0.0-beta.3 - Addon-actions: Add spy to action for explicit actions - [#26033](https://github.com/storybookjs/storybook/pull/26033), thanks [@kasperpeulen](https://github.com/kasperpeulen)! diff --git a/code/package.json b/code/package.json index 95a5636ff193..1f3b3d57ec71 100644 --- a/code/package.json +++ b/code/package.json @@ -292,5 +292,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.0-beta.4" } diff --git a/docs/versions/next.json b/docs/versions/next.json index b54db583e0d0..1c9c15870c34 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-beta.3","info":{"plain":"- Actions: Add spy to action for explicit actions - [#26033](https://github.com/storybookjs/storybook/pull/26033), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Addon Themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)!\n- Addon-docs: Fix pnpm+Vite failing to build with `@storybook/theming` Rollup error - [#26024](https://github.com/storybookjs/storybook/pull/26024), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Refactor to add autoblockers - [#25934](https://github.com/storybookjs/storybook/pull/25934), thanks [@ndelangen](https://github.com/ndelangen)!\n- Codemod: Migrate to test package - [#25958](https://github.com/storybookjs/storybook/pull/25958), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Portable stories: Only provide a play function wrapper if it exists - [#25974](https://github.com/storybookjs/storybook/pull/25974), thanks [@yannbf](https://github.com/yannbf)!\n- Test: Bump user-event to 14.5.2 - [#25889](https://github.com/storybookjs/storybook/pull/25889), thanks [@kasperpeulen](https://github.com/kasperpeulen)!"}} +{"version":"8.0.0-beta.4","info":{"plain":"- Addon-actions: Warn when argTypesRegex is used together with the visual test addon - [#26094](https://github.com/storybookjs/storybook/pull/26094), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Addon-docs: Fix Table of Contents heading leak - [#23677](https://github.com/storybookjs/storybook/pull/23677), thanks [@vmizg](https://github.com/vmizg)!\n- CLI: Add `legacyMdx1` & `@storybook/mdx1-csf` automigration - [#26102](https://github.com/storybookjs/storybook/pull/26102), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Add line ignoring storybook's `.log` files upon `init` - [#26099](https://github.com/storybookjs/storybook/pull/26099), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Add support for custom vite config to autoblocker - [#26087](https://github.com/storybookjs/storybook/pull/26087), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Add webpack5 compiler automigration - [#26000](https://github.com/storybookjs/storybook/pull/26000), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- CLI: Remove argTypesRegex automigration - [#26001](https://github.com/storybookjs/storybook/pull/26001), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- CLI: Remove the logging to file feature from autoblockers - [#26100](https://github.com/storybookjs/storybook/pull/26100), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Add addon removal telemetry - [#26077](https://github.com/storybookjs/storybook/pull/26077), thanks [@shilman](https://github.com/shilman)!\n- Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Update ip version to fix CVE-2023-42282 - [#26086](https://github.com/storybookjs/storybook/pull/26086), thanks [@drik98](https://github.com/drik98)!\n- Next.js: Support getImageProps API - [#25745](https://github.com/storybookjs/storybook/pull/25745), thanks [@piratetaco](https://github.com/piratetaco)!\n- Svelte: Remove deprecated SvelteComponentTyped in favor of SvelteComponent - [#26113](https://github.com/storybookjs/storybook/pull/26113), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Vite: Fix bug that meant we always warned about TS plugin - [#26051](https://github.com/storybookjs/storybook/pull/26051), thanks [@tmeasday](https://github.com/tmeasday)!\n- Vite: Fix config typing issue of the `typescript` property - [#26046](https://github.com/storybookjs/storybook/pull/26046), thanks [@ndelangen](https://github.com/ndelangen)!\n- Vite: Fix issue getting preview stats with Vite builder - [#26093](https://github.com/storybookjs/storybook/pull/26093), thanks [@tmeasday](https://github.com/tmeasday)!"}} From 5ce7f27f1ed4f5d15a652ea435d1c116d6ebfb78 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 20 Feb 2024 18:30:28 +0000 Subject: [PATCH 106/106] Bump version from "8.0.0-beta.3" to "8.0.0-beta.4" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-manager/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/channels/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/client-logger/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-common/package.json | 2 +- code/lib/core-common/src/versions.ts | 158 +++++++++--------- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/docs-tools/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/manager-api/src/version.ts | 2 +- code/lib/node-logger/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/preview/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/router/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/telemetry/package.json | 2 +- code/lib/test/package.json | 2 +- code/lib/theming/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- 82 files changed, 161 insertions(+), 162 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 9d59b4555ccb..12bb4e5890d9 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index cb6d14cdabd8..ae4890094098 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index fc57826dd378..22066c742a1c 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 1c16d2c0a1a2..e288b4ef3167 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index b4a139a5f8b4..ae1036bd400d 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 22794fd4ce9b..ea8882c06e3b 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 03d674a63778..9b7093338682 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index c70c356a70a6..354a0f77fdf5 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 5a47c37f3d55..e7c096e811e1 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 879b5dabff75..a354c64199f9 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 1ea447fba557..0695b925b6ca 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 136e50cfdcd8..686313c6b98b 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index ac06e9f2783a..c34149c39d55 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 8be3f92b9d91..646cb28606a8 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "View a storyโ€™s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index e58c37701697..08c5b27a4130 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 87101fc2d444..cef626a37355 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index f5c3b0622880..119fa13a2fce 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Build responsive components by adjusting Storybookโ€™s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 02f7b800666e..efe651986f45 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index f10e112debd4..556cf6c23ecb 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index f9973efbd8ef..8ff13a72b582 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 2b15ffc53fb9..dd6f6cf884b5 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 0da35b6230cc..c28e9fa27808 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 53c979465eae..8679c848c44a 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 34e9a2c4683e..375f3555cd35 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 506153f7067a..f4aad1a0751f 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 61ccf7227f24..1b228d5b0af2 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index f23ee7e89337..3d33c3af950b 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index a6915b2f3a2b..8d0738041d5f 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index eabf1dc8fd1a..b3aec9df3836 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index a45a9d4d2578..389569798629 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 7b98115e4a81..78d2347568ed 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 7a8873ce09c8..eebe0738192b 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 84a467fc9c79..4c451ff5e4d7 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index d5a7dd79da94..456ba9beb140 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 5c69e711b015..2e3b51a2e145 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 11d6e352f8bc..5e71c90cdb89 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 605eda5184ea..2fcec48139e5 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index e8f7d01f238b..94160358b093 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index f886f9297ad6..b02d98f7bbbc 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 4a422350b299..6a0866a23243 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 14e513395d46..cdcc81a0032e 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index c580bf8b6a38..dc92a87c27ad 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 2769b93ca65a..e4898dc76490 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 741f4ca4a657..983366675162 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts index dbd2ec2a6d3c..011e54bc40c1 100644 --- a/code/lib/core-common/src/versions.ts +++ b/code/lib/core-common/src/versions.ts @@ -1,82 +1,82 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.0.0-beta.3', - '@storybook/addon-actions': '8.0.0-beta.3', - '@storybook/addon-backgrounds': '8.0.0-beta.3', - '@storybook/addon-controls': '8.0.0-beta.3', - '@storybook/addon-docs': '8.0.0-beta.3', - '@storybook/addon-essentials': '8.0.0-beta.3', - '@storybook/addon-highlight': '8.0.0-beta.3', - '@storybook/addon-interactions': '8.0.0-beta.3', - '@storybook/addon-jest': '8.0.0-beta.3', - '@storybook/addon-links': '8.0.0-beta.3', - '@storybook/addon-mdx-gfm': '8.0.0-beta.3', - '@storybook/addon-measure': '8.0.0-beta.3', - '@storybook/addon-outline': '8.0.0-beta.3', - '@storybook/addon-storysource': '8.0.0-beta.3', - '@storybook/addon-themes': '8.0.0-beta.3', - '@storybook/addon-toolbars': '8.0.0-beta.3', - '@storybook/addon-viewport': '8.0.0-beta.3', - '@storybook/angular': '8.0.0-beta.3', - '@storybook/blocks': '8.0.0-beta.3', - '@storybook/builder-manager': '8.0.0-beta.3', - '@storybook/builder-vite': '8.0.0-beta.3', - '@storybook/builder-webpack5': '8.0.0-beta.3', - '@storybook/channels': '8.0.0-beta.3', - '@storybook/cli': '8.0.0-beta.3', - '@storybook/client-logger': '8.0.0-beta.3', - '@storybook/codemod': '8.0.0-beta.3', - '@storybook/components': '8.0.0-beta.3', - '@storybook/core-common': '8.0.0-beta.3', - '@storybook/core-events': '8.0.0-beta.3', - '@storybook/core-server': '8.0.0-beta.3', - '@storybook/core-webpack': '8.0.0-beta.3', - '@storybook/csf-plugin': '8.0.0-beta.3', - '@storybook/csf-tools': '8.0.0-beta.3', - '@storybook/docs-tools': '8.0.0-beta.3', - '@storybook/ember': '8.0.0-beta.3', - '@storybook/html': '8.0.0-beta.3', - '@storybook/html-vite': '8.0.0-beta.3', - '@storybook/html-webpack5': '8.0.0-beta.3', - '@storybook/instrumenter': '8.0.0-beta.3', - '@storybook/manager': '8.0.0-beta.3', - '@storybook/manager-api': '8.0.0-beta.3', - '@storybook/nextjs': '8.0.0-beta.3', - '@storybook/node-logger': '8.0.0-beta.3', - '@storybook/preact': '8.0.0-beta.3', - '@storybook/preact-vite': '8.0.0-beta.3', - '@storybook/preact-webpack5': '8.0.0-beta.3', - '@storybook/preset-create-react-app': '8.0.0-beta.3', - '@storybook/preset-html-webpack': '8.0.0-beta.3', - '@storybook/preset-preact-webpack': '8.0.0-beta.3', - '@storybook/preset-react-webpack': '8.0.0-beta.3', - '@storybook/preset-server-webpack': '8.0.0-beta.3', - '@storybook/preset-svelte-webpack': '8.0.0-beta.3', - '@storybook/preset-vue3-webpack': '8.0.0-beta.3', - '@storybook/preview': '8.0.0-beta.3', - '@storybook/preview-api': '8.0.0-beta.3', - '@storybook/react': '8.0.0-beta.3', - '@storybook/react-dom-shim': '8.0.0-beta.3', - '@storybook/react-vite': '8.0.0-beta.3', - '@storybook/react-webpack5': '8.0.0-beta.3', - '@storybook/router': '8.0.0-beta.3', - '@storybook/server': '8.0.0-beta.3', - '@storybook/server-webpack5': '8.0.0-beta.3', - '@storybook/source-loader': '8.0.0-beta.3', - '@storybook/svelte': '8.0.0-beta.3', - '@storybook/svelte-vite': '8.0.0-beta.3', - '@storybook/svelte-webpack5': '8.0.0-beta.3', - '@storybook/sveltekit': '8.0.0-beta.3', - '@storybook/telemetry': '8.0.0-beta.3', - '@storybook/test': '8.0.0-beta.3', - '@storybook/theming': '8.0.0-beta.3', - '@storybook/types': '8.0.0-beta.3', - '@storybook/vue3': '8.0.0-beta.3', - '@storybook/vue3-vite': '8.0.0-beta.3', - '@storybook/vue3-webpack5': '8.0.0-beta.3', - '@storybook/web-components': '8.0.0-beta.3', - '@storybook/web-components-vite': '8.0.0-beta.3', - '@storybook/web-components-webpack5': '8.0.0-beta.3', - sb: '8.0.0-beta.3', - storybook: '8.0.0-beta.3', + '@storybook/addon-a11y': '8.0.0-beta.4', + '@storybook/addon-actions': '8.0.0-beta.4', + '@storybook/addon-backgrounds': '8.0.0-beta.4', + '@storybook/addon-controls': '8.0.0-beta.4', + '@storybook/addon-docs': '8.0.0-beta.4', + '@storybook/addon-essentials': '8.0.0-beta.4', + '@storybook/addon-highlight': '8.0.0-beta.4', + '@storybook/addon-interactions': '8.0.0-beta.4', + '@storybook/addon-jest': '8.0.0-beta.4', + '@storybook/addon-links': '8.0.0-beta.4', + '@storybook/addon-mdx-gfm': '8.0.0-beta.4', + '@storybook/addon-measure': '8.0.0-beta.4', + '@storybook/addon-outline': '8.0.0-beta.4', + '@storybook/addon-storysource': '8.0.0-beta.4', + '@storybook/addon-themes': '8.0.0-beta.4', + '@storybook/addon-toolbars': '8.0.0-beta.4', + '@storybook/addon-viewport': '8.0.0-beta.4', + '@storybook/angular': '8.0.0-beta.4', + '@storybook/blocks': '8.0.0-beta.4', + '@storybook/builder-manager': '8.0.0-beta.4', + '@storybook/builder-vite': '8.0.0-beta.4', + '@storybook/builder-webpack5': '8.0.0-beta.4', + '@storybook/channels': '8.0.0-beta.4', + '@storybook/cli': '8.0.0-beta.4', + '@storybook/client-logger': '8.0.0-beta.4', + '@storybook/codemod': '8.0.0-beta.4', + '@storybook/components': '8.0.0-beta.4', + '@storybook/core-common': '8.0.0-beta.4', + '@storybook/core-events': '8.0.0-beta.4', + '@storybook/core-server': '8.0.0-beta.4', + '@storybook/core-webpack': '8.0.0-beta.4', + '@storybook/csf-plugin': '8.0.0-beta.4', + '@storybook/csf-tools': '8.0.0-beta.4', + '@storybook/docs-tools': '8.0.0-beta.4', + '@storybook/ember': '8.0.0-beta.4', + '@storybook/html': '8.0.0-beta.4', + '@storybook/html-vite': '8.0.0-beta.4', + '@storybook/html-webpack5': '8.0.0-beta.4', + '@storybook/instrumenter': '8.0.0-beta.4', + '@storybook/manager': '8.0.0-beta.4', + '@storybook/manager-api': '8.0.0-beta.4', + '@storybook/nextjs': '8.0.0-beta.4', + '@storybook/node-logger': '8.0.0-beta.4', + '@storybook/preact': '8.0.0-beta.4', + '@storybook/preact-vite': '8.0.0-beta.4', + '@storybook/preact-webpack5': '8.0.0-beta.4', + '@storybook/preset-create-react-app': '8.0.0-beta.4', + '@storybook/preset-html-webpack': '8.0.0-beta.4', + '@storybook/preset-preact-webpack': '8.0.0-beta.4', + '@storybook/preset-react-webpack': '8.0.0-beta.4', + '@storybook/preset-server-webpack': '8.0.0-beta.4', + '@storybook/preset-svelte-webpack': '8.0.0-beta.4', + '@storybook/preset-vue3-webpack': '8.0.0-beta.4', + '@storybook/preview': '8.0.0-beta.4', + '@storybook/preview-api': '8.0.0-beta.4', + '@storybook/react': '8.0.0-beta.4', + '@storybook/react-dom-shim': '8.0.0-beta.4', + '@storybook/react-vite': '8.0.0-beta.4', + '@storybook/react-webpack5': '8.0.0-beta.4', + '@storybook/router': '8.0.0-beta.4', + '@storybook/server': '8.0.0-beta.4', + '@storybook/server-webpack5': '8.0.0-beta.4', + '@storybook/source-loader': '8.0.0-beta.4', + '@storybook/svelte': '8.0.0-beta.4', + '@storybook/svelte-vite': '8.0.0-beta.4', + '@storybook/svelte-webpack5': '8.0.0-beta.4', + '@storybook/sveltekit': '8.0.0-beta.4', + '@storybook/telemetry': '8.0.0-beta.4', + '@storybook/test': '8.0.0-beta.4', + '@storybook/theming': '8.0.0-beta.4', + '@storybook/types': '8.0.0-beta.4', + '@storybook/vue3': '8.0.0-beta.4', + '@storybook/vue3-vite': '8.0.0-beta.4', + '@storybook/vue3-webpack5': '8.0.0-beta.4', + '@storybook/web-components': '8.0.0-beta.4', + '@storybook/web-components-vite': '8.0.0-beta.4', + '@storybook/web-components-webpack5': '8.0.0-beta.4', + sb: '8.0.0-beta.4', + storybook: '8.0.0-beta.4', }; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index a6d338e659f9..04b89085e701 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index dc024488a7f8..8acb9a7ec16d 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 0f78c1756919..e9d2232351e4 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 82864dc2369c..ee8387cb21dd 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index e8fd36980ec6..4e1703cec773 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index cf07ca527f96..557c5a7c8e57 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 46fd7c21bf93..1e94deaef00b 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 572f7169d407..261d5d5536d3 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index f8568794cba1..5fa094928cb2 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.0.0-beta.3'; +export const version = '8.0.0-beta.4'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 0ecd759a4732..8ec068205efc 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 14c43ccfc5c7..8cd4208ad007 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index d3608366daed..cb3b76862c82 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 2292055e0a64..a3d8d360788c 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 202947c825b4..903bb8763982 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 210533725374..35a82147aaf1 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index c122dace59dd..f05f4467dce3 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 4612b14b9a6c..fbd8b21509c9 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index c7d1849ed03b..4a47bd2bd25e 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 0cc32a79a9b8..fee0ab7fbddf 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 1f3b3d57ec71..1d6e075439ea 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -292,6 +292,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.0.0-beta.4" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index d41183fc2ebb..ae34d5d15e9d 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index b0b501034332..00aa92b4086f 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 4e202e5647cf..387c187b3ec6 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 16b752c225c8..07cbf84d2f6c 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 7b11697edd49..ec4df0997e9c 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index f1bc815da7f1..008078d8721c 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index ab979bf25def..e10eb25c1991 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 787770b94505..d3592cd30c09 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 0a3faa3bdc8f..374873be5692 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index edc6d843aa79..f4239531cb51 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 62088980bc5f..911edce348b9 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index b4756c28a4cb..d7efba34d699 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index ea46a6860ce5..18d032af1bce 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 10394c503b82..7e7c724f6d40 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 5719ea26e0be..3a29e0ed9ded 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 2b83383a05f4..3a8eefd42741 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 86814f97bbdf..48cb90b99e2e 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.0.0-beta.3", + "version": "8.0.0-beta.4", "description": "Core Storybook UI", "keywords": [ "storybook"