mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
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>
This commit is contained in:
parent
c0c4d7ca69
commit
2aa5bb6aad
10
.github/workflows/lint-frontend.yml
vendored
10
.github/workflows/lint-frontend.yml
vendored
@ -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'
|
||||
|
@ -1,16 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -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",
|
||||
|
@ -1,22 +1,22 @@
|
||||
import { Flex, Spinner } from '@chakra-ui/react';
|
||||
|
||||
const Loading = () => {
|
||||
return (
|
||||
<Flex
|
||||
width={'100vw'}
|
||||
height={'100vh'}
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
>
|
||||
<Spinner
|
||||
thickness='2px'
|
||||
speed='1s'
|
||||
emptyColor='gray.200'
|
||||
color='gray.400'
|
||||
size='xl'
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
return (
|
||||
<Flex
|
||||
width={'100vw'}
|
||||
height={'100vh'}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Spinner
|
||||
thickness="2px"
|
||||
speed="1s"
|
||||
emptyColor="gray.200"
|
||||
color="gray.400"
|
||||
size="xl"
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
|
@ -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>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { RefObject, useEffect} from 'react';
|
||||
import { RefObject, useEffect } from 'react';
|
||||
|
||||
const watchers: {
|
||||
ref: RefObject<HTMLElement>;
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { createIcon } from "@chakra-ui/react";
|
||||
import { createIcon } from '@chakra-ui/react';
|
||||
|
||||
const ImageToImageIcon = createIcon({
|
||||
displayName: 'ImageToImageIcon',
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { createIcon } from "@chakra-ui/react";
|
||||
import { createIcon } from '@chakra-ui/react';
|
||||
|
||||
const NodesIcon = createIcon({
|
||||
displayName: 'NodesIcon',
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { createIcon } from "@chakra-ui/react";
|
||||
import { createIcon } from '@chakra-ui/react';
|
||||
|
||||
const OutpaintIcon = createIcon({
|
||||
displayName: 'OutpaintIcon',
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { createIcon } from "@chakra-ui/react";
|
||||
import { createIcon } from '@chakra-ui/react';
|
||||
|
||||
const TextToImageIcon = createIcon({
|
||||
displayName: 'TextToImageIcon',
|
||||
|
@ -43,7 +43,7 @@ const IAICanvasIntermediateImage = (props: Props) => {
|
||||
const {
|
||||
boundingBox: { x, y, width, height },
|
||||
} = intermediateImage;
|
||||
|
||||
|
||||
return loadedImageElement ? (
|
||||
<KonvaImage
|
||||
x={x}
|
||||
|
@ -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,
|
||||
|
@ -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',
|
||||
|
@ -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,
|
||||
|
@ -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"
|
||||
|
@ -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,
|
||||
|
@ -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';
|
||||
|
@ -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));
|
||||
|
@ -31,7 +31,7 @@ export default function InitImagePreview() {
|
||||
return (
|
||||
<>
|
||||
<div className="init-image-preview-header">
|
||||
{/* <div className="init-image-preview-header"> */}
|
||||
{/* <div className="init-image-preview-header"> */}
|
||||
<h2>Initial Image</h2>
|
||||
{/* <IconButton
|
||||
isDisabled={!initialImage}
|
||||
|
@ -47,7 +47,7 @@ export default defineConfig(({ mode }) => {
|
||||
* 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
|
||||
},
|
||||
};
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user