Skip to content

Commit f1deae1

Browse files
alexasselin008alexasselin008
authored
Merge pull request #1231 from gsoft-inc/feature/eslint-config
feat(eslint-plugin): Created an eslint plugin to add rules and configuration
2 parents b7e0e50 + 3d78590 commit f1deae1

File tree

21 files changed

+1549
-70
lines changed

21 files changed

+1549
-70
lines changed

‎.changeset/quick-bottles-chew.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@orbit-ui/eslint-plugin": major
3+
---
4+
5+
Initial release of the orbit-ui eslint plugin

‎.github/workflows/chromatic.yml

+3-12
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,9 @@ jobs:
2020
uses: actions/setup-node@v3
2121
with:
2222
node-version-file: ".nvmrc"
23-
- name: Cache yarn dependencies
24-
uses: actions/cache@v3
25-
id: cache-dependencies
26-
with:
27-
path: node_modules
28-
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
29-
restore-keys: |
30-
${{ runner.ox }}-yarn-
23+
cache: "yarn"
3124
- name: Install Dependencies
32-
if: steps.cache-dependencies.outputs.cache-hit != 'true'
33-
run: |
34-
yarn install --frozen-lockfile
25+
run: yarn install --frozen-lockfile
3526
- name: Build Packages
3627
run: yarn build
3728
- name: Publish to Chromatic
@@ -40,4 +31,4 @@ jobs:
4031
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
4132
buildScriptName: build-sb-chroma
4233

43-
34+

‎.github/workflows/ci.yml

+6-50
Original file line numberDiff line numberDiff line change
@@ -14,89 +14,45 @@ concurrency:
1414
cancel-in-progress: true
1515

1616
jobs:
17-
install-cache:
18-
name: "Install Dependencies"
19-
runs-on: ubuntu-latest
20-
steps:
21-
- name: Checkout Commit
22-
uses: actions/checkout@v3
23-
- name: Setup Node.js
24-
uses: actions/setup-node@v3
25-
with:
26-
node-version-file: ".nvmrc"
27-
- name: Cache yarn dependencies
28-
uses: actions/cache@v3
29-
id: cache-dependencies
30-
with:
31-
path: node_modules
32-
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
33-
restore-keys: |
34-
${{ runner.ox }}-yarn-
35-
- name: Install Dependencies
36-
if: steps.cache-dependencies.outputs.cache-hit != 'true'
37-
run: |
38-
yarn install --frozen-lockfile
39-
4017
eslint:
4118
name: "Eslint"
4219
runs-on: ubuntu-latest
43-
needs: install-cache
4420
steps:
4521
- uses: actions/checkout@v3
4622
- name: Setup Node.js
4723
uses: actions/setup-node@v3
4824
with:
4925
node-version-file: ".nvmrc"
50-
- name: Restore yarn dependencies
51-
uses: actions/cache@v3
52-
id: cache-dependencies
53-
with:
54-
path: node_modules
55-
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
56-
restore-keys: |
57-
${{ runner.ox }}-yarn-
26+
- name: Install Dependencies
27+
run: yarn install --frozen-lockfile
5828
- name: Lint Eslint
5929
run: yarn lint-ci-eslint
6030

6131
stylelint:
6232
name: "Stylelint"
6333
runs-on: ubuntu-latest
64-
needs: install-cache
6534
steps:
6635
- uses: actions/checkout@v3
6736
- name: Setup Node.js
6837
uses: actions/setup-node@v3
6938
with:
7039
node-version-file: ".nvmrc"
71-
- name: Restore yarn dependencies
72-
uses: actions/cache@v3
73-
id: cache-dependencies
74-
with:
75-
path: node_modules
76-
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
77-
restore-keys: |
78-
${{ runner.ox }}-yarn-
40+
- name: Install Dependencies
41+
run: yarn install --frozen-lockfile
7942
- name: Lint Stylelint
8043
run: yarn lint-ci-style
8144

8245
build_and_tests:
8346
name: "Build and Tests"
8447
runs-on: ubuntu-latest
85-
needs: install-cache
8648
steps:
8749
- uses: actions/checkout@v3
8850
- name: Setup Node.js
8951
uses: actions/setup-node@v3
9052
with:
9153
node-version-file: ".nvmrc"
92-
- name: Restore yarn dependencies
93-
uses: actions/cache@v3
94-
id: cache-dependencies
95-
with:
96-
path: node_modules
97-
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
98-
restore-keys: |
99-
${{ runner.ox }}-yarn-
54+
- name: Install Dependencies
55+
run: yarn install --frozen-lockfile
10056
- name: Build Packages
10157
run: yarn build
10258
- name: Run Jest

‎.storybook/components/package-installation-snippet/PackageInstallationSnippet.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import { useState } from "react";
55

66
interface PackageInstallationSnippetProps extends SnippetProps {
77
packageName: string;
8+
workspaceFolder?: "packages" | "tooling";
89
}
910

10-
export function PackageInstallationSnippet({ packageName, ...rest }: PackageInstallationSnippetProps) {
11+
export function PackageInstallationSnippet({ packageName, workspaceFolder = "packages", ...rest }: PackageInstallationSnippetProps) {
1112
const [dependencies, setDependencies] = useState<string>();
1213

1314
if (isNil(dependencies)) {
14-
import(/* webpackMode: "eager" */ `@root/packages/${packageName}/package.json`)
15+
import(/* webpackMode: "eager" */ `@root/${workspaceFolder}/${packageName}/package.json`)
1516
.then(module => {
1617
const json = module.default;
1718
const peerDependencies = !isNil(json.peerDependencies) ? Object.keys(json.peerDependencies).filter(x => x !== "react" && x !== "react-dom") : [];

‎docs/getting-started/Installation.stories.mdx

+24
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,30 @@ To import Orbit experimental components styles, also add the following import de
4343
@import "@orbit-ui/experimental/index.css";
4444
```
4545

46+
## Set up your tooling environment
47+
48+
Orbit offer an ESLint plugin to see in-context help in your IDE. This includes accessibility pointers, deprecation notices, and other helpful tips.
49+
50+
> This config is designed to complement the [suggested Workleap ESLint Configuration](https://github.com/gsoft-inc/wl-web-configs).
51+
52+
First, add the ESlint plugin to your dependencies:
53+
54+
<PackageInstallationSnippet workspaceFolder="tooling" packageName="eslint-plugin" />
55+
56+
Then, add the plugin to your ESlint config. For example, your `.eslintrc.json` file may look like this:
57+
58+
```json
59+
{
60+
"$schema": "https://json.schemastore.org/eslintrc",
61+
"plugins": ["@orbit-ui"],
62+
"extends": [
63+
"plugin:@orbit-ui/recommended"
64+
]
65+
}
66+
```
67+
68+
More about [ESlint configuration](https://eslint.org/docs/latest/use/configure/configuration-files)
69+
4670
## Configure your application
4771

4872
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

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ const { compilerOptions } = require("./tsconfig");
33

44
module.exports = {
55
roots: ["<rootDir>"],
6-
testMatch: ["**/tests/jest/*.test.ts?(x)"],
6+
testMatch: [
7+
"**/tests/jest/*.test.ts?(x)",
8+
"**/tooling/eslint-plugin/tests/*.test.ts?(x)"
9+
],
710
transform: {
811
"^.+\\.(js|jsx|ts|tsx)$": "ts-jest"
912
},

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"license": "Apache-2.0",
77
"workspaces": {
88
"packages": [
9-
"packages/*"
9+
"packages/*",
10+
"tooling/*"
1011
]
1112
},
1213
"scripts": {

‎tooling/eslint-plugin/docs/rules/.gitkeep

Whitespace-only changes.

‎tooling/eslint-plugin/jest.config.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { Config } from "jest";
2+
import { swcConfig } from "./swc.jest";
3+
4+
const config: Config = {
5+
testEnvironment: "node",
6+
transform: {
7+
"^.+\\.(js|ts)$": ["@swc/jest", swcConfig as Record<string, unknown>]
8+
}
9+
};
10+
11+
export default config;

‎tooling/eslint-plugin/lib/config/jsx-a11y.ts

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import type { Linter } from "eslint";
2+
import { sourceFiles } from "../utils/patterns";
3+
4+
const config: Linter.Config = {
5+
overrides: [
6+
{
7+
files: sourceFiles,
8+
plugins: ["jsx-a11y"],
9+
parserOptions: {
10+
ecmaFeatures: {
11+
jsx: true
12+
}
13+
},
14+
rules: {
15+
// This rule ensures that all labels have an associated control that they are labeling.
16+
// However, this rule causes a lot of false positive, since our current implementation of our company's design system
17+
// does not use the "for" attribute in the label element and automatically add it inside Fields.
18+
// Therefore, we are disabling this rule.
19+
"jsx-a11y/label-has-associated-control:": "off"
20+
},
21+
settings: {
22+
"jsx-a11y": {
23+
components: {
24+
// HTML Components Wrappers
25+
"A":"a",
26+
"Address":"address",
27+
"Article":"article",
28+
"HtmlButton":"button",
29+
"Div":"div",
30+
"HtmlFooter":"footer",
31+
"HtmlForm":"form",
32+
"HtmlH1":"h1",
33+
"HtmlH2":"h2",
34+
"HtmlH3":"h3",
35+
"HtmlH4":"h4",
36+
"HtmlH5":"h5",
37+
"HtmlH6":"h6",
38+
"HtmlHeader":"header",
39+
"Img":"img",
40+
"HtmlInput":"input",
41+
"HtmlLabel":"label",
42+
"LI":"li",
43+
"Main":"main",
44+
"Nav":"nav",
45+
"OL":"ol",
46+
"HtmlParagraph":"p",
47+
"HtmlSection":"section",
48+
"Span":"span",
49+
"Table":"table",
50+
"TBody":"tbody",
51+
"TD":"td",
52+
"HtmlTextArea":"textarea",
53+
"TFoot":"tfoot",
54+
"TH":"th",
55+
"THead":"thead",
56+
"TR":"tr",
57+
"UL":"ul",
58+
59+
// Orbit components that are simple HTML element wrappers and behave like html elements
60+
Label : "label",
61+
Link : "a",
62+
TextLink : "a",
63+
IconLink : "a",
64+
TileLink : "a",
65+
Paragraph : "p",
66+
Text: "span",
67+
68+
// Orbit components that are basically Divs synthax shortcuts and behave like html elements
69+
Flex : "div",
70+
Grid : "div",
71+
Inline : "div",
72+
Stack : "div",
73+
ThemeProvider : "div",
74+
Divider : "div",
75+
Transition : "div"
76+
}
77+
}
78+
}
79+
}
80+
]
81+
};
82+
83+
// Using TypeScript "export" keyword until ESLint support ESM.
84+
// Otherwise we must deal with a weird CommonJS output from esbuild which is not worth it.
85+
// For more info, see: https://github.com/evanw/esbuild/issues/1079
86+
export = config;

‎tooling/eslint-plugin/lib/config/recommended.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Linter } from "eslint";
2+
3+
const config: Linter.Config = {
4+
plugins: ["@orbit-ui"],
5+
extends: [
6+
"plugin:@orbit-ui/jsx-a11y"
7+
]
8+
9+
};
10+
11+
// Using TypeScript "export" keyword until ESLint support ESM.
12+
// Otherwise we must deal with a weird CommonJS output from esbuild which is not worth it.
13+
// For more info, see: https://github.com/evanw/esbuild/issues/1079
14+
export = config;

‎tooling/eslint-plugin/lib/index.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { ESLint } from "eslint";
2+
3+
const plugin: ESLint.Plugin = {
4+
configs: {
5+
// Parts
6+
recommended: require("./config/recommended"),
7+
"jsx-a11y": require("./config/jsx-a11y")
8+
}
9+
};
10+
11+
// Using TypeScript "export" keyword until ESLint support ESM.
12+
// Otherwise we must deal with a weird CommonJS output from esbuild which is not worth it.
13+
// For more info, see: https://github.com/evanw/esbuild/issues/1079
14+
export = plugin;

‎tooling/eslint-plugin/lib/rules/.gitkeep

Whitespace-only changes.

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const sourceFiles = [
2+
"*.[jt]s?(x)",
3+
"*.[cm]js"
4+
];

‎tooling/eslint-plugin/package.json

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "@orbit-ui/eslint-plugin",
3+
"author": "Workleap",
4+
"description": "Workleap recommended ESLint rules and configurations when using Orbit.",
5+
"version": "0.0.1",
6+
"keywords": [
7+
"workleap",
8+
"eslint",
9+
"eslintconfig",
10+
"eslintplugin",
11+
"eslint-config",
12+
"eslint-plugin"
13+
],
14+
"repository": {
15+
"type": "git",
16+
"url": "git+https://github.com/gsoft-inc/sg-orbit.git",
17+
"directory": "tooling/eslint-plugin"
18+
},
19+
"license": "Apache-2.0",
20+
"exports": {
21+
".": {
22+
"require": "./dist/index.js",
23+
"import": "./dist/index.js",
24+
"types": "./dist/index.d.ts"
25+
}
26+
},
27+
"types": "./dist/index.d.ts",
28+
"files": [
29+
"docs",
30+
"dist",
31+
"CHANGELOG.md",
32+
"README.md"
33+
],
34+
"scripts": {
35+
"build": "tsup"
36+
},
37+
"dependencies": {
38+
"eslint-plugin-jsx-a11y": "^6.7.1"
39+
},
40+
"peerDependencies": {
41+
"eslint": "*"
42+
},
43+
"devDependencies": {
44+
"@swc/core": "1.3.85",
45+
"@swc/helpers": "0.5.2",
46+
"@swc/jest": "0.2.29",
47+
"@types/eslint": "8.44.2",
48+
"@types/estree": "1.0.1",
49+
"@types/jest": "29.5.5",
50+
"@types/node": "20.6.2",
51+
"@workleap/swc-configs": "2.1.2",
52+
"@workleap/tsup-configs": "3.0.1",
53+
"@workleap/typescript-configs": "3.0.2",
54+
"eslint": "8.49.0",
55+
"jest": "29.7.0",
56+
"ts-node": "10.9.1",
57+
"tsup": "7.2.0",
58+
"typescript": "5.2.2"
59+
},
60+
"publishConfig": {
61+
"access": "public",
62+
"provenance": true
63+
}
64+
}

0 commit comments

Comments
 (0)