Refactor(Variable): Optimize variable name

src/components/Playground/CodeEditor/Editor/hooks.ts

@@ -76,11 +76,11 @@ export const useEditor = () => {
 export const useTypesProgress = () => {
     const [progress, setProgress] = useState(0)
     const [total, setTotal] = useState(0)
-    const [finished, setFinished] = useState(false)
+    const [isFinished, setIsFinished] = useState(false)
 
     const onWatch = (typeHelper: TypeHelper) => {
         const handleStarted = () => {
-            setFinished(false)
+            setIsFinished(false)
         }
         typeHelper.addListener('started', handleStarted)
 
@@ -91,7 +91,7 @@ export const useTypesProgress = () => {
         typeHelper.addListener('progress', handleProgress)
 
         const handleFinished = () => {
-            setFinished(true)
+            setIsFinished(true)
         }
         typeHelper.addListener('progress', handleFinished)
 
@@ -105,7 +105,7 @@ export const useTypesProgress = () => {
     return {
         progress,
         total,
-        finished,
+        finished: isFinished,
         onWatch
     }
 }

src/components/Playground/CodeEditor/FileSelector/Item.tsx

@@ -31,7 +31,7 @@ const Item = ({
 }: ItemProps) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const [fileName, setFileName] = useState(value)
-    const [creating, setCreating] = useState(prop.creating)
+    const [isCreating, setIsCreating] = useState(prop.creating)
 
     const handleOnClick = () => {
         if (hasEditing) {
@@ -52,35 +52,35 @@ const Item = ({
     }
 
     const finishNameFile = () => {
-        if (!creating || onValidate ? !onValidate?.(fileName, value) : false) {
+        if (!isCreating || onValidate ? !onValidate?.(fileName, value) : false) {
             inputRef.current?.focus()
             return
         }
 
         if (fileName === value && active) {
-            setCreating(false)
+            setIsCreating(false)
             setHasEditing?.(false)
             return
         }
 
         onOk?.(fileName)
-        setCreating(false)
+        setIsCreating(false)
         setHasEditing?.(false)
     }
 
     const cancelNameFile = () => {
         setFileName(value)
-        setCreating(false)
+        setIsCreating(false)
         setHasEditing?.(false)
         onCancel?.()
     }
 
     const handleOnDoubleClick = () => {
-        if (readonly || creating || hasEditing) {
+        if (readonly || isCreating || hasEditing) {
             return
         }
 
-        setCreating(true)
+        setIsCreating(true)
         setHasEditing?.(true)
         setFileName(value)
         setTimeout(() => {
@@ -112,7 +112,7 @@ const Item = ({
             className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
             onClick={handleOnClick}
         >
-            {creating ? (
+            {isCreating ? (
                 <div className={'tab-item-input'}>
                     <input
                         ref={inputRef}

src/components/Playground/CodeEditor/FileSelector/index.tsx

@@ -34,7 +34,7 @@ const FileSelector = ({
 }: FileSelectorProps) => {
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [tabs, setTabs] = useState<string[]>([])
-    const [creating, setCreating] = useState(false)
+    const [isCreating, setIsCreating] = useState(false)
     const [hasEditing, setHasEditing] = useState(false)
 
     const getMaxSequenceTabName = (filesName: string[]) => {
@@ -56,7 +56,7 @@ const FileSelector = ({
         }
 
         setTabs([...tabs, getMaxSequenceTabName(tabs)])
-        setCreating(true)
+        setIsCreating(true)
         setTimeout(() => {
             hideScrollbarRef.current?.scrollRight(1000)
         })
@@ -64,16 +64,16 @@ const FileSelector = ({
 
     const handleOnCancel = () => {
         onError?.('')
-        if (!creating) {
+        if (!isCreating) {
             return
         }
         tabs.pop()
         setTabs([...tabs])
-        setCreating(false)
+        setIsCreating(false)
     }
 
     const handleOnClickTab = (fileName: string) => {
-        if (creating) {
+        if (isCreating) {
             return
         }
 
@@ -97,9 +97,9 @@ const FileSelector = ({
     }
 
     const handleOnSaveTab = (value: string, item: string) => {
-        if (creating) {
+        if (isCreating) {
             onAddFile?.(value)
-            setCreating(false)
+            setIsCreating(false)
         } else {
             onUpdateFileName?.(value, item)
         }
@@ -179,7 +179,7 @@ const FileSelector = ({
                                     key={index + item}
                                     value={item}
                                     active={selectedFileName === item}
-                                    creating={creating}
+                                    creating={isCreating}
                                     readonly={readonly || notRemovableFiles.includes(item)}
                                     hasEditing={hasEditing}
                                     setHasEditing={setHasEditing}

src/components/Playground/Output/Preview/Render.tsx

@@ -42,7 +42,7 @@ const iframeUrl = getIframeUrl(iframeRaw)
 
 const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
-    const [loaded, setLoaded] = useState(false)
+    const [isLoaded, setIsLoaded] = useState(false)
     const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
     const [zoom, setZoom] = useState(1)
     const [isRotate, setIsRotate] = useState(false)
@@ -148,7 +148,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
     }
 
     useEffect(() => {
-        if (loaded) {
+        if (isLoaded) {
             iframeRef.current?.contentWindow?.postMessage(
                 {
                     type: 'UPDATE',
@@ -157,10 +157,10 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                 '*'
             )
         }
-    }, [loaded, compiledCode])
+    }, [isLoaded, compiledCode])
 
     useEffect(() => {
-        if (loaded) {
+        if (isLoaded) {
             iframeRef.current?.contentWindow?.postMessage(
                 {
                     type: 'SCALE',
@@ -169,7 +169,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                 '*'
             )
         }
-    }, [loaded, zoom])
+    }, [isLoaded, zoom])
 
     return mobileMode ? (
         <>
@@ -202,7 +202,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                                 key={iframeKey}
                                 ref={iframeRef}
                                 src={iframeUrl}
-                                onLoad={() => setLoaded(true)}
+                                onLoad={() => setIsLoaded(true)}
                                 sandbox="allow-downloads allow-forms allow-modals allow-scripts"
                             />
                         </div>
@@ -244,7 +244,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
             key={iframeKey}
             ref={iframeRef}
             src={iframeUrl}
-            onLoad={() => setLoaded(true)}
+            onLoad={() => setIsLoaded(true)}
             sandbox="allow-downloads allow-forms allow-modals allow-scripts"
         />
     )

src/components/Playground/compiler.ts

@@ -66,7 +66,7 @@ class Compiler {
         })
 
     stop = () => {
-        esbuild.stop()
+        void esbuild.stop()
     }
 
     private fileResolverPlugin = (