Configure Storybook 7

Author: jzempel

.storybook/babel.config.js

@@ -5,20 +5,22 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+const path = require('path');
+const { readdirSync } = require('fs');
 const webpack = require('webpack');
 const svgoConfig = require('../.svgo.config.js');
-const docs = process.env.BROWSER ? process.env.BROWSER.toUpperCase() !== 'IE11' : true;
+
+const PACKAGE_NAMES = readdirSync(path.resolve(__dirname, '../packages')).filter(
+  name => name !== '.template'
+);
 
 module.exports = {
   stories: ['../packages/*/demo/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   staticDirs: ['./static'],
-  addons: [
-    { name: '@storybook/addon-essentials', options: { docs } },
-    '@storybook/addon-a11y',
-    'storybook-addon-designs'
-  ],
-  core: {
-    builder: 'webpack5'
+  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', 'storybook-addon-designs'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
   webpackFinal: config => {
     const fileLoaderRule = config.module.rules.find(rule => rule.test.test('.svg'));
@@ -43,6 +45,18 @@ module.exports = {
       })
     );
 
+    Object.assign(
+      config.resolve.alias,
+      PACKAGE_NAMES.reduce((previousValue, packageName) => {
+        previousValue[`@zendeskgarden/react-${packageName}`] = path.resolve(
+          __dirname,
+          `../packages/${packageName}/src`
+        );
+
+        return previousValue;
+      }, {})
+    );
+
     return config;
   }
 };

.storybook/main.js

@@ -13,19 +13,15 @@ module.exports = {
         targets: '> 0.5%, last 2 versions, Firefox ESR, not dead'
       }
     ],
-    '@babel/preset-react'
+    '@babel/preset-react',
+    ['@babel/preset-typescript', { onlyRemoveTypeImports: true }]
   ],
   plugins: [
     '@babel/plugin-transform-object-assign',
-    [
-      '@babel/plugin-proposal-class-properties',
-      {
-        loose: true
-      }
-    ],
+    ['@babel/plugin-transform-class-properties', { loose: true }],
     'babel-plugin-styled-components',
-    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
-    ['@babel/plugin-proposal-private-methods', { loose: true }]
+    ['@babel/plugin-transform-private-property-in-object', { loose: true }],
+    ['@babel/plugin-transform-private-methods', { loose: true }]
   ],
   env: {
     production: {

babel.config.js

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "lerna run build --stream",
     "build:analyze": "ANALYZE_BUNDLE=true yarn build:single",
-    "build:demo": "build-storybook -o ./demo",
+    "build:demo": "storybook build -o ./demo",
     "build:single": "utils/scripts/scoped-npm-command.js --script build",
     "format": "prettier-package-json --write && yarn format:package_json --write && yarn format:js --write && yarn format:md --write",
     "format:all": "prettier-package-json --list-different && yarn format:package_json --list-different && yarn format:js --check && yarn format:md --check",
@@ -19,33 +19,35 @@
     "lint:md": "markdownlint README.md packages/*/README.md packages/*/demo/**/*.mdx",
     "new": "utils/scripts/new.js",
     "prepare": "yarn build",
-    "start": "start-storybook --no-version-updates -p 6006",
+    "start": "storybook dev --no-version-updates -p 6006",
     "tag": "utils/scripts/tag.js",
     "test": "jest --config=utils/test/jest.config.js",
     "test:ci": "yarn lint && yarn format:all && yarn tsc && yarn test --coverage",
     "test:watch": "yarn test --watch",
     "preversion": "yarn test:ci",
     "version": "yarn build && git add -A"
   },
+  "resolutions": {
+    "react": "17.0.2"
+  },
   "devDependencies": {
     "@babel/cli": "7.21.5",
     "@babel/core": "7.22.1",
     "@babel/eslint-parser": "7.21.8",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
     "@babel/plugin-transform-object-assign": "7.18.6",
+    "@babel/plugin-transform-runtime": "7.22.4",
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.22.4",
     "@babel/preset-react": "7.22.3",
+    "@babel/preset-typescript": "7.21.5",
     "@brodybits/rollup-plugin-size-snapshot": "0.14.1",
     "@rollup/plugin-commonjs": "25.0.0",
     "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-replace": "5.0.2",
     "@storybook/addon-a11y": "7.0.20",
     "@storybook/addon-essentials": "7.0.20",
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/manager-webpack5": "6.5.16",
     "@storybook/react": "7.0.20",
+    "@storybook/react-webpack5": "7.0.20",
     "@svgr/rollup": "8.0.1",
     "@svgr/webpack": "8.0.1",
     "@swc/core": "1.3.62",
@@ -117,6 +119,7 @@
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-license": "3.0.1",
     "rollup-plugin-typescript2": "0.34.1",
+    "storybook": "7.0.20",
     "storybook-addon-designs": "6.3.1",
     "styled-components": "5.3.11",
     "stylelint": "13.13.1",