Merge branch 'next' into jeppe/25322-bug-main-section-disappears-when…

…-navigating-to-addon-tab

.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:

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)!

CHANGELOG.prerelease.md

@@ -1,3 +1,17 @@
+## 8.0.0-alpha.16
+
+- CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Update init for react native v7 - [#25780](https://github.com/storybookjs/storybook/pull/25780), thanks [@dannyhw](https://github.com/dannyhw)!
+- UI: Improve how the addon panel work on mobile - [#25787](https://github.com/storybookjs/storybook/pull/25787), thanks [@cdedreuille](https://github.com/cdedreuille)!
+
+## 8.0.0-alpha.15
+
+- Next.js: Add logger statements for compiler selection - [#25755](https://github.com/storybookjs/storybook/pull/25755), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- React-Native: Fixes for v8 compatibility - [#25678](https://github.com/storybookjs/storybook/pull/25678), thanks [@shilman](https://github.com/shilman)!
+- UI: Remove use of React.FC in components - [#25588](https://github.com/storybookjs/storybook/pull/25588), thanks [@ShaunEvening](https://github.com/ShaunEvening)!
+- Vue3: Fix support for `onX` and empty attributes in Show Code - [#25219](https://github.com/storybookjs/storybook/pull/25219), thanks [@Tap-Kim](https://github.com/Tap-Kim)!
+- Vue3: Introduce portable stories API - [#25443](https://github.com/storybookjs/storybook/pull/25443), thanks [@yannbf](https://github.com/yannbf)!
+
 ## 8.0.0-alpha.14
 
 - Addons: Remove Node.js internal aliasing for Node builds - [#25712](https://github.com/storybookjs/storybook/pull/25712), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

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 @Integrayshaun
-/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

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 Kadira Inc. <[email protected]>
+Copyright (c) 2024 Storybook
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

MIGRATION.md

@@ -20,14 +20,14 @@
     - [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)
     - [Icons is deprecated](#icons-is-deprecated)
     - [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)
@@ -670,13 +670,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.
@@ -746,6 +739,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 `<Route />` component in `@storybook/router`. If needed this can be implemented manually with the `<Match />` component.
+
 ### Framework-specific changes
 
 #### React

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.0.0-alpha.14",
+  "version": "8.0.0-alpha.16",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/themes/README.md

@@ -27,6 +27,7 @@ For tool-specific setup, check out the recipes below
 - [`@emotion/styled`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/emotion.md)
 - [`@mui/material`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/material-ui.md)
 - [`bootstrap`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/bootstrap.md)
+- [`postcss`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/postcss.md)
 - [`styled-components`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/styled-components.md)
 - [`tailwind`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/tailwind.md)
 - [`[email protected]`](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator)