chore(deps): update storybook monorepo to v7 (major) (#1556)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jonathan Zempel <jzempel@gmail.com>
Co-authored-by: Mike Tobia <mike.tobia@zendesk.com>
Co-authored-by: Mike Tobia <Francois-Esquire@users.noreply.github.com>

Author: 4 people

.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,7 +19,7 @@
     "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",
@@ -31,21 +31,21 @@
     "@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": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
+    "@storybook/addon-a11y": "7.0.20",
+    "@storybook/addon-designs": "7.0.0",
+    "@storybook/addon-essentials": "7.0.20",
+    "@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,7 +117,7 @@
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-license": "3.0.1",
     "rollup-plugin-typescript2": "0.34.1",
-    "storybook-addon-designs": "6.3.1",
+    "storybook": "7.0.20",
     "styled-components": "5.3.11",
     "stylelint": "13.13.1",
     "stylelint-config-styled-components": "0.1.1",

package.json

@@ -1,5 +1,6 @@
-import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { {{capitalize component}} } from '@zendeskgarden/react-{{pluralize (lowercase component)}}';
+import README from '../README.md';
 
 export const subcomponents = { '{{capitalize component}}.Text': {{capitalize component}}.Text };
 
@@ -32,3 +33,5 @@ export const argTypes = {
     )}
   </Story>
 </Canvas>
+
+<Markdown>{README}</Markdown>

packages/.template/demo/#readme.stories.mdx

@@ -1,8 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
 import { Accordion } from '@zendeskgarden/react-accordions';
 import { AccordionStory } from './stories/AccordionStory';
 import { ACCORDION_SECTIONS as SECTIONS } from './stories/data';
+import README from '../README.md';
 
 <Meta
   title="Packages/Accordions/Accordion"
@@ -69,3 +70,5 @@ import { ACCORDION_SECTIONS as SECTIONS } from './stories/data';
     }}
   </Story>
 </Canvas>
+
+<Markdown>{README}</Markdown>

packages/.template/demo/{{lowercase component}}.stories.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { Stepper } from '@zendeskgarden/react-accordions';
 import { StepperStory } from './stories/StepperStory';
 import { STEPPER_STEPS as STEPS } from './stories/data';
+import README from '../README.md';
 
 <Meta
   title="Packages/Accordions/Stepper"
@@ -49,3 +50,5 @@ import { STEPPER_STEPS as STEPS } from './stories/data';
     {args => <StepperStory {...args} />}
   </Story>
 </Canvas>
+
+<Markdown>{README}</Markdown>

packages/accordions/demo/#readme.stories.mdx

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { Timeline } from '@zendeskgarden/react-accordions';
 import { TimelineStory } from './stories/TimelineStory';
 import { TIMELINE_ITEMS as ITEMS } from './stories/data';
+import README from '../README.md';
 
 <Meta
   title="Packages/Accordions/Timeline"
@@ -44,3 +45,5 @@ import { TIMELINE_ITEMS as ITEMS } from './stories/data';
     {args => <TimelineStory {...args} />}
   </Story>
 </Canvas>
+
+<Markdown>{README}</Markdown>