chore: migrate breaking changes on storybook

react/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

react/.storybook/main.ts

@@ -1,12 +1,25 @@
-module.exports = {
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
+
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
-    "@storybook/preset-create-react-app",
-  ]
-};
+  ],
+
+  docs: {
+    autodocs: true
+  },
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {babelModeV7: true}
+  }
+};
+
+export default config

react/.storybook/preview.ts

@@ -1,16 +1,20 @@
-export const parameters = {
-  controls: { expanded: true },
-  actions: { argTypesRegex: '^on.*' },
-  backgrounds: {
-    default: 'light',
-    values: [
-      { name: 'light', value: '#f5f7f8' },
-      { name: 'dark', value: '#282a2c' },
-    ],
-  },
-  options: {
-    storySort: {
-      order: ['PayButton', 'Button', 'Widget'],
+const preview = {
+  parameters: {
+    controls: { expanded: true },
+    actions: { argTypesRegex: '^on.*' },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#f5f7f8' },
+        { name: 'dark', value: '#282a2c' },
+      ],
     },
-  },
-};
+    options: {
+      storySort: {
+        order: ['PayButton', 'Button', 'Widget'],
+      },
+    },
+  }
+};
+
+export default preview