Merge remote-tracking branch 'origin/next' into valentin/migrate-vers…

…ion-to-use-workspace-syntax

CHANGELOG.prerelease.md

@@ -1,3 +1,15 @@
+## 7.2.0-rc.0
+
+- Addon: Create @storybook/addon-themes - [#23524](https://github.com/storybookjs/storybook/pull/23524), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- Angular: Fix initialization of Storybook in Angular 16.1 - [#23598](https://github.com/storybookjs/storybook/pull/23598), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- CLI: Gracefully shutdown and cleanup execa child processes - [#23538](https://github.com/storybookjs/storybook/pull/23538), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Dependencies: Downgrade `jest-mock` - [#23597](https://github.com/storybookjs/storybook/pull/23597), thanks [@ndelangen](https://github.com/ndelangen)!
+- Dependencies: Upgrade simple-update-notifier - [#23396](https://github.com/storybookjs/storybook/pull/23396), thanks [@dartess](https://github.com/dartess)!
+- Storyshots: fix broken storyshots with angular - [#23555](https://github.com/storybookjs/storybook/pull/23555), thanks [@mattlewis92](https://github.com/mattlewis92)!
+- TypeScript: Added `expanded` to `CoreCommon_StorybookRefs` to fix typescript errors - [#23488](https://github.com/storybookjs/storybook/pull/23488), thanks [@DotwoodMedia](https://github.com/DotwoodMedia)!
+- TypeScript: Downgrade to the last version of type-fest that doesn't need typescript 5.0 - [#23574](https://github.com/storybookjs/storybook/pull/23574), thanks [@ndelangen](https://github.com/ndelangen)!
+- Vue2: Source Decorator reactivity - [#23149](https://github.com/storybookjs/storybook/pull/23149), thanks [@chakAs3](https://github.com/chakAs3)!
+
 ## 7.2.0-alpha.0
 
 - Angular: Make enableProdMode optional - [#23489](https://github.com/storybookjs/storybook/pull/23489), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

CODEOWNERS

@@ -6,7 +6,7 @@
 .yarnrc.yml @ndelangen @JReinhold
 
 # Docs
-docs/ @kylegach @jonniebigodes
+/docs/ @kylegach @jonniebigodes
 
 # Scripts
 /scripts/         @ndelangen @kasperpeulen
@@ -39,8 +39,8 @@ docs/ @kylegach @jonniebigodes
 
 # Frameworks
 /code/frameworks/angular/                 @valentinpalkovic @yannbf
-/code/frameworks/html-vite/               @kasperpeulen @JReinhold 
-/code/frameworks/html-webpack5/           @kasperpeulen @JReinhold 
+/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
@@ -61,7 +61,7 @@ docs/ @kylegach @jonniebigodes
 /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-server/    @ndelangen @JReinhold @tmeasday @shilman
 /code/lib/core-webpack/   @valentinpalkovic @ndelangen
 /code/lib/csf-plugin/     @ndelangen @valentinpalkovic
 /code/lib/csf-tools/      @kasperpeulen @shilman
@@ -71,7 +71,7 @@ docs/ @kylegach @jonniebigodes
 /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/react-dom-shim/ @ndelangen @valentinpalkovic @tmeasday
 /code/lib/router/         @ndelangen @JReinhold
 /code/lib/telemetry/      @shilman @yannbf @ndelangen
 /code/lib/theming/        @cdedreuille @ndelangen @JReinhold

code/addons/a11y/package.json

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

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "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": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "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": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "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": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -93,6 +93,16 @@
       "require": "./dist/outline/manager.js",
       "import": "./dist/outline/manager.mjs"
     },
+    "./themes/manager": {
+      "types": "./dist/themes/manager.d.ts",
+      "require": "./dist/themes/manager.js",
+      "import": "./dist/themes/manager.mjs"
+    },
+    "./themes/preview": {
+      "types": "./dist/themes/preview.d.ts",
+      "require": "./dist/themes/preview.js",
+      "import": "./dist/themes/preview.mjs"
+    },
     "./toolbars/manager": {
       "types": "./dist/toolbars/manager.d.ts",
       "require": "./dist/toolbars/manager.js",
@@ -162,7 +172,9 @@
       "./src/outline/preview.ts",
       "./src/outline/manager.ts",
       "./src/toolbars/manager.ts",
-      "./src/viewport/manager.ts"
+      "./src/viewport/manager.ts",
+      "./src/themes/manager.ts",
+      "./src/themes/preview.ts"
     ],
     "platform": "node"
   },

code/addons/essentials/src/index.ts

@@ -3,15 +3,16 @@ import { logger } from '@storybook/node-logger';
 import { serverRequire } from '@storybook/core-common';
 
 interface PresetOptions {
-  configDir: string;
-  docs?: boolean;
-  controls?: boolean;
   actions?: boolean;
   backgrounds?: boolean;
-  viewport?: boolean;
-  toolbars?: boolean;
+  configDir: string;
+  controls?: boolean;
+  docs?: boolean;
   measure?: boolean;
   outline?: boolean;
+  themes?: boolean;
+  toolbars?: boolean;
+  viewport?: boolean;
 }
 
 const requireMain = (configDir: string) => {
@@ -37,6 +38,8 @@ export function addons(options: PresetOptions) {
   };
 
   const main = requireMain(options.configDir);
+
+  // NOTE: The order of these addons is important.
   return [
     'docs',
     'controls',
@@ -47,6 +50,7 @@ export function addons(options: PresetOptions) {
     'measure',
     'outline',
     'highlight',
+    'themes',
   ]
     .filter((key) => (options as any)[key] !== false)
     .filter((addon) => !checkInstalled(addon, main))

code/addons/essentials/src/themes/manager.ts

@@ -0,0 +1 @@
+export * from '@storybook/addon-themes/manager';

code/addons/essentials/src/themes/preview.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/export
+export * from '@storybook/addon-themes/preview';

code/addons/gfm/package.json

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

code/addons/highlight/package.json

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

code/addons/interactions/package.json

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

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "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": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "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": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "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": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storyshots-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",

code/addons/storyshots-puppeteer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.2.0-alpha.0",
+  "version": "7.2.0-rc.0",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",

code/addons/storysource/package.json

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

code/addons/themes/README.md

@@ -0,0 +1,72 @@
+# `@storybook/addon-themes
+
+Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org).
+
+![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png)
+
+## Usage
+
+Requires Storybook 7.0 or later. Themes is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+
+```sh
+npm i -D @storybook/addon-themes
+```
+
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
+
+```js
+export default {
+  addons: ['@storybook/addon-themes'],
+};
+```
+
+### 👇 Tool specific configuration
+
+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)
+- [`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)
+- [`vuetify@3.x`](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator)
+
+Don't see your favorite tool listed? Don't worry! That doesn't mean this addon isn't for you. Check out the ["Writing a custom decorator"](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator) section of the [api reference](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md).
+
+### ❗️ Overriding theme
+
+If you want to override your theme for a particular component or story, you can use the `themes.themeOverride` parameter.
+
+```js
+import React from 'react';
+import { Button } from './Button';
+
+export default {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    themes: {
+      themeOverride: 'light', // component level override
+    },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryDark = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  parameters: {
+    themes: {
+      themeOverride: 'dark', // Story level override
+    },
+  },
+};
+```