feat: impoves linting and testing in CI (#163)

* feat: adds eslint to as a github action

* feat: setup cache for gh actions

* fix: stylelint not finding any files

* fix: commitlint

* feat: adds css.js files to lint-staged

* feat: adds snapshot testing to CI

.github/workflows/build-design-tokens.yml

@@ -14,11 +14,32 @@ jobs:
     permissions:
       # Give the default GITHUB_TOKEN write permission to commit and push the changed files back to the repository.
       contents: write
+
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
-      - name: Install dependencies
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Get node version
+        id: node
+        run: |
+          echo "::set-output name=version::$(node -v)"
+
+      - name: Get node_modules cache
+        uses: actions/[email protected]
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}-${{ steps.node.outputs.version }}
+
+      - name: Install modules
         run: npm ci
+
       - name: Generate tokens
         run: npm run tokens:generate
       - name: Commit changes

.github/workflows/commitlint.yml

@@ -1,23 +1,23 @@
 name: Commit lint
 
-on: [push, pull_request]
+on: [push]
 
 jobs:
-  default:
+  commitlint:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '18.x'
-
       - name: Checkout code
         uses: actions/checkout@v2
         with:
           fetch-depth: 0
           ref: ${{ github.event.pull_request.head.sha }}
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
       - name: Install commitlint
         run: |
           npm install conventional-changelog-conventionalcommits
@@ -29,4 +29,6 @@ jobs:
 
       - name: Validate PR commits with commitlint
         if: github.event_name == 'pull_request'
-        run: npx commitlint --from ${{ github.event.pull_request.head.sha }}~${{ github.event.pull_request.commits }} --to ${{ github.event.pull_request.head.sha }} --verbose
+        run:
+          npx commitlint --from ${{ github.event.pull_request.head.sha }}~${{ github.event.pull_request.commits }} --to
+          ${{ github.event.pull_request.head.sha }} --verbose

.github/workflows/eslint.yml

@@ -1,19 +1,35 @@
-# name: eslint
+name: eslint
 
-# on: [push, pull_request]
+on: [push, pull_request]
 
-# jobs:
-#   eslint:
-#     runs-on: ubuntu-latest
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
 
-#     steps:
-#       - uses: actions/checkout@v2
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
 
-#       - name: Install dependencies
-#         run: npm install
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
 
-#       - name: Eslint
-#         uses: wagoid/eslint-pr-action@v1
-#         with:
-#           github_token: ${{ secrets.GITHUB_TOKEN }}
-#           eslint_args: '--ext .js,.jsx,.ts,.tsx'
+      - name: Get node version
+        id: node
+        run: |
+          echo "::set-output name=version::$(node -v)"
+
+      - name: Get node_modules cache
+        uses: actions/[email protected]
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}-${{ steps.node.outputs.version }}
+
+      - name: Install modules
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint

.github/workflows/test.yml

@@ -0,0 +1,35 @@
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  snapshot-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Get node version
+        id: node
+        run: |
+          echo "::set-output name=version::$(node -v)"
+
+      - name: Get node_modules cache
+        uses: actions/[email protected]
+        id: node_modules
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}-${{ steps.node.outputs.version }}
+
+      - name: Install modules
+        run: npm ci
+
+      - name: Run Snapshot Tests
+        run: npm run test

.lintstagedrc.json

@@ -0,0 +1 @@
+{ "packages/ui-library/**/*.{ts,tsx,js}": ["eslint --fix", "stylelint", "prettier --write"] }

.prettierrc.json

@@ -6,5 +6,13 @@
   "arrowParens": "always",
   "quoteProps": "consistent",
   "endOfLine": "lf",
-  "proseWrap": "always"
+  "proseWrap": "always",
+  "overrides": [
+    {
+      "files": "*.css.js",
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
 }

package.json

@@ -12,12 +12,6 @@
     "build:types": "npm run build:types --workspace=@boiler/ui-library",
     "lint": "npm run lint --workspace=@boiler/ui-library",
     "format": "npm run format:eslint --workspace=@boiler/ui-library && npm run format:prettier --workspace=@boiler/ui-library",
-    "lint:eslint": "npm run lint:eslint --workspace=@boiler/ui-library",
-    "lint:stylelint": "npm run lint:stylelint --workspace=@boiler/ui-library",
-    "format:eslint": "npm run format:eslint --workspace=@boiler/ui-library",
-    "lint:prettier": "prettier \"**/*.{ts,tsx}\" --check",
-    "format:prettier": "prettier \"**/*.{ts,tsx}\" --write",
-    "build-storybook": "build-storybook",
     "test": "npm run test --workspace=@boiler/ui-library",
     "test:update-snapshots": "npm run test:update-snapshots --workspace=@boiler/ui-library",
     "test:a11y": "npm run test:a11y --workspace=@boiler/storybook",
@@ -41,13 +35,6 @@
     "url": "https://github.com/deven-org/BO1LER-Kitchen/issues"
   },
   "homepage": "https://github.com/deven-org/BO1LER-Kitchen#readme",
-  "lint-staged": {
-    "packages/ui-library/**/*.{ts,tsx}": [
-      "eslint --fix",
-      "stylelint",
-      "prettier --write"
-    ]
-  },
   "devDependencies": {
     "@boiler/react-example-app": "0.0.1",
     "@boiler/figma-design-tokens": "0.0.1",

packages/figma-design-tokens/config/style-dictionary.config.js

@@ -125,10 +125,6 @@ module.exports = {
             return typeToFilter.includes(token.attributes.type);
           },
         },
-        {
-          format: 'javascript/object',
-          destination: '__all-tokens.generated.js',
-        },
       ],
     },
   },

packages/ui-library/.eslintrc.js

@@ -10,5 +10,5 @@ module.exports = {
 
   plugins: ['@typescript-eslint'],
   extends: ['../eslint-config-boiler'],
-  ignorePatterns: ['types/', '*.svg', '*.scss', '*.css', '*.md', '*.config.mjs', '.*'],
+  ignorePatterns: ['types/', '*.svg', '*.scss', '*.css', '*.md', '*.config.mjs', '.*', 'webpack*.js'],
 };

packages/ui-library/.stylelintrc.json

@@ -7,9 +7,10 @@
     "declaration-empty-line-before": null,
     "property-no-vendor-prefix": null,
     "alpha-value-notation": null,
-    "value-keyword-case": ["lower", { "ignoreProperties": ["--font-family-sans"] }],
+    "value-keyword-case": ["lower", { "ignoreProperties": ["--font-family-sans"], "ignoreKeywords": ["/POSTCSS/"] }],
     "selector-class-pattern": null,
     "no-descending-specificity": null,
-    "value-no-vendor-prefix": null
+    "value-no-vendor-prefix": null,
+    "font-family-name-quotes": null
   }
 }

packages/ui-library/package.json

@@ -8,8 +8,10 @@
     "lint": "npm run lint:eslint && npm run lint:stylelint",
     "format": "npm run format:eslint && npm run format:prettier",
     "lint:eslint": "eslint 'src/**' --ext .ts,.tsx",
-    "lint:stylelint": "stylelint 'src/**/css.ts'",
+    "lint:stylelint": "stylelint 'src/**/*.css.js'",
     "format:eslint": "eslint 'src/**' --ext .ts,.tsx --fix",
+    "lint:prettier": "prettier \"**/*.{ts,tsx}\" --check",
+    "format:prettier": "prettier \"**/*.{ts,tsx}\" --write",
     "test": "wtr --config web-test-runner.config.mjs",
     "test:update-snapshots": "npm run test -- --update-snapshots"
   },