Merge pull request #2 from FRC7902/feature/install-prettier

Install Prettier

.eslintrc.cjs

@@ -2,16 +2,16 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },

.github/workflows/lint.yml

@@ -0,0 +1,35 @@
+name: Code Check
+on:
+  push:
+    branches:
+      - main
+  pull_request: {}
+
+concurrency:
+  group: ${{ github.job }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    name: ⬣ ESLint, ʦ TypeScript, 💅 Prettier, and 🃏 Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: 📥 Download deps
+        run: npm install --frozen-lockfile
+
+      - name: 🔬 Lint
+        run: npm run lint:strict
+
+      - name: 🔎 Type check
+        run: npm run typecheck
+
+      - name: 💅 Prettier check
+        run: npm run format:check

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -77,9 +77,9 @@ Use `localhost` for simulation and your team number/IP address when connecting t
 One method of connecting HTML and svelte elements to NetworkTables is through the `useEntry` react hook in the `@frc-web-components/react` package:
 
 ```typescript
-import { useEntry } from '@frc-web-components/react';
+import { useEntry } from "@frc-web-components/react";
 
-const [pose] = useEntry('/SmartDashboard/Field/Robot', [0, 0, 0]);
+const [pose] = useEntry("/SmartDashboard/Field/Robot", [0, 0, 0]);
 ```
 
 `useEntry` is similar to `useState` but sends and receives updates to a NetworkTables topic instead. The first parameter is the topic name and the second parameter is the default value. The above line will subscribe to the `/SmartDashboard/Field/Robot` topic. You can pass in the value returned to your element attributes/props. For example:
@@ -93,7 +93,7 @@ The pose prop will be set to the current value of `pose` and will be updated whe
 To send updates `useEntry` returns a setter function as well. For example:
 
 ```typescript
-const [count, setCount] = useEntry('/dashboard/count', 0);
+const [count, setCount] = useEntry("/dashboard/count", 0);
 setCount(5);
 ```
 
@@ -168,12 +168,12 @@ Per theme rules can be added by modifying the `themes.ts` file located in the `s
 
 ```typescript
 export const customLightTheme = {
-  '--my-element-background': 'cornflowerblue',
-  '--my-element-color': 'white',
+  "--my-element-background": "cornflowerblue",
+  "--my-element-color": "white",
 };
 
 export const customDarkTheme = {
-  '--my-element-background': 'cadetblue',
-  '--my-element-color': 'black',
+  "--my-element-background": "cadetblue",
+  "--my-element-color": "black",
 };
 ```

package.json

@@ -11,8 +11,13 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix && npm run format",
+    "lint:strict": "eslint --max-warnings=0 src",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit --incremental false"
   },
   "dependencies": {
     "@frc-web-components/fwc": "^3.1.0",
@@ -32,6 +37,8 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.5.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "typescript": "^5.0.2",
     "vite": "^6.1.0"
   }

src/App.css

@@ -2,16 +2,16 @@
 
 body {
   margin: 10px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 .inputs {

src/App.tsx

@@ -1,6 +1,6 @@
-import './App.css';
-import ThemeChooser from './components/ThemeChooser';
-import Dashboard from './components/Dashboard';
+import "./App.css";
+import ThemeChooser from "./components/ThemeChooser";
+import Dashboard from "./components/Dashboard";
 
 function App() {
   return (

src/components/Dashboard.tsx

@@ -5,28 +5,28 @@ import {
   ToggleButton,
   Field,
   FieldRobot,
-} from '@frc-web-components/react';
-import MyElement from './MyElement';
-import { CSSProperties } from 'react';
+} from "@frc-web-components/react";
+import MyElement from "./MyElement";
+import { CSSProperties } from "react";
 
 const Dashboard = () => {
-  const [toggled, setToggled] = useEntry('/dashboard/toggled', false);
-  const [pose] = useEntry('/SmartDashboard/Field/Robot', [0, 0, 0]);
-  const [count, setCount] = useEntry('/dashboard/count', 0);
+  const [toggled, setToggled] = useEntry("/dashboard/toggled", false);
+  const [pose] = useEntry("/SmartDashboard/Field/Robot", [0, 0, 0]);
+  const [count, setCount] = useEntry("/dashboard/count", 0);
 
   const updateToggle = () => {
     setToggled(!toggled);
   };
 
   const divStyles: CSSProperties = {
-    display: 'flex',
-    gap: '15px',
-    alignItems: 'start',
+    display: "flex",
+    gap: "15px",
+    alignItems: "start",
   };
 
   const fieldStyles: CSSProperties = {
-    width: '500px',
-    height: '300px',
+    width: "500px",
+    height: "300px",
   };
 
   return (

src/components/MyElement.tsx

@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
-import { Icon } from '@frc-web-components/react';
+import { CSSProperties } from "react";
+import { Icon } from "@frc-web-components/react";
 
 const svgPath =
-  'm80-80 200-560 360 360L80-80Zm132-132 282-100-182-182-100 282Zm370-246-42-42 224-224q32-32 77-32t77 32l24 24-42 42-24-24q-14-14-35-14t-35 14L582-458ZM422-618l-42-42 24-24q14-14 14-34t-14-34l-26-26 42-42 26 26q32 32 32 76t-32 76l-24 24Zm80 80-42-42 144-144q14-14 14-35t-14-35l-64-64 42-42 64 64q32 32 32 77t-32 77L502-538Zm160 160-42-42 64-64q32-32 77-32t77 32l64 64-42 42-64-64q-14-14-35-14t-35 14l-64 64ZM212-212Z';
+  "m80-80 200-560 360 360L80-80Zm132-132 282-100-182-182-100 282Zm370-246-42-42 224-224q32-32 77-32t77 32l24 24-42 42-24-24q-14-14-35-14t-35 14L582-458ZM422-618l-42-42 24-24q14-14 14-34t-14-34l-26-26 42-42 26 26q32 32 32 76t-32 76l-24 24Zm80 80-42-42 144-144q14-14 14-35t-14-35l-64-64 42-42 64 64q32 32 32 77t-32 77L502-538Zm160 160-42-42 64-64q32-32 77-32t77 32l64 64-42 42-64-64q-14-14-35-14t-35 14l-64 64ZM212-212Z";
 
 interface Props {
   count: number;
@@ -11,14 +11,14 @@ interface Props {
 
 function MyElement({ count, onIncrement = () => {} }: Props) {
   const styles: CSSProperties = {
-    background: 'var(--my-element-background, cadetblue)',
-    color: 'var(--my-element-color, black)',
-    border: 'none',
-    borderRadius: '3px',
-    padding: '8px',
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: '8px',
+    background: "var(--my-element-background, cadetblue)",
+    color: "var(--my-element-color, black)",
+    border: "none",
+    borderRadius: "3px",
+    padding: "8px",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
   };
 
   return (