From a7cbe9907f868647f0c8b42a6c98f27349e1a636 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 13 Dec 2023 13:41:01 +0100 Subject: [PATCH 001/114] Prevent Stories lookup in node_modules --- .../src/preview/iframe-webpack.config.ts | 1 + code/lib/core-webpack/src/to-importFn.ts | 18 +++++++++++++++++- code/lib/csf-plugin/src/index.ts | 3 ++- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index ac573827715a..c31238b5c5e5 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -218,6 +218,7 @@ export default async ( rules: [ { test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/, + exclude: /node_modules/, enforce: 'post', use: [ { diff --git a/code/lib/core-webpack/src/to-importFn.ts b/code/lib/core-webpack/src/to-importFn.ts index 20c3be9dc1c2..83455c66cb6b 100644 --- a/code/lib/core-webpack/src/to-importFn.ts +++ b/code/lib/core-webpack/src/to-importFn.ts @@ -4,6 +4,20 @@ import { globToRegexp } from '@storybook/core-common'; import { importPipeline } from './importPipeline'; +function adjustRegexToExcludeNodeModules(originalRegex: RegExp) { + const originalRegexString = originalRegex.source; + const startsWithCaret = originalRegexString.startsWith('^'); + const excludeNodeModulesPattern = startsWithCaret ? '(?!.*node_modules)' : '^(?!.*node_modules)'; + + // Combine the new exclusion pattern with the original regex + const adjustedRegexString = startsWithCaret + ? `^${excludeNodeModulesPattern}${originalRegexString.substring(1)}` + : excludeNodeModulesPattern + originalRegexString; + + // Create and return the new regex + return new RegExp(adjustedRegexString); +} + export function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier) { const { directory, files } = specifier; @@ -17,7 +31,9 @@ export function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier) { const webpackIncludeGlob = ['.', '..'].includes(directory) ? files : `${directoryWithoutLeadingDots}/${files}`; - const webpackIncludeRegexpWithCaret = globToRegexp(webpackIncludeGlob); + const webpackIncludeRegexpWithCaret = webpackIncludeGlob.includes('node_modules') + ? globToRegexp(webpackIncludeGlob) + : adjustRegexToExcludeNodeModules(globToRegexp(webpackIncludeGlob)); // picomatch is creating an exact match, but we are only matching the end of the filename return new RegExp(webpackIncludeRegexpWithCaret.source.replace(/^\^/, '')); } diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts index ec0aaa1d52a9..6cc9cfcd594b 100644 --- a/code/lib/csf-plugin/src/index.ts +++ b/code/lib/csf-plugin/src/index.ts @@ -5,7 +5,8 @@ import type { EnrichCsfOptions } from '@storybook/csf-tools'; export type CsfPluginOptions = EnrichCsfOptions; -const STORIES_REGEX = /\.(story|stories)\.[tj]sx?$/; +// Ignore node_modules +const STORIES_REGEX = /(? Date: Thu, 21 Dec 2023 15:18:58 +0000 Subject: [PATCH 002/114] Fix addon-action module resolution broken for react-native --- code/addons/actions/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index da85fef889d0..045d22b145a6 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -40,6 +40,7 @@ }, "main": "dist/index.js", "module": "dist/index.mjs", + "react-native": "dist/index.mjs", "types": "dist/index.d.ts", "typesVersions": { "*": { From 685b825ebf19dd9d55ea579579fc8d4fd40accd5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 28 Dec 2023 01:11:13 +0800 Subject: [PATCH 003/114] Docs: Add autodocs filter function parameter --- code/addons/docs/src/preview.ts | 3 +++ code/ui/blocks/src/blocks/Stories.tsx | 8 ++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts index 0d1183bd0cf1..f0e41435bb2e 100644 --- a/code/addons/docs/src/preview.ts +++ b/code/addons/docs/src/preview.ts @@ -1,8 +1,11 @@ +import type { PreparedStory } from '@storybook/types'; + export const parameters: any = { docs: { renderer: async () => { const { DocsRenderer } = (await import('./DocsRenderer')) as any; return new DocsRenderer(); }, + autodocsFilter: (story: PreparedStory) => !story.parameters?.docs?.disable, }, }; diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx index de42c50d2e41..93e8bfd49cf3 100644 --- a/code/ui/blocks/src/blocks/Stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.tsx @@ -27,9 +27,13 @@ const StyledHeading: typeof Heading = styled(Heading)(({ theme }) => ({ })); export const Stories: FC = ({ title = 'Stories', includePrimary = true }) => { - const { componentStories } = useContext(DocsContext); + const { componentStories, projectAnnotations, getStoryContext } = useContext(DocsContext); - let stories = componentStories().filter((story) => !story.parameters?.docs?.disable); + let stories = componentStories(); + const { autodocsFilter } = projectAnnotations.parameters?.docs || {}; + if (autodocsFilter) { + stories = stories.filter((story) => autodocsFilter(story, getStoryContext(story))); + } if (!includePrimary) stories = stories.slice(1); From 5fe992e9201fece88571cf8e8a918a0113ff5faf Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 2 Jan 2024 18:29:20 +0800 Subject: [PATCH 004/114] Fix sidebar bottom/top --- code/ui/manager/src/container/Sidebar.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx index 9041badfd5d0..a9433f948401 100755 --- a/code/ui/manager/src/container/Sidebar.tsx +++ b/code/ui/manager/src/container/Sidebar.tsx @@ -41,9 +41,8 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { const whatsNewNotificationsEnabled = state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications; - const items = api.getElements(types.experimental_SIDEBAR_BOTTOM); - const bottom = useMemo(() => Object.values(items), [items]); - const top = useMemo(() => Object.values(api.getElements(types.experimental_SIDEBAR_TOP)), []); + const bottom = Object.values(api.getElements(types.experimental_SIDEBAR_BOTTOM)); + const top = Object.values(api.getElements(types.experimental_SIDEBAR_TOP)); return { title: name, From 263ed62fb4034676535cc521755c679adeaf260e Mon Sep 17 00:00:00 2001 From: Ronald Rey Date: Tue, 2 Jan 2024 09:59:34 -0400 Subject: [PATCH 005/114] fix: Check optionalDependencies for storybook versions --- code/lib/cli/src/helpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 33c7b6c6ccd9..4bd17d055e35 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -295,7 +295,7 @@ export async function adjustTemplate(templatePath: string, templateData: Record< // Given a package.json, finds any official storybook package within it // and if it exists, returns the version of that package from the specified package.json export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAndDevDeps) { - const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies }; + const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies, ...packageJson.optionalDependencies }; const storybookPackage = Object.keys(allDeps).find((name: string) => { return storybookMonorepoPackages[name as keyof typeof storybookMonorepoPackages]; }); From 6e8f823ff097dc139be772446d3a7048b9fc46de Mon Sep 17 00:00:00 2001 From: Ronald Rey Date: Wed, 3 Jan 2024 10:01:25 -0400 Subject: [PATCH 006/114] Formatting --- code/lib/cli/src/helpers.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 4bd17d055e35..9d0570922867 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -295,7 +295,11 @@ export async function adjustTemplate(templatePath: string, templateData: Record< // Given a package.json, finds any official storybook package within it // and if it exists, returns the version of that package from the specified package.json export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAndDevDeps) { - const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies, ...packageJson.optionalDependencies }; + const allDeps = { + ...packageJson.dependencies, + ...packageJson.devDependencies, + ...packageJson.optionalDependencies + }; const storybookPackage = Object.keys(allDeps).find((name: string) => { return storybookMonorepoPackages[name as keyof typeof storybookMonorepoPackages]; }); From b7d72d59297287e37969fdd424b3d69d47183697 Mon Sep 17 00:00:00 2001 From: Ronald Rey Date: Wed, 3 Jan 2024 10:21:06 -0400 Subject: [PATCH 007/114] Update helpers.ts --- code/lib/cli/src/helpers.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 9d0570922867..ed54bd765986 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -295,10 +295,10 @@ export async function adjustTemplate(templatePath: string, templateData: Record< // Given a package.json, finds any official storybook package within it // and if it exists, returns the version of that package from the specified package.json export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAndDevDeps) { - const allDeps = { + const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies, - ...packageJson.optionalDependencies + ...packageJson.optionalDependencies, }; const storybookPackage = Object.keys(allDeps).find((name: string) => { return storybookMonorepoPackages[name as keyof typeof storybookMonorepoPackages]; From fa2364c043980cc8f135a24849afeb6ec67f8af3 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 17:44:13 -0300 Subject: [PATCH 008/114] Addon Controls: Remove unused hideNoControlsWarning type --- MIGRATION.md | 20 +++++++++++++++++- code/addons/controls/src/ControlsPanel.tsx | 3 --- docs/essentials/controls.md | 20 ------------------ ...utton-story-hide-nocontrols-warning.ts.mdx | 20 ------------------ ...utton-story-hide-nocontrols-warning.js.mdx | 15 ------------- ...n-story-hide-nocontrols-warning.ts-4-9.mdx | 21 ------------------- ...utton-story-hide-nocontrols-warning.ts.mdx | 21 ------------------- ...utton-story-hide-nocontrols-warning.js.mdx | 13 ------------ ...utton-story-hide-nocontrols-warning.ts.mdx | 18 ---------------- 9 files changed, 19 insertions(+), 132 deletions(-) delete mode 100644 docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx delete mode 100644 docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx delete mode 100644 docs/snippets/common/button-story-hide-nocontrols-warning.ts-4-9.mdx delete mode 100644 docs/snippets/common/button-story-hide-nocontrols-warning.ts.mdx delete mode 100644 docs/snippets/web-components/button-story-hide-nocontrols-warning.js.mdx delete mode 100644 docs/snippets/web-components/button-story-hide-nocontrols-warning.ts.mdx diff --git a/MIGRATION.md b/MIGRATION.md index 8d6310ddce12..9ab4cbc39f48 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,7 @@

Migration

- [From version 7.x to 8.0.0](#from-version-7x-to-800) - - [Framework specific vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) + - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) @@ -24,6 +24,7 @@ - [Require Svelte 4 and up](#require-svelte-4-and-up) - [Deprecations which are now removed](#deprecations-which-are-now-removed) - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) + - [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -35,6 +36,7 @@ - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -531,6 +533,10 @@ Starting in 8.0, Storybook requires Svelte 4 and up. The `--use-npm` is now removed. Use `--package-manager=npm` instead. [More info here](#cli-option---use-npm-deprecated). +#### hideNoControlsWarning parameter from addon controls + +The `hideNoControlsWarning` parameter is now removed. [More info here](#addon-controls-hidenocontrolswarning-parameter-is-deprecated). + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated @@ -711,6 +717,18 @@ The API: `addons.addPanel()` is now deprecated, and will be removed in 8.0.0. Pl The `render` method can now be a `React.FunctionComponent` (without the `children` prop). Storybook will now render it, rather than calling it as a function. +#### Addon-controls hideNoControlsWarning parameter is deprecated + +The `hideNoControlsWarning` parameter is now unused and deprecated, given that the UI of the Controls addon changed in a way that does not display that message anymore. + +```ts +export const Primary = { + parameters: { + controls: { hideNoControlsWarning: true }, // this parameter is now unnecessary + }, +}; +``` + ## From version 6.5.x to 7.0.0 A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx dlx storybook@latest upgrade --prerelease`. diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index fc7c2085abd4..09d3bc45e44e 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -16,9 +16,6 @@ interface ControlsParameters { sort?: SortType; expanded?: boolean; presetColors?: PresetColor[]; - - /** @deprecated No longer used, will be removed in Storybook 8.0 */ - hideNoControlsWarning?: boolean; } export const ControlsPanel: FC = () => { diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 5d86420c4ab0..f575d34947d9 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -409,26 +409,6 @@ Consider the following snippet to force required args first: -#### Hide NoControls warning - -If you don't plan to handle the control args inside your story, you can remove the warning with: - - - - - - - ### Disable controls for specific properties Aside from the features already documented here, Controls can also be disabled for individual properties. diff --git a/docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx b/docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx deleted file mode 100644 index 9462922bc188..000000000000 --- a/docs/snippets/angular/button-story-hide-nocontrols-warning.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/angular'; - -import { Button } from './button.component'; - -const meta: Meta - ), + import { Button } from './button'; + export default {}; - name: 'Primary', - }; + export const Primary = { + render: () => ( + + ), - `); + name: 'Primary', + }; + `); }); -it('story child is CSF3', () => { +it('story child is CSF3', async () => { const input = dedent` import { Story } from '@storybook/addon-docs'; import { Button } from './button'; @@ -547,7 +529,7 @@ it('story child is CSF3', () => { } args={{label: 'Hello' }} /> `; - jscodeshift({ source: input, path: 'Foobar.stories.mdx' }); + await jscodeshift({ source: input, path: 'Foobar.stories.mdx' }); const [, csf] = fs.writeFileSync.mock.calls[0]; @@ -563,11 +545,10 @@ it('story child is CSF3', () => { label: 'Hello', }, }; - `); }); -it('story child is arrow function', () => { +it('story child is arrow function', async () => { const input = dedent` import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { Button } from './button'; @@ -577,23 +558,22 @@ it('story child is arrow function', () => { `; - jscodeshift({ source: input, path: 'Foobar.stories.mdx' }); + await jscodeshift({ source: input, path: 'Foobar.stories.mdx' }); const [, csf] = fs.writeFileSync.mock.calls[0]; expect(csf).toMatchInlineSnapshot(` - import { Button } from './button'; - export default {}; - - export const Primary = { - render: (args) =>