bunsane 0.3.1 → 0.4.0

package/studio/src/components/DataTable.tsx

@@ -1,211 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,294 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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>
-  )
-}