Auto-format frontend (#2009)

* Auto-format frontend * Update lint-frontend GA workflow node and checkout * Fix linter error in ThemeChanger * Add a `on: pull_request` to lint-frontend workflow Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>
2024-08-30 20:32:17 +00:00 · 2022-12-16 12:56:39 +00:00 · 2022-12-16 12:56:39 +00:00 · 2aa5bb6aad
commit 2aa5bb6aad
parent c0c4d7ca69
21 changed files with 75 additions and 49 deletions
--- a/.github/workflows/lint-frontend.yml
+++ b/.github/workflows/lint-frontend.yml
@ -1,6 +1,9 @@
 name: Lint frontend

 on:
+  pull_request:
+    paths:
+      - 'frontend/**'
  push:
    paths:
      - 'frontend/**'
@ -14,11 +17,12 @@ jobs:
    runs-on: ubuntu-22.04
    steps:
      - name: Setup Node 18
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
        with:
          node-version: '18'
-      - uses: actions/checkout@v2
-      - run: 'yarn install'
+      - uses: actions/checkout@v3
+      - run: 'yarn install --frozen-lockfile'
      - run: 'yarn tsc'
      - run: 'yarn run madge'
      - run: 'yarn run lint --max-warnings=0'
+      - run: 'yarn run prettier --check'
--- a/frontend/index.html
+++ b/frontend/index.html
@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>InvokeAI - A Stable Diffusion Toolkit</title>
    <link rel="shortcut icon" type="icon" href="favicon.ico" />
-</head>
+  </head>

-<body>
+  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
-</body>
-
+  </body>
 </html>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -10,6 +10,8 @@
    "preview": "vite preview",
    "madge": "madge --circular src/main.tsx",
    "lint": "eslint src/",
+    "prettier": "prettier '*.{json,cjs,ts,html}' 'src/**/*.{ts,tsx}'",
+    "fmt": "npm run prettier -- --write",
    "postinstall": "patch-package"
  },
  "dependencies": {
@ -63,6 +65,7 @@
    "madge": "^5.0.1",
    "patch-package": "^6.5.0",
    "postinstall-postinstall": "^2.1.0",
+    "prettier": "^2.8.1",
    "sass": "^1.55.0",
    "terser": "^5.16.1",
    "tsc-watch": "^5.0.3",
--- a/frontend/src/Loading.tsx
+++ b/frontend/src/Loading.tsx
@ -5,15 +5,15 @@ const Loading = () => {
    <Flex
      width={'100vw'}
      height={'100vh'}
-            alignItems='center'
-            justifyContent='center'
+      alignItems="center"
+      justifyContent="center"
    >
      <Spinner
-                thickness='2px'
-                speed='1s'
-                emptyColor='gray.200'
-                color='gray.400'
-                size='xl'
+        thickness="2px"
+        speed="1s"
+        emptyColor="gray.200"
+        color="gray.400"
+        size="xl"
      />
    </Flex>
  );
--- a/frontend/src/common/components/radix-ui/IAITooltip.tsx
+++ b/frontend/src/common/components/radix-ui/IAITooltip.tsx
@ -20,10 +20,15 @@ const IAITooltip = (props: IAITooltipProps) => {
        <Tooltip.Portal>
          <Tooltip.Content
            {...contentProps}
-            onPointerDownOutside={(e) => {e.preventDefault()}}
+            onPointerDownOutside={(e) => {
+              e.preventDefault();
+            }}
            className="invokeai__tooltip-content"
          >
-            <Tooltip.Arrow {...arrowProps} className="invokeai__tooltip-arrow" />
+            <Tooltip.Arrow
+              {...arrowProps}
+              className="invokeai__tooltip-arrow"
+            />
            {children}
          </Tooltip.Content>
        </Tooltip.Portal>
--- a/frontend/src/common/hooks/useClickOutsideWatcher.ts
+++ b/frontend/src/common/hooks/useClickOutsideWatcher.ts
@ -1,4 +1,4 @@
-import { RefObject, useEffect} from 'react';
+import { RefObject, useEffect } from 'react';

 const watchers: {
  ref: RefObject<HTMLElement>;
--- a/frontend/src/common/icons/ImageToImageIcon.tsx
+++ b/frontend/src/common/icons/ImageToImageIcon.tsx
@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/react";
+import { createIcon } from '@chakra-ui/react';

 const ImageToImageIcon = createIcon({
  displayName: 'ImageToImageIcon',
--- a/frontend/src/common/icons/NodesIcon.tsx
+++ b/frontend/src/common/icons/NodesIcon.tsx
@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/react";
+import { createIcon } from '@chakra-ui/react';

 const NodesIcon = createIcon({
  displayName: 'NodesIcon',
--- a/frontend/src/common/icons/OutpaintIcon.tsx
+++ b/frontend/src/common/icons/OutpaintIcon.tsx
@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/react";
+import { createIcon } from '@chakra-ui/react';

 const OutpaintIcon = createIcon({
  displayName: 'OutpaintIcon',
--- a/frontend/src/common/icons/TextToImageIcon.tsx
+++ b/frontend/src/common/icons/TextToImageIcon.tsx
@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/react";
+import { createIcon } from '@chakra-ui/react';

 const TextToImageIcon = createIcon({
  displayName: 'TextToImageIcon',
--- a/frontend/src/features/canvas/hooks/useCanvasMouseUp.ts
+++ b/frontend/src/features/canvas/hooks/useCanvasMouseUp.ts
@ -4,7 +4,10 @@ import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import Konva from 'konva';
 import _ from 'lodash';
 import { MutableRefObject, useCallback } from 'react';
-import { canvasSelector, isStagingSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
 import {
  // addPointToCurrentEraserLine,
  addPointToCurrentLine,
--- a/frontend/src/features/gallery/store/thunks/uploadImage.ts
+++ b/frontend/src/features/gallery/store/thunks/uploadImage.ts
@ -38,7 +38,7 @@ export const uploadImage =
    });

    const image = (await response.json()) as InvokeAI.ImageUploadResponse;
-    console.log(image)
+    console.log(image);
    const newImage: InvokeAI.Image = {
      uuid: uuidv4(),
      category: 'user',
--- a/frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx
+++ b/frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx
@ -9,7 +9,8 @@ import _ from 'lodash';
 const selector = createSelector(
  canvasSelector,
  (canvas) => {
-    const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } = canvas;
+    const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } =
+      canvas;
    return {
      boundingBoxDimensions,
      boundingBoxScale,
--- a/frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleOptions.tsx
+++ b/frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleOptions.tsx
@ -60,7 +60,7 @@ const UpscaleOptions = () => {
  const handleChangeStrength = (v: number) => dispatch(setUpscalingStrength(v));

  return (
-    <div className='upscale-options'>
+    <div className="upscale-options">
      <IAISelect
        isDisabled={!isESRGANAvailable}
        label="Scale"
--- a/frontend/src/features/options/components/ProcessButtons/Loopback.tsx
+++ b/frontend/src/features/options/components/ProcessButtons/Loopback.tsx
@ -3,7 +3,10 @@ import { FaRecycle } from 'react-icons/fa';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { OptionsState, setShouldLoopback } from 'features/options/store/optionsSlice';
+import {
+  OptionsState,
+  setShouldLoopback,
+} from 'features/options/store/optionsSlice';

 const loopbackSelector = createSelector(
  (state: RootState) => state.options,
--- a/frontend/src/features/system/components/Console.tsx
+++ b/frontend/src/features/system/components/Console.tsx
@ -1,7 +1,11 @@
 import { IconButton, Tooltip } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { RootState } from 'app/store';
-import { errorSeen, setShouldShowLogViewer, SystemState } from 'features/system/store/systemSlice';
+import {
+  errorSeen,
+  setShouldShowLogViewer,
+  SystemState,
+} from 'features/system/store/systemSlice';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { FaAngleDoubleDown, FaCode, FaMinus } from 'react-icons/fa';
 import { createSelector } from '@reduxjs/toolkit';
--- a/frontend/src/features/system/components/ThemeChanger.tsx
+++ b/frontend/src/features/system/components/ThemeChanger.tsx
@ -23,7 +23,7 @@ export default function ThemeChanger() {
    if (colorMode !== currentTheme) {
      setColorMode(currentTheme);
    }
-  }, [colorMode, currentTheme]);
+  }, [setColorMode, colorMode, currentTheme]);

  const handleChangeTheme = (theme: string) => {
    dispatch(setCurrentTheme(theme));
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -3880,6 +3880,11 @@ prettier-linter-helpers@^1.0.0:
  dependencies:
    fast-diff "^1.1.2"

+prettier@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.1.tgz#4e1fd11c34e2421bc1da9aea9bd8127cd0a35efc"
+  integrity sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==
+
 pretty-ms@^7.0.1:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.1.tgz#7d903eaab281f7d8e03c66f867e239dc32fb73e8"