Merge branch 'next' into valentin/fix-dependency-warnings

code/lib/cli/src/detect-nextjs.test.ts

@@ -1,53 +0,0 @@
-import { detectNextJS } from './detect-nextjs';
-
-test('detect nothing if it fails', () => {
-  const out = detectNextJS({
-    type: 'npm',
-    executeCommand: () => {
-      throw new Error('test error');
-    },
-  });
-  expect(out).toEqual(false);
-});
-
-test('detect from npm ls', () => {
-  const outputFromCommand = `
-/path/to/cwd
-└── next@12.0.7 
-  `;
-  const out = detectNextJS({ type: 'npm', executeCommand: () => outputFromCommand });
-  expect(out).toEqual(12);
-});
-
-test('detect from npm why', () => {
-  const outputFromCommand = `
-next@12.0.7
-node_modules/next
-  next@"^12.0.7" from the root project
-  peer next@">=10.2.0" from eslint-config-next@12.0.7
-  node_modules/eslint-config-next
-    dev eslint-config-next@"^12.0.7" from the root project
-`;
-  const out = detectNextJS({ type: 'npm', executeCommand: () => outputFromCommand });
-  expect(out).toEqual(12);
-});
-
-test('detect from yarn why', () => {
-  const outputFromCommand = `
-yarn why v1.22.18
-[1/4] 🤔  Why do we have the module "next"...?
-[2/4] 🚚  Initialising dependency graph...
-[3/4] 🔍  Finding dependency...
-[4/4] 🚡  Calculating file sizes...
-=> Found "next@12.0.7"
-info Has been hoisted to "next"
-info This module exists because it's specified in "dependencies".
-info Disk size without dependencies: "XX.XXMB"
-info Disk size with unique dependencies: "XX.XXMB"
-info Disk size with transitive dependencies: "XX.XXMB"
-info Number of shared dependencies: XXX
-✨  Done in 0.XXs.
-`;
-  const out = detectNextJS({ type: 'npm', executeCommand: () => outputFromCommand });
-  expect(out).toEqual(12);
-});

code/lib/cli/src/detect-nextjs.ts

@@ -1,30 +0,0 @@
-import type { JsPackageManager } from './js-package-manager';
-
-const regex = /[\s"\n]next.*?(\d+).*/;
-
-export const detectNextJS = (
-  packageManager: Pick<JsPackageManager, 'type' | 'executeCommand'>
-): number | false => {
-  try {
-    let out = '';
-    if (packageManager.type === 'npm') {
-      try {
-        // npm <= v7
-        out = packageManager.executeCommand('npm', ['ls', 'next']);
-      } catch (e2) {
-        // npm >= v8
-        out = packageManager.executeCommand('npm', ['why', 'next']);
-      }
-    } else {
-      out = packageManager.executeCommand('yarn', ['why', 'next']);
-    }
-
-    const [, version] = out.match(regex);
-
-    return version && parseInt(version, 10) ? parseInt(version, 10) : false;
-  } catch (err) {
-    //
-  }
-
-  return false;
-};

code/lib/cli/src/detect.ts

@@ -16,7 +16,7 @@ import {
 } from './project_types';
 import { getBowerJson, paddedLog } from './helpers';
 import type { JsPackageManager, PackageJson, PackageJsonWithMaybeDeps } from './js-package-manager';
-import { detectNextJS } from './detect-nextjs';
+import { detectWebpack } from './detect-webpack';
 
 const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
 
@@ -104,28 +104,34 @@ export function detectFrameworkPreset(
 }
 
 /**
- * Attempts to detect which builder to use, by searching for a vite config file.  If one is found, the vite builder
- * will be used, otherwise, webpack5 is the default.
+ * Attempts to detect which builder to use, by searching for a vite config file or webpack installation.
+ * If neither are found it will choose the default builder based on the project type.
  *
  * @returns CoreBuilder
  */
-export function detectBuilder(packageManager: JsPackageManager) {
+export function detectBuilder(packageManager: JsPackageManager, projectType: ProjectType) {
   const viteConfig = findUp.sync(viteConfigFiles);
-
   if (viteConfig) {
-    paddedLog('Detected vite project, setting builder to @storybook/builder-vite');
+    paddedLog('Detected Vite project. Setting builder to Vite');
     return CoreBuilder.Vite;
   }
 
-  const nextJSVersion = detectNextJS(packageManager);
-  if (nextJSVersion) {
-    if (nextJSVersion >= 11) {
-      return CoreBuilder.Webpack5;
-    }
+  if (detectWebpack(packageManager)) {
+    paddedLog('Detected webpack project. Setting builder to webpack');
+    return CoreBuilder.Webpack5;
   }
 
-  // Fallback to webpack5
-  return CoreBuilder.Webpack5;
+  // Fallback to Vite or Webpack based on project type
+  switch (projectType) {
+    case ProjectType.SVELTE:
+    case ProjectType.SVELTEKIT:
+    case ProjectType.VUE:
+    case ProjectType.VUE3:
+    case ProjectType.SFC_VUE:
+      return CoreBuilder.Vite;
+    default:
+      return CoreBuilder.Webpack5;
+  }
 }
 
 export function isStorybookInstalled(

code/lib/cli/src/initiate.ts

@@ -61,7 +61,7 @@ const installStorybook = <Project extends ProjectType>(
 
   const generatorOptions = {
     language,
-    builder: options.builder || detectBuilder(packageManager),
+    builder: options.builder || detectBuilder(packageManager, projectType),
     linkable: !!options.linkable,
     pnp: pnp || options.usePnp,
   };

code/lib/cli/src/link.ts

@@ -104,11 +104,6 @@ export const link = async ({ target, local, start }: LinkOptions) => {
   await exec(`yarn install`, { cwd: reproDir });
 
   if (!reproPackageJson.devDependencies?.vite) {
-    // ⚠️ TODO: Fix peer deps in `@storybook/preset-create-react-app`
-    logger.info(
-      `Magic stuff related to @storybook/preset-create-react-app, we need to fix peerDependencies`
-    );
-
     await exec(`yarn add -D webpack-hot-middleware`, { cwd: reproDir });
   }
 

code/lib/types/package.json

@@ -43,11 +43,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
     "@storybook/channels": "7.0.0-beta.48",
     "@types/babel__core": "^7.0.0",
     "@types/express": "^4.7.0",
-    "express": "^4.17.3",
     "file-system-cache": "^2.0.0"
   },
   "devDependencies": {

code/package.json

@@ -157,6 +157,7 @@
     "@storybook/preact": "workspace:*",
     "@storybook/preact-vite": "workspace:*",
     "@storybook/preact-webpack5": "workspace:*",
+    "@storybook/preset-create-react-app": "workspace:*",
     "@storybook/preset-html-webpack": "workspace:*",
     "@storybook/preset-preact-webpack": "workspace:*",
     "@storybook/preset-react-webpack": "workspace:*",

code/presets/create-react-app/CHANGELOG.md

@@ -0,0 +1,89 @@
+## 4.1.2
+
+- Use overrides from SB rather than defining ourselves [#254](https://github.com/storybookjs/presets/pull/254)
+
+## 4.1.1
+
+- Update peer dependencies and add a note about versions [#252](https://github.com/storybookjs/presets/pull/252)
+
+## 4.1.0
+
+- Add support for builder.core options to CRA preset [#240](https://github.com/storybookjs/presets/pull/240)
+
+## 4.0.2
+
+- Fix bug merging core presets [#238](https://github.com/storybookjs/presets/pull/238) [#239](https://github.com/storybookjs/presets/pull/239)
+
+## 4.0.1
+
+- Support CJS files using Storybook's config [#229](https://github.com/storybookjs/presets/pull/229)
+
+## 4.0.0
+
+- CRA: Add compatibility for CRA v5 [#214](https://github.com/storybookjs/presets/pull/214)
+
+## 3.2.0
+
+- Add disableWebpackDefaults for forward-compatibility with SB core
+
+## 3.1.7
+
+- CRA: Fix fast refresh config [#193](https://github.com/storybookjs/presets/pull/193)
+
+## 3.1.6
+
+- Fix monorepos and PnP [#181](https://github.com/storybookjs/presets/pull/181)
+
+## 3.1.5
+
+- Fix duplicate ReactDocgenTypescriptPlugin [#173](https://github.com/storybookjs/presets/pull/173)
+- Bump react-docgen-typescript-plugin to 0.6.2 [#174](https://github.com/storybookjs/presets/pull/174)
+
+## 3.1.4
+
+- Upgrade react-docgen-typescript-plugin to 0.5.x [#158](https://github.com/storybookjs/presets/pull/158)
+
+## 3.1.3
+
+- Move node-logger to peer deps [#156](https://github.com/storybookjs/presets/pull/156)
+
+## 3.1.2
+
+- Restore node@10 compatibility [#154](https://github.com/storybookjs/presets/pull/154)
+
+## 3.1.1
+
+- Fix react-docgen-typescript-plugin deps [#151](https://github.com/storybookjs/presets/pull/151)
+
+## 3.1.0
+
+- Move to react-docgen-typescript-plugin [#149](https://github.com/storybookjs/presets/pull/149)
+
+## 3.0.1
+
+- Ignore default babel Config from Storybook [#147](https://github.com/storybookjs/presets/pull/147)
+
+## 3.0.0
+
+Reverse course on typescript docgen handling [#142](https://github.com/storybookjs/presets/pull/142)
+
+- Add back `react-docgen-typescript-loader` to the preset
+- Add compatibility with SB6's main.js `typescript` setting
+
+## 2.1.2
+
+- Make `@storybook/node-logger` dependency less strict [#138](https://github.com/storybookjs/presets/pull/138)
+
+## 2.1.1
+
+- Set PUBLIC_URL if not set [#104](https://github.com/storybookjs/presets/pull/104)
+
+## 2.1.0
+
+- Yarn PNP compatibility [#104](https://github.com/storybookjs/presets/pull/104)
+
+## 2.0.0
+
+- Remove `react-docgen-typescript-loader` from the preset [#103](https://github.com/storybookjs/presets/pull/103)
+
+Starting in `v5.x`, `react-docgen` supports typescript natively, so we no longer recommend `react-docgen-typescript-loader` and have removed it from the preset. This is a breaking change and the migration is documented in [Storybook](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-prop-tables-with-typescript).

code/presets/create-react-app/README.md

@@ -0,0 +1,130 @@
+# Create React App preset for Storybook
+
+One-line [Create React App](https://github.com/facebook/create-react-app) configuration for Storybook.
+
+This preset is designed to use alongside [`@storybook/react`](https://github.com/storybookjs/storybook/tree/master/app/react).
+
+## Compatibility
+
+This version (4.x) of `@storybook/preset-create-react-app` is compatibly with Create React App version 5 and above. Earlier versions are compatible with earlier version of the preset.
+
+## Basic usage
+
+**Note: you don't need to do this manually** if you used `npx -p @storybook/cli sb init` on a create-react-app, everything should properly setup already ✅.
+
+First, install this preset to your project.
+
+```sh
+# Yarn
+yarn add -D @storybook/preset-create-react-app
+
+# npm
+npm install -D @storybook/preset-create-react-app
+```
+
+Once installed, add this preset to the appropriate file:
+
+- `./.storybook/main.js` (for Storybook 5.3.0 and newer)
+
+  ```js
+  module.exports = {
+    addons: ['@storybook/preset-create-react-app'],
+  };
+  ```
+
+- `./.storybook/presets.js` (for all Storybook versions)
+
+  ```js
+  module.exports = ['@storybook/preset-create-react-app'];
+  ```
+
+## Advanced usage
+
+### Usage with Docs
+
+When working with Storybook Docs, simply add the following config to your `main.js` file.
+
+```js
+module.exports = {
+  addons: [
+    '@storybook/preset-create-react-app',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
+  ],
+};
+```
+
+### CRA overrides
+
+This preset uses CRA's Webpack/Babel configurations, so that Storybook's behavior matches your app's behavior.
+
+However, there may be some cases where you'd rather override CRA's default behavior. If that is something you need, you can use the `craOverrides` object.
+
+| Option               | Default          | Behaviour | Type       | Description                                                                                                        |
+| -------------------- | ---------------- | --------- | ---------- | ------------------------------------------------------------------------------------------------------------------ |
+| `fileLoaderExcludes` | `['ejs', 'mdx']` | Extends   | `string[]` | Excludes file types (by extension) from CRA's `file-loader` configuration. The defaults are required by Storybook. |
+
+Here's how you might configure this preset to ignore PDF files so they can be processed by another preset or loader:
+
+```js
+module.exports = {
+  addons: [
+    {
+      name: '@storybook/preset-create-react-app',
+      options: {
+        craOverrides: {
+          fileLoaderExcludes: ['pdf'],
+        },
+      },
+    },
+  ],
+};
+```
+
+### Custom `react-scripts` packages
+
+In most cases, this preset will find your `react-scripts` package, even if it's a fork of the offical `react-scripts`.
+
+In the event that it doesn't, you can set the package's name with `scriptsPackageName`.
+
+```js
+module.exports = {
+  addons: [
+    {
+      name: '@storybook/preset-create-react-app',
+      options: {
+        scriptsPackageName: '@my/react-scripts',
+      },
+    },
+  ],
+};
+```
+
+### Warning for forks of 'react-scripts'
+
+One of the tasks that this preset does is inject the storybook config directory (the default is `.storybook`)
+into the `includes` key of the webpack babel-loader config that react-scripts (or your fork) provides. This is
+nice because then any components/code you've defined in your storybook config directory will be run through the
+babel-loader as well.
+
+The potential gotcha exists if you have tweaked the Conditions of the webpack babel-loader rule in your fork of
+react-scripts. This preset will make the `include` condition an array (if not already), and inject the storybook
+config directory. If you have changed the conditions to utilize an `exclude`, then BOTH conditions will need to
+be true (which isn't likely going to work as expected).
+
+The steps to remedy this would be to follow the steps for customizing the webpack config within the storybook
+side of things. [Details for storybook custom webpack config](https://storybook.js.org/docs/configurations/custom-webpack-config/)
+You'll have access to all of the rules in `config.module.rules`. You'll need to find the offending rule,
+and customize it how you need it to be to be compatible with your fork.
+
+See [Webpack Rule Conditions](https://webpack.js.org/configuration/module/#rule-conditions) for more details
+concerning the conditions.
+
+## Resources
+
+- [Walkthrough to set up Storybook Docs with CRA & typescript](https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c)
+- [Example projects (used for testing this preset)](https://github.com/storybookjs/presets/tree/master/examples)

code/presets/create-react-app/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@storybook/preset-create-react-app",
+  "version": "7.0.0-beta.48",
+  "description": "Create React App preset for Storybook",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/html-webpack",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "presets/html-webpack"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
+    "@storybook/react-docgen-typescript-plugin": "canary",
+    "@storybook/types": "7.0.0-beta.48",
+    "@types/babel__core": "^7.1.7",
+    "babel-plugin-react-docgen": "^4.1.0",
+    "pnp-webpack-plugin": "^1.7.0",
+    "semver": "^7.3.5"
+  },
+  "devDependencies": {
+    "@storybook/node-logger": "7.0.0-beta.48",
+    "@types/node": "^16.0.0",
+    "@types/semver": "^7.3.6",
+    "typescript": "~4.9.3"
+  },
+  "peerDependencies": {
+    "@babel/core": "*",
+    "react-scripts": ">=5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ],
+    "formats": [
+      "cjs"
+    ]
+  },
+  "gitHead": "8c9765f9cd204fc63b928526941d8d8bffaf7c38"
+}

code/presets/create-react-app/project.json

@@ -0,0 +1,6 @@
+{
+  "name": "@storybook/preset-create-react-app",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "implicitDependencies": [],
+  "type": "library"
+}

code/presets/create-react-app/src/helpers/checkPresets.ts

@@ -0,0 +1,18 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { logger } from '@storybook/node-logger';
+import type { PluginOptions } from '../types';
+
+const incompatiblePresets = ['@storybook/preset-scss', '@storybook/preset-typescript'];
+
+export const checkPresets = (options: PluginOptions): void => {
+  const { presetsList } = options;
+
+  presetsList.forEach((preset: string | { name: string }) => {
+    const presetName = typeof preset === 'string' ? preset : preset.name;
+    if (incompatiblePresets.includes(presetName)) {
+      logger.warn(
+        `\`${presetName}\` may not be compatible with \`@storybook/preset-create-react-app\``
+      );
+    }
+  });
+};

code/presets/create-react-app/src/helpers/getModulePath.ts

@@ -0,0 +1,30 @@
+import { existsSync } from 'fs';
+import { join } from 'path';
+
+interface PartialTSConfig {
+  compilerOptions: {
+    baseUrl?: string;
+  };
+}
+
+const JSCONFIG = 'jsconfig.json';
+const TSCONFIG = 'tsconfig.json';
+
+export const getModulePath = (appDirectory: string): string[] => {
+  // CRA only supports `jsconfig.json` if `tsconfig.json` doesn't exist.
+  let configName = '';
+  if (existsSync(join(appDirectory, TSCONFIG))) {
+    configName = TSCONFIG;
+  } else if (existsSync(join(appDirectory, JSCONFIG))) {
+    configName = JSCONFIG;
+  }
+
+  try {
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    const { baseUrl } = (require(join(appDirectory, configName)) as PartialTSConfig)
+      .compilerOptions;
+    return (baseUrl ? [baseUrl] : []) as string[];
+  } catch (e) {
+    return [];
+  }
+};

code/presets/create-react-app/src/helpers/getReactScriptsPath.ts

@@ -0,0 +1,59 @@
+import { readFileSync, realpathSync, lstatSync } from 'fs';
+import { join, dirname } from 'path';
+
+export const getReactScriptsPath = (): string => {
+  const cwd = process.cwd();
+  const scriptsBinPath = join(cwd, '/node_modules/.bin/react-scripts');
+
+  if (process.platform === 'win32') {
+    /*
+     * Try to find the scripts package on Windows by following the `react-scripts` CMD file.
+     * https://github.com/storybookjs/storybook/issues/5801
+     */
+    try {
+      const content = readFileSync(scriptsBinPath, 'utf8');
+
+      const packagePathMatch = content.match(
+        /"\$basedir[\\/](\S+?)[\\/]bin[\\/]react-scripts\.js"/i
+      );
+
+      if (packagePathMatch && packagePathMatch.length > 1) {
+        const scriptsPath = join(cwd, '/node_modules/.bin/', packagePathMatch[1]);
+        return scriptsPath;
+      }
+    } catch (e) {
+      // NOOP
+    }
+  } else {
+    /*
+     * Try to find the scripts package by following the `react-scripts` symlink.
+     * This won't work for Windows users, unless within WSL.
+     */
+    try {
+      const scriptsBinPathStat = lstatSync(scriptsBinPath);
+      if (scriptsBinPathStat.isSymbolicLink() === true) {
+        const resolvedBinPath = realpathSync(scriptsBinPath);
+        const scriptsPath = join(resolvedBinPath, '..', '..');
+        return scriptsPath;
+      }
+      if (scriptsBinPathStat.isFile() === true) {
+        const scriptsPath = join(cwd, '/node_modules/react-scripts');
+        return scriptsPath;
+      }
+    } catch (e) {
+      // NOOP
+    }
+  }
+
+  /*
+   * Try to find the `react-scripts` package by name (won't catch forked scripts packages).
+   */
+  try {
+    const scriptsPath = dirname(require.resolve('react-scripts/package.json'));
+    return scriptsPath;
+  } catch (e) {
+    // NOOP
+  }
+
+  return '';
+};

code/presets/create-react-app/src/helpers/mergePlugins.ts

@@ -0,0 +1,26 @@
+import type { WebpackPluginInstance } from 'webpack';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+
+export const mergePlugins = (...args: WebpackPluginInstance[]): WebpackPluginInstance[] =>
+  args.reduce((plugins, plugin) => {
+    if (
+      plugins.some(
+        (includedPlugin) => includedPlugin.constructor.name === plugin.constructor.name
+      ) ||
+      plugin.constructor.name === 'WebpackManifestPlugin'
+    ) {
+      return plugins;
+    }
+    let updatedPlugin = plugin;
+    if (plugin.constructor.name === 'ReactRefreshPlugin') {
+      // Storybook uses webpack-hot-middleware
+      // https://github.com/storybookjs/presets/issues/177
+
+      updatedPlugin = new ReactRefreshWebpackPlugin({
+        overlay: {
+          sockIntegration: 'whm',
+        },
+      });
+    }
+    return [...plugins, updatedPlugin];
+  }, [] as WebpackPluginInstance[]);

code/presets/create-react-app/src/helpers/processCraConfig.ts

@@ -0,0 +1,147 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { resolve } from 'path';
+import type { Configuration, RuleSetCondition, RuleSetRule } from 'webpack';
+import semver from 'semver';
+import type { PluginItem, TransformOptions } from '@babel/core';
+import type { PluginOptions } from '../types';
+
+type RuleSetConditions = RuleSetCondition[];
+
+const isRegExp = (value: RegExp | unknown): value is RegExp => value instanceof RegExp;
+
+const isString = (value: string | unknown): value is string => typeof value === 'string';
+
+// This handles arrays in Webpack rule tests.
+const testMatch = (rule: RuleSetRule, string: string): boolean => {
+  if (!rule.test) return false;
+  return Array.isArray(rule.test)
+    ? rule.test.some((test) => isRegExp(test) && test.test(string))
+    : isRegExp(rule.test) && rule.test.test(string);
+};
+
+export const processCraConfig = (
+  craWebpackConfig: Configuration,
+  options: PluginOptions
+): RuleSetRule[] => {
+  const configDir = resolve(options.configDir);
+
+  /*
+   * NOTE: As of version 5.3.0 of Storybook, Storybook's default loaders are no
+   * longer appended when using this preset, meaning less customisation is
+   * needed when used alongside that version.
+   *
+   * When loaders were appended in previous Storybook versions, some CRA loaders
+   * had to be disabled or modified to avoid conflicts.
+   *
+   * See: https://github.com/storybookjs/storybook/pull/9157
+   */
+  const storybookVersion = semver.coerce(options.packageJson.version) || '';
+  const isStorybook530 = semver.gte(storybookVersion, '5.3.0');
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return craWebpackConfig.module!.rules.reduce((rules, rule): RuleSetRule[] => {
+    const { oneOf, include } = rule as RuleSetRule;
+
+    // Add our `configDir` to support JSX and TypeScript in that folder.
+    if (testMatch(rule as RuleSetRule, '.jsx')) {
+      const newRule = {
+        ...(rule as RuleSetRule),
+        include: [include as string, configDir].filter(Boolean),
+      };
+      return [...rules, newRule];
+    }
+
+    /*
+     * CRA makes use of Webpack's `oneOf` feature.
+     * https://webpack.js.org/configuration/module/#ruleoneof
+     *
+     * Here, we map over those rules and add our `configDir` as above.
+     */
+    if (oneOf) {
+      return [
+        ...rules,
+        {
+          oneOf: oneOf.map((oneOfRule: RuleSetRule): RuleSetRule => {
+            if (oneOfRule.type === 'asset/resource') {
+              if (isStorybook530) {
+                const excludes = [
+                  'ejs', // Used within Storybook.
+                  'md', // Used with Storybook Notes.
+                  'mdx', // Used with Storybook Docs.
+                  'cjs', // Used for CommonJS modules.
+                  ...(options.craOverrides?.fileLoaderExcludes || []),
+                ];
+                const excludeRegex = new RegExp(`\\.(${excludes.join('|')})$`);
+                return {
+                  ...oneOfRule,
+
+                  exclude: [...(oneOfRule.exclude as RuleSetConditions), excludeRegex],
+                };
+              }
+              return {};
+            }
+
+            // This rule causes conflicts with Storybook addons like `addon-info`.
+            if (testMatch(oneOfRule, '.css')) {
+              return {
+                ...oneOfRule,
+                include: isStorybook530 ? undefined : [configDir],
+                exclude: [oneOfRule.exclude as RegExp, /@storybook/],
+              };
+            }
+
+            // Used for the next two rules modifications.
+            const isBabelLoader =
+              isString(oneOfRule.loader) && /[/\\]babel-loader[/\\]/.test(oneOfRule.loader);
+
+            // Target `babel-loader` and add user's Babel config.
+            if (isBabelLoader && isRegExp(oneOfRule.test) && oneOfRule.test.test('.jsx')) {
+              const { include: _include, options: ruleOptions } = oneOfRule;
+
+              const {
+                plugins: rulePlugins,
+                presets: rulePresets,
+                overrides: ruleOverrides,
+              } = (typeof ruleOptions === 'object' ? ruleOptions : {}) as {
+                plugins: PluginItem[] | null;
+                presets: PluginItem[] | null;
+                overrides: TransformOptions[] | null;
+              };
+
+              const {
+                extends: _extends,
+                plugins,
+                presets,
+                overrides,
+              } = (options as any).babelOptions;
+
+              return {
+                ...oneOfRule,
+                include: [_include as string, configDir].filter(Boolean),
+                options: {
+                  ...(ruleOptions as Record<string, unknown>),
+                  extends: _extends,
+                  plugins: [...(plugins ?? []), ...(rulePlugins ?? [])],
+                  presets: [...(presets ?? []), ...(rulePresets ?? [])],
+                  overrides: [...(overrides ?? []), ...(ruleOverrides ?? [])],
+                },
+              };
+            }
+
+            // Target `babel-loader` that processes `node_modules`, and add Storybook config dir.
+            if (isBabelLoader && isRegExp(oneOfRule.test) && oneOfRule.test.test('.js')) {
+              return {
+                ...oneOfRule,
+                include: [configDir],
+              };
+            }
+
+            return oneOfRule;
+          }),
+        },
+      ];
+    }
+
+    return [...rules, rule as RuleSetRule];
+  }, [] as RuleSetRule[]);
+};

code/presets/create-react-app/src/index.ts

@@ -0,0 +1,159 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { join, relative, dirname } from 'path';
+import type { Configuration, RuleSetRule } from 'webpack';
+import semver from 'semver';
+import { logger } from '@storybook/node-logger';
+import PnpWebpackPlugin from 'pnp-webpack-plugin';
+import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';
+import { mergePlugins } from './helpers/mergePlugins';
+import { getReactScriptsPath } from './helpers/getReactScriptsPath';
+import { processCraConfig } from './helpers/processCraConfig';
+import { checkPresets } from './helpers/checkPresets';
+import { getModulePath } from './helpers/getModulePath';
+import type { PluginOptions, CoreConfig } from './types';
+
+const CWD = process.cwd();
+
+const REACT_SCRIPTS_PATH = getReactScriptsPath();
+const OPTION_SCRIPTS_PACKAGE = 'scriptsPackageName';
+
+// Ensures that assets are served from the correct path when Storybook is built.
+// Resolves: https://github.com/storybookjs/storybook/issues/4645
+if (!process.env.PUBLIC_URL) {
+  process.env.PUBLIC_URL = '.';
+}
+
+type ResolveLoader = Configuration['resolveLoader'];
+
+// This loader is shared by both the `managerWebpack` and `webpack` functions.
+const resolveLoader: ResolveLoader = {
+  modules: ['node_modules', join(REACT_SCRIPTS_PATH, 'node_modules')],
+  plugins: [PnpWebpackPlugin.moduleLoader(module)],
+};
+
+// TODO: Replace with exported type from Storybook.
+
+const core = (existing: { disableWebpackDefaults: boolean }) => ({
+  ...existing,
+  disableWebpackDefaults: true,
+});
+
+// Don't use Storybook's default Babel config.
+const babelDefault = (): Record<string, (string | [string, object])[]> => ({
+  presets: [],
+  plugins: [],
+});
+
+// Update the core Webpack config.
+const webpack = async (
+  webpackConfig: Configuration = {},
+  options: PluginOptions
+): Promise<Configuration> => {
+  let scriptsPath = REACT_SCRIPTS_PATH;
+
+  // Flag any potentially conflicting presets.
+  checkPresets(options);
+
+  // If the user has provided a package by name, try to resolve it.
+  const scriptsPackageName = options[OPTION_SCRIPTS_PACKAGE];
+  if (typeof scriptsPackageName === 'string') {
+    try {
+      scriptsPath = dirname(
+        require.resolve(`${scriptsPackageName}/package.json`, {
+          paths: [options.configDir],
+        })
+      );
+    } catch (e) {
+      logger.warn(`A \`${OPTION_SCRIPTS_PACKAGE}\` was provided, but couldn't be resolved.`);
+    }
+  }
+
+  // If there isn't a scripts-path set, return the Webpack config unmodified.
+  if (!scriptsPath) {
+    logger.error('Failed to resolve a `react-scripts` package.');
+    return webpackConfig;
+  }
+
+  logger.info(`=> Loading Webpack configuration from \`${relative(CWD, scriptsPath)}\``);
+
+  // Remove existing rules related to JavaScript and TypeScript.
+  logger.info(`=> Removing existing JavaScript and TypeScript rules.`);
+  const filteredRules =
+    webpackConfig.module &&
+    webpackConfig.module.rules.filter(
+      ({ test }: RuleSetRule) =>
+        !(test instanceof RegExp && ((test && test.test('.js')) || test.test('.ts')))
+    );
+
+  // Require the CRA config and set the appropriate mode.
+  const craWebpackConfigPath = join(scriptsPath, 'config', 'webpack.config');
+  // eslint-disable-next-line global-require, import/no-dynamic-require
+  const craWebpackConfig = require(craWebpackConfigPath)(webpackConfig.mode) as Configuration;
+
+  // Select the relevant CRA rules and add the Storybook config directory.
+  logger.info(`=> Modifying Create React App rules.`);
+  const craRules = processCraConfig(craWebpackConfig, options);
+
+  // NOTE: These are set by default in Storybook 6.
+  const isStorybook6 = semver.gte(options.packageJson.version || '', '6.0.0');
+  const {
+    typescriptOptions = {
+      reactDocgen: 'react-docgen-typescript',
+      reactDocgenTypescriptOptions: {},
+    },
+  } = options;
+  const tsDocgenPlugin =
+    !isStorybook6 && typescriptOptions.reactDocgen === 'react-docgen-typescript'
+      ? [new ReactDocgenTypescriptPlugin(typescriptOptions.reactDocgenTypescriptOptions)]
+      : [];
+
+  // NOTE: This is code replicated from
+  //   https://github.com/storybookjs/storybook/blob/89830ad76384faeaeb0c19df3cb44232cdde261b/lib/builder-webpack5/src/preview/base-webpack.config.ts#L45-L53
+  // as we are not applying SB's default webpack config here.
+  // We need to figure out a better way to apply various layers of webpack config; perhaps
+  // these options need to be in a separate preset.
+  const isProd = webpackConfig.mode !== 'development';
+  const coreOptions = await options.presets.apply<CoreConfig>('core');
+  const builderOptions = coreOptions?.builder?.options;
+  const cacheConfig = builderOptions?.fsCache ? { cache: { type: 'filesystem' } } : {};
+  const lazyCompilationConfig =
+    builderOptions?.lazyCompilation && !isProd
+      ? { experiments: { lazyCompilation: { entries: false } } }
+      : {};
+
+  // Return the new config.
+  return {
+    ...webpackConfig,
+    ...cacheConfig,
+    ...lazyCompilationConfig,
+    module: {
+      ...webpackConfig.module,
+      rules: [...(filteredRules || []), ...craRules],
+    },
+    // NOTE: this prioritizes the storybook version of a plugin
+    // when there are duplicates between SB and CRA
+    plugins: mergePlugins(
+      ...(webpackConfig.plugins || []),
+      ...(craWebpackConfig.plugins ?? []),
+      ...tsDocgenPlugin
+    ),
+    resolve: {
+      ...webpackConfig.resolve,
+      extensions: craWebpackConfig.resolve?.extensions,
+      modules: [
+        ...((webpackConfig.resolve && webpackConfig.resolve.modules) || []),
+        join(REACT_SCRIPTS_PATH, 'node_modules'),
+        ...getModulePath(CWD),
+      ],
+      plugins: [PnpWebpackPlugin as any],
+    },
+    resolveLoader,
+  } as Configuration;
+};
+
+// we do not care of the typings exported from this package
+const exportedCore = core as any;
+const exportedWebpack = webpack as any;
+const exportedBabelDefault = babelDefault as any;
+
+export { exportedCore as core, exportedWebpack as webpack, exportedBabelDefault as babelDefault };

code/presets/create-react-app/src/types.ts

@@ -0,0 +1,31 @@
+import type { Options } from '@storybook/types';
+import type { PluginOptions as RDTSPluginOptions } from '@storybook/react-docgen-typescript-plugin';
+
+export interface PluginOptions extends Options {
+  /**
+   * Optionally set the package name of a react-scripts fork.
+   * In most cases, the package is located automatically by this preset.
+   */
+  scriptsPackageName?: string;
+
+  /**
+   * Overrides for Create React App's Webpack configuration.
+   */
+  craOverrides?: {
+    fileLoaderExcludes?: string[];
+  };
+
+  typescriptOptions?: {
+    reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
+    reactDocgenTypescriptOptions: RDTSPluginOptions;
+  };
+}
+
+export interface CoreConfig {
+  builder: {
+    options?: {
+      fsCache?: boolean;
+      lazyCompilation?: boolean;
+    };
+  };
+}

code/presets/create-react-app/src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'pnp-webpack-plugin';

code/presets/create-react-app/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": false
+  },
+  "include": ["src/**/*"]
+}

scripts/verdaccio.yaml

@@ -39,10 +39,6 @@ packages:
     access: $all
     publish: $all
     proxy: npmjs
-  '@storybook/preset-create-react-app':
-    access: $all
-    publish: $all
-    proxy: npmjs
   '@storybook/preset-ie11':
     access: $all
     publish: $all