chore: format and add knip ci

.github/workflows/knip.yml

@@ -0,0 +1,23 @@
+name: Knip
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  knip:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: setup-bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: install dependencies
+        run: bun install
+
+      - name: knip
+        run: bun run knip

package.json

@@ -43,6 +43,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "globals": "^15.14.0",
+    "knip": "^5.43.6",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "tailwindcss": "3.4.16",

src/App.tsx

@@ -187,56 +187,55 @@ function App() {
   };
 
   return (
-    <div style={
-      {
-        height:"100vh",
-        width:"100vw"
+    <div
+      style={{
+        height: "100vh",
+        width: "100vw",
       }}
     >
-
-        <ResizablePanelGroup direction="horizontal" className="h-screen w-screen">
-      <ResizablePanel defaultSize={40} minSize={30}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={40}>
-            <div className="h-full overflow-auto">
-              <InputSection
-                editorRef={editorRef}
-                runQuery={runQuery}
-                handleFileUpload={handleFileUpload}
-                csvPreview={csvPreview}
-                columnTypes={columnTypes}
-                handleTypeChange={handleTypeChange}
-                createTable={createTable}
-                tableName={tableName}
-                setTableName={setTableName}
-              />
-            </div>
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={10}>
-            <div className="h-full overflow-auto">
-              <OPFSViewer />
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={60}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={50}>
-            <div className="h-full overflow-auto">
-              <OutputSection output={output} />
-            </div>
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={50}>
-            <div className="h-full overflow-auto">
-              <VisualizeSection output={output} />
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </ResizablePanel>
-    </ResizablePanelGroup>
+      <ResizablePanelGroup direction="horizontal" className="h-screen w-screen">
+        <ResizablePanel defaultSize={40} minSize={30}>
+          <ResizablePanelGroup direction="vertical">
+            <ResizablePanel defaultSize={40}>
+              <div className="h-full overflow-auto">
+                <InputSection
+                  editorRef={editorRef}
+                  runQuery={runQuery}
+                  handleFileUpload={handleFileUpload}
+                  csvPreview={csvPreview}
+                  columnTypes={columnTypes}
+                  handleTypeChange={handleTypeChange}
+                  createTable={createTable}
+                  tableName={tableName}
+                  setTableName={setTableName}
+                />
+              </div>
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={10}>
+              <div className="h-full overflow-auto">
+                <OPFSViewer />
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={60}>
+          <ResizablePanelGroup direction="vertical">
+            <ResizablePanel defaultSize={50}>
+              <div className="h-full overflow-auto">
+                <OutputSection output={output} />
+              </div>
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={50}>
+              <div className="h-full overflow-auto">
+                <VisualizeSection output={output} />
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </div>
   );
 }

src/components/ui/resizable.tsx

@@ -1,7 +1,7 @@
-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const ResizablePanelGroup = ({
   className,
@@ -10,25 +10,25 @@ const ResizablePanelGroup = ({
   <ResizablePrimitive.PanelGroup
     className={cn(
       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
+      className,
     )}
     {...props}
   />
-)
+);
 
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
       "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
+      className,
     )}
     {...props}
   >
@@ -38,6 +38,6 @@ const ResizableHandle = ({
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
-)
+);
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

src/types/file-system.d.ts

@@ -1,18 +1,23 @@
 interface FileSystemHandle {
-  kind: 'file' | 'directory';
+  kind: "file" | "directory";
   name: string;
 }
 
 interface FileSystemDirectoryHandle extends FileSystemHandle {
-  kind: 'directory';
+  kind: "directory";
   entries(): AsyncIterableIterator<[string, FileSystemHandle]>;
-  getFileHandle(name: string, options?: { create?: boolean }): Promise<FileSystemFileHandle>;
+  getFileHandle(
+    name: string,
+    options?: { create?: boolean },
+  ): Promise<FileSystemFileHandle>;
   removeEntry(name: string, options?: { recursive?: boolean }): Promise<void>;
-  requestPermission(descriptor: { mode: 'readwrite' | 'read' }): Promise<PermissionState>;
+  requestPermission(descriptor: {
+    mode: "readwrite" | "read";
+  }): Promise<PermissionState>;
 }
 
 interface FileSystemFileHandle extends FileSystemHandle {
-  kind: 'file';
+  kind: "file";
   createWritable(): Promise<FileSystemWritableFileStream>;
   getFile(): Promise<File>;
 }