Future - Create a CRA framework

addons/docs/src/preset.ts

@@ -66,19 +66,8 @@ export async function webpack(
     ? require.resolve('@storybook/mdx2-csf/loader')
     : require.resolve('@storybook/mdx1-csf/loader');
 
-  // set `sourceLoaderOptions` to `null` to disable for manual configuration
-  const sourceLoader = sourceLoaderOptions
-    ? [
-        {
-          test: /\.(stories|story)\.[tj]sx?$/,
-          loader: require.resolve('@storybook/source-loader'),
-          options: { ...sourceLoaderOptions, inspectLocalDependencies: true },
-          enforce: 'pre',
-        },
-      ]
-    : [];
-
   let rules = module.rules || [];
+
   if (transcludeMarkdown) {
     rules = [
       ...rules.filter((rule: any) => rule.test?.toString() !== '/\\.md$/'),
@@ -104,37 +93,65 @@ export async function webpack(
       ...module,
       rules: [
         ...rules,
-        {
-          test: /(stories|story)\.mdx$/,
-          use: [
-            {
-              loader: resolvedBabelLoader,
-              options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
-            },
-            {
-              loader: mdxLoader,
-              options: {
-                ...mdxLoaderOptions,
-                skipCsf: false,
+        Object.defineProperty(
+          {
+            test: /(stories|story)\.mdx$/,
+            use: [
+              {
+                loader: resolvedBabelLoader,
+                options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
               },
-            },
-          ],
-        },
-        {
-          test: /\.mdx$/,
-          exclude: /(stories|story)\.mdx$/,
-          use: [
-            {
-              loader: resolvedBabelLoader,
-              options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
-            },
-            {
-              loader: mdxLoader,
-              options: mdxLoaderOptions,
-            },
-          ],
-        },
-        ...sourceLoader,
+              {
+                loader: mdxLoader,
+                options: {
+                  ...mdxLoaderOptions,
+                  skipCsf: false,
+                },
+              },
+            ],
+          },
+          'custom_id',
+          {
+            value: 'storybook_mdx',
+            enumerable: false,
+          }
+        ),
+        Object.defineProperty(
+          {
+            test: /\.mdx$/,
+            exclude: /(stories|story)\.mdx$/,
+            use: [
+              {
+                loader: resolvedBabelLoader,
+                options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
+              },
+              {
+                loader: mdxLoader,
+                options: mdxLoaderOptions,
+              },
+            ],
+          },
+          'custom_id',
+          {
+            value: 'storybook_mdx',
+            enumerable: false,
+          }
+        ),
+        // set `sourceLoaderOptions` to `null` to disable for manual configuration
+        ...(sourceLoaderOptions
+          ? [
+              Object.defineProperty(
+                {
+                  test: /\.(stories|story)\.[tj]sx?$/,
+                  loader: require.resolve('@storybook/source-loader'),
+                  options: { ...sourceLoaderOptions, inspectLocalDependencies: true },
+                  enforce: 'pre',
+                },
+                'custom_id',
+                { enumerable: false, value: 'storybook_source' }
+              ),
+            ]
+          : []),
       ],
     },
   };

examples/angular-cli/.storybook/tsconfig.json

@@ -1,16 +1,8 @@
 {
   "extends": "../tsconfig.app.json",
-  "exclude": [
-    "../src/karma.ts",
-    "../src/**/*.spec.ts"
-  ],
-  "include": [
-    "../src/**/*",
-    "preview.ts"
-  ],
+  "exclude": ["../src/karma.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*", "preview.ts"],
   "compilerOptions": {
-    "types": [
-      "@testing-library/jest-dom"
-    ]
+    "types": ["@testing-library/jest-dom"]
   }
 }

examples/cra-kitchen-sink/.storybook/main.ts

@@ -1,12 +1,11 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from '@storybook/cra';
 
 const path = require('path');
 
 const mainConfig: StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   logLevel: 'debug',
   addons: [
-    '@storybook/preset-create-react-app',
     {
       name: '@storybook/addon-docs/preset',
       options: {
@@ -44,7 +43,7 @@ const mainConfig: StorybookConfig = {
     breakingChangesV7: true,
   },
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/cra',
     options: { fastRefresh: true },
   },
 };

examples/cra-kitchen-sink/package.json

@@ -20,7 +20,6 @@
     "react-scripts": "^5.0.1"
   },
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@storybook/addon-a11y": "7.0.0-alpha.16",
     "@storybook/addon-actions": "7.0.0-alpha.16",
     "@storybook/addon-backgrounds": "7.0.0-alpha.16",
@@ -30,13 +29,10 @@
     "@storybook/addon-links": "7.0.0-alpha.16",
     "@storybook/addon-storyshots": "7.0.0-alpha.16",
     "@storybook/addons": "7.0.0-alpha.16",
-    "@storybook/builder-webpack5": "7.0.0-alpha.16",
-    "@storybook/preset-create-react-app": "^4.1.0",
+    "@storybook/cra": "7.0.0-alpha.16",
     "@storybook/react": "7.0.0-alpha.16",
-    "@storybook/react-webpack5": "7.0.0-alpha.16",
     "@storybook/theming": "7.0.0-alpha.16",
-    "storybook": "7.0.0-alpha.16",
-    "webpack": "5"
+    "storybook": "7.0.0-alpha.16"
   },
   "storybook": {
     "chromatic": {

examples/cra-ts-essentials/.storybook/main.ts

@@ -1,11 +1,10 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from '@storybook/cra';
 
 const path = require('path');
 
 const mainConfig: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   addons: [
-    '@storybook/preset-create-react-app',
     {
       name: '@storybook/addon-essentials',
       options: {
@@ -37,7 +36,7 @@ const mainConfig: StorybookConfig = {
     buildStoriesJson: true,
     breakingChangesV7: true,
   },
-  framework: '@storybook/react-webpack5',
+  framework: '@storybook/cra',
 };
 
 module.exports = mainConfig;

examples/cra-ts-essentials/package.json

@@ -39,14 +39,11 @@
   "devDependencies": {
     "@storybook/addon-essentials": "7.0.0-alpha.16",
     "@storybook/addons": "7.0.0-alpha.16",
-    "@storybook/builder-webpack5": "7.0.0-alpha.16",
-    "@storybook/preset-create-react-app": "^4.1.0",
+    "@storybook/cra": "7.0.0-alpha.16",
     "@storybook/react": "7.0.0-alpha.16",
-    "@storybook/react-webpack5": "7.0.0-alpha.16",
     "@storybook/testing-library": "^0.0.9",
     "storybook": "7.0.0-alpha.16",
-    "ts-node": "^10.4.0",
-    "webpack": "5"
+    "ts-node": "^10.4.0"
   },
   "storybook": {
     "chromatic": {

examples/cra-ts-kitchen-sink/.storybook/main.ts

@@ -1,12 +1,11 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from '@storybook/cra';
 
 const path = require('path');
 
 const mainConfig: StorybookConfig = {
   stories: ['../src/components', '../src/stories'],
   logLevel: 'debug',
   addons: [
-    '@storybook/preset-create-react-app',
     '@storybook/addon-docs',
     '@storybook/addon-actions',
     '@storybook/addon-links',
@@ -38,7 +37,7 @@ const mainConfig: StorybookConfig = {
     buildStoriesJson: true,
     breakingChangesV7: true,
   },
-  framework: '@storybook/react-webpack5',
+  framework: '@storybook/cra',
 };
 
 module.exports = mainConfig;

examples/cra-ts-kitchen-sink/package.json

@@ -40,19 +40,16 @@
     "@storybook/addon-highlight": "7.0.0-alpha.16",
     "@storybook/addon-links": "7.0.0-alpha.16",
     "@storybook/addons": "7.0.0-alpha.16",
-    "@storybook/builder-webpack5": "7.0.0-alpha.16",
-    "@storybook/preset-create-react-app": "^4.1.0",
+    "@storybook/cra": "7.0.0-alpha.16",
     "@storybook/react": "7.0.0-alpha.16",
-    "@storybook/react-webpack5": "7.0.0-alpha.16",
     "@types/enzyme": "^3.10.8",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.6.1",
     "fork-ts-checker-webpack-plugin": "^7.2.6",
     "react-moment-proptypes": "^1.7.0",
     "storybook": "7.0.0-alpha.16",
-    "ts-node": "^10.4.0",
-    "webpack": "5"
+    "ts-node": "^10.4.0"
   },
   "storybook": {
     "chromatic": {

examples/html-kitchen-sink/package.json

@@ -21,7 +21,7 @@
     "@storybook/addon-highlight": "7.0.0-alpha.16",
     "@storybook/addon-jest": "7.0.0-alpha.16",
     "@storybook/addon-links": "7.0.0-alpha.16",
-    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-postcss": "^3.0.0-alpha.1",
     "@storybook/addon-storyshots": "7.0.0-alpha.16",
     "@storybook/addon-storysource": "7.0.0-alpha.16",
     "@storybook/addon-viewport": "7.0.0-alpha.16",
@@ -36,7 +36,6 @@
     "format-json": "^1.0.3",
     "global": "^4.4.0",
     "postcss": "^8.2.4",
-    "postcss-color-rebeccapurple": "^6.0.0",
     "storybook": "7.0.0-alpha.16"
   },
   "storybook": {

examples/html-kitchen-sink/postcss.config.js

@@ -2,7 +2,5 @@ module.exports = {
   plugins: [
     // eslint-disable-next-line global-require
     require('autoprefixer'),
-    // eslint-disable-next-line global-require
-    require('postcss-color-rebeccapurple'),
   ],
 };

frameworks/angular/src/preset.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/core-common';
 import { StorybookConfig } from './types';
 
@@ -7,6 +7,7 @@ export const addons: PresetProperty<'addons', StorybookConfig> = [
   require.resolve('./server/framework-preset-angular-cli'),
   require.resolve('./server/framework-preset-angular-ivy'),
   require.resolve('./server/framework-preset-angular-docs'),
+  dirname(require.resolve(join('@storybook/builder-webpack5', 'package.json'))),
 ];
 
 export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [
@@ -20,8 +21,8 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
+      name: dirname(
+        require.resolve(join('@storybook/builder-webpack5', 'package.json'))
       ) as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },

frameworks/angular/src/server/framework-preset-angular-cli.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import webpack from 'webpack';
+import type { Configuration } from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { targetFromTargetString, BuilderContext, Target } from '@angular-devkit/architect';
 import { sync as findUpSync } from 'find-up';
@@ -18,7 +18,7 @@ import {
   readAngularWorkspaceConfig,
 } from './angular-read-workspace';
 
-export async function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions) {
+export async function webpack(baseConfig: Configuration, options: PresetOptions) {
   if (!moduleIsAvailable('@angular-devkit/build-angular')) {
     logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed');
     return baseConfig;
@@ -33,9 +33,9 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
     info: string;
     condition: boolean;
     getWebpackConfig(
-      baseConfig: webpack.Configuration,
+      baseConfig: Configuration,
       options: PresetOptions
-    ): Promise<webpack.Configuration> | webpack.Configuration;
+    ): Promise<Configuration> | Configuration;
   }[] = [
     {
       info: '=> Loading angular-cli config for angular >= 13.0.0',

frameworks/cra/README.md

@@ -0,0 +1,37 @@
+# Storybook for CRA
+
+Storybook for CRA is a UI development environment for your React components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-react-app
+npx sb init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/react/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+
+Here are some featured storybooks that you can reference to see how Storybook works:
+
+- [Demo of Storybook Design System](https://storybook.js.org/design-system) - [source](https://github.com/storybookjs/design-system)
+
+## Create React App
+
+TODO
+
+## Docs
+
+- [Basics](https://storybook.js.org/docs/react/get-started/introduction)
+- [Configurations](https://storybook.js.org/docs/react/configure/overview)
+- [Addons](https://storybook.js.org/docs/react/configure/storybook-addons)