build(sb): 👷 update actions, sb & vscode configs

.github/workflows/main.yml

@@ -0,0 +1,130 @@
+name: main
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  install:
+    name: Install node_modules
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules # use this to check for `cache-hit` (`steps.cache-node-modules.outputs.cache-hit != 'true'`)
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install Dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
+
+  lint:
+    name: Lint
+    needs: install
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules # use this to check for `cache-hit` (`steps.cache-node-modules.outputs.cache-hit != 'true'`)
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install Dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+  build:
+    name: Build
+    needs: install
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules # use this to check for `cache-hit` (`steps.cache-node-modules.outputs.cache-hit != 'true'`)
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install Dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
+
+      - name: Built
+        run: yarn build
+
+  test:
+    name: Test (${{ matrix.shard }})
+    needs: install
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: ["1/2", "2/2"]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules # use this to check for `cache-hit` (`steps.cache-node-modules.outputs.cache-hit != 'true'`)
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install Dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
+
+      - name: Test
+        run: yarn test -- --maxWorkers 2 --shard ${{ matrix.shard }}

.storybook/main.js → .storybook/main.ts

@@ -1,10 +1,10 @@
-module.exports = {
+const config = {
   framework: "@storybook/react",
   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, babelModeV7: true },
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/*/stories/*.stories.@(ts|tsx)"],
   addons: [
     "storybook-addon-preview",
     "@storybook/addon-essentials",
@@ -18,4 +18,7 @@ module.exports = {
       },
     },
   ],
+  staticDirs: ["../assets"],
 };
+
+module.exports = config;

.storybook/preview.js → .storybook/preview.tsx

@@ -11,7 +11,7 @@ export const parameters = {
 };
 
 export const decorators = [
-  (Story, context) => {
+  (Story: any, context: any) => {
     document.body.id = kebabCase(context.kind);
     document.body.classList.add("font-sans");
     document.body.classList.add("antialiased");

.storybook/storybookTheme.ts

@@ -0,0 +1,9 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "AdaptUI React",
+  brandUrl: "https://github.com/adaptui/react",
+  brandImage: "/logo.png",
+  brandTarget: "_self",
+});

.vscode/settings.json

@@ -1,7 +1,33 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "git.branchProtection": ["main"],
-  "yaml.schemas": {
-    "https://json.schemastore.org/github-workflow.json": "file:///Users/navin/Documents/github/react-tailwind/.github/workflows/build.yml"
-  }
+  "editor.tabSize": 2,
+  "editor.guides.bracketPairs": true,
+  "editor.rulers": [80, 100, 120],
+  "editor.wordWrap": "bounded",
+  "editor.wordWrapColumn": 120,
+  "files.insertFinalNewline": true,
+  "files.trimTrailingWhitespace": true,
+  "files.eol": "\n",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.enable": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.addMissingImports": true,
+    // "source.organizeImports": true,
+    // "source.sortImports": true,
+    // "source.fixAll": true
+    "source.fixAll.eslint": true
+    // "source.fixAll.stylelint": true
+  },
+  "eslint.enable": true,
+  "eslint.useESLintClass": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "vue",
+    "typescript",
+    "typescriptreact",
+    "html"
+  ]
 }

package.json

@@ -138,11 +138,11 @@
     "@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/jest-in-case": "1.0.6",
     "@types/mockdate": "3.0.0",
-    "@types/node": "18.0.0",
+    "@types/node": "18.0.1",
     "@types/raf": "3.4.0",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.5",
@@ -151,26 +151,26 @@
     "all-contributors-cli": "6.20.0",
     "ast-to-markdown": "1.0.0",
     "autoprefixer": "10.4.7",
-    "babel-jest": "28.1.1",
+    "babel-jest": "28.1.2",
     "babel-loader": "8.2.5",
     "babel-plugin-jsx-remove-data-test-id": "3.0.0",
     "chalk": "4.1.2",
     "codesandbox": "2.2.3",
     "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.1.0",
+    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "eslint-plugin-storybook": "0.5.13",
     "gacp": "3.0.2",
     "glob": "8.0.3",
     "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",
     "jest-in-case": "1.0.2",
     "jest-matcher-utils": "28.1.1",
     "lint-staged": "13.0.3",
@@ -191,7 +191,7 @@
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.33.0",
+    "react-hook-form": "7.33.1",
     "react-test-renderer": "18.2.0",
     "react-transition-group": "4.4.2",
     "react-virtual": "2.10.4",
@@ -203,7 +203,7 @@
     "tailwindcss": "3.1.4",
     "ts-jest": "28.0.5",
     "ts-morph": "15.1.0",
-    "ts-node": "10.8.1",
+    "ts-node": "10.8.2",
     "typescript": "4.7.4",
     "webpack": "5.73.0",
     "yaml": "2.1.1"