create eslint plugin (#219)

* add eslint plugin

* add rule for import deprecation

* add tests to the test workflow

* rename workflow

* add changeset

* add vscode linter

* add linter rules to the engine

* add lint to the test workflow

* finish linting

* remove all warnings from the repo

* remove one last warning

* match the absolute path of the imported file

* document the new rules

* fix compileIcon test

* fix mor etests on compile icon

* fix tests again

* add tests for icons

* add changeset

* some additional tests

* fix monorepo once more

* fix eslint tests

* build: fix test again

* add content to mock import

* build icons

* order tests by speed

* simplify yml code

* fix build

* fix build process

* fix most ts errors

* fix most of it

* make sure all types pass

* remove all extraneous tsconfig files

* refactor: script before template

* fix lint

* remove the open prop on accordion

* remove alert tsconfig

* test: changing btn attrs repaint vue component

* de-comment react changes

* update dependencies

* fix loading of icons

* remove useless component

* better docgen config

* fix test apps tsconfigs

* a last set of fixes

* fix one more project

* fix types

* update name of job

* fix percy snapshots

Author: Barthélémy Ledoux

.changeset/eslint-plugin.md

@@ -0,0 +1,5 @@
+---
+"@cypress-design/eslint-plugin": patch
+---
+
+create eslint plugin

.changeset/refactor-eslint.md

@@ -0,0 +1,15 @@
+---
+'@cypress-design/react-statusicon': patch
+'@cypress-design/vue-statusicon': patch
+'@cypress-design/react-button': patch
+'@cypress-design/react-alert': patch
+'@cypress-design/vue-button': patch
+'@cypress-design/react-icon': patch
+'@cypress-design/react-tabs': patch
+'@cypress-design/vue-alert': patch
+'@cypress-design/vue-icon': patch
+'@cypress-design/icon-registry': patch
+'@cypress-design/css': patch
+---
+
+refactor some typings so eslint passes without warning

.eslintignore

@@ -0,0 +1,5 @@
+**/dist
+**/iconsData
+**/_TreeShakableIcons.ts
+icon-registry/src/icons.ts
+icon-registry/src/iconsList.ts

.eslintrc.cjs

@@ -12,4 +12,111 @@ module.exports = {
     'no-only-tests/no-only-tests': 'error',
     'no-unused-vars': 'off',
   },
+  overrides: [
+    {
+      files: ['packages/eslint-plugin/**/*.js'],
+      env: {
+        node: true,
+      },
+    },
+    {
+      files: ['{packages,css,icon-registry}/**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint'],
+      extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        sourceType: 'module',
+        project: ['./tsconfig.json'],
+      },
+      env: {
+        node: true,
+      },
+    },
+    {
+      files: ['components/*/react/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint'],
+      extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        sourceType: 'module',
+        project: ['./tsconfig.react.json'],
+      },
+      env: {
+        browser: true,
+      },
+    },
+    {
+      files: ['components/*/react/*.{cy,rootStory,rootstory}.tsx'],
+      plugins: ['@typescript-eslint'],
+      extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        sourceType: 'module',
+        project: ['./tsconfig.react.json'],
+      },
+      rules: {
+        '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+      env: {
+        browser: true,
+      },
+    },
+    {
+      files: ['components/*/vue/*.{ts,vue}'],
+      plugins: ['@typescript-eslint'],
+      extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+        project: ['./tsconfig.vue.json', './tsconfig.json'],
+      },
+      env: {
+        browser: true,
+      },
+    },
+    {
+      files: ['test/vue-app/src/*.{ts,vue}'],
+      plugins: ['@typescript-eslint', '@cypress-design'],
+      extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+        project: ['./test/vue-app/tsconfig.json'],
+      },
+      settings: {
+        'import/resolver': {
+          typescript: {
+            project: ['./test/vue-app/tsconfig.json'],
+          },
+        },
+      },
+      rules: {
+        '@cypress-design/deprecate-imports': [
+          'warn',
+          [
+            {
+              name: 'Button',
+              source: ['**/invalid-path/*'],
+              docs: 'https://design.cypress.io/components/vue/Button',
+            },
+          ],
+        ],
+        '@cypress-design/deprecate-imports-again': [
+          'error',
+          [
+            {
+              name: 'Lodash',
+              source: 'lodash',
+              docs: 'https://design.cypress.io/components/vue/Button',
+            },
+          ],
+        ],
+      },
+    },
+  ],
 }

.github/workflows/e2e-tests.yml

@@ -3,7 +3,7 @@ name: Build each test
 on: [push]
 
 jobs:
-  cypress-run:
+  build-projects:
     runs-on: ubuntu-latest
     steps:
       - name: Get Yarn cache path

.github/workflows/cypress.yml renamed to .github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Cypress Tests
+name: Tests
 
 on: [push]
 
@@ -34,14 +34,29 @@ jobs:
         env:
           CI: true
 
+      - name: Lint all files
+        run: yarn eslint .
+
+      - name: Run Eslint Plugin Tests
+        run: yarn test:eslint-plugin      
+
+      - name: Generate icon files
+        run: |
+          yarn turbo run build --filter=@cypress-design/css
+          yarn workspace @cypress-design/icon-registry run build:svg
+          yarn workspace @cypress-design/icon-registry run build:icons 
+
       - name: Run Unit Tests
         run: yarn test
 
       - name: Build Components
         run: yarn run build:components
 
       - name: Check global types
-        run: yarn vue-tsc --noEmit
+        run: |
+          yarn vue-tsc --noEmit -p . 
+          yarn tsc --noEmit --project ./tsconfig.react.json
+          yarn vue-tsc --noEmit --project ./tsconfig.vue.json 
 
       # run cypress component tests
       - name: Cypress run CT

.vscode/settings.json

@@ -5,5 +5,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "eslint.validate": ["javascript", "typescript", "vue"]
 }