build: introduce eslint/prettier and CI

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ]
+}

.github/workflows/examples-ci.yaml

@@ -0,0 +1,23 @@
+name: examples-ci
+on:
+  pull_request:
+
+defaults:
+  run:
+    working-directory: ./packages/examples
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - run: pnpm install
+      - run: pnpm run build
+      - run: pnpm run lint
+

.github/workflows/package-ci.yaml

@@ -0,0 +1,22 @@
+name: package-ci
+on:
+  pull_request:
+
+defaults:
+  run:
+    working-directory: ./packages/react-focus-rings
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - run: pnpm install
+      - run: pnpm run build
+      - run: pnpm run lint

.prettierrc

@@ -6,8 +6,6 @@
   "singleQuote": false,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "jsxBracketSameLine": true,
-  "fluid": false,
   "proseWrap": "always",
   "overrides": [
     {
@@ -18,4 +16,4 @@
     }
   ],
   "arrowParens": "always"
-}
+}

package.json

@@ -1,17 +1,23 @@
 {
-    "name": "react-focus-rings-base",
-    "private": true,
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
-    "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "keywords": [],
-    "author": "Jon",
-    "license": "ISC",
-    "devDependencies": {
-      "@types/node": "^18.7.16",
-      "typescript": "^4.8.3"
-    }
-  }
+  "name": "react-focus-rings-base",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "format": "prettier --write '**/*.tsx'",
+    "lint:fix": "eslint --fix '**/*.tsx'",
+    "lint": "eslint"
+  },
+  "keywords": [],
+  "author": "Jon",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^18.7.16",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "eslint": "^8.56.0",
+    "prettier": "^3.1.1",
+    "typescript": "^4.8.3"
+  }
+}

packages/examples/index.tsx

@@ -36,7 +36,8 @@ function Scrollable({ children }: { children: React.ReactNode }) {
         overflow: "scroll",
         backgroundColor: "#eee",
         padding: 8,
-      }}>
+      }}
+    >
       <FocusRingScope containerRef={containerRef}>{children}</FocusRingScope>
     </div>
   );

packages/examples/package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "fix": "eslint --fix '**/*.tsx'",
+    "lint": "eslint"
   },
   "dependencies": {
     "react-focus-rings": "workspace:../react-focus-rings",

packages/examples/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react()],
+});

packages/react-focus-rings/package.json

@@ -45,7 +45,9 @@
     "build": "vite build && pnpm types",
     "preview": "vite preview",
     "prepublishOnly": "pnpm run -s build",
-    "types": "tsc --project tsconfig.build.json"
+    "types": "tsc --project tsconfig.build.json",
+    "fix": "eslint --fix '**/*.tsx'",
+    "lint": "eslint"
   },
   "peerDependencies": {
     "react": "16.8 - 18"
@@ -61,7 +63,6 @@
     "@types/react-dom": "^18.0.6",
     "@types/shallowequal": "^1.1.1",
     "@vitejs/plugin-react": "^2.1.0",
-    "prettier": "^2.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.8.3",

packages/react-focus-rings/src/FocusRingScope.tsx

@@ -19,7 +19,6 @@ export default function FocusRingScope(props: FocusRingScopeProps) {
     manager.current.setContainer(containerRef.current);
     manager.current.setThemeOptions(themeOptions);
     // We do actually want this to run every time `current` changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [containerRef.current]);
 
   return (
@@ -32,7 +31,7 @@ export default function FocusRingScope(props: FocusRingScopeProps) {
 
 function Ring() {
   const ringContext = React.useContext(FocusRingContext);
-  const [, forceUpdate] = React.useState<{}>({});
+  const [, forceUpdate] = React.useState({});
   React.useEffect(() => {
     ringContext.invalidate = () => forceUpdate({});
     return () => {

packages/react-focus-rings/src/util/Color.d.ts

@@ -3,47 +3,47 @@
  * https://github.com/dequelabs/axe-core/blob/82d43a0593a8dc9733b97138f8e6f934ed25dea2/lib/commons/color/color.js#L1
  */
 declare type HSLA = {
-    hue: number;
-    saturation: number;
-    lightness: number;
-    alpha: number;
+  hue: number;
+  saturation: number;
+  lightness: number;
+  alpha: number;
 };
 export default class Color {
-    red: number;
-    green: number;
-    blue: number;
-    alpha: number;
-    constructor(red: number, green: number, blue: number, alpha: number);
-    /**
-     * Provide the hex string value for the color
-     */
-    toHexString(): string;
-    /**
-     * Parse any valid color string and return a new Color object. If the string
-     * is not a valid color string, this will return undefined
-     */
-    static parseString(colorString: string): Color | undefined;
-    /**
-     * Set the color value based on a CSS RGB/RGBA string.
-     */
-    static parseRgbString(colorString: string): Color | undefined;
-    /**
-     * Set the color value based on a CSS RGB/RGBA string.
-     */
-    static parseHexString(colorString: string): Color | undefined;
-    /**
-     * Set the color value based on a CSS rgba/hsla string.
-     */
-    static parseColorFnString(colorString: string): Color | undefined;
-    /**
-     * Return the equivalent HSLA representation of this Color.
-     */
-    toHSL(): HSLA;
-    /**
-     * Get the relative luminance value using the algorithm from
-     * http://www.w3.org/WAI/GL/wiki/Relative_luminance.
-     */
-    getRelativeLuminance(): number;
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+  constructor(red: number, green: number, blue: number, alpha: number);
+  /**
+   * Provide the hex string value for the color
+   */
+  toHexString(): string;
+  /**
+   * Parse any valid color string and return a new Color object. If the string
+   * is not a valid color string, this will return undefined
+   */
+  static parseString(colorString: string): Color | undefined;
+  /**
+   * Set the color value based on a CSS RGB/RGBA string.
+   */
+  static parseRgbString(colorString: string): Color | undefined;
+  /**
+   * Set the color value based on a CSS RGB/RGBA string.
+   */
+  static parseHexString(colorString: string): Color | undefined;
+  /**
+   * Set the color value based on a CSS rgba/hsla string.
+   */
+  static parseColorFnString(colorString: string): Color | undefined;
+  /**
+   * Return the equivalent HSLA representation of this Color.
+   */
+  toHSL(): HSLA;
+  /**
+   * Get the relative luminance value using the algorithm from
+   * http://www.w3.org/WAI/GL/wiki/Relative_luminance.
+   */
+  getRelativeLuminance(): number;
 }
 export {};
-//# sourceMappingURL=Color.d.ts.map
+//# sourceMappingURL=Color.d.ts.map

packages/react-focus-rings/src/util/Color.tsx

@@ -133,9 +133,9 @@ export default class Color {
    * Provide the hex string value for the color
    */
   toHexString(): string {
-    var redString = Math.round(this.red).toString(16);
-    var greenString = Math.round(this.green).toString(16);
-    var blueString = Math.round(this.blue).toString(16);
+    const redString = Math.round(this.red).toString(16);
+    const greenString = Math.round(this.green).toString(16);
+    const blueString = Math.round(this.blue).toString(16);
     return (
       "#" +
       (this.red > 15.5 ? redString : "0" + redString) +
@@ -187,7 +187,7 @@ export default class Color {
       }
     }
 
-    var aRgbHex = colorString.match(/.{1,2}/g);
+    const aRgbHex = colorString.match(/.{1,2}/g);
     if (aRgbHex == null) return undefined;
 
     return new Color(
@@ -248,13 +248,13 @@ export default class Color {
    * http://www.w3.org/WAI/GL/wiki/Relative_luminance.
    */
   getRelativeLuminance(): number {
-    var rSRGB = this.red / 255;
-    var gSRGB = this.green / 255;
-    var bSRGB = this.blue / 255;
+    const rSRGB = this.red / 255;
+    const gSRGB = this.green / 255;
+    const bSRGB = this.blue / 255;
 
-    var r = rSRGB <= 0.03928 ? rSRGB / 12.92 : Math.pow((rSRGB + 0.055) / 1.055, 2.4);
-    var g = gSRGB <= 0.03928 ? gSRGB / 12.92 : Math.pow((gSRGB + 0.055) / 1.055, 2.4);
-    var b = bSRGB <= 0.03928 ? bSRGB / 12.92 : Math.pow((bSRGB + 0.055) / 1.055, 2.4);
+    const r = rSRGB <= 0.03928 ? rSRGB / 12.92 : Math.pow((rSRGB + 0.055) / 1.055, 2.4);
+    const g = gSRGB <= 0.03928 ? gSRGB / 12.92 : Math.pow((gSRGB + 0.055) / 1.055, 2.4);
+    const b = bSRGB <= 0.03928 ? bSRGB / 12.92 : Math.pow((bSRGB + 0.055) / 1.055, 2.4);
 
     return 0.2126 * r + 0.7152 * g + 0.0722 * b;
   }

packages/react-focus-rings/src/util/mixColors.d.ts

@@ -1,3 +1,3 @@
 import Color from "./Color";
 export default function mixColors(color1: Color, color2: Color): Color;
-//# sourceMappingURL=mixColors.d.ts.map
+//# sourceMappingURL=mixColors.d.ts.map