From a5e2ad9f02dc832fccd3858d0f282c76af2cd66d Mon Sep 17 00:00:00 2001 From: paopaony Date: Wed, 27 May 2026 16:56:01 +0700 Subject: [PATCH 1/2] refactor tooling and stabilize app builds Upgrade the linting and styling toolchain, refactor the affected UI hooks and components to satisfy the new rules, and remove deprecated config and unused dependencies so the app builds and lint checks pass again. --- .eslintignore | 5 - .eslintrc.json | 30 - components/editor/hooks/use-onnx-session.ts | 4 +- components/ui/file-uploader.tsx | 135 +- components/ui/spinning-number.tsx | 36 +- eslint.config.mjs | 58 + next-env.d.ts | 2 +- package-lock.json | 13115 ++++++++++++++++++ package.json | 15 +- postcss.config.js | 6 - postcss.config.mjs | 0 tailwind.config.js => tailwind.config.cjs | 2 +- 12 files changed, 13238 insertions(+), 170 deletions(-) delete mode 100644 .eslintignore delete mode 100644 .eslintrc.json create mode 100644 eslint.config.mjs create mode 100644 package-lock.json delete mode 100644 postcss.config.js create mode 100644 postcss.config.mjs rename tailwind.config.js => tailwind.config.cjs (97%) diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index dc0f9d8..0000000 --- a/.eslintignore +++ /dev/null @@ -1,5 +0,0 @@ -dist/* -.cache -public -node_modules -*.esm.js diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index fe113b7..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/eslintrc", - "root": true, - "extends": [ - "next/core-web-vitals", - "prettier", - "plugin:tailwindcss/recommended" - ], - "plugins": ["tailwindcss"], - "rules": { - "@next/next/no-html-link-for-pages": "off", - "react/jsx-key": "off", - "tailwindcss/no-custom-classname": "off" - }, - "settings": { - "tailwindcss": { - "callees": ["cn"], - "config": "tailwind.config.js" - }, - "next": { - "rootDir": ["./"] - } - }, - "overrides": [ - { - "files": ["*.ts", "*.tsx"], - "parser": "@typescript-eslint/parser" - } - ] -} diff --git a/components/editor/hooks/use-onnx-session.ts b/components/editor/hooks/use-onnx-session.ts index 91c3693..5fa12db 100644 --- a/components/editor/hooks/use-onnx-session.ts +++ b/components/editor/hooks/use-onnx-session.ts @@ -151,7 +151,7 @@ export const useOnnxSession = ( return blob }, - [getOrCreateSession] + [getOrCreateSession, ortRef] ) /** @@ -211,7 +211,7 @@ export const useOnnxSession = ( return blob }, - [getOrCreateSession] + [getOrCreateSession, ortRef] ) return { diff --git a/components/ui/file-uploader.tsx b/components/ui/file-uploader.tsx index 6794e48..6c5efc0 100644 --- a/components/ui/file-uploader.tsx +++ b/components/ui/file-uploader.tsx @@ -7,7 +7,6 @@ import { forwardRef, useCallback, useContext, - useEffect, useRef, useState, } from "react" @@ -74,12 +73,10 @@ export const FileUploader = forwardRef< ref ) => { const [isFileTooBig, setIsFileTooBig] = useState(false) - const [isLOF, setIsLOF] = useState(false) const [activeIndex, setActiveIndex] = useState(-1) + const inputRef = useRef(null) const { - accept = { - "image/*": [".jpg", ".jpeg", ".png", ".gif"], - }, + accept = { "image/*": [".jpg", ".jpeg", ".png", ".gif"] }, maxFiles = 1, maxSize = 4 * 1024 * 1024, multiple = true, @@ -87,6 +84,7 @@ export const FileUploader = forwardRef< const reSelectAll = maxFiles === 1 ? true : reSelect const direction: DirectionOptions = dir === "rtl" ? "rtl" : "ltr" + const isLOF = Boolean(value?.length && value.length === maxFiles) const removeFileFromSet = useCallback( (i: number) => { @@ -97,6 +95,38 @@ export const FileUploader = forwardRef< [value, onValueChange] ) + const dropzoneState = useDropzone({ + ...(dropzoneOptions ? dropzoneOptions : { accept, maxFiles, maxSize, multiple }), + onDrop: (acceptedFiles: File[], rejectedFiles: FileRejection[]) => { + const newValues: File[] = value ? [...value] : [] + + if (reSelectAll) { + newValues.splice(0, newValues.length) + } + + acceptedFiles.forEach((file) => { + if (newValues.length < maxFiles) newValues.push(file) + }) + + onValueChange(newValues) + + if (rejectedFiles.length > 0) { + for (const rejected of rejectedFiles) { + if (rejected.errors[0]?.code === "file-too-large") { + toast.error(`File is too large. Max size is ${maxSize / 1024 / 1024}MB`) + break + } + if (rejected.errors[0]?.message) { + toast.error(rejected.errors[0].message) + break + } + } + } + }, + onDropRejected: () => setIsFileTooBig(true), + onDropAccepted: () => setIsFileTooBig(false), + }) + const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { e.preventDefault() @@ -134,7 +164,7 @@ export const FileUploader = forwardRef< movePrev() } else if (e.key === "Enter" || e.key === "Space") { if (activeIndex === -1) { - (dropzoneState.inputRef.current as any)?.click() + ;(dropzoneState as typeof dropzoneState & { open?: () => void }).open?.() } } else if (e.key === "Delete" || e.key === "Backspace") { if (activeIndex !== -1) { @@ -149,74 +179,13 @@ export const FileUploader = forwardRef< setActiveIndex(-1) } }, - [value, activeIndex, removeFileFromSet] - ) - - const onDrop = useCallback( - (acceptedFiles: File[], rejectedFiles: FileRejection[]) => { - const files = acceptedFiles - - if (!files) { - toast.error("file error , probably too big") - return - } - - const newValues: File[] = value ? [...value] : [] - - if (reSelectAll) { - newValues.splice(0, newValues.length) - } - - files.forEach((file) => { - if (newValues.length < maxFiles) { - newValues.push(file) - } - }) - - onValueChange(newValues) - - if (rejectedFiles.length > 0) { - for (let i = 0; i < rejectedFiles.length; i++) { - if (rejectedFiles[i].errors[0]?.code === "file-too-large") { - toast.error( - `File is too large. Max size is ${maxSize / 1024 / 1024}MB` - ) - break - } - if (rejectedFiles[i].errors[0]?.message) { - toast.error(rejectedFiles[i].errors[0].message) - break - } - } - } - }, - [reSelectAll, value] + [value, activeIndex, removeFileFromSet, orientation, direction, dropzoneState] ) - useEffect(() => { - if (!value) return - if (value.length === maxFiles) { - setIsLOF(true) - return - } - setIsLOF(false) - }, [value, maxFiles]) - - const opts = dropzoneOptions - ? dropzoneOptions - : { accept, maxFiles, maxSize, multiple } - - const dropzoneState = useDropzone({ - ...opts, - onDrop, - onDropRejected: () => setIsFileTooBig(true), - onDropAccepted: () => setIsFileTooBig(false), - }) - return ( }, isLOF, isFileTooBig, removeFileFromSet, @@ -230,13 +199,9 @@ export const FileUploader = forwardRef< ref={ref} tabIndex={0} onKeyDownCapture={handleKeyDown} - className={cn( - "grid w-full overflow-hidden focus:outline-none ", - className, - { - "gap-2": value && value.length > 0, - } - )} + className={cn("grid w-full overflow-hidden focus:outline-none ", className, { + "gap-2": value && value.length > 0, + })} dir={dir} {...props} > @@ -257,11 +222,7 @@ export const FileUploaderContent = forwardRef< const containerRef = useRef(null) return ( -
+