Merge pull request #22016 from storybookjs/main-prerelease

Patch back fixes from 7.1.0-alpha.2 (WIP) to main to fix CI
storybookjs · Apr 10, 2023 · e0ca5fd · e0ca5fd
2 parents 1ddaf6d + 4d70f84
commit e0ca5fd
Show file tree

Hide file tree

Showing 31 changed files with 42 additions and 42 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -30,7 +30,7 @@ body:
     id: system
     attributes:
       label: System
-      description: Please paste the results of `npx sb@next info` here.
+      description: Please paste the results of `npx storybook@latest info` here.
       render: shell
   - type: textarea
     id: context

diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md
@@ -110,7 +110,7 @@ export default {
 };
 ```
 
-If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots/storyshots-core/README.md), you will need to
+If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to
 configure Jest to transform MDX stories into something Storyshots can understand:
 
 Add the following to your Jest configuration:

diff --git a/code/frameworks/angular/README.md b/code/frameworks/angular/README.md
@@ -27,12 +27,12 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-angular-app
-npx storybook init
+npx storybook@latest init
 ```
 
 ## Setup Storybook for your Angular projects
 
-Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
+Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook@latest init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
 
 ```json
 // angular.json

diff --git a/code/frameworks/ember/README.md b/code/frameworks/ember/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-ember-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/html-webpack5/README.md b/code/frameworks/html-webpack5/README.md
@@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-app
-npx storybook init -t html
+npx storybook@latest init -t html
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/preact-webpack5/README.md b/code/frameworks/preact-webpack5/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-preact-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
@@ -48,7 +48,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@joshwooding/vite-plugin-react-docgen-typescript": "^0.2.1",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1",
     "@rollup/pluginutils": "^4.2.0",
     "@storybook/builder-vite": "7.0.2",
     "@storybook/react": "7.0.2",

diff --git a/code/frameworks/react-webpack5/README.md b/code/frameworks/react-webpack5/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-react-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/server-webpack5/README.md b/code/frameworks/server-webpack5/README.md
@@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-app
-npx storybook init -t server
+npx storybook@latest init -t server
 ```
 
 To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`:

diff --git a/code/frameworks/svelte-webpack5/README.md b/code/frameworks/svelte-webpack5/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-svelte-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/vue-vite/README.md b/code/frameworks/vue-vite/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/vue-webpack5/README.md b/code/frameworks/vue-webpack5/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/vue3-vite/README.md b/code/frameworks/vue3-vite/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue3-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue3-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/frameworks/web-components-webpack5/README.md b/code/frameworks/web-components-webpack5/README.md
@@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-app
-npx storybook init -t web_components
+npx storybook@latest init -t web_components
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts
@@ -115,7 +115,7 @@ export abstract class JsPackageManager {
       delete packageJsonToWrite.devDependencies;
     }
     if (
-      packageJsonToWrite.dependencies &&
+      packageJsonToWrite.peerDependencies &&
       Object.keys(packageJsonToWrite.peerDependencies).length === 0
     ) {
       delete packageJsonToWrite.peerDependencies;

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -3559,7 +3559,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@joshwooding/vite-plugin-react-docgen-typescript@npm:^0.2.1":
+"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1":
   version: 0.2.1
   resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1"
   dependencies:
@@ -6928,7 +6928,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react-vite@workspace:frameworks/react-vite"
   dependencies:
-    "@joshwooding/vite-plugin-react-docgen-typescript": ^0.2.1
+    "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@rollup/pluginutils": ^4.2.0
     "@storybook/builder-vite": 7.0.2
     "@storybook/react": 7.0.2

diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
@@ -66,7 +66,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the
 Initialize a local Storybook instance to allow you to test your addon.
 
 ```shell
-npx storybook init
+npx storybook@latest init
 ```
 
 <div class="aside">

diff --git a/docs/builders/overview.md b/docs/builders/overview.md
@@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b
 
 ## CLI basics
 
-Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack 5 builder by default.
+Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook@latest init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack 5 builder by default.
 
 Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use:
 
 ```shell
-npx storybook init --builder <webpack5 | vite>
+npx storybook@latest init --builder <webpack5 | vite>
 ```
 
 ## Manual setup

diff --git a/docs/builders/vite.md b/docs/builders/vite.md
@@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v
 
 ## Setup
 
-If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
+If you ran `npx storybook@latest init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
 
 Run the following command to install the builder.
 

diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx
@@ -1,13 +1,13 @@
 - Add the `--type angular` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type angular
+  npx storybook@latest init --type angular
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:

diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx
@@ -1,7 +1,7 @@
 - Add the `--type ember` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type ember
+  npx storybook@latest init --type ember
   ```
 
 - During the install process, if you get the following warning message:
@@ -17,7 +17,7 @@ Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@sto
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - For other installation issues, check the [Ember README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember) for additional instructions.
diff --git a/docs/get-started/installation-problems/html.mdx b/docs/get-started/installation-problems/html.mdx
@@ -1,7 +1,7 @@
 - Add the `--type html` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type html
+npx storybook@latest init --type html
   ```
 
 - For other installation issues, check the React README files for additional instructions:

diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx
@@ -1,13 +1,13 @@
 - Add the `--type preact` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type preact
+  npx storybook@latest init --type preact
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - For other installation issues, check the [Preact README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/preact-webpack5) for additional instructions.
diff --git a/docs/get-started/installation-problems/qwik.mdx b/docs/get-started/installation-problems/qwik.mdx
@@ -1,11 +1,11 @@
 - Add the `--type qwik` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type qwik
+  npx storybook@latest init --type qwik
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx
@@ -1,13 +1,13 @@
 - Add the `--type react` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type react
+  npx storybook@latest init --type react
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:

diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx
@@ -1,13 +1,13 @@
 - Add the `--type svelte` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type svelte
+  npx storybook@latest init --type svelte
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 ### Svelte Native

diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx
@@ -2,16 +2,16 @@
 
   ```shell
   # For Vue 2 projects
-  npx storybook init --type vue
+  npx storybook@latest init --type vue
 
   # For Vue 3 projects
-  npx storybook init --type vue3
+  npx storybook@latest init --type vue3
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - For other installation issues, check the Vue README files for additional instructions:

diff --git a/docs/get-started/installation-problems/web-components.mdx b/docs/get-started/installation-problems/web-components.mdx
@@ -1,7 +1,7 @@
 - Add the `--type web_components` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type web_components
+  npx storybook@latest init --type web_components
   ```
 
 - For other installation issues, check the Web Components README files for additional instructions:

diff --git a/docs/snippets/common/init-command.npx.js.mdx b/docs/snippets/common/init-command.npx.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-npx storybook init
+npx storybook@latest init
 ```
diff --git a/docs/snippets/common/init-command.pnpm.js.mdx b/docs/snippets/common/init-command.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm dlx storybook init
+pnpm dlx storybook@latest init
 ```