Merge branch 'main' of https://github.com/mcnaveen/adaptui-react-tailwind into style/logo

Author: mcnaveen

.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'

.storybook/main.ts

@@ -1,12 +1,27 @@
+const { mergeConfig } = require("vite");
+
 const config = {
   framework: "@storybook/react",
-  core: { builder: "webpack5" },
+  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,
+      },
+    });
+  },
+
   // 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 },
-  stories: ["../src/*/stories/*.stories.@(ts|tsx)"],
+  features: { storyStoreV7: true },
+  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
+}

babel.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"],
+  },
 };

jest.config.ts jest.config.jsjest.config.ts renamed to jest.config.js

@@ -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,26 +124,24 @@
     "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",
     "cross-env": "7.0.3",
     "eslint": "8.18.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-prettier": "4.1.0",
+    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "eslint-plugin-storybook": "0.5.13",
     "focus-visible": "5.2.0",
     "gacp": "3.0.2",
     "glob-fs": "0.1.7",
     "husky": "8.0.1",
-    "jest": "28.1.1",
+    "jest": "28.1.2",
     "jest-axe": "6.0.0",
-    "jest-environment-jsdom": "28.1.1",
+    "jest-environment-jsdom": "28.1.2",
     "lint-staged": "13.0.3",
     "node-fetch": "2.6.7",
     "outdent": "0.8.0",
@@ -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",

package.json

@@ -19,7 +19,7 @@ export default {
     preview: createPreviewTabs({ js, ts }),
   },
   argTypes: createControls("badge", {
-    ignore: ["wrapElement", "as", "ref"],
+    ignore: ["wrapElement", "as", "ref", "prefix"],
   }),
 } as Meta;
 
@@ -80,5 +80,5 @@ export const Outline: Story = {
 
 export const Prefix: Story = {
   ...Default,
-  args: { prefix: <SlotIcon /> },
+  args: { ...Default.args, prefix: <SlotIcon /> },
 };

src/badge/stories/BadgeBasic.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 },