From 2aa5bb6aad115f6a0039a2d5445e69b581e164eb Mon Sep 17 00:00:00 2001 From: Kaspar Emanuel Date: Fri, 16 Dec 2022 12:56:39 +0000 Subject: [PATCH] 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 --- .github/workflows/lint-frontend.yml | 10 ++++-- frontend/index.html | 24 +++++++------- frontend/package.json | 3 ++ frontend/src/Loading.tsx | 32 +++++++++---------- .../common/components/radix-ui/IAITooltip.tsx | 9 ++++-- .../common/hooks/useClickOutsideWatcher.ts | 2 +- .../src/common/icons/ImageToImageIcon.tsx | 2 +- frontend/src/common/icons/NodesIcon.tsx | 2 +- frontend/src/common/icons/OutpaintIcon.tsx | 2 +- frontend/src/common/icons/TextToImageIcon.tsx | 2 +- .../components/IAICanvasIntermediateImage.tsx | 2 +- .../features/canvas/hooks/useCanvasMouseUp.ts | 5 ++- .../gallery/store/thunks/uploadImage.ts | 2 +- .../BoundingBoxSettings.tsx | 3 +- .../Upscale/UpscaleOptions.tsx | 2 +- .../components/ProcessButtons/Loopback.tsx | 5 ++- .../features/system/components/Console.tsx | 6 +++- .../system/components/ThemeChanger.tsx | 2 +- .../ImageToImage/InitImagePreview.tsx | 2 +- frontend/vite.config.ts | 2 +- frontend/yarn.lock | 5 +++ 21 files changed, 75 insertions(+), 49 deletions(-) diff --git a/.github/workflows/lint-frontend.yml b/.github/workflows/lint-frontend.yml index c2eeeb9a08..3b4496d800 100644 --- 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' diff --git a/frontend/index.html b/frontend/index.html index b8776b3bfb..8314e22a7d 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,16 +1,14 @@ + + + + InvokeAI - A Stable Diffusion Toolkit + + - - - - InvokeAI - A Stable Diffusion Toolkit - - - - -
- - - - \ No newline at end of file + +
+ + + diff --git a/frontend/package.json b/frontend/package.json index b142094b7b..e0f53d6daa 100644 --- 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", diff --git a/frontend/src/Loading.tsx b/frontend/src/Loading.tsx index 83dba59fc4..8e71bb9ac6 100644 --- a/frontend/src/Loading.tsx +++ b/frontend/src/Loading.tsx @@ -1,22 +1,22 @@ import { Flex, Spinner } from '@chakra-ui/react'; const Loading = () => { - return ( - - - - ); + return ( + + + + ); }; export default Loading; diff --git a/frontend/src/common/components/radix-ui/IAITooltip.tsx b/frontend/src/common/components/radix-ui/IAITooltip.tsx index 438ab17ae2..539751a8ca 100644 --- 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) => { {e.preventDefault()}} + onPointerDownOutside={(e) => { + e.preventDefault(); + }} className="invokeai__tooltip-content" > - + {children} diff --git a/frontend/src/common/hooks/useClickOutsideWatcher.ts b/frontend/src/common/hooks/useClickOutsideWatcher.ts index 6e216a2d06..1f20c06302 100644 --- 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; diff --git a/frontend/src/common/icons/ImageToImageIcon.tsx b/frontend/src/common/icons/ImageToImageIcon.tsx index 3c4ad0892a..711d23366a 100644 --- 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', diff --git a/frontend/src/common/icons/NodesIcon.tsx b/frontend/src/common/icons/NodesIcon.tsx index 95a8b4102b..273deaa8cd 100644 --- 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', diff --git a/frontend/src/common/icons/OutpaintIcon.tsx b/frontend/src/common/icons/OutpaintIcon.tsx index c01a61c932..dcfc62ad8f 100644 --- 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', diff --git a/frontend/src/common/icons/TextToImageIcon.tsx b/frontend/src/common/icons/TextToImageIcon.tsx index 97e84fdf19..f6148ea49c 100644 --- 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', diff --git a/frontend/src/features/canvas/components/IAICanvasIntermediateImage.tsx b/frontend/src/features/canvas/components/IAICanvasIntermediateImage.tsx index 65cedebdee..f1a76def45 100644 --- a/frontend/src/features/canvas/components/IAICanvasIntermediateImage.tsx +++ b/frontend/src/features/canvas/components/IAICanvasIntermediateImage.tsx @@ -43,7 +43,7 @@ const IAICanvasIntermediateImage = (props: Props) => { const { boundingBox: { x, y, width, height }, } = intermediateImage; - + return loadedImageElement ? ( { - const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } = canvas; + const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } = + canvas; return { boundingBoxDimensions, boundingBoxScale, diff --git a/frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleOptions.tsx b/frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleOptions.tsx index c88d2cb7cf..46929556f4 100644 --- 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 ( -
+
state.options, diff --git a/frontend/src/features/system/components/Console.tsx b/frontend/src/features/system/components/Console.tsx index 20eaa3a8b8..2122deb5d9 100644 --- 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'; diff --git a/frontend/src/features/system/components/ThemeChanger.tsx b/frontend/src/features/system/components/ThemeChanger.tsx index 33f52b2d97..a547c9ac5b 100644 --- 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)); diff --git a/frontend/src/features/tabs/components/ImageToImage/InitImagePreview.tsx b/frontend/src/features/tabs/components/ImageToImage/InitImagePreview.tsx index 045f2e4477..17807dcaf3 100644 --- a/frontend/src/features/tabs/components/ImageToImage/InitImagePreview.tsx +++ b/frontend/src/features/tabs/components/ImageToImage/InitImagePreview.tsx @@ -31,7 +31,7 @@ export default function InitImagePreview() { return ( <>
- {/*
*/} + {/*
*/}

Initial Image

{/* { * We need to polyfill for Array.prototype.findLast(); the polyfill plugin above * overrides any target specified here. */ - // target: 'esnext', + // target: 'esnext', chunkSizeWarningLimit: 1500, // we don't really care about chunk size }, }; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 0691ecf3d2..867d1711d3 100644 --- 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"