diff --git a/.circleci/config.yml b/.circleci/config.yml index b212c825ddc2..c1871d2eba22 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -410,7 +410,7 @@ jobs: parallelism: type: integer executor: - class: medium + class: large name: sb_playwright parallelism: << parameters.parallelism >> steps: @@ -433,7 +433,7 @@ jobs: parallelism: type: integer executor: - class: medium + class: large name: sb_playwright parallelism: << parameters.parallelism >> steps: diff --git a/CHANGELOG.md b/CHANGELOG.md index ee61820d6939..8a70cafb01a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 7.6.11 + +- CLI: Update init for react native v7 - [#25780](https://github.com/storybookjs/storybook/pull/25780), thanks [@dannyhw](https://github.com/dannyhw)! +- Codemods: Add support for multiple file extensions in runCodemod function - [#25708](https://github.com/storybookjs/storybook/pull/25708), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! + ## 7.6.10 - CLI: Fix existing version detection in `upgrade` - [#25642](https://github.com/storybookjs/storybook/pull/25642), thanks [@JReinhold](https://github.com/JReinhold)! diff --git a/CODEOWNERS b/CODEOWNERS index df2a08807c84..9d8ca4f6c5b9 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,97 +1,97 @@ # Code Owners # Root -.github/ @JReinhold @yannbf @vanessayuenn -.circleci/ @yannbf @kasperpeulen -.yarnrc.yml @ndelangen @JReinhold +# .github/ @JReinhold @yannbf @vanessayuenn +# .circleci/ @yannbf @kasperpeulen +# .yarnrc.yml @ndelangen @JReinhold # Docs -/docs/ @kylegach @jonniebigodes +# /docs/ @kylegach @jonniebigodes # Scripts -/scripts/ @ndelangen @kasperpeulen -/scripts/release/ @jreinhold @ndelangen @kasperpeulen +# /scripts/ @ndelangen @kasperpeulen +# /scripts/release/ @jreinhold @ndelangen @kasperpeulen # Addons -/code/addons/a11y/ @ndelangen @yannbf -/code/addons/actions/ @ndelangen @yannbf -/code/addons/backgrounds/ @yannbf @ndelangen -/code/addons/controls/ @kasperpeulen @ndelangen -/code/addons/docs/ @JReinhold @kasperpeulen -/code/addons/essentials/ @valentinpalkovic @ndelangen -/code/addons/gfm/ @ndelangen @valentinpalkovic -/code/addons/highlight/ @yannbf @valentinpalkovic -/code/addons/interactions/ @yannbf @ndelangen -/code/addons/jest/ @ndelangen -/code/addons/links/ @yannbf @JReinhold -/code/addons/measure/ @yannbf @valentinpalkovic -/code/addons/outline/ @yannbf @valentinpalkovic -/code/addons/storysource/ @ndelangen -/code/addons/themes/ @JReinhold @yannbf -/code/addons/toolbars/ @ndelangen @JReinhold -/code/addons/viewport/ @yannbf @ndelangen +# /code/addons/a11y/ @ndelangen @yannbf +# /code/addons/actions/ @ndelangen @yannbf +# /code/addons/backgrounds/ @yannbf @ndelangen +# /code/addons/controls/ @kasperpeulen @ndelangen +# /code/addons/docs/ @JReinhold @kasperpeulen +# /code/addons/essentials/ @valentinpalkovic @ndelangen +# /code/addons/gfm/ @ndelangen @valentinpalkovic +# /code/addons/highlight/ @yannbf @valentinpalkovic +# /code/addons/interactions/ @yannbf @ndelangen +# /code/addons/jest/ @ndelangen +# /code/addons/links/ @yannbf @JReinhold +# /code/addons/measure/ @yannbf @valentinpalkovic +# /code/addons/outline/ @yannbf @valentinpalkovic +# /code/addons/storysource/ @ndelangen +# /code/addons/themes/ @JReinhold @yannbf +# /code/addons/toolbars/ @ndelangen @JReinhold +# /code/addons/viewport/ @yannbf @ndelangen # Builder -/code/builders/builder-manager/ @ndelangen @valentinpalkovic -/code/builders/builder-vite/ @JReinhold @valentinpalkovic @IanVS -/code/builders/builder-webpack5/ @ndelangen @valentinpalkovic +# /code/builders/builder-manager/ @ndelangen @valentinpalkovic +# /code/builders/builder-vite/ @JReinhold @valentinpalkovic @IanVS +# /code/builders/builder-webpack5/ @ndelangen @valentinpalkovic # Frameworks -/code/frameworks/angular/ @valentinpalkovic @yannbf -/code/frameworks/html-vite/ @kasperpeulen @JReinhold -/code/frameworks/html-webpack5/ @kasperpeulen @JReinhold -/code/frameworks/nextjs/ @valentinpalkovic @kasperpeulen @yannbf -/code/frameworks/react-vite/ @valentinpalkovic @kasperpeulen -/code/frameworks/react-webpack5/ @valentinpalkovic @kasperpeulen -/code/frameworks/svelte-vite/ @kasperpeulen @JReinhold -/code/frameworks/svelte-webpack5/ @kasperpeulen @JReinhold -/code/frameworks/sveltekit/ @kasperpeulen @JReinhold -/code/frameworks/vue3-vite/ @kasperpeulen @yannbf @JReinhold -/code/frameworks/vue3-webpack5/ @kasperpeulen @yannbf @JReinhold -/code/frameworks/web-components-vite/ @kasperpeulen @JReinhold -/code/frameworks/web-components-webpack5/ @kasperpeulen @JReinhold +# /code/frameworks/angular/ @valentinpalkovic @yannbf +# /code/frameworks/html-vite/ @kasperpeulen @JReinhold +# /code/frameworks/html-webpack5/ @kasperpeulen @JReinhold +# /code/frameworks/nextjs/ @valentinpalkovic @kasperpeulen @yannbf +# /code/frameworks/react-vite/ @valentinpalkovic @kasperpeulen +# /code/frameworks/react-webpack5/ @valentinpalkovic @kasperpeulen +# /code/frameworks/svelte-vite/ @kasperpeulen @JReinhold +# /code/frameworks/svelte-webpack5/ @kasperpeulen @JReinhold +# /code/frameworks/sveltekit/ @kasperpeulen @JReinhold +# /code/frameworks/vue3-vite/ @kasperpeulen @yannbf @JReinhold +# /code/frameworks/vue3-webpack5/ @kasperpeulen @yannbf @JReinhold +# /code/frameworks/web-components-vite/ @kasperpeulen @JReinhold +# /code/frameworks/web-components-webpack5/ @kasperpeulen @JReinhold # Lib -/code/lib/channels/ @ndelangen @kasperpeulen -/code/lib/cli/ @yannbf @valentinpalkovic @ndelangen -/code/lib/cli-sb/ @yannbf @valentinpalkovic @ndelangen -/code/lib/cli-storybook/ @yannbf @valentinpalkovic @ndelangen -/code/lib/client-logger/ @ndelangen @yannbf -/code/lib/codemod/ @kasperpeulen @ndelangen -/code/lib/core-common/ @ndelangen @yannbf -/code/lib/core-events/ @ndelangen @kasperpeulen -/code/lib/core-server/ @ndelangen @JReinhold @tmeasday @shilman -/code/lib/core-webpack/ @valentinpalkovic @ndelangen -/code/lib/csf-plugin/ @ndelangen @valentinpalkovic -/code/lib/csf-tools/ @kasperpeulen @shilman -/code/lib/docs-tools/ @JReinhold @shilman -/code/lib/instrumenter/ @yannbf @kasperpeulen -/code/lib/manager-api/ @ndelangen @valentinpalkovic @kasperpeulen -/code/lib/node-logger/ @yannbf @ndelangen -/code/lib/preview/ @ndelangen @kasperpeulen -/code/lib/preview-api/ @yannbf @ndelangen @tmeasday -/code/lib/react-dom-shim/ @ndelangen @valentinpalkovic @tmeasday -/code/lib/router/ @ndelangen @JReinhold -/code/lib/telemetry/ @shilman @yannbf @ndelangen -/code/lib/theming/ @cdedreuille @ndelangen @JReinhold -/code/lib/types/ @kasperpeulen @ndelangen +# /code/lib/channels/ @ndelangen @kasperpeulen +# /code/lib/cli/ @yannbf @valentinpalkovic @ndelangen +# /code/lib/cli-sb/ @yannbf @valentinpalkovic @ndelangen +# /code/lib/cli-storybook/ @yannbf @valentinpalkovic @ndelangen +# /code/lib/client-logger/ @ndelangen @yannbf +# /code/lib/codemod/ @kasperpeulen @ndelangen +# /code/lib/core-common/ @ndelangen @yannbf +# /code/lib/core-events/ @ndelangen @kasperpeulen +# /code/lib/core-server/ @ndelangen @JReinhold @tmeasday @shilman +# /code/lib/core-webpack/ @valentinpalkovic @ndelangen +# /code/lib/csf-plugin/ @ndelangen @valentinpalkovic +# /code/lib/csf-tools/ @kasperpeulen @shilman +# /code/lib/docs-tools/ @JReinhold @shilman +# /code/lib/instrumenter/ @yannbf @kasperpeulen +# /code/lib/manager-api/ @ndelangen @valentinpalkovic @kasperpeulen +# /code/lib/node-logger/ @yannbf @ndelangen +# /code/lib/preview/ @ndelangen @kasperpeulen +# /code/lib/preview-api/ @yannbf @ndelangen @tmeasday +# /code/lib/react-dom-shim/ @ndelangen @valentinpalkovic @tmeasday +# /code/lib/router/ @ndelangen @JReinhold +# /code/lib/telemetry/ @shilman @yannbf @ndelangen +# /code/lib/theming/ @cdedreuille @ndelangen @JReinhold +# /code/lib/types/ @kasperpeulen @ndelangen # Presets -/code/presets/create-react-app/ @valentinpalkovic @ndelangen +# /code/presets/create-react-app/ @valentinpalkovic @ndelangen # Renderers -/code/renderers/html/ @kasperpeulen @JReinhold -/code/renderers/react/ @valentinpalkovic @kasperpeulen -/code/renderers/server/ @shilman @valentinpalkovic -/code/renderers/svelte/ @JReinhold @kasperpeulen -/code/renderers/vue3/ @kasperpeulen @JReinhold -/code/renderers/web-components/ @kasperpeulen @JReinhold +# /code/renderers/html/ @kasperpeulen @JReinhold +# /code/renderers/react/ @valentinpalkovic @kasperpeulen +# /code/renderers/server/ @shilman @valentinpalkovic +# /code/renderers/svelte/ @JReinhold @kasperpeulen +# /code/renderers/vue3/ @kasperpeulen @JReinhold +# /code/renderers/web-components/ @kasperpeulen @JReinhold # UI -/code/ui/.storybook/ @JReinhold @cdedreuille -/code/ui/blocks/ @JReinhold @cdedreuille -/code/ui/components/ @cdedreuille @JReinhold -/code/ui/manager/ @ndelangen @JReinhold @cdedreuille @tmeasday +# /code/ui/.storybook/ @JReinhold @cdedreuille +# /code/ui/blocks/ @JReinhold @cdedreuille +# /code/ui/components/ @cdedreuille @JReinhold +# /code/ui/manager/ @ndelangen @JReinhold @cdedreuille @tmeasday # E2E -/code/e2e-tests/ @yannbf @valentinpalkovic +# /code/e2e-tests/ @yannbf @valentinpalkovic diff --git a/MIGRATION.md b/MIGRATION.md index 3a1b66b23c5b..e02b78ed92ca 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -19,7 +19,6 @@ - [Dropping support for Yarn 1](#dropping-support-for-yarn-1) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - [Autotitle breaking fixes](#autotitle-breaking-fixes) - - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons) - [Storyshots has been removed](#storyshots-has-been-removed) - [UI layout state has changed shape](#ui-layout-state-has-changed-shape) - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components) @@ -27,6 +26,7 @@ - [Removed postinstall](#removed-postinstall) - [Removed stories.json](#removed-storiesjson) - [Removed `sb babelrc` command](#removed-sb-babelrc-command) + - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components) - [Framework-specific changes](#framework-specific-changes) - [React](#react) - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default) @@ -72,17 +72,17 @@ - [Addon author changes](#addon-author-changes) - [Removed `config` preset](#removed-config-preset-1) - [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) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`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) + - [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) @@ -108,7 +108,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -121,7 +121,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -171,7 +171,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -629,13 +629,6 @@ export default { Alternatively, if you need to achieve a different behavior for a large number of files, you can provide a [custom indexer](https://storybook.js.org/docs/7.0/vue/configure/sidebar-and-urls#processing-custom-titles) to generate the titles dynamically. -#### React v18 in the manager UI (including addons) - -Storybook 7 used React 16 in the manager. In Storybook 8 this is upgraded to react v18. -Addons that inject UI into panels, tools, etc. are possibly affected by this. - -Addon authors are advised to upgrade to react v18. - #### Storyshots has been removed Storyshots was an addon for Storybook which allowed users to turn their stories into automated snapshot tests. @@ -705,6 +698,10 @@ From version 8.0 onwards, Storybook is compiler-agnostic and does not depend on The reasoning behind is to condense and provide some clarity to what's happened to both the command and what's shifted with the upcoming release. +#### Changed interfaces for `@storybook/router` components + +The `hideOnly` prop has been removed from the `` component in `@storybook/router`. If needed this can be implemented manually with the `` component. + ### Framework-specific changes #### React diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx index 7eec79fc83c3..21d9cf09ef6c 100755 --- a/code/ui/manager/src/container/Sidebar.tsx +++ b/code/ui/manager/src/container/Sidebar.tsx @@ -45,9 +45,9 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { const bottomItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_BOTTOM); const topItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP); // eslint-disable-next-line react-hooks/exhaustive-deps - const bottom = useMemo(() => Object.values(bottomItems), [...Object.values(bottomItems)]); + const bottom = useMemo(() => Object.values(bottomItems), [Object.keys(bottomItems).join('')]); // eslint-disable-next-line react-hooks/exhaustive-deps - const top = useMemo(() => Object.values(topItems), [...Object.values(topItems)]); + const top = useMemo(() => Object.values(topItems), [Object.keys(topItems).join('')]); return { title: name,