fix: enhancements ✨♻️⚡️ (#83)

.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} />
+ )
  }
 }