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

.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
 
- 
+

.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

.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,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:

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