feat: add button component (#69)

* Add tailwind config and update webpack config

* Add colors variables

* Add popup variables

* Move PostCSS config to webpack config

* Add initial button component

* Update jest config and setup files

* Add initial button tests

* Fix error background

* Add destructive variant

* Update button tests

* Add test job to workflows and update CI test script

* Fix test name

.github/workflows/pr-checks.yml

@@ -38,3 +38,16 @@ jobs:
           name: ${{ github.event.pull_request.number }}-${{ matrix.browser }}
           path: dist/${{ matrix.browser }}/${{ matrix.browser }}.zip
           if-no-files-found: error
+
+  test:
+    name: Test
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Environment setup
+        uses: ./.github/actions/setup
+
+      - name: Test
+        run: pnpm test:ci

.github/workflows/sanity.yml

@@ -25,3 +25,16 @@ jobs:
       - name: Build
         shell: bash
         run: pnpm build ${{ matrix.browser}}
+
+  test:
+    name: Test
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Environment setup
+        uses: ./.github/actions/setup
+
+      - name: Test
+        run: pnpm test:ci

jest.config.ts

@@ -0,0 +1,28 @@
+export default {
+  preset: 'ts-jest',
+  clearMocks: true,
+  displayName: 'WM Extension',
+  collectCoverageFrom: [
+    'src/**/*.test.{js,jsx,ts,tsx}',
+    '!src/**/*.css',
+    '!src/**/*.svg',
+    '!src/**/*.d.ts',
+    '!src/**/index.ts',
+  ],
+  coverageDirectory: 'coverage',
+  coverageProvider: 'v8',
+  maxWorkers: '50%',
+  moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
+  moduleNameMapper: {
+    '@/(.*)': '<rootDir>/src/$1',
+  },
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)'],
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/jest.config.ts'],
+  transform: {
+    '^.+\\.(js|jsx)$': 'babel-jest',
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '\\.(css|less|scss|sass|svg)$': 'jest-transform-stub',
+  },
+}

package.json

@@ -18,11 +18,12 @@
     "lint:prettier": "prettier \"**/*.(md|json|yml)\" --ignore-path .gitignore --check",
     "lint:type": "tsc --noEmit",
     "local-signatures": "pnpm tsx --watch ./local-signatures/index.ts",
-    "test": "jest --maxWorkers=2",
-    "ci:test": "run-s \" test --ci --reporters=\"default\" --reporters=\"github-actions\" \""
+    "test": "jest --maxWorkers=2 --passWithNoTests",
+    "test:ci": "pnpm test -- --reporters=default --reporters=github-actions"
   },
   "dependencies": {
     "axios": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.32.1",
@@ -36,6 +37,7 @@
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
+    "tailwind-merge": "^2.1.0",
     "terser-webpack-plugin": "^5.3.9",
     "uuid": "^9.0.1",
     "webextension-polyfill": "^0.10.0",
@@ -94,6 +96,7 @@
     "postcss-loader": "^7.3.3",
     "prettier": "^3.0.3",
     "tailwindcss": "^3.4.0",
+    "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
     "ts-node": "^10.9.2",
     "tsx": "^4.6.2",