bunsane 0.1.4 → 0.2.0

package/studio/src/components/DataTable.tsx

@@ -0,0 +1,211 @@
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  type ColumnDef,
+  flexRender,
+  type SortingState,
+} from '@tanstack/react-table'
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+interface DataTableProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    loading: boolean;
+    hasMore: boolean;
+    sorting: SortingState;
+    onSortingChange: (
+        updater: SortingState | ((old: SortingState) => SortingState)
+    ) => void;
+    selectedRecords: Set<string>;
+    onSelectionChange: (selected: Set<string>) => void;
+    getRecordId: (record: T) => string;
+    loadMoreRef: (node?: Element | null) => void;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    getRowClassName?: (record: T) => string;
+}
+
+export function DataTable<T extends Record<string, any>>({
+    data,
+    columns,
+    loading,
+    hasMore,
+    sorting,
+    onSortingChange,
+    selectedRecords,
+    onSelectionChange,
+    getRecordId,
+    loadMoreRef,
+    emptyMessage = "No records found",
+    loadingMessage = "Loading more records...",
+    getRowClassName,
+}: DataTableProps<T>) {
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        onSortingChange,
+        state: {
+            sorting,
+            rowSelection: Object.fromEntries(
+                Array.from(selectedRecords).map((id) => [
+                    data.findIndex((d) => getRecordId(d) === id),
+                    true,
+                ])
+            ),
+        },
+        onRowSelectionChange: (updater) => {
+            const currentSelection = Object.fromEntries(
+                Array.from(selectedRecords).map((id) => [
+                    data.findIndex((d) => getRecordId(d) === id),
+                    true,
+                ])
+            );
+            const newSelection =
+                typeof updater === "function"
+                    ? updater(currentSelection)
+                    : updater;
+            const newSelectedRecords = new Set<string>();
+            Object.entries(newSelection).forEach(([index, selected]) => {
+                if (selected) {
+                    const record = data[parseInt(index)];
+                    if (record) {
+                        newSelectedRecords.add(getRecordId(record));
+                    }
+                }
+            });
+            onSelectionChange(newSelectedRecords);
+        },
+    });
+
+    const handleCellClick = (cell: any, event: React.MouseEvent) => {
+        // Skip copy for select column
+        if (cell.column.id === "select") return;
+
+        // Prevent event bubbling
+        event.stopPropagation();
+
+        const value = cell.getValue();
+        let textToCopy = "";
+
+        // Extract the actual value if it has a .value property
+        let actualValue = value;
+        if (typeof value === "object" && value !== null && "value" in value) {
+            actualValue = value.value;
+        }
+
+        // Only copy primitive values (not objects)
+        if (typeof actualValue === "object" && actualValue !== null) {
+            return; // Don't copy objects, let ReactJson handle it
+        } else {
+            textToCopy = String(actualValue ?? "");
+        }
+
+        if (textToCopy) {
+            navigator.clipboard
+                .writeText(textToCopy)
+                .then(() => {
+                    toast.success("Copied to clipboard", {
+                        position: "top-center",
+                    });
+                })
+                .catch(() => {
+                    toast.error("Failed to copy", { position: "top-center" });
+                });
+        }
+    };
+
+    return (
+        <div className="bg-card rounded-lg border border-border overflow-hidden">
+            <div className="overflow-x-auto">
+                <table className="w-full">
+                    <thead className="bg-muted/50">
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <tr key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => (
+                                    <th
+                                        key={header.id}
+                                        className="px-4 py-3 text-left text-sm font-medium text-muted-foreground border-b border-border"
+                                    >
+                                        {header.isPlaceholder ? null : (
+                                            <div
+                                                className={
+                                                    header.column.getCanSort()
+                                                        ? "cursor-pointer select-none flex items-center gap-2"
+                                                        : ""
+                                                }
+                                                onClick={header.column.getToggleSortingHandler()}
+                                            >
+                                                {flexRender(
+                                                    header.column.columnDef
+                                                        .header,
+                                                    header.getContext()
+                                                )}
+                                                {{
+                                                    asc: "↑",
+                                                    desc: "↓",
+                                                }[
+                                                    header.column.getIsSorted() as string
+                                                ] ?? null}
+                                            </div>
+                                        )}
+                                    </th>
+                                ))}
+                            </tr>
+                        ))}
+                    </thead>
+                    <tbody>
+                        {table.getRowModel().rows.map((row) => {
+                            const extraClass = getRowClassName ? getRowClassName(row.original) : '';
+                            return (
+                            <tr
+                                key={row.id}
+                                className={`border-b border-border hover:bg-muted/50 ${extraClass}`}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <td
+                                        key={cell.id}
+                                        className="px-4 py-3 text-sm cursor-pointer hover:bg-muted/30"
+                                        onClick={(e) =>
+                                            handleCellClick(cell, e)
+                                        }
+                                    >
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext()
+                                        )}
+                                    </td>
+                                ))}
+                            </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+
+            {(loading || hasMore) && (
+                <div ref={loadMoreRef} className="p-4 text-center">
+                    {loading ? (
+                        <div className="flex items-center justify-center gap-2">
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                            {loadingMessage}
+                        </div>
+                    ) : (
+                        <div className="text-muted-foreground">
+                            Scroll for more
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {!loading && data.length === 0 && (
+                <div className="p-8 text-center text-muted-foreground">
+                    {emptyMessage}
+                </div>
+            )}
+        </div>
+    );
+}

package/studio/src/components/Layout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router'
+import { Sidebar } from './Sidebar'
+
+export function Layout() {
+  return (
+    <div className="flex h-screen bg-background">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">
+        <Outlet />
+      </main>
+    </div>
+  )
+}

package/studio/src/components/PageContainer.tsx

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react'
+
+interface PageContainerProps {
+  children: ReactNode
+}
+
+export function PageContainer({ children }: PageContainerProps) {
+  return <div className="p-8">{children}</div>
+}

package/studio/src/components/PageHeader.tsx

@@ -0,0 +1,13 @@
+interface PageHeaderProps {
+  title: string
+  description: string
+}
+
+export function PageHeader({ title, description }: PageHeaderProps) {
+  return (
+    <div className="mb-6">
+      <h1 className="text-3xl font-bold text-primary mb-2">{title}</h1>
+      <p className="text-muted-foreground">{description}</p>
+    </div>
+  )
+}

package/studio/src/components/SearchBar.tsx

@@ -0,0 +1,57 @@
+import { Search, Trash2 } from 'lucide-react'
+import { Button } from './ui/button'
+import { Input } from './ui/input'
+import { pluralize } from '../lib/utils'
+
+interface SearchBarProps {
+  search: string
+  onSearchChange: (value: string) => void
+  placeholder?: string
+  selectedCount?: number
+  onDelete?: () => void
+  itemSingular?: string
+  itemPlural?: string
+}
+
+export function SearchBar({
+  search,
+  onSearchChange,
+  placeholder = 'Search...',
+  selectedCount = 0,
+  onDelete,
+  itemSingular = 'record',
+  itemPlural = 'records',
+}: SearchBarProps) {
+  return (
+    <div className="flex items-center gap-4 mb-6">
+      <div className="relative flex-1 max-w-sm">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder={placeholder}
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      {onDelete && selectedCount > 0 && (
+        <Button
+          variant="destructive"
+          onClick={() => {
+            if (
+              window.confirm(
+                `Are you sure you want to delete ${selectedCount} ${pluralize(selectedCount, itemSingular, itemPlural)}? This action cannot be undone.`
+              )
+            ) {
+              onDelete()
+            }
+          }}
+          className="flex items-center gap-2"
+        >
+          <Trash2 className="h-4 w-4" />
+          Delete Selected ({selectedCount})
+        </Button>
+      )}
+    </div>
+  )
+}

package/studio/src/components/Sidebar.tsx

@@ -0,0 +1,294 @@
+import { useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
+import {
+    Database,
+    Home,
+    ChevronDown,
+    ChevronRight,
+    PanelLeftOpenIcon,
+    PanelLeftCloseIcon,
+    FlameIcon,
+    Search,
+    Layers,
+    Terminal,
+} from "lucide-react";
+import { useStudioStore } from "../store/studio";
+import { fetchTables } from "../lib/api";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+
+declare global {
+    interface Window {
+        bunsaneMetadata?: {
+            archeTypes: Record<
+                string,
+                {
+                    fieldName: string;
+                    componentName: string;
+                    fieldLabel: string;
+                    nullable?: boolean;
+                }[]
+            >;
+        };
+    }
+}
+
+type SidebarSection = {
+    id: string;
+    title: string;
+    icon: typeof Database;
+    items: string[];
+    getRoutePath: (item: string) => string;
+};
+
+export function Sidebar() {
+    const location = useLocation();
+    const {
+        metadata,
+        tables,
+        setMetadata,
+        setTables,
+        setLoading,
+        setError,
+        isSidebarCollapsed,
+        expandedSections,
+        setSidebarCollapsed,
+        toggleSection,
+    } = useStudioStore();
+
+    useEffect(() => {
+        // Load metadata from window
+        if (window.bunsaneMetadata) {
+            setMetadata(window.bunsaneMetadata);
+        }
+
+        // Load tables
+        const loadTables = async () => {
+            try {
+                setLoading(true);
+                const tablesData = await fetchTables();
+                setTables(tablesData);
+            } catch (error) {
+                setError(
+                    error instanceof Error
+                        ? error.message
+                        : "Failed to load tables"
+                );
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        loadTables();
+    }, [setMetadata, setTables, setLoading, setError]);
+
+    const archeTypeNames = metadata ? Object.keys(metadata.archeTypes) : [];
+
+    const sections: SidebarSection[] = [
+        {
+            id: "archeTypes",
+            title: "ArcheTypes",
+            icon: FlameIcon,
+            items: archeTypeNames,
+            getRoutePath: (archeTypeName) => `/archetype/${archeTypeName}`,
+        },
+        {
+            id: "tables",
+            title: "Tables",
+            icon: Database,
+            items: tables,
+            getRoutePath: (tableName) => `/table/${tableName}`,
+        },
+    ];
+
+    const handleToggleSection = (section: string) => {
+        if (isSidebarCollapsed) {
+            setSidebarCollapsed(false);
+            if (!expandedSections[section]) {
+                toggleSection(section);
+            }
+            return;
+        }
+
+        toggleSection(section);
+    };
+
+    const handleToggleSidebar = () => {
+        setSidebarCollapsed(!isSidebarCollapsed);
+    };
+
+    return (
+        <aside
+            className={cn(
+                "bg-card border-r border-border flex flex-col transition-all duration-300",
+                isSidebarCollapsed ? "w-16" : "w-80"
+            )}
+        >
+            <div
+                className={cn(
+                    "p-6 border-b border-border flex items-center justify-between",
+                    isSidebarCollapsed && "p-4"
+                )}
+            >
+                {!isSidebarCollapsed && (
+                    <div>
+                        <h1 className="text-2xl font-bold text-primary">
+                            BunSane Studio
+                        </h1>
+                        <p className="text-sm text-muted-foreground mt-1">
+                            Database Management
+                        </p>
+                    </div>
+                )}
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleToggleSidebar}
+                    className={cn(
+                        "text-muted-foreground hover:text-foreground",
+                        isSidebarCollapsed && "mx-auto"
+                    )}
+                >
+                    {isSidebarCollapsed ? (
+                        <PanelLeftOpenIcon className="h-5 w-5" />
+                    ) : (
+                        <PanelLeftCloseIcon className="h-5 w-5" />
+                    )}
+                </Button>
+            </div>
+
+            <nav className="flex-1 overflow-auto p-4">
+                <div className="space-y-2">
+                    {/* Welcome */}
+                    <Link
+                        to="/"
+                        className={cn(
+                            "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                            location.pathname === "/"
+                                ? "bg-primary text-primary-foreground"
+                                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                            isSidebarCollapsed && "justify-center px-0"
+                        )}
+                        title={isSidebarCollapsed ? "Welcome" : undefined}
+                    >
+                        <Home className="h-4 w-4" />
+                        {!isSidebarCollapsed && "Welcome"}
+                    </Link>
+
+                    {/* Entity Inspector */}
+                    <Link
+                        to="/entity"
+                        className={cn(
+                            "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                            location.pathname.startsWith("/entity")
+                                ? "bg-primary text-primary-foreground"
+                                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                            isSidebarCollapsed && "justify-center px-0"
+                        )}
+                        title={isSidebarCollapsed ? "Entity Inspector" : undefined}
+                    >
+                        <Search className="h-4 w-4" />
+                        {!isSidebarCollapsed && "Entity Inspector"}
+                    </Link>
+
+                    {/* Components */}
+                    <Link
+                        to="/components"
+                        className={cn(
+                            "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                            location.pathname === "/components"
+                                ? "bg-primary text-primary-foreground"
+                                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                            isSidebarCollapsed && "justify-center px-0"
+                        )}
+                        title={isSidebarCollapsed ? "Components" : undefined}
+                    >
+                        <Layers className="h-4 w-4" />
+                        {!isSidebarCollapsed && "Components"}
+                    </Link>
+
+                    {/* Query Runner */}
+                    <Link
+                        to="/query"
+                        className={cn(
+                            "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                            location.pathname === "/query"
+                                ? "bg-primary text-primary-foreground"
+                                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                            isSidebarCollapsed && "justify-center px-0"
+                        )}
+                        title={isSidebarCollapsed ? "SQL Query" : undefined}
+                    >
+                        <Terminal className="h-4 w-4" />
+                        {!isSidebarCollapsed && "SQL Query"}
+                    </Link>
+
+                    {/* Dynamic Sections */}
+                    {sections.map((section) => {
+                        const Icon = section.icon;
+                        const isExpanded = expandedSections[section.id];
+
+                        return (
+                            <div key={section.id} className="space-y-1">
+                                <button
+                                    onClick={() =>
+                                        handleToggleSection(section.id)
+                                    }
+                                    className={cn(
+                                        "w-full flex items-center gap-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-colors",
+                                        isSidebarCollapsed &&
+                                            "justify-center px-0"
+                                    )}
+                                    title={
+                                        isSidebarCollapsed
+                                            ? `${section.title} (${section.items.length})`
+                                            : undefined
+                                    }
+                                >
+                                    <Icon className="h-4 w-4" />
+                                    {!isSidebarCollapsed && (
+                                        <>
+                                            <span className="flex-1 text-left">
+                                                {section.title} (
+                                                {section.items.length})
+                                            </span>
+                                            {isExpanded ? (
+                                                <ChevronDown className="h-4 w-4" />
+                                            ) : (
+                                                <ChevronRight className="h-4 w-4" />
+                                            )}
+                                        </>
+                                    )}
+                                </button>
+                                {!isSidebarCollapsed && isExpanded && (
+                                    <div className="ml-4 space-y-1">
+                                        {section.items.map((item) => {
+                                            const routePath =
+                                                section.getRoutePath(item);
+
+                                            return (
+                                                <Link
+                                                    key={item}
+                                                    to={routePath}
+                                                    className={cn(
+                                                        "block px-3 py-2 rounded-md text-sm transition-colors",
+                                                        location.pathname ===
+                                                            routePath
+                                                            ? "bg-primary text-primary-foreground"
+                                                            : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                                                    )}
+                                                >
+                                                    {item}
+                                                </Link>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </nav>
+        </aside>
+    );
+}

package/studio/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/studio/src/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+import { type InputHTMLAttributes } from 'react'
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string
+}
+
+export function Checkbox({ label, id, className = '', ...props }: CheckboxProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="checkbox"
+        id={id}
+        className={`h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2 cursor-pointer ${className}`}
+        {...props}
+      />
+      {label && (
+        <label
+          htmlFor={id}
+          className="text-sm font-medium text-foreground cursor-pointer select-none"
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  )
+}