Chore: Upgrade to support Storybook 7.0

.babelrc.js

@@ -1,7 +1,31 @@
 module.exports = {
   presets: [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env",
+      {
+        shippedProposals: true,
+        useBuiltIns: "usage",
+        corejs: "3",
+        targets: { node: "16" },
+      },
+    ],
     "@babel/preset-typescript",
     "@babel/preset-react",
   ],
+  env: {
+    esm: {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            shippedProposals: true,
+            useBuiltIns: "usage",
+            corejs: "3",
+            modules: false,
+            targets: { chrome: "100" },
+          },
+        ],
+      ],
+    },
+  },
 };

.storybook/main.js

@@ -1,7 +1,8 @@
 module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["../preset.js"],
-};
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  }
+};

package.json

@@ -25,9 +25,9 @@
     "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist",
     "build": "concurrently \"npm run buildBabel\" \"npm run buildTsc\"",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6007",
     "start": "concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "prerelease": "node check-metadata.js",
     "release": "npm run build && auto shipit"
   },
@@ -37,24 +37,28 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
     "@babel/preset-typescript": "^7.13.0",
-    "@storybook/react": "^6.1.14",
+    "@storybook/react": "next",
+    "@storybook/react-webpack5": "next",
+    "@types/react": "^18.0.28",
+    "@types/webpack-env": "^1.18.0",
     "auto": "^10.3.0",
     "babel-loader": "^8.1.0",
     "chalk": "^2.4.2",
     "concurrently": "^5.3.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
+    "storybook": "next",
     "typescript": "^4.2.4"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.1.14",
-    "@storybook/api": "^6.1.14",
-    "@storybook/components": "^6.1.14",
-    "@storybook/core-events": "^6.1.14",
-    "@storybook/theming": "^6.1.14",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "@storybook/addons": ">7.0.0-0 || ^7.0.0",
+    "@storybook/api": ">7.0.0-0 || ^7.0.0",
+    "@storybook/components": ">7.0.0-0 || ^7.0.0",
+    "@storybook/core-events": ">7.0.0-0 || ^7.0.0",
+    "@storybook/theming": ">7.0.0-0 || ^7.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {

src/index.ts

@@ -1,7 +1,9 @@
-import { document } from 'global';
+import { global } from 'global';
 import { addons, makeDecorator } from '@storybook/addons';
 import { EVENTS, PARAM_KEY } from './constants';
 
+const { document } = global;
+
 const changeMediaAttribute = (element: HTMLElement, enabled: boolean) => {
   const current = element.getAttribute('media');
   if ((enabled && !current) || (!enabled && current === 'max-width: 1px')) {
@@ -67,7 +69,7 @@ export const withCssResources = makeDecorator({
   skipIfNoParametersOrOptions: true,
 
   wrapper: (getStory, context, { options, parameters }) => {
-    const storyOptions = parameters || options;
+    const storyOptions: any = parameters || options;
     addons.getChannel().on(EVENTS.SET, setResources);
 
     if (!Array.isArray(storyOptions) && !Array.isArray(storyOptions.cssresources)) {

tsconfig.json

@@ -13,12 +13,13 @@
     "noImplicitAny": true,
     "rootDir": "./src",
     "skipLibCheck": true,
-    "target": "es5"
+    "target": "es5",
+    "types": ["webpack-env"]
   },
   "include": [
     "src/**/*"
   ],
   "exclude": [
     "src/**/*.test.*",
   ]
-}
+}