Add linting to GitHub CI process

.github/workflows/lint.yml

@@ -0,0 +1,32 @@
+name: ESLint & Prettier
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: ["main"]
+
+jobs:
+  lint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      # actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run Prettier
+        run: npm run format
+
+      - name: TypeScript check
+        run: npm run tsc

README.md

@@ -44,4 +44,4 @@ Then, open [http://localhost:3000](http://localhost:3000) in your browser to acc
 
 ## Contribute
 
-Contributions are welcome! More details will be provided soon.
+Contributions are welcome! More details will be provided soon.

components/Canvas.tsx

@@ -58,7 +58,7 @@ export default function Canvas() {
   const dispatch = useDispatch();
   const [stageSize, setStageSize] = useState<StageSizeType>();
   const { canvasObjects, selectedObjectId } = useSelector(
-    (state: RootState) => state.canvas
+    (state: RootState) => state.canvas,
   );
 
   const [selectedTool, setSelectedTool] = useState<ToolType>("pen");
@@ -188,14 +188,14 @@ export default function Canvas() {
         updateCanvasObject({
           id: selectedObjectId,
           updates: { [property]: value },
-        })
+        }),
       );
     }
   }
 
   function updateSelectedObject(
     newAttrs: Partial<CanvasObjectType>,
-    selectedObjectId: string
+    selectedObjectId: string,
   ) {
     dispatch(updateCanvasObject({ id: selectedObjectId, updates: newAttrs }));
   }
@@ -352,7 +352,7 @@ export default function Canvas() {
 
         // Dispatch the update with the new object
         dispatch(
-          updateCanvasObject({ id: lastObject.id, updates: updatedObject })
+          updateCanvasObject({ id: lastObject.id, updates: updatedObject }),
         );
       }
     }

components/Toolbar.tsx

@@ -62,7 +62,7 @@ function Toolbar({
   const dispatch = useDispatch();
 
   const { undoStack, redoStack } = useSelector(
-    (state: RootState) => state.canvas
+    (state: RootState) => state.canvas,
   );
 
   // color picker
@@ -72,7 +72,7 @@ function Toolbar({
   const isColorPickerAnchorElOpen = Boolean(colorPickerAnchorEl);
 
   const handleClickColorPickerButton = (
-    event: React.MouseEvent<HTMLButtonElement>
+    event: React.MouseEvent<HTMLButtonElement>,
   ) => {
     setColorPickerAnchorEl(event.currentTarget);
   };
@@ -88,7 +88,7 @@ function Toolbar({
   const isShapesAnchorElOpen = Boolean(shapesAnchorEl);
 
   const handleClickShapesButton = (
-    event: React.MouseEvent<HTMLButtonElement>
+    event: React.MouseEvent<HTMLButtonElement>,
   ) => {
     setShapesAnchorEl(event.currentTarget);
   };
@@ -104,7 +104,7 @@ function Toolbar({
   const isLineWeightSliderAnchorElOpen = Boolean(lineWeightAnchorEl);
 
   const handleClickLineWeightButton = (
-    event: React.MouseEvent<HTMLButtonElement>
+    event: React.MouseEvent<HTMLButtonElement>,
   ) => {
     setLineWeightAnchorEl(event.currentTarget);
   };

components/shapes/OvalShape.tsx

@@ -110,4 +110,4 @@ export default function OvalShape({
       )}
     </>
   );
-}
+}

components/shapes/RectangleShape.tsx

@@ -11,7 +11,12 @@ type Props = {
   onChange: (newAttrs: Partial<CanvasObjectType>) => void;
 };
 
-export default function RectangleShape({ shapeProps, isSelected, onSelect, onChange }: Props) {
+export default function RectangleShape({
+  shapeProps,
+  isSelected,
+  onSelect,
+  onChange,
+}: Props) {
   const groupRef = useRef<Konva.Group>(null);
   const trRef = useRef<Konva.Transformer>(null);
 

components/shapes/ShapesLayer.tsx

@@ -8,7 +8,7 @@ type ShapesLayerProps = {
   newObject: CanvasObjectType | null;
   onChange: (
     newAttrs: Partial<CanvasObjectType>,
-    selectedObjectId: string
+    selectedObjectId: string,
   ) => void;
   setColor: (newColor: string) => void;
   setWidth: (newWidth: number) => void;

components/shapes/shapeUtils.ts

@@ -1,7 +1,7 @@
 export const getStrokeWidth = (
   strokeWidth: number | undefined,
   width: number | undefined,
-  height: number | undefined
+  height: number | undefined,
 ) => {
   if (width && height) {
     const minStrokeWidth = Math.max(Math.min(width, height) / 2, 1);

components/textFields/TextField.tsx

@@ -213,4 +213,4 @@ export default function TextField({
       )}
     </>
   );
-}
+}

components/textFields/TextFieldsLayer.tsx

@@ -9,7 +9,7 @@ type Props = {
   setSelectedObjectId: (id: string) => void;
   onChange: (
     newAttrs: Partial<CanvasObjectType>,
-    selectedObjectId: string
+    selectedObjectId: string,
   ) => void;
 };