build(sb): 👷 update sb build to vite & remove babel build

.storybook/main.ts

@@ -1,12 +1,24 @@
+const { mergeConfig } = require("vite");
+
 const config = {
   framework: "@storybook/react",
-  core: { builder: "webpack5" },
+  core: { builder: "@storybook/builder-vite" },
+  async viteFinal(config: any, options: any) {
+    return mergeConfig(config, {
+      // customize the Vite config here
+      build: {
+        minify: false,
+        sourcemap: false,
+      },
+    });
+  },
+
   // storyStoreV7 removes the circular dependency issue with Webpack 5
   // So, we added ThemeProvider in preview.jsx and so src/theme should work for HMR
-  features: { storyStoreV7: true, babelModeV7: true },
+  // features: { storyStoreV7: true, babelModeV7: true },
   stories: ["../src/*/stories/*.stories.@(ts|tsx)"],
   addons: [
-    "storybook-addon-preview",
+    // "storybook-addon-preview",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
     {

.storybook/preview-head.html

@@ -4,3 +4,8 @@
   crossorigin="anonymous"
   href="https://rsms.me/inter/inter.css"
 />
+
+<!-- For Builder Vite issue with Jest Mock -->
+<script>
+  window.global = window;
+</script>

.swcrc

@@ -1,10 +1,8 @@
 {
-  "env": { "coreJs": 3 },
+  "env": { "coreJs": 3.22 },
   "exclude": [
     "fileMock.js$",
     "styleMock.js$",
-    ".test.tsx$",
-    ".test-d.ts$",
     ".component.tsx$",
     ".stories.tsx$",
     "Jsx.ts$",
@@ -29,5 +27,6 @@
       }
     }
   },
-  "sourceMaps": true
+  "sourceMaps": true,
+  "minify": true
 }

.swcrc.build

@@ -0,0 +1,36 @@
+{
+  "env": {
+    "coreJs": 3
+  },
+  "exclude": [
+    "fileMock.js$",
+    "styleMock.js$",
+    ".test-d.ts$",
+    ".test.tsx$",
+    ".component.tsx$",
+    ".stories.tsx$",
+    "Jsx.ts$",
+    "Tsx.ts$"
+  ],
+  "jsc": {
+    "loose": true,
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragma": "React.createElement",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": false
+      }
+    }
+  },
+  "sourceMaps": true,
+  "minify": true
+}

jest.config.ts → jest.config.js

@@ -6,7 +6,7 @@ const { join } = require("path");
 const pkg = require("./package.json");
 
 // eslint-disable-next-line import/no-anonymous-default-export
-export default {
+module.exports = {
   rootDir: __dirname,
   displayName: pkg.name,
   testEnvironment: "jsdom",
@@ -20,4 +20,7 @@ export default {
   },
   coveragePathIgnorePatterns: ["node_modules", "__mocks__", "stories"],
   clearMocks: true,
+  transform: {
+    "^.+\\.(t|j)sx?$": ["@swc/jest"],
+  },
 };

package.json

@@ -43,24 +43,18 @@
     "boot": "yarn previews",
     "previews": "node scripts/create-previews.js",
     "storybook": "yarn previews && start-storybook -p 6006",
-    "test": "jest --config ./jest.config.ts --no-cache",
+    "test": "jest --config ./jest.config.js --no-cache",
     "lint": "eslint --color --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "eslint --color --ext .js,.jsx,.ts,.tsx . --fix",
     "format": "prettier --check \"./**/*.{html,css,js,jsx,ts,tsx,md,json}\"",
     "format:fix": "prettier --write --list-different --cache \"./**/*.{html,css,js,jsx,ts,tsx,md,json}\"",
     "format:package": "sort-package-json package.json",
     "build": "yarn swc",
-    "prebabel": "rimraf dist",
-    "babel": "yarn babel:cjs && yarn babel:esm",
-    "postbabel": "yarn babel:types",
-    "babel:cjs": "cross-env BABEL_ENV=cjs babel src --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "babel:esm": "cross-env BABEL_ENV=esm babel src --extensions .ts,.tsx -d dist/esm --source-maps",
-    "babel:types": "tsc --emitDeclarationOnly --project tsconfig.prod.json --declarationDir dist/types",
     "preswc": "rimraf out",
     "swc": "yarn swc:cjs && yarn swc:esm",
     "postswc": "yarn swc:types",
-    "swc:cjs": "swc src -d out/cjs -C module.type=commonjs",
-    "swc:esm": "swc src -d out/esm -C module.type=es6",
+    "swc:cjs": "swc src -d out/cjs -C module.type=commonjs --config-file .swcrc.build",
+    "swc:esm": "swc src -d out/esm -C module.type=es6 --config-file .swcrc.build",
     "swc:types": "tsc --emitDeclarationOnly --project tsconfig.prod.json --declarationDir out/types",
     "storybook-build": "yarn previews && build-storybook",
     "prepublishOnly": "pinst --disable",
@@ -103,14 +97,6 @@
     "tailwind-merge": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.18.6",
-    "@babel/core": "7.18.6",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-private-methods": "7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "7.18.6",
-    "@babel/preset-env": "7.18.6",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",
     "@release-it/conventional-changelog": "5.0.0",
@@ -119,8 +105,7 @@
     "@storybook/addon-actions": "6.5.9",
     "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/builder-vite": "^0.1.38",
     "@storybook/react": "6.5.9",
     "@swc/cli": "0.1.57",
     "@swc/core": "1.2.207",
@@ -139,9 +124,7 @@
     "all-contributors-cli": "6.20.0",
     "autoprefixer": "10.4.7",
     "axe-core": "4.4.2",
-    "babel-jest": "28.1.1",
-    "babel-loader": "8.2.5",
-    "babel-plugin-jsx-remove-data-test-id": "3.0.0",
+    "@swc/jest": "0.2.21",
     "browserlist": "1.0.1",
     "chalk": "4.1.2",
     "concurrently": "7.2.2",
@@ -180,10 +163,8 @@
     "sort-package-json": "1.57.0",
     "storybook-addon-preview": "2.2.0",
     "tailwindcss": "3.1.4",
-    "ts-node": "10.8.1",
-    "tslib": "2.4.0",
     "typescript": "4.7.4",
-    "webpack": "5.73.0"
+    "vite": "^2.9.13"
   },
   "peerDependencies": {
     "react": "16.x || 17.x || 18.x",

src/checkbox/stories/CheckboxCustomAdvanced.stories.tsx

@@ -14,7 +14,7 @@ export default {
   component: CheckboxCustomAdvanced,
   parameters: {
     layout: "centered",
-    options: { showPanel: true },
+    options: { showPanel: false },
     preview: createPreviewTabs({ js, ts }),
   },
 } as Meta;