build(sb): 👷 bring back webpack, babel & fix logo (#336)

navin-moorthy · web-flow · commit 9a50de2b09ae · 2022-07-04T13:24:56.000+05:30
diff --git a/.prettierignore b/.prettierignore
@@ -55,3 +55,4 @@ yarn.lock
 dist
 CHANGELOG.md
 templates
+*.svg
diff --git a/.storybook/adaptui-tailwind.svg b/.storybook/adaptui-tailwind.svg
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,27 +1,12 @@
-const { mergeConfig } = require("vite");
-
 const config = {
   framework: "@storybook/react",
-  core: {
-    builder: "@storybook/builder-vite",
-    disableTelemetry: true,
-  },
-  async viteFinal(config: any, options: any) {
-    return mergeConfig(config, {
-      // customize the Vite config here
-      build: {
-        minify: false,
-        sourcemap: false,
-      },
-    });
-  },
-
+  core: { builder: "webpack5" },
   // 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 },
-  stories: ["../**/*.stories.@(ts|tsx)"],
+  features: { storyStoreV7: true, babelModeV7: true },
+  stories: ["../src/*/stories/*.stories.@(ts|tsx)"],
   addons: [
-    // "storybook-addon-preview",
+    "storybook-addon-preview",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
     {
@@ -33,6 +18,7 @@ const config = {
       },
     },
   ],
+  staticDirs: ["../assets"],
 };
 
 module.exports = config;
diff --git a/.storybook/storybookTheme.ts b/.storybook/storybookTheme.ts
@@ -1,10 +1,9 @@
 import { create } from "@storybook/theming";
-const logo = require("./adaptui-tailwind.svg") as string;
 
 export default create({
   base: "light",
   brandTitle: "AdaptUI React Tailwind",
   brandUrl: "https://github.com/adaptui/react-tailwind",
-  brandImage: logo,
+  brandImage: "/logo.png",
   brandTarget: "_self",
 });
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,7 +13,7 @@
   "prettier.enable": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.addMissingImports": true,
+    "source.addMissingImports": true
     // "source.organizeImports": true,
     // "source.sortImports": true,
     // "source.fixAll": true
diff --git a/adaptui.config.ts b/adaptui.config.ts
@@ -1,7 +1,7 @@
 import { extendTheme } from "./src";
 
 export const theme = extendTheme({
-  // This only affected the Storybook, doesn't go or merge when used this config as preset
+  // This only affects the Storybook
   extend: {
     button: {
       themeColor: {
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,50 @@
+const BABEL_ENV = process.env.BABEL_ENV;
+const isCommonJS = BABEL_ENV !== undefined && BABEL_ENV === "cjs";
+const isESM = BABEL_ENV !== undefined && BABEL_ENV === "esm";
+const isBuild = !!BABEL_ENV;
+
+module.exports = function (api) {
+  api.cache(true);
+
+  const presets = [
+    [
+      "@babel/env",
+      {
+        modules: isCommonJS ? "commonjs" : false,
+        targets: { esmodules: isESM ? true : undefined },
+      },
+    ],
+    ["@babel/preset-react", { runtime: "automatic" }],
+    "@babel/preset-typescript",
+  ];
+
+  const plugins = [
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
+    isBuild
+      ? [
+          "babel-plugin-jsx-remove-data-test-id",
+          { attributes: ["data-testid"] },
+        ]
+      : {},
+  ];
+
+  return {
+    presets,
+    plugins,
+    env: {
+      test: {
+        presets: [["@babel/env", { targets: { node: "current" } }]],
+      },
+    },
+    ignore: isBuild
+      ? [
+          "**/*/stories",
+          "**/__tests__",
+          "**/testUtils.tsx",
+          "./renderlesskit.config.ts",
+        ]
+      : [],
+  };
+};
diff --git a/global.d.ts b/global.d.ts
diff --git a/package.json b/package.json
@@ -56,6 +56,12 @@
     "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",
+    "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",
     "storybook-build": "yarn previews && build-storybook",
     "prepublishOnly": "pinst --disable",
     "release": "release-it",
@@ -97,6 +103,14 @@
     "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",
@@ -105,31 +119,33 @@
     "@storybook/addon-actions": "6.5.9",
     "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-vite": "^0.1.38",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/manager-webpack5": "6.5.9",
     "@storybook/react": "6.5.9",
     "@swc/cli": "0.1.57",
-    "@swc/core": "1.2.207",
+    "@swc/core": "1.2.208",
+    "@swc/jest": "0.2.21",
     "@tailwindcss/forms": "0.5.2",
     "@testing-library/dom": "8.14.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.2.1",
-    "@types/jest": "28.1.3",
+    "@types/jest": "28.1.4",
     "@types/jest-axe": "3.5.4",
-    "@types/node": "18.0.0",
+    "@types/node": "18.0.1",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.5",
     "@types/testing-library__jest-dom": "5.14.5",
     "all-contributors-cli": "6.20.0",
     "autoprefixer": "10.4.7",
     "axe-core": "4.4.2",
-    "@swc/jest": "0.2.21",
+    "babel-plugin-jsx-remove-data-test-id": "3.0.0",
     "browserlist": "1.0.1",
     "chalk": "4.1.2",
     "concurrently": "7.2.2",
     "cross-env": "7.0.3",
-    "eslint": "8.18.0",
+    "eslint": "8.19.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-prettier": "4.2.1",
@@ -148,14 +164,13 @@
     "patch-package": "6.4.7",
     "pinst": "3.0.0",
     "postcss": "8.4.14",
-    "postcss-cli": "9.1.0",
+    "postcss-cli": "10.0.0",
     "postcss-focus-visible": "6.0.4",
     "postcss-selector-parser": "6.0.10",
     "prettier": "2.7.1",
     "prettier-plugin-tailwindcss": "0.1.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.33.0",
     "react-icons": "4.4.0",
     "release-it": "15.1.1",
     "rimraf": "3.0.2",
@@ -164,7 +179,7 @@
     "storybook-addon-preview": "2.2.0",
     "tailwindcss": "3.1.4",
     "typescript": "4.7.4",
-    "vite": "^2.9.13"
+    "webpack": "5.73.0"
   },
   "peerDependencies": {
     "react": "16.x || 17.x || 18.x",
diff --git a/tsconfig.json b/tsconfig.json
@@ -23,6 +23,5 @@
     "importHelpers": true,
     "sourceMap": true
   },
-  "include": ["global.d.ts"],
   "exclude": ["./out"]
 }
diff --git a/yarn.lock b/yarn.lock
