fix: enhancements ✨♻️⚡️

.changeset/loud-drinks-tell.md

@@ -0,0 +1,5 @@
+---
+"@tablex/core": patch
+---
+
+Better scroll areas + using zustand for table state + boolean data type support + optimize pre commit hooks

.husky/pre-commit

@@ -2,19 +2,19 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 
-git_diff= git diff --cached --name-only 
-
-if git_diff | grep --quiet -e "**/Cargo.toml **/Cargo.lock **/*.rs"
+if ! git diff --cached --quiet HEAD -- "package.json" "apps\/core\/**" "packages\/**";
 then
-    bun rust:lint
+    bun --filter @tablex/core lint
 fi
 
-if git_diff | grep --quiet -e "package.json apps/core/** packages/**"
+if ! git diff --cached --quiet HEAD --  "**\/Cargo.toml"  "**\/Cargo.lock"  "**\/*.rs";
 then
-    bun --filter @tablex/core lint
+    bun rust:lint
 fi
 
-if git_diff | grep --quiet -e "package.json apps/web/** packages/**"
+if ! git diff --cached --quiet HEAD --  "package.json"  "apps\/web\/**"  "packages\/**";
 then
     bun astro:check
-fi
+fi
+
+exit 0

apps/core/eslint.config.mjs

@@ -0,0 +1,53 @@
+import { fixupConfigRules } from "@eslint/compat"
+import { FlatCompat } from "@eslint/eslintrc"
+import js from "@eslint/js"
+import tsParser from "@typescript-eslint/parser"
+import reactRefresh from "eslint-plugin-react-refresh"
+import globals from "globals"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
+})
+
+export default [
+  {
+    ignores: ["**/dist", "src/components/ui", "src/bindings.ts"]
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react-hooks/recommended"
+    )
+  ),
+  {
+    plugins: {
+      "react-refresh": reactRefresh
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser
+      },
+
+      parser: tsParser
+    },
+
+    rules: {
+      "react-refresh/only-export-components": [
+        "warn",
+        {
+          allowConstantExport: true
+        }
+      ],
+
+      "@typescript-eslint/no-explicit-any": "off"
+    }
+  }
+]

apps/core/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "bunx --bun vite",
     "build": "bunx --bun vite build",
-    "lint": "bunx eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "bunx eslint . ",
     "preview": "bunx --bun vite preview"
   },
   "dependencies": {
@@ -19,6 +19,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
@@ -57,6 +58,9 @@
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.9.0",
     "@tanstack/router-devtools": "^1.34.7",
     "@tanstack/router-vite-plugin": "^1.34.1",
     "@tauri-apps/cli": "2.0.0-beta.22",
@@ -66,7 +70,6 @@
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8",

apps/core/src-tauri/src/main.rs

@@ -105,11 +105,12 @@ fn main() {
         .invoke_handler(builder.invoke_handler())
         .setup(move |app| {
             let app_handle = app.app_handle();
+            let rt = tokio::runtime::Runtime::new().unwrap();
+            let _settings = load_settings_file(app_handle.clone())?;
 
             ensure_config_files_exist(app_handle)?;
             builder.mount_events(app);
 
-            let rt = tokio::runtime::Runtime::new().unwrap();
             rt.block_on(cli::handle_cli_args(app_handle, args, cmd));
 
             #[cfg(debug_assertions)]
@@ -122,7 +123,9 @@ fn main() {
             #[cfg(not(debug_assertions))]
             {
                 app_handle.plugin(tauri_plugin_updater::Builder::new().build())?;
-                check_for_update(app_handle.clone())?;
+                if _settings.check_for_updates {
+                    check_for_update(app_handle.clone())?;
+                }
             }
 
             Ok(())

apps/core/src/bindings.ts

@@ -175,8 +175,8 @@ tableContentsChanged: "table-contents-changed"
 
 /** user-defined constants **/
 
-export const KEYBINDINGS_FILE_NAME = "keybindings.json" as const;
 export const SETTINGS_FILE_NAME = "settings.json" as const;
+export const KEYBINDINGS_FILE_NAME = "keybindings.json" as const;
 
 /** user-defined types **/
 

apps/core/src/commands/row.ts

@@ -1,6 +1,6 @@
 import { commands } from "@/bindings"
 import { customToast } from "@/lib/utils"
-import type { Row, Table } from "@tanstack/react-table"
+import type { Row } from "@tanstack/react-table"
 import toast from "react-hot-toast"
 
 export const createRowCmd = async (
@@ -14,24 +14,22 @@ export const createRowCmd = async (
 }
 
 export const deleteRowsCmd = async (
-  table: Table<any>,
   tableName: string,
-  rows: Row<any>[]
+  rows: Row<any>[],
+  pkColumn?: string
 ) => {
-  const column = table.getColumn("pk")
-  if (!column)
+  if (!pkColumn)
     return toast.error("Table Doesn't have a primary key", {
       id: "table_pk_error"
     })
 
   const command = await commands.deleteRows(
     // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-    column.columnDef.meta?.name!,
-    rows.map((row) => row.getValue(column.id)),
+    pkColumn,
+    rows.map((row) => row.getValue(pkColumn)),
     tableName
   )
   customToast(command, () => {}, "delete_row")
-  table.toggleAllRowsSelected(false)
 }
 
 export const updateRowCmd = async (

apps/core/src/components/dialogs/sql-dialog.tsx

@@ -21,6 +21,7 @@ import { useSqlEditorState } from "@/state/dialogState"
 import { Editor, type OnMount } from "@monaco-editor/react"
 import { type Dispatch, type SetStateAction, useRef, useState } from "react"
 import CustomTooltip from "../custom-tooltip"
+import { ScrollArea, ScrollBar } from "../ui/scroll-area"
 
 type RawQueryResult = Result<{ [x: string]: JsonValue }[], string>
 type MonakoEditor = Parameters<OnMount>[0]
@@ -67,11 +68,7 @@ const SQLDialog = () => {
               )}
             </ResizablePanel>
             <ResizableHandle />
-            <ResizablePanel
-              style={{
-                overflow: "auto"
-              }}
-            >
+            <ResizablePanel>
               {queryResult &&
                 (queryResult.status === "error" ? (
                   <pre className="m-4">{queryResult.error}</pre>
@@ -130,26 +127,29 @@ type ResultTableProps = {
 
 const ResultTable = ({ result }: ResultTableProps) => {
   return (
-    <Table>
-      <TableHeader className="bg-zinc-800">
-        <TableRow className="sticky top-[-1px] border-none backdrop-blur-lg">
-          {/* A quick trick to get column headings without the need to 
+    <ScrollArea className="h-full overflow-auto">
+      <Table>
+        <TableHeader className="bg-zinc-800">
+          <TableRow className="sticky -top-[1px] border-none backdrop-blur-lg">
+            {/* A quick trick to get column headings without the need to 
               make an extra call to the backend
             */}
-          {Object.keys(result[0]).map((header) => (
-            <TableHead className="">{header}</TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {result.map((row) => (
-          <TableRow>
-            {Object.values(row).map((rowValue) => (
-              <TableCell>{rowValue?.toString()}</TableCell>
+            {Object.keys(result[0]).map((header) => (
+              <TableHead>{header}</TableHead>
             ))}
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHeader>
+        <TableBody>
+          {result.map((row) => (
+            <TableRow>
+              {Object.values(row).map((rowValue) => (
+                <TableCell>{rowValue?.toString()}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
   )
 }

apps/core/src/components/sheets/components/dynamic-input.tsx

@@ -1,4 +1,5 @@
 import type { ColumnProps } from "@/bindings"
+import { Switch } from "@/components/ui/switch"
 import type { ControllerRenderProps, FieldValues } from "react-hook-form"
 import { Input } from "../../ui/input"
 import { DateTimePicker } from "./date-time-picker"
@@ -67,8 +68,17 @@ const DynamicFormInput = <T extends FieldValues>({
       )
     case "json":
       return <JsonEditor field={field} defaultValue={defaultValue} />
+    case "boolean":
+      return (
+        <Switch
+          checked={field.value || Boolean(defaultValue)}
+          onCheckedChange={field.onChange}
+        />
+      )
     default:
-      return <Input {...field} disabled={disabled} />
+      return (
+        <Input {...field} disabled={disabled} defaultValue={defaultValue} />
+      )
   }
 }