feat(eslint-plugin): Created an eslint plugin to add rules and configuration

.changeset/quick-bottles-chew.md

@@ -0,0 +1,5 @@
+---
+"@orbit-ui/eslint-plugin": major
+---
+
+Initial release of the orbit-ui eslint plugin

.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") : [];

docs/getting-started/Installation.stories.mdx

@@ -43,6 +43,29 @@ 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.
+
+First, add the ESlint plugin to your dependencies:
+
+<PackageInstallationSnippet workspaceFolder="tooling" packageName="eslint-plugin" />
+
+Second, 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:

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"
     },

package.json

@@ -6,7 +6,8 @@
   "license": "Apache-2.0",
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "tooling/*"
     ]
   },
   "scripts": {

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;

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;

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;

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;

tooling/eslint-plugin/lib/utils/patterns.ts

@@ -0,0 +1,4 @@
+export const sourceFiles = [
+    "*.[jt]s?(x)",
+    "*.[cm]js"
+];

tooling/eslint-plugin/package.json

@@ -0,0 +1,69 @@
+{
+    "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": "*"
+    },
+    "peerDependenciesMeta": {
+        "eslint": {
+            "optional": true
+        }
+    },
+    "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
+    }
+}

tooling/eslint-plugin/swc.jest.ts

@@ -0,0 +1,3 @@
+import { defineJestConfig } from "@workleap/swc-configs";
+
+export const swcConfig = defineJestConfig();

tooling/eslint-plugin/tests/export.test.ts

@@ -0,0 +1,20 @@
+import fs from "fs";
+import path from "path";
+import plugin from "../lib";
+
+const rules = fs.readdirSync(path.resolve(__dirname, "../lib/rules")).map(x => path.parse(x).name).filter(x => x !== ".gitkeep");
+const configs = fs.readdirSync(path.resolve(__dirname, "../lib/config")).map(x => path.parse(x)).filter(x => x.ext).map(x => x.name);
+
+const exportedConfigs = Object.keys(plugin.configs ?? {});
+configs.forEach(config => {
+    test(`Config ${config} is exported`, () => {
+        expect(exportedConfigs.includes(config)).toBeTruthy();
+    });
+});
+
+const exportedRules = Object.keys(plugin.rules ?? {});
+rules.forEach(rule => {
+    test(`Rule ${rule} is exported`, () => {
+        expect(exportedRules.includes(rule)).toBeTruthy();
+    });
+});

tooling/eslint-plugin/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "@workleap/typescript-configs/library",
+    "compilerOptions": {
+        "moduleResolution": "Node",
+        "module": "CommonJS"
+    },
+    "exclude": ["dist", "node_modules"]
+}

tooling/eslint-plugin/tsup.config.ts

@@ -0,0 +1,7 @@
+import { defineBuildConfig } from "@workleap/tsup-configs";
+
+export default defineBuildConfig({
+    entry: ["./lib"],
+    format: "cjs",
+    platform: "node"
+});