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

navin-moorthy · web-flow · commit 903373583695 · 2022-06-30T14:31:11.000+05:30
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -27,7 +27,9 @@ jobs:
         id: cache-node-modules # use this to check for `cache-hit` (`steps.cache-node-modules.outputs.cache-hit != 'true'`)
         with:
           path: node_modules
-          key: modules-${{ hashFiles('yarn-lock.json') }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
@@ -52,7 +54,9 @@ jobs:
         id: cache-node-modules # use this to check for `cache-hit` (`steps.cache-node-modules.outputs.cache-hit != 'true'`)
         with:
           path: node_modules
-          key: modules-${{ hashFiles('yarn-lock.json') }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
@@ -80,7 +84,9 @@ jobs:
         id: cache-node-modules # use this to check for `cache-hit` (`steps.cache-node-modules.outputs.cache-hit != 'true'`)
         with:
           path: node_modules
-          key: modules-${{ hashFiles('yarn-lock.json') }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
@@ -112,7 +118,9 @@ jobs:
         id: cache-node-modules # use this to check for `cache-hit` (`steps.cache-node-modules.outputs.cache-hit != 'true'`)
         with:
           path: node_modules
-          key: modules-${{ hashFiles('yarn-lock.json') }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
diff --git a/.storybook/main.ts b/.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",
     {
diff --git a/.storybook/preview-head.html b/.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>
diff --git a/.swcrc b/.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
 }
diff --git a/.swcrc.build b/.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
+}
diff --git a/babel.config.js b/babel.config.js
diff --git a/jest.config.js b/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"],
+  },
 };
diff --git a/package.json b/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",
diff --git a/src/badge/stories/BadgeBasic.stories.tsx b/src/badge/stories/BadgeBasic.stories.tsx
@@ -80,5 +80,5 @@ export const Outline: Story = {
 
 export const Prefix: Story = {
   ...Default,
-  args: { prefix: <SlotIcon /> },
+  args: { ...Default.args, prefix: <SlotIcon /> },
 };
diff --git a/src/badge/stories/BadgeStack.stories.tsx b/src/badge/stories/BadgeStack.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
-import { createPreviewTabs } from "../../../.storybook/utils";
+import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/BadgeStackJsx";
 import ts from "./templates/BadgeStackTsx";
@@ -12,6 +12,9 @@ type Story = ComponentStoryObj<typeof BadgeStack>;
 export default {
   title: "Primitives/Badge/Stack",
   component: BadgeStack,
+  argTypes: createControls("badge", {
+    ignore: ["wrapElement", "as", "ref", "prefix"],
+  }),
   parameters: {
     layout: "centered",
     options: { showPanel: false },
diff --git a/src/checkbox/stories/CheckboxCustomAdvanced.stories.tsx b/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;
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,8 @@`
`1`	`1`	`{`
`2`		`- "env": { "coreJs": 3 },`
	`2`	`+ "env": { "coreJs": 3.22 },`
`3`	`3`	`"exclude": [`
`4`	`4`	`"fileMock.js$",`
`5`	`5`	`"styleMock.js$",`
`6`		`- ".test.tsx$",`
`7`		`- ".test-d.ts$",`
`8`	`6`	`".component.tsx$",`
`9`	`7`	`".stories.tsx$",`
`10`	`8`	`"Jsx.ts$",`
`@@ -29,5 +27,6 @@`
`29`	`27`	`}`
`30`	`28`	`}`
`31`	`29`	`},`
`32`		`- "sourceMaps": true`
	`30`	`+ "sourceMaps": true,`
	`31`	`+ "minify": true`
`33`	`32`	`}`