Merge branch 'next' into docs_minor_webpack_babel_swc_fix

code/addons/themes/docs/getting-started/bootstrap.md

@@ -2,8 +2,6 @@
 
 ## 📦 Install addon
 
-<!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Import Bootstrap"](#🥾-import-bootstrap). -->
-
 To get started, **install the package** as a dev dependency.
 
 yarn:

code/addons/themes/docs/getting-started/emotion.md

@@ -2,8 +2,6 @@
 
 ## 📦 Install addon
 
-<!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Provide your themes"](#🎨-provide-your-themes). -->
-
 To get started, **install the package** as a dev dependency.
 
 yarn:

code/addons/themes/docs/getting-started/material-ui.md

@@ -2,8 +2,6 @@
 
 ## 📦 Install addon
 
-<!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Import fonts"](#🔤-import-fonts). -->
-
 To get started, **install the package** as a dev dependency.
 
 yarn:

code/addons/themes/docs/getting-started/styled-components.md

@@ -2,8 +2,6 @@
 
 ## 📦 Install addon
 
-<!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Provide your themes"](#🎨-provide-your-themes). -->
-
 To get started, **install the package** as a dev dependency.
 
 yarn:

code/addons/themes/docs/getting-started/tailwind.md

@@ -2,8 +2,6 @@
 
 ## 📦 Install addon
 
-<!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Import your css"](#🥾-import-your-css). -->
-
 To get started, **install the package** as a dev dependency.
 
 yarn:

code/builders/builder-vite/README.md

@@ -27,7 +27,7 @@ When installing Storybook, use the `--builder=vite` flag if you do not have a `v
 
 The builder supports both development mode in Storybook and building a static production version.
 
-Your `vite.config` file will be used by Storybook. If you need to customize the vite config for Storybook, you have two choices:
+Your `vite.config` file will be used by Storybook. If you need to customize the Vite config for Storybook, you have two choices:
 
 1. Set values in your `vite.config` conditionally, based on an environment variable, for example.
 2. Add a `viteFinal` config to your `.storybook/main.js` file. See [Customize Vite config](#customize-vite-config) for details.
@@ -44,12 +44,12 @@ npx storybook@latest init --builder vite && npm run storybook
 ### Migration from webpack / CRA
 
 1. Install `vite` and `@storybook/builder-vite`
-2. Remove any explicit project dependencies on `webpack`, `react-scripts`, and any other webpack plugins or loaders.
+2. Remove any explicit project dependencies on `webpack`, `react-scripts`, and any other Webpack plugins or loaders.
 3. If you were previously using `@storybook/manager-webpack5`, you can remove it. Also remove `@storybook/builder-webpack5` or `@storybook/builder-webpack4` if they are installed.
-4. Choose a vite-based Storybook "framework" to set in the `framework` option of your `.storybook/main.js` file.
-5. Remove storybook webpack cache (`rm -rf node_modules/.cache`)
-6. Update your `/public/index.html` file for vite (be sure there are no `%PUBLIC_URL%` inside it, which is a CRA variable)
-7. Be sure that any files containing JSX syntax use a `.jsx` or `.tsx` file extension, which [vite requires](https://vitejs.dev/guide/features.html#jsx). This includes `.storybook/preview.jsx` if it contains JSX syntax.
+4. Choose a Vite-based Storybook "framework" to set in the `framework` option of your `.storybook/main.js` file.
+5. Remove Storybook Webpack cache (`rm -rf node_modules/.cache`)
+6. Update your `/public/index.html` file for Vite (be sure there are no `%PUBLIC_URL%` inside it, which is a CRA variable)
+7. Be sure that any files containing JSX syntax use a `.jsx` or `.tsx` file extension, which [Vite requires](https://vitejs.dev/guide/features.html#jsx). This includes `.storybook/preview.jsx` if it contains JSX syntax.
 8. If you are using `@storybook/addon-interactions`, for now you'll need to add a [workaround](https://github.com/storybookjs/storybook/issues/18399) for jest-mock relying on the node `global` variable by creating a `.storybook/preview-head.html` file containing the following:
 
 ```html
@@ -58,9 +58,9 @@ npx storybook@latest init --builder vite && npm run storybook
 </script>
 ```
 
-9.  Start up your storybook using the same `yarn storybook` or `npm run storybook` commands you are used to.
+9.  Start up your Storybook using the same `yarn storybook` or `npm run storybook` commands you are used to.
 
-For other details about the differences between vite and webpack projects, be sure to read through the [vite documentation](https://vitejs.dev/).
+For other details about the differences between Vite and Webpack projects, be sure to read through the [Vite documentation](https://vitejs.dev/).
 
 ### Customize Vite config
 
@@ -105,7 +105,7 @@ const config = {
 export default config;
 ```
 
-The `viteFinal` function will give you `config` which is the combination of your project's vite config and the builder's own Vite config.
+The `viteFinal` function will give you `config` which is the combination of your project's Vite config and the builder's own Vite config.
 You can tweak this as you want, for example to set up aliases, add new plugins etc.
 
 The `configType` variable will be either `"DEVELOPMENT"` or `"PRODUCTION"`.
@@ -149,7 +149,7 @@ If you're using TypeScript, we encourage you to experiment and see which option
 
 The builder will by default enable Vite's [server.fs.strict](https://vitejs.dev/config/#server-fs-strict)
 option, for increased security. The default project `root` is set to the parent directory of the
-storybook configuration directory. This can be overridden in viteFinal.
+Storybook configuration directory. This can be overridden in [viteFinal](https://storybook.js.org/docs/api/main-config-vite-final).
 
 ## Known issues
 
@@ -158,7 +158,8 @@ storybook configuration directory. This can be overridden in viteFinal.
 ## Contributing
 
 The Vite builder cannot build itself.
-Are you willing to contribute? We are especially looking for Vue 3 and Svelte experts, as the current maintainers are react users.
+
+Are you willing to contribute? We are especially looking for Vue and Svelte experts, as the current maintainers are React users.
 
 Have a look at the GitHub issues with the `vite` label for known bugs. If you find any new bugs,
 feel free to create an issue or send a pull request!

code/lib/cli/src/add.ts

@@ -1,7 +1,7 @@
 import {
   getStorybookInfo,
   serverRequire,
-  getStorybookVersion,
+  getCoercedStorybookVersion,
   isCorePackage,
   JsPackageManagerFactory,
   type PackageManagerName,
@@ -107,8 +107,9 @@ export async function add(
   // add to package.json
   const isStorybookAddon = addonName.startsWith('@storybook/');
   const isAddonFromCore = isCorePackage(addonName);
-  const storybookVersion = await getStorybookVersion(packageManager);
+  const storybookVersion = await getCoercedStorybookVersion(packageManager);
   const version = versionSpecifier || (isAddonFromCore ? storybookVersion : latestVersion);
+
   const addonWithVersion = SemVer.valid(version)
     ? `${addonName}@^${version}`
     : `${addonName}@${version}`;

code/lib/cli/src/automigrate/helpers/mainConfigFile.ts

@@ -12,7 +12,7 @@ import chalk from 'chalk';
 import dedent from 'ts-dedent';
 import path from 'path';
 import type { JsPackageManager } from '@storybook/core-common';
-import { getStorybookVersion } from '@storybook/core-common';
+import { getCoercedStorybookVersion } from '@storybook/core-common';
 
 const logger = console;
 
@@ -93,7 +93,7 @@ export const getStorybookData = async ({
     configDir: configDirFromScript,
     previewConfig: previewConfigPath,
   } = getStorybookInfo(packageJson, userDefinedConfigDir);
-  const storybookVersion = await getStorybookVersion(packageManager);
+  const storybookVersion = await getCoercedStorybookVersion(packageManager);
 
   const configDir = userDefinedConfigDir || configDirFromScript || '.storybook';
 

code/lib/cli/src/automigrate/index.ts

@@ -10,7 +10,7 @@ import invariant from 'tiny-invariant';
 import {
   getStorybookInfo,
   loadMainConfig,
-  getStorybookVersion,
+  getCoercedStorybookVersion,
   JsPackageManagerFactory,
 } from '@storybook/core-common';
 import type { PackageManagerName } from '@storybook/core-common';
@@ -156,7 +156,7 @@ export async function runFixes({
     userSpecifiedConfigDir
   );
 
-  const storybookVersion = await getStorybookVersion(packageManager);
+  const storybookVersion = await getCoercedStorybookVersion(packageManager);
 
   if (!storybookVersion) {
     logger.info(dedent`

code/lib/core-common/src/js-package-manager/JsPackageManager.ts

@@ -55,7 +55,10 @@ export abstract class JsPackageManager {
     basePath?: string
   ): Promise<PackageJson | null>;
 
-  public abstract getPackageVersion(packageName: string, basePath?: string): Promise<string | null>;
+  async getPackageVersion(packageName: string, basePath = this.cwd): Promise<string | null> {
+    const packageJSON = await this.getPackageJSON(packageName, basePath);
+    return packageJSON ? packageJSON.version ?? null : null;
+  }
 
   // NOTE: for some reason yarn prefers the npm registry in
   // local development, so always use npm

code/lib/core-common/src/js-package-manager/NPMProxy.ts

@@ -4,7 +4,6 @@ import dedent from 'ts-dedent';
 import { sync as findUpSync } from 'find-up';
 import { existsSync, readFileSync } from 'fs';
 import path from 'path';
-import semver from 'semver';
 import { logger } from '@storybook/node-logger';
 import { JsPackageManager } from './JsPackageManager';
 import type { PackageJson } from './PackageJson';
@@ -102,11 +101,6 @@ export class NPMProxy extends JsPackageManager {
     return packageJson;
   }
 
-  public async getPackageVersion(packageName: string, basePath = this.cwd): Promise<string | null> {
-    const packageJson = await this.getPackageJSON(packageName, basePath);
-    return packageJson ? semver.coerce(packageJson.version)?.version ?? null : null;
-  }
-
   getInstallArgs(): string[] {
     if (!this.installArgs) {
       this.installArgs = [];

code/lib/core-common/src/js-package-manager/PNPMProxy.ts

@@ -3,7 +3,6 @@ import dedent from 'ts-dedent';
 import { sync as findUpSync } from 'find-up';
 import path from 'path';
 import fs from 'fs';
-import semver from 'semver';
 import { JsPackageManager } from './JsPackageManager';
 import type { PackageJson } from './PackageJson';
 import type { InstallationMetadata, PackageMetadata } from './types';
@@ -159,12 +158,6 @@ export class PNPMProxy extends JsPackageManager {
     return JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
   }
 
-  async getPackageVersion(packageName: string, basePath = this.cwd): Promise<string | null> {
-    const packageJSON = await this.getPackageJSON(packageName, basePath);
-
-    return packageJSON ? semver.coerce(packageJSON.version)?.version ?? null : null;
-  }
-
   protected getResolutions(packageJson: PackageJson, versions: Record<string, string>) {
     return {
       overrides: {

code/lib/core-common/src/js-package-manager/Yarn1Proxy.ts

@@ -2,7 +2,6 @@ import dedent from 'ts-dedent';
 import { sync as findUpSync } from 'find-up';
 import { existsSync, readFileSync } from 'fs';
 import path from 'path';
-import semver from 'semver';
 import { createLogStream } from '../utils/cli';
 import { JsPackageManager } from './JsPackageManager';
 import type { PackageJson } from './PackageJson';
@@ -82,11 +81,6 @@ export class Yarn1Proxy extends JsPackageManager {
     return JSON.parse(readFileSync(packageJsonPath, 'utf-8')) as Record<string, any>;
   }
 
-  public async getPackageVersion(packageName: string, basePath = this.cwd): Promise<string | null> {
-    const packageJson = await this.getPackageJSON(packageName, basePath);
-    return packageJson ? semver.coerce(packageJson.version)?.version ?? null : null;
-  }
-
   public async findInstallations(pattern: string[]) {
     const commandResult = await this.executeCommand({
       command: 'yarn',

code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts

@@ -4,7 +4,6 @@ import { existsSync, readFileSync } from 'fs';
 import path from 'path';
 import { PosixFS, VirtualFS, ZipOpenFS } from '@yarnpkg/fslib';
 import { getLibzipSync } from '@yarnpkg/libzip';
-import semver from 'semver';
 import { createLogStream } from '../utils/cli';
 import { JsPackageManager } from './JsPackageManager';
 import type { PackageJson } from './PackageJson';
@@ -174,11 +173,6 @@ export class Yarn2Proxy extends JsPackageManager {
     return packageJson;
   }
 
-  async getPackageVersion(packageName: string, basePath = this.cwd): Promise<string | null> {
-    const packageJSON = await this.getPackageJSON(packageName, basePath);
-    return packageJSON ? semver.coerce(packageJSON.version)?.version ?? null : null;
-  }
-
   protected getResolutions(packageJson: PackageJson, versions: Record<string, string>) {
     return {
       resolutions: {

code/lib/core-common/src/utils/cli.test.ts

@@ -5,13 +5,12 @@ describe('UTILS', () => {
   describe.each([
     ['@storybook/react', true],
     ['@storybook/node-logger', true],
-    ['@storybook/addon-info', true],
-    ['@storybook/something-random', true],
-    ['@storybook/preset-create-react-app', false],
     ['@storybook/linter-config', false],
     ['@storybook/design-system', false],
     ['@storybook/addon-styling', false],
     ['@storybook/addon-styling-webpack', false],
+    ['@storybook/addon-webpack5-compiler-swc', false],
+    ['@storybook/addon-webpack5-compiler-babel', false],
     ['@nx/storybook', false],
     ['@nrwl/storybook', false],
   ])('isCorePackage', (input, output) => {

code/lib/core-common/src/utils/cli.ts

@@ -4,6 +4,7 @@ import { join } from 'path';
 import tempy from 'tempy';
 import { rendererPackages } from './get-storybook-info';
 import type { JsPackageManager } from '../js-package-manager';
+import versions from '../versions';
 
 export function parseList(str: string): string[] {
   return str
@@ -12,7 +13,13 @@ export function parseList(str: string): string[] {
     .filter((item) => item.length > 0);
 }
 
-export async function getStorybookVersion(packageManager: JsPackageManager) {
+/**
+ * Given a package manager, returns the coerced version of Storybook.
+ * It tries to find renderer packages in the project and returns the coerced version of the first one found.
+ * Example:
+ * If @storybook/react version 8.0.0-alpha.14 is installed, it returns the coerced version 8.0.0
+ */
+export async function getCoercedStorybookVersion(packageManager: JsPackageManager) {
   const packages = (
     await Promise.all(
       Object.keys(rendererPackages).map(async (pkg) => ({
@@ -97,34 +104,4 @@ export const createLogStream = async (
   });
 };
 
-const PACKAGES_EXCLUDED_FROM_CORE = [
-  '@storybook/addon-bench',
-  '@storybook/addon-console',
-  '@storybook/addon-onboarding',
-  '@storybook/addon-postcss',
-  '@storybook/addon-designs',
-  '@storybook/addon-styling',
-  '@storybook/addon-styling-webpack',
-  '@storybook/bench',
-  '@storybook/builder-vite',
-  '@storybook/csf',
-  '@storybook/design-system',
-  '@storybook/ember-cli-storybook',
-  '@storybook/eslint-config-storybook',
-  '@storybook/expect',
-  '@storybook/jest',
-  '@storybook/linter-config',
-  '@storybook/mdx1-csf',
-  '@storybook/mdx2-csf',
-  '@storybook/react-docgen-typescript-plugin',
-  '@storybook/storybook-deployer',
-  '@storybook/test-runner',
-  '@storybook/testing-library',
-  '@storybook/testing-react',
-  '@nrwl/storybook',
-  '@nx/storybook',
-];
-export const isCorePackage = (pkg: string) =>
-  pkg.startsWith('@storybook/') &&
-  !pkg.startsWith('@storybook/preset-') &&
-  !PACKAGES_EXCLUDED_FROM_CORE.includes(pkg);
+export const isCorePackage = (pkg: string) => Object.keys(versions).includes(pkg);