Merge pull request #1231 from gsoft-inc/feature/eslint-config

feat(eslint-plugin): Created an eslint plugin to add rules and configuration
gsoft-inc · Sep 27, 2023 · f1deae1 · f1deae1
2 parents b7e0e50 + 3d78590
commit f1deae1
Show file tree

Hide file tree

Showing 21 changed files with 1,549 additions and 70 deletions.
diff --git a/.changeset/quick-bottles-chew.md b/.changeset/quick-bottles-chew.md
@@ -0,0 +1,5 @@
+---
+"@orbit-ui/eslint-plugin": major
+---
+
+Initial release of the orbit-ui eslint plugin
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -20,18 +20,9 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version-file: ".nvmrc"
-            - name: Cache yarn dependencies
-              uses: actions/cache@v3
-              id: cache-dependencies
-              with:
-                  path: node_modules
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                    ${{ runner.ox }}-yarn-
+                  cache: "yarn"
             - name: Install Dependencies
-              if: steps.cache-dependencies.outputs.cache-hit != 'true'
-              run: |
-                yarn install --frozen-lockfile
+              run: yarn install --frozen-lockfile
             - name: Build Packages
               run: yarn build
             - name: Publish to Chromatic
@@ -40,4 +31,4 @@ jobs:
                   projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
                   buildScriptName: build-sb-chroma
 
-            
+
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,89 +14,45 @@ concurrency:
     cancel-in-progress: true
 
 jobs:
-    install-cache:
-        name: "Install Dependencies"
-        runs-on: ubuntu-latest
-        steps:
-            - name: Checkout Commit
-              uses: actions/checkout@v3
-            - name: Setup Node.js
-              uses: actions/setup-node@v3
-              with:
-                  node-version-file: ".nvmrc"
-            - name: Cache yarn dependencies
-              uses: actions/cache@v3
-              id: cache-dependencies
-              with:
-                  path: node_modules
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                    ${{ runner.ox }}-yarn-
-            - name: Install Dependencies
-              if: steps.cache-dependencies.outputs.cache-hit != 'true'
-              run: |
-                yarn install --frozen-lockfile
-          
     eslint:
         name: "Eslint"
         runs-on: ubuntu-latest
-        needs: install-cache
         steps:
             - uses: actions/checkout@v3
             - name: Setup Node.js
               uses: actions/setup-node@v3
               with:
                   node-version-file: ".nvmrc"
-            - name: Restore yarn dependencies
-              uses: actions/cache@v3
-              id: cache-dependencies
-              with:
-                  path: node_modules
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                    ${{ runner.ox }}-yarn-
+            - name: Install Dependencies
+              run: yarn install --frozen-lockfile
             - name: Lint Eslint
               run: yarn lint-ci-eslint
 
     stylelint:
         name: "Stylelint"
         runs-on: ubuntu-latest
-        needs: install-cache
         steps:
             - uses: actions/checkout@v3
             - name: Setup Node.js
               uses: actions/setup-node@v3
               with:
                   node-version-file: ".nvmrc"
-            - name: Restore yarn dependencies
-              uses: actions/cache@v3
-              id: cache-dependencies
-              with:
-                  path: node_modules
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                    ${{ runner.ox }}-yarn-
+            - name: Install Dependencies
+              run: yarn install --frozen-lockfile
             - name: Lint Stylelint
               run: yarn lint-ci-style
 
     build_and_tests:
         name: "Build and Tests"
         runs-on: ubuntu-latest
-        needs: install-cache
         steps:
             - uses: actions/checkout@v3
             - name: Setup Node.js
               uses: actions/setup-node@v3
               with:
                   node-version-file: ".nvmrc"
-            - name: Restore yarn dependencies
-              uses: actions/cache@v3
-              id: cache-dependencies
-              with:
-                  path: node_modules
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                    ${{ runner.ox }}-yarn-
+            - name: Install Dependencies
+              run: yarn install --frozen-lockfile
             - name: Build Packages
               run: yarn build
             - name: Run Jest

diff --git a/.storybook/components/package-installation-snippet/PackageInstallationSnippet.tsx b/.storybook/components/package-installation-snippet/PackageInstallationSnippet.tsx
@@ -5,13 +5,14 @@ import { useState } from "react";
 
 interface PackageInstallationSnippetProps extends SnippetProps {
     packageName: string;
+    workspaceFolder?: "packages" | "tooling";
 }
 
-export function PackageInstallationSnippet({ packageName, ...rest }: PackageInstallationSnippetProps) {
+export function PackageInstallationSnippet({ packageName, workspaceFolder = "packages", ...rest }: PackageInstallationSnippetProps) {
     const [dependencies, setDependencies] = useState<string>();
 
     if (isNil(dependencies)) {
-        import(/* webpackMode: "eager" */ `@root/packages/${packageName}/package.json`)
+        import(/* webpackMode: "eager" */ `@root/${workspaceFolder}/${packageName}/package.json`)
             .then(module => {
                 const json = module.default;
                 const peerDependencies = !isNil(json.peerDependencies) ? Object.keys(json.peerDependencies).filter(x => x !== "react" && x !== "react-dom") : [];

diff --git a/docs/getting-started/Installation.stories.mdx b/docs/getting-started/Installation.stories.mdx
@@ -43,6 +43,30 @@ To import Orbit experimental components styles, also add the following import de
 @import "@orbit-ui/experimental/index.css";
 ```
 
+## Set up your tooling environment
+
+Orbit offer an ESLint plugin to see in-context help in your IDE. This includes accessibility pointers, deprecation notices, and other helpful tips.
+
+> This config is designed to complement the [suggested Workleap ESLint Configuration](https://github.com/gsoft-inc/wl-web-configs).
+
+First, add the ESlint plugin to your dependencies:
+
+<PackageInstallationSnippet workspaceFolder="tooling" packageName="eslint-plugin" />
+
+Then, add the plugin to your ESlint config. For example, your `.eslintrc.json` file may look like this:
+
+```json
+{
+    "$schema": "https://json.schemastore.org/eslintrc",
+    "plugins": ["@orbit-ui"],
+    "extends": [
+        "plugin:@orbit-ui/recommended"
+    ]
+}
+```
+
+More about [ESlint configuration](https://eslint.org/docs/latest/use/configure/configuration-files)
+
 ## Configure your application
 
 Below is an example of how to configure an application with a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbit) ShareGate theme object:

diff --git a/jest.config.js b/jest.config.js
@@ -3,7 +3,10 @@ const { compilerOptions } = require("./tsconfig");
 
 module.exports = {
     roots: ["<rootDir>"],
-    testMatch: ["**/tests/jest/*.test.ts?(x)"],
+    testMatch: [
+        "**/tests/jest/*.test.ts?(x)",
+        "**/tooling/eslint-plugin/tests/*.test.ts?(x)"
+    ],
     transform: {
         "^.+\\.(js|jsx|ts|tsx)$": "ts-jest"
     },

diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "license": "Apache-2.0",
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "tooling/*"
     ]
   },
   "scripts": {

diff --git a/tooling/eslint-plugin/docs/rules/.gitkeep b/tooling/eslint-plugin/docs/rules/.gitkeep
diff --git a/tooling/eslint-plugin/jest.config.ts b/tooling/eslint-plugin/jest.config.ts
@@ -0,0 +1,11 @@
+import type { Config } from "jest";
+import { swcConfig } from "./swc.jest";
+
+const config: Config = {
+    testEnvironment: "node",
+    transform: {
+        "^.+\\.(js|ts)$": ["@swc/jest", swcConfig as Record<string, unknown>]
+    }
+};
+
+export default config;
diff --git a/tooling/eslint-plugin/lib/config/jsx-a11y.ts b/tooling/eslint-plugin/lib/config/jsx-a11y.ts
@@ -0,0 +1,86 @@
+import type { Linter } from "eslint";
+import { sourceFiles } from "../utils/patterns";
+
+const config: Linter.Config = {
+    overrides: [
+        {
+            files: sourceFiles,
+            plugins: ["jsx-a11y"],
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true
+                }
+            },
+            rules: {
+                // This rule ensures that all labels have an associated control that they are labeling.
+                // However, this rule causes a lot of false positive, since our current implementation of our company's design system
+                // does not use the "for" attribute in the label element and automatically add it inside Fields.
+                // Therefore, we are disabling this rule.
+                "jsx-a11y/label-has-associated-control:": "off"
+            },
+            settings: {
+                "jsx-a11y": {
+                    components: {
+                        // HTML Components Wrappers
+                        "A":"a",
+                        "Address":"address",
+                        "Article":"article",
+                        "HtmlButton":"button",
+                        "Div":"div",
+                        "HtmlFooter":"footer",
+                        "HtmlForm":"form",
+                        "HtmlH1":"h1",
+                        "HtmlH2":"h2",
+                        "HtmlH3":"h3",
+                        "HtmlH4":"h4",
+                        "HtmlH5":"h5",
+                        "HtmlH6":"h6",
+                        "HtmlHeader":"header",
+                        "Img":"img",
+                        "HtmlInput":"input",
+                        "HtmlLabel":"label",
+                        "LI":"li",
+                        "Main":"main",
+                        "Nav":"nav",
+                        "OL":"ol",
+                        "HtmlParagraph":"p",
+                        "HtmlSection":"section",
+                        "Span":"span",
+                        "Table":"table",
+                        "TBody":"tbody",
+                        "TD":"td",
+                        "HtmlTextArea":"textarea",
+                        "TFoot":"tfoot",
+                        "TH":"th",
+                        "THead":"thead",
+                        "TR":"tr",
+                        "UL":"ul",
+
+                        // Orbit components that are simple HTML element wrappers and behave like html elements
+                        Label : "label",
+                        Link : "a",
+                        TextLink : "a",
+                        IconLink  : "a",
+                        TileLink : "a",
+                        Paragraph : "p",
+                        Text: "span",
+
+                        // Orbit components that are basically Divs synthax shortcuts and behave like html elements
+                        Flex : "div",
+                        Grid : "div",
+                        Inline : "div",
+                        Stack : "div",
+                        ThemeProvider : "div",
+                        Divider : "div",
+                        Transition  : "div"
+                    }
+                }
+            }
+        }
+    ]
+};
+
+// Using TypeScript "export" keyword until ESLint support ESM.
+// Otherwise we must deal with a weird CommonJS output from esbuild which is not worth it.
+// For more info, see: https://github.com/evanw/esbuild/issues/1079
+export = config;
diff --git a/tooling/eslint-plugin/lib/config/recommended.ts b/tooling/eslint-plugin/lib/config/recommended.ts
@@ -0,0 +1,14 @@
+import type { Linter } from "eslint";
+
+const config: Linter.Config = {
+    plugins: ["@orbit-ui"],
+    extends: [
+        "plugin:@orbit-ui/jsx-a11y"
+    ]
+
+};
+
+// Using TypeScript "export" keyword until ESLint support ESM.
+// Otherwise we must deal with a weird CommonJS output from esbuild which is not worth it.
+// For more info, see: https://github.com/evanw/esbuild/issues/1079
+export = config;
diff --git a/tooling/eslint-plugin/lib/index.ts b/tooling/eslint-plugin/lib/index.ts
@@ -0,0 +1,14 @@
+import type { ESLint } from "eslint";
+
+const plugin: ESLint.Plugin = {
+    configs: {
+        // Parts
+        recommended: require("./config/recommended"),
+        "jsx-a11y": require("./config/jsx-a11y")
+    }
+};
+
+// Using TypeScript "export" keyword until ESLint support ESM.
+// Otherwise we must deal with a weird CommonJS output from esbuild which is not worth it.
+// For more info, see: https://github.com/evanw/esbuild/issues/1079
+export = plugin;
diff --git a/tooling/eslint-plugin/lib/rules/.gitkeep b/tooling/eslint-plugin/lib/rules/.gitkeep
diff --git a/tooling/eslint-plugin/lib/utils/patterns.ts b/tooling/eslint-plugin/lib/utils/patterns.ts
@@ -0,0 +1,4 @@
+export const sourceFiles = [
+    "*.[jt]s?(x)",
+    "*.[cm]js"
+];
diff --git a/tooling/eslint-plugin/package.json b/tooling/eslint-plugin/package.json
@@ -0,0 +1,64 @@
+{
+    "name": "@orbit-ui/eslint-plugin",
+    "author": "Workleap",
+    "description": "Workleap recommended ESLint rules and configurations when using Orbit.",
+    "version": "0.0.1",
+    "keywords": [
+        "workleap",
+        "eslint",
+        "eslintconfig",
+        "eslintplugin",
+        "eslint-config",
+        "eslint-plugin"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/gsoft-inc/sg-orbit.git",
+        "directory": "tooling/eslint-plugin"
+    },
+    "license": "Apache-2.0",
+    "exports": {
+        ".": {
+            "require": "./dist/index.js",
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "types": "./dist/index.d.ts",
+    "files": [
+        "docs",
+        "dist",
+        "CHANGELOG.md",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsup"
+    },
+    "dependencies": {
+        "eslint-plugin-jsx-a11y": "^6.7.1"
+    },
+    "peerDependencies": {
+        "eslint": "*"
+    },
+    "devDependencies": {
+        "@swc/core": "1.3.85",
+        "@swc/helpers": "0.5.2",
+        "@swc/jest": "0.2.29",
+        "@types/eslint": "8.44.2",
+        "@types/estree": "1.0.1",
+        "@types/jest": "29.5.5",
+        "@types/node": "20.6.2",
+        "@workleap/swc-configs": "2.1.2",
+        "@workleap/tsup-configs": "3.0.1",
+        "@workleap/typescript-configs": "3.0.2",
+        "eslint": "8.49.0",
+        "jest": "29.7.0",
+        "ts-node": "10.9.1",
+        "tsup": "7.2.0",
+        "typescript": "5.2.2"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    }
+}