migrate to storybook 7.0.0-beta

.babelrc.js

@@ -1,6 +1,14 @@
 module.exports = {
   presets: [
-    '@babel/preset-env',
+    [
+      '@babel/preset-env',
+      {
+        shippedProposals: true,
+        useBuiltIns: 'usage',
+        corejs: '3',
+        targets: { node: '14' },
+      },
+    ],
     '@babel/preset-typescript',
     '@babel/preset-react',
   ],
@@ -10,7 +18,11 @@ module.exports = {
         [
           '@babel/preset-env',
           {
+            shippedProposals: true,
+            useBuiltIns: 'usage',
+            corejs: '3',
             modules: false,
+            targets: { chrome: '100' },
           },
         ],
       ],

.gitignore

@@ -3,4 +3,5 @@ node_modules/
 storybook-static/
 build-storybook.log
 .DS_Store
-.env
+.env!/
+.yarn/

.storybook/main.js

@@ -17,10 +17,29 @@ module.exports = {
     },
     '@storybook/addon-essentials',
   ],
-  framework: '@storybook/react',
   core: {
-    builder: {
-      name: 'webpack5',
+    builder: 'webpack5',
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { fastRefresh: true },
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      // speeds up storybook build time
+      allowSyntheticDefaultImports: false,
+      // speeds up storybook build time
+      esModuleInterop: false,
+      // makes union prop types like variant and size appear as select controls
+      shouldExtractLiteralValuesFromEnum: true,
+      // makes string and boolean types that can be undefined appear as inputs and switches
+      shouldRemoveUndefinedFromOptional: true,
     },
   },
+  docs: {
+    autodocs: true,
+  },
 };

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -32,74 +32,80 @@
     "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
     "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "prestorybook": "yarn buildBabel:cjs",
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "prerelease": "zx scripts/prepublish-checks.mjs",
     "release": "yarn build && auto shipit",
     "eject-ts": "zx scripts/eject-typescript.mjs",
     "chromatic": "npx chromatic --project-token=c9eb9dda8699"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.9",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.17.9",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.20.13",
     "@expo/html-elements": "^0.2.0",
     "@react-native-community/eslint-config": "^3.1.0",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@storybook/addon-actions": "^7.0.0-beta.38",
+    "@storybook/addon-essentials": "^7.0.0-beta.38",
+    "@storybook/addon-links": "^7.0.0-beta.38",
+    "@storybook/builder-webpack5": "^7.0.0-beta.38",
+    "@storybook/manager-webpack5": "^7.0.0-alpha.10",
+    "@storybook/react": "^7.0.0-beta.38",
+    "@storybook/react-webpack5": "^7.0.0-beta.38",
     "@types/jest": "^27.4.1",
-    "@types/react-native": "^0.70.6",
+    "@types/react-native": "^0.71.1",
     "@types/react-native-vector-icons": "^6.4.12",
     "@types/react-test-renderer": "^18.0.0",
     "auto": "^10.36.5",
     "babel-jest": "^28.0.0",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-react-docgen-typescript": "^1.5.1",
     "babel-plugin-react-native-web": "^0.18.9",
     "boxen": "^5.0.1",
     "chromatic": "^6.11.2",
     "concurrently": "^7.5.0",
     "dedent": "^0.7.0",
     "eslint": "^8.14.0",
+    "eslint-plugin-ft-flow": "^2.0.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-storybook": "^0.6.6",
     "expo-linear-gradient": "^11.4.0",
     "jest": "^28.0.0",
-    "metro-react-native-babel-preset": "^0.73.3",
+    "metro-react-native-babel-preset": "^0.74.1",
     "native-base": "^3.4.19",
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-native": "^0.70.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "^0.71.1",
     "react-native-gesture-handler": "^2.8.0",
     "react-native-paper": "^4.12.5",
-    "react-native-reanimated": "2.9.1",
+    "react-native-reanimated": "2.14.4",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.18.2",
     "react-native-svg": "^13.4.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-web": "^0.18.9",
     "react-test-renderer": "18.1.0",
     "rimraf": "^3.0.2",
-    "typescript": "^4.8.4",
+    "storybook": "^7.0.0-beta.38",
+    "typescript": "^4.9.5",
     "victory": "^36.6.8",
     "victory-native": "^36.6.8",
+    "webpack": "5",
     "zx": "^6.1.0"
   },
   "peerDependencies": {
     "@babel/preset-react": "*",
     "@storybook/addons": "*",
     "@storybook/api": "*",
     "@storybook/components": "*",
+    "@storybook/core-common": "*",
     "@storybook/core-events": "*",
     "@storybook/theming": "*",
     "babel-plugin-react-native-web": "*",

src/webpack.ts

@@ -102,7 +102,11 @@ const webpackFinal = async (config: any, options: Options) => {
           },
         ],
       ],
-      plugins: [...babelPlugins, '@babel/plugin-proposal-class-properties'],
+      plugins: [
+        ...babelPlugins,
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-proposal-export-namespace-from',
+      ],
     },
   });
 
@@ -119,6 +123,7 @@ const webpackFinal = async (config: any, options: Options) => {
     ...config.resolve.alias,
     ...userAliases,
   };
+
   return config;
 };
 

stories/template/Introduction.stories.mdx

@@ -8,9 +8,10 @@ import Plugin from './assets/plugin.svg';
 import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';
 
-<Meta />
+<Meta title='Introduction' />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -73,7 +74,7 @@ import StackAlt from './assets/stackalt.svg';
     display: block;
     margin-bottom: 2px;
   }
-  
+
   .link-item img {
     height: 40px;
     width: 40px;
@@ -111,8 +112,9 @@ import StackAlt from './assets/stackalt.svg';
     display: inline-block;
   }
 
-
-`}</style>
+
+`}
+</style>
 
 # Welcome to Storybook