fix some linting issues

This commit is contained in:
caranicas 2022-09-19 15:37:21 -04:00
parent 9f2ae75fa2
commit 82f8c31b81
31 changed files with 112 additions and 101 deletions

View File

@ -9,40 +9,50 @@ module.exports = {
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
tsconfigRootDir: __dirname,
},
plugins: ["react"],
extends: [
"plugin:react/recommended",
"standard-with-typescript",
"plugin:i18next/recommended",
"plugin:i18n-json/recommended",
],
settings: {
react: {
version: "detect",
},
},
rules: {
// general things turned off for now
"prefer-const": "off",
"no-debugger": "warn",
"eol-last": "off",
"comma-dangle": ["off", "always-multiline"],
"no-void": ["off"],
"array-callback-return": ["off"],
"react/display-name": "warn",
quotes: ["off", "double"],
semi: ["off", "always"],
"no-multiple-empty-lines": ["off", { max: 2, maxEOF: 1 }],
yoda: ["off"],
eqeqeq: ["off"],
"spaced-comment": ["off"],
"padded-blocks": ["off"],
"no-multiple-empty-lines": ["off", { max: 2, maxEOF: 1 }],
quotes: ["off", "double"],
semi: ["off", "always"],
yoda: ["off"],
eqeqeq: ["off"],
"react/display-name": "warn",
// TS THINGS WE DONT WANT
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/ban-ts-comment": "off",
// TS WARNINGS WE WANT
"@typescript-eslint/no-unused-vars": "warn",
// TS things turned off for now
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-array-constructor": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/naming-convention": "off",
// "@typescript-eslint/naming-convention": "off",
"@typescript-eslint/restrict-template-expressions": "off",
"@typescript-eslint/prefer-optional-chain": "off",
"@typescript-eslint/no-non-null-assertion": "off",

View File

@ -4,7 +4,6 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"lint": "eslint --ext .tsx --fix src",
"pretty": "prettier --write .",
"dev": "vite",
"build": "tsc && vite build --emptyOutDir",

View File

@ -7,7 +7,7 @@ import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
import "./Translation/config";
const location = new ReactLocation();
function App() {
function App () {
// just check for the theme one 1 time
// var { matches } = window.matchMedia('(prefers-color-scheme: dark)')

View File

@ -11,7 +11,7 @@ export const API_URL = import.meta.env.DEV ? "http://localhost:9000" : "";
export const HEALTH_PING_INTERVAL = 5000; // 5 seconds
export const healthPing = async () => {
const pingUrl = `${API_URL}/ping`;
let response = await fetch(pingUrl);
const response = await fetch(pingUrl);
const data = await response.json();
return data;
};

View File

@ -5,7 +5,7 @@ interface ModifierTagProps {
name: string;
}
export default function ModifierTag({ name }: ModifierTagProps) {
export default function ModifierTag ({ name }: ModifierTagProps) {
const hasTag = useImageCreate((state) => state.hasTag(name))
? "selected"
: "";

View File

@ -34,9 +34,9 @@ export default function BetaMode() {
// TODO: make this a custom hook
useEffect(() => {
if (configStatus === "success") {
const { update_branch } = configData;
const { update_branch: updateBranch } = configData;
if (update_branch === "main") {
if (updateBranch === "main") {
setBranchToGetNext("beta");
} else {
// setIsBeta(true);

View File

@ -16,7 +16,7 @@ interface DrawImageProps {
isErasing: boolean;
}
export default function DrawImage({
export default function DrawImage ({
imageData,
brushSize,
brushShape,

View File

@ -14,7 +14,7 @@ interface GeneretaedImageProps {
// children: never[];
}
export default function GeneratedImage({
export default function GeneratedImage ({
imageData,
metadata,
className,

View File

@ -14,10 +14,10 @@ import {
export default function GpuSettings() {
const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
const use_cpu = useImageCreate((state) =>
const useCpu = useImageCreate((state) =>
state.getValueForRequestKey("use_cpu")
);
const use_full_precision = useImageCreate((state) =>
const useFullPrecision = useImageCreate((state) =>
state.getValueForRequestKey("use_full_precision")
);
@ -48,7 +48,7 @@ export default function GpuSettings() {
<label>
<input
type="checkbox"
checked={use_cpu}
checked={useCpu}
onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
/>
Use CPU instead of GPU (warning: this will be *very* slow)
@ -57,7 +57,7 @@ export default function GpuSettings() {
<div className={SettingItem}>
<label>
<input
checked={use_full_precision}
checked={useFullPrecision}
onChange={(e) =>
setRequestOption("use_full_precision", e.target.checked)
}

View File

@ -18,11 +18,11 @@ export default function ImprovementSettings() {
const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
const use_upscale = useImageCreate((state) =>
const useUpscale = useImageCreate((state) =>
state.getValueForRequestKey("use_upscale")
);
const show_only_filtered_image = useImageCreate((state) =>
const filteredOnly = useImageCreate((state) =>
state.getValueForRequestKey("show_only_filtered_image")
);
@ -45,7 +45,7 @@ export default function ImprovementSettings() {
useEffect(() => {
// if either are true we arent disabled
if (isUsingFaceCorrection || use_upscale) {
if (isUsingFaceCorrection || useUpscale) {
setIsFilteringDisabled(false);
} else {
setIsFilteringDisabled(true);
@ -79,7 +79,7 @@ export default function ImprovementSettings() {
<select
id="upscale_model"
name="upscale_model"
value={use_upscale}
value={useUpscale}
onChange={(e) => {
setRequestOption("use_upscale", e.target.value);
}}
@ -97,7 +97,7 @@ export default function ImprovementSettings() {
<input
disabled={isFilteringDisabled}
type="checkbox"
checked={show_only_filtered_image}
checked={filteredOnly}
onChange={(e) =>
setRequestOption("show_only_filtered_image", e.target.checked)
}

View File

@ -16,7 +16,7 @@ import GpuSettings from "./gpuSettings";
import BetaMode from "../../../molecules/betaMode";
function SettingsList() {
function SettingsList () {
return (
<ul className={AdvancedSettingsList}>
<li className={AdvancedSettingGrouping}>
@ -39,7 +39,7 @@ function SettingsList() {
);
}
export default function AdvancedSettings() {
export default function AdvancedSettings () {
const advancedSettingsIsOpen = useCreateUI(
(state) => state.isOpenAdvancedSettings
);

View File

@ -39,15 +39,15 @@ export default function PropertySettings() {
const steps = useImageCreate((state) =>
state.getValueForRequestKey("num_inference_steps")
);
const guidance_scale = useImageCreate((state) =>
const guidanceScale = useImageCreate((state) =>
state.getValueForRequestKey("guidance_scale")
);
const init_image = useImageCreate((state) =>
const initImage = useImageCreate((state) =>
state.getValueForRequestKey("init_image")
);
const prompt_strength = useImageCreate((state) =>
const promptStrength = useImageCreate((state) =>
state.getValueForRequestKey("prompt_strength")
);
@ -106,7 +106,7 @@ export default function PropertySettings() {
<label>
Guidance Scale:
<input
value={guidance_scale}
value={guidanceScale}
onChange={(e) =>
setRequestOption("guidance_scale", e.target.value)
}
@ -116,15 +116,15 @@ export default function PropertySettings() {
step=".1"
/>
</label>
<span>{guidance_scale}</span>
<span>{guidanceScale}</span>
</div>
{init_image && (
{initImage && (
<div className={SettingItem}>
<label>
Prompt Strength:{" "}
<input
value={prompt_strength}
value={promptStrength}
onChange={(e) =>
setRequestOption("prompt_strength", e.target.value)
}
@ -134,7 +134,7 @@ export default function PropertySettings() {
step=".05"
/>
</label>
<span>{prompt_strength}</span>
<span>{promptStrength}</span>
</div>
)}

View File

@ -12,12 +12,12 @@ import {
} from "../advancedsettings.css.ts";
export default function WorkflowSettings() {
const num_outputs = useImageCreate((state) =>
const numOutputs = useImageCreate((state) =>
state.getValueForRequestKey("num_outputs")
);
const parallelCount = useImageCreate((state) => state.parallelCount);
const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
const save_to_disk_path = useImageCreate((state) =>
const diskPath = useImageCreate((state) =>
state.getValueForRequestKey("save_to_disk_path")
);
const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
@ -46,7 +46,7 @@ export default function WorkflowSettings() {
Number of images to make:{" "}
<input
type="number"
value={num_outputs}
value={numOutputs}
onChange={(e) =>
setRequestOption("num_outputs", parseInt(e.target.value, 10))
}
@ -76,7 +76,7 @@ export default function WorkflowSettings() {
</label>
<label>
<input
value={save_to_disk_path}
value={diskPath}
onChange={(e) =>
setRequestOption("save_to_disk_path", e.target.value)
}

View File

@ -3,7 +3,7 @@ import React from "react";
import { useImageCreate } from "../../../../../stores/imageCreateStore";
import ModifierTag from "../../../../atoms/modifierTag";
export default function ActiveTags() {
export default function ActiveTags () {
const selectedtags = useImageCreate((state) => state.selectedTags());
return (
<div className="selected-tags">

View File

@ -10,7 +10,7 @@ import SeedImage from "./seedImage";
import ActiveTags from "./activeTags";
import MakeButton from "./makeButton";
export default function BasicCreation() {
export default function BasicCreation () {
const promptText = useImageCreate((state) =>
state.getValueForRequestKey("prompt")
);

View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/naming-convention */
import React, { useEffect, useState } from "react";
import { useImageCreate } from "../../../../../stores/imageCreateStore";
@ -26,7 +27,7 @@ export default function MakeButton() {
// the request that we have built
const req = builtRequest();
// the actual number of request we will make
let requests = [];
const requests = [];
// the number of images we will make
let { num_outputs } = req;

View File

@ -15,7 +15,7 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
export default function SeedImage(_props: any) {
const imageInputRef = useRef<HTMLInputElement>(null);
const init_image = useImageCreate((state) =>
const initImage = useImageCreate((state) =>
state.getValueForRequestKey("init_image")
);
@ -70,10 +70,10 @@ export default function SeedImage(_props: any) {
</div>
<div className={ImageFixer}>
{init_image && (
{initImage && (
<>
<div>
<img src={init_image} width="100" height="100" />
<img src={initImage} width="100" height="100" />
<button className={XButton} onClick={_handleClearImage}>
X
</button>

View File

@ -23,7 +23,7 @@ interface ModifierListProps {
tags: string[];
}
function ModifierList({ tags }: ModifierListProps) {
function ModifierList ({ tags }: ModifierListProps) {
return (
<ul className={ModifierListStyle}>
{tags.map((tag) => (
@ -40,7 +40,7 @@ interface ModifierGroupingProps {
tags: string[];
}
function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
function ModifierGrouping ({ title, tags }: ModifierGroupingProps) {
// doing this localy for now, but could move to a store
// and persist if we wanted to
const [isExpanded, setIsExpanded] = useState(false);
@ -59,7 +59,7 @@ function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
);
}
export default function ImageModifers() {
export default function ImageModifers () {
const allModifiers = useImageCreate((state) => state.allModifiers);
const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);

View File

@ -18,7 +18,7 @@ import {
import BasicCreation from "./basicCreation";
export default function CreationPanel() {
export default function CreationPanel () {
const isInPaintingMode = useImageCreate((state) => state.isInpainting);
return (
<>

View File

@ -1,4 +1,4 @@
import React, { useRef, useState, ChangeEvent, MouseEventHandler } from "react";
import React, { useRef, useState, ChangeEvent } from "react";
import DrawImage from "../../../molecules/drawImage";
import { useImageCreate } from "../../../../stores/imageCreateStore";
@ -18,7 +18,7 @@ export default function InpaintingPanel() {
const [brushColor, setBrushColor] = useState("#fff");
const [isErasing, setIsErasing] = useState(false);
const init_image = useImageCreate((state) =>
const initImage = useImageCreate((state) =>
state.getValueForRequestKey("init_image")
);
@ -48,7 +48,7 @@ export default function InpaintingPanel() {
<div className={InpaintingPanelMain}>
<DrawImage
// ref={drawingRef}
imageData={init_image}
imageData={initImage}
brushSize={brushSize}
brushShape={brushShape}
brushColor={brushColor}

View File

@ -16,7 +16,7 @@ interface CurrentDisplayProps {
removeImages: () => void;
}
export default function CompletedImages({
export default function CompletedImages ({
images,
setCurrentDisplay,
removeImages,

View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/naming-convention */
import React from "react";
import GeneratedImage from "../../../molecules/generatedImage";
import {
@ -27,7 +28,7 @@ export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps
use_upscale,
width,
height,
} = info!;
} = info! as ImageRequest;
// Most important information is the prompt

View File

@ -8,7 +8,7 @@ import {
import { API_URL } from "../../../api";
export default function FooterDisplay() {
export default function FooterDisplay () {
return (
<div className={FooterDisplayMain}>
<p>

View File

@ -24,12 +24,12 @@ export default function HeaderDisplay() {
useEffect(() => {
if (status === "success") {
// TODO also pass down the actual version
const { update_branch } = data;
const { update_branch: updateBranch } = data;
// just hard coded for now
setVersion("v2.1");
if (update_branch === "main") {
if (updateBranch === "main") {
setRelease("(stable)");
} else {
setRelease("(beta)");

View File

@ -13,7 +13,7 @@ const startingMessage = "Stable Diffusion is starting...";
const successMessage = "Stable Diffusion is ready to use!";
const errorMessage = "Stable Diffusion is not running!";
export default function StatusDisplay({ className }: { className?: string }) {
export default function StatusDisplay ({ className }: { className?: string }) {
const [statusMessage, setStatusMessage] = useState(startingMessage);
const [statusClass, setStatusClass] = useState(StartingStatus);

View File

@ -1,6 +1,6 @@
import React from "react";
export default function Beta() {
export default function Beta () {
return (
<div>
<h1>Beta</h1>

View File

@ -20,7 +20,7 @@ import CreationPanel from "../../components/organisms/creationPanel";
import DisplayPanel from "../../components/organisms/displayPanel";
import FooterDisplay from "../../components/organisms/footerDisplay";
function Home({ className }: { className: any }) {
function Home ({ className }: { className: any }) {
// Get the original save directory
const setRequestOption = useImageCreate((state) => state.setRequestOptions);

View File

@ -1,6 +1,6 @@
import React from "react";
export default function Settings({ className }: { className: any }) {
export default function Settings ({ className }: { className: any }) {
return (
<div>
<h1>Settings</h1>

View File

@ -17,8 +17,8 @@ interface ImageQueueState {
// figure out why TS is complaining about this
// @ts-ignore
export const useImageQueue = create<ImageQueueState>((set, get) => ({
images: new Array(),
completedImageIds: new Array(),
images: [],
completedImageIds: [],
// use produce to make sure we don't mutate state
addNewImage: (id: string, imgRec: ImageRequest, isRandom = false) => {
set(

View File

@ -79,7 +79,7 @@ const app = createGlobalTheme(":root", {
},
},
colors: colors,
colors,
});
export const darkTheme = createTheme(colors, {