d1s 0.2.11 → 0.2.13

package/src/components/column-selector.jsx

@@ -1,133 +0,0 @@
-// components/column-selector.jsx
-import React, { useState, useEffect } from 'react';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Columns } from 'lucide-react';
-
-export function ColumnSelector({ schema = [], visibleColumns = [], onColumnToggle }) {
-  const [searchTerm, setSearchTerm] = useState('');
-
-  // Initialize visible columns with all columns from schema
-  useEffect(() => {
-    if (!schema || schema.length === 0) return;
-
-    // Get all column names from schema
-    const allColumns = schema.map(col => col.name);
-
-    // If visibleColumns is empty, make all columns visible
-    if (visibleColumns.length === 0) {
-      allColumns.forEach(col => onColumnToggle(col));
-    }
-  }, [schema, visibleColumns.length, onColumnToggle]);
-
-  // Filter columns based on search term
-  const filteredColumns = schema.filter(col =>
-    col.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-  const filteredColumnNames = filteredColumns.map(col => col.name);
-
-  // Determine if all filtered columns are selected
-  const allFilteredSelected =
-    filteredColumnNames.length > 0 &&
-    filteredColumnNames.every(name => visibleColumns.includes(name));
-
-  // Handle individual checkbox change
-  const handleCheckboxChange = (columnName) => {
-    onColumnToggle(columnName);
-  };
-
-  // Handle the "Select All" checkbox change for the filtered list
-  const handleSelectAllChange = (checked) => {
-    if (checked) {
-      // For every filtered column that is not visible, toggle it on
-      filteredColumns.forEach(col => {
-        if (!visibleColumns.includes(col.name)) {
-          onColumnToggle(col.name);
-        }
-      });
-    } else {
-      // For every filtered column that is visible, toggle it off
-      filteredColumns.forEach(col => {
-        if (visibleColumns.includes(col.name)) {
-          onColumnToggle(col.name);
-        }
-      });
-    }
-  };
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button 
-          size="sm"
-          variant="outline"
-          className="font-semibold"
-        >
-          <Columns className="h-4 w-4" />
-          Columns ({visibleColumns.length})
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-64 font-sans">
-        <div className="p-2">
-          <Input
-            placeholder="Search columns..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="h-8"
-          />
-        </div>
-
-        {/* Select All Option */}
-        <div className="flex items-center space-x-2 px-2 py-1.5 hover:bg-accent rounded-md">
-          <Checkbox
-            id="select-all-columns"
-            checked={allFilteredSelected}
-            onCheckedChange={handleSelectAllChange}
-            className="shrink-0"
-          />
-          <label
-            htmlFor="select-all-columns"
-            className="flex-1 cursor-pointer text-sm font-medium"
-          >
-            Select All {searchTerm && '(Filtered)'}
-          </label>
-        </div>
-
-        <div className="max-h-[300px] overflow-y-auto">
-          {filteredColumns.map((column) => (
-            <div
-              key={column.name}
-              className="flex items-start space-x-2 px-2 py-1.5 hover:bg-accent rounded-md"
-            >
-              <Checkbox
-                id={`column-${column.name}`}
-                checked={visibleColumns.includes(column.name)}
-                onCheckedChange={() => handleCheckboxChange(column.name)}
-                className="mt-1"
-              />
-              <label
-                htmlFor={`column-${column.name}`}
-                className="flex-1 cursor-pointer"
-              >
-                <div className="text-sm font-medium">
-                  {column.name}
-                </div>
-                <div className="text-xs text-muted-foreground">
-                  {column.type.toLowerCase()}
-                </div>
-              </label>
-            </div>
-          ))}
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default ColumnSelector;

package/src/components/column-sorting.jsx

@@ -1,65 +0,0 @@
-// components/column-sorting.jsx
-'use client';
-
-import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
-import { Button } from "@/components/ui/button";
-
-export function SortableHeader({ 
-  column, 
-  sortConfig, 
-  onSort,
-  children 
-}) {
-  const direction = sortConfig[column];
-  
-  return (
-    <div className="flex items-center w-full">
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-8 hover:bg-neutral-100 w-full justify-between"
-        onClick={() => {
-          const nextDirection = !direction 
-            ? 'asc' 
-            : direction === 'asc' 
-              ? 'desc' 
-              : null;
-          onSort(column, nextDirection);
-        }}
-      >
-        <span className="flex items-center gap-1 font-mono">
-          {children}
-        </span>
-        <span className="shrink-0">
-          {direction === 'asc' && <ArrowUp className="h-4 w-4" />}
-          {direction === 'desc' && <ArrowDown className="h-4 w-4" />}
-          {!direction && <ArrowUpDown className="h-4 w-4" />}
-        </span>
-      </Button>
-    </div>
-  );
-}
-
-export function sortData(data, column, direction) {
-  if (!direction || !data.length) return data;
-
-  return [...data].sort((a, b) => {
-    const aVal = a[column];
-    const bVal = b[column];
-
-    // Handle null values
-    if (aVal == null && bVal == null) return 0;
-    if (aVal == null) return 1;
-    if (bVal == null) return -1;
-
-    // Compare based on type
-    if (typeof aVal === 'number' && typeof bVal === 'number') {
-      return direction === 'asc' ? aVal - bVal : bVal - aVal;
-    }
-
-    // String comparison for everything else
-    const aStr = String(aVal).toLowerCase();
-    const bStr = String(bVal).toLowerCase();
-    return direction === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
-  });
-}

package/src/components/delete-records-dialog.jsx

@@ -1,64 +0,0 @@
-// components/delete-records-dialog.jsx
-'use client';
-
-import React from 'react';
-import { AlertCircle } from 'lucide-react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-
-export function DeleteRecordsDialog({
-  isOpen,
-  onClose,
-  onConfirm,
-  selectedCount,
-  tableName,
-  isDeleting,
-  error
-}) {
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-md font-sans">
-      <DialogHeader>
-        <DialogTitle className="mb-2">Delete {selectedCount} {selectedCount === 1 ? 'Record' : 'Records'}?</DialogTitle>
-        <DialogDescription className="text-neutral-600 font-medium">
-          You're about to delete {selectedCount} {selectedCount === 1 ? 'record' : 'records'} from <span className="font-sans font-bold text-neutral-900">{tableName}</span>.
-        </DialogDescription>
-      </DialogHeader>
-
-        {error && (
-          <Alert variant="destructive">
-            <AlertCircle className="h-4 w-4" />
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-
-        <DialogFooter className="flex gap-1 mt-2 sm:justify-end font-sans">
-          <Button
-            variant="outline"
-            onClick={onClose}
-            disabled={isDeleting}
-          >
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={onConfirm}
-            disabled={isDeleting}
-          >
-            {isDeleting ? 'Deleting...' : 'Delete'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default DeleteRecordsDialog;

package/src/components/download-button.jsx

@@ -1,205 +0,0 @@
-// components/download-button.jsx
-'use client';
-
-import React, { memo, useState } from 'react';
-import { Download, FileJson, FileSpreadsheet, FileCode, Loader2 } from 'lucide-react';
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useToast } from "@/hooks/use-toast";
-
-const DownloadButton = memo(({ 
-  tableName, 
-  onDownloadStart, 
-  onDownloadComplete,
-  disabled 
-}) => {
-  const [isDownloading, setIsDownloading] = useState(false);
-  const { toast } = useToast();
-
-  const downloadAsFile = (data, filename) => {
-    try {
-      const blob = new Blob([data], { type: "application/octet-stream" });
-      const url = window.URL.createObjectURL(blob);
-      
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(url);
-    } catch (error) {
-      console.error("Error during file download:", error);
-      throw error;
-    }
-  };
-
-  const handleDownload = async (format) => {
-    if (disabled) return;
-    
-    try {
-      setIsDownloading(true);
-      onDownloadStart?.();
-
-      const response = await fetch(`/api/tables/${tableName}`);
-      const result = await response.json();
-      
-      if (!response.ok) {
-        throw new Error(result.error || 'Failed to fetch data');
-      }
-
-      const { data, schema } = result;
-      
-      if (!data?.length) {
-        toast({
-          title: "No Data",
-          description: "The table is empty.",
-          variant: "destructive",
-        });
-        return;
-      }
-
-      const timestamp = new Date().toISOString().split("T")[0];
-      const filename = `${tableName}_${timestamp}.${format}`;
-
-      switch (format) {
-        case "json": {
-          const jsonStr = JSON.stringify(data, null, 2);
-          downloadAsFile(jsonStr, filename);
-          break;
-        }
-        case "csv": {
-          const headers = Object.keys(data[0]);
-          const csvRows = [
-            headers.join(","),
-            ...data.map((row) =>
-              headers.map((header) => {
-                const value = row[header];
-                if (value === null || value === undefined) return "";
-                if (typeof value === "string") {
-                  const escaped = value.replace(/"/g, '""');
-                  return `"${escaped}"`;
-                }
-                return value;
-              }).join(",")
-            ),
-          ];
-          const csvStr = csvRows.join("\n");
-          downloadAsFile(csvStr, filename);
-          break;
-        }
-        case "sql": {
-          // Generate CREATE TABLE statement
-          const createTable = `CREATE TABLE IF NOT EXISTS ${tableName} (\n` +
-            schema.map(col => {
-              const constraints = [];
-              if (col.pk) constraints.push('PRIMARY KEY');
-              if (!col.notnull) constraints.push('NOT NULL');
-              
-              return `  ${col.name} ${col.type}${constraints.length ? ` ${constraints.join(' ')}` : ''}`;
-            }).join(',\n') +
-            '\n);\n\n';
-
-          // Generate INSERT statements
-          const insertStatements = data.map(row => {
-            const columns = Object.keys(row);
-            const values = columns.map(col => {
-              const value = row[col];
-              if (value === null) return 'NULL';
-              if (typeof value === 'string') return `'${value.replace(/'/g, "''")}'`;
-              return value;
-            });
-            
-            return `INSERT INTO ${tableName} (${columns.join(', ')})\nVALUES (${values.join(', ')});`;
-          }).join('\n');
-
-          const sqlContent = createTable + insertStatements;
-          downloadAsFile(sqlContent, filename);
-          break;
-        }
-      }
-
-      toast({
-        title: "Download Complete",
-        description: `${data.length} rows exported as ${format.toUpperCase()}.`,
-      });
-      onDownloadComplete?.();
-
-    } catch (error) {
-      console.error("Download error:", error);
-      toast({
-        variant: "destructive",
-        title: "Download Failed",
-        description: error.message,
-      });
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  return (
-    <DropdownMenu>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DropdownMenuTrigger asChild>
-              <Button 
-                variant="outline" 
-                size="icon"
-                className="h-8"
-                disabled={isDownloading || disabled}
-              >
-                {isDownloading ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <Download className="h-4 w-4" />
-                )}
-              </Button>
-            </DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Download table data</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem 
-          onClick={() => handleDownload('json')}
-          disabled={disabled}
-        >
-          <FileJson className="mr-2 h-4 w-4" />
-          <span>Download JSON</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          onClick={() => handleDownload('csv')}
-          disabled={disabled}
-        >
-          <FileSpreadsheet className="mr-2 h-4 w-4" />
-          <span>Download CSV</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          onClick={() => handleDownload('sql')}
-          disabled={disabled}
-        >
-          <FileCode className="mr-2 h-4 w-4" />
-          <span>Download SQL</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-});
-
-DownloadButton.displayName = 'DownloadButton';
-
-export default DownloadButton;

package/src/components/edit-error-alert.jsx

@@ -1,30 +0,0 @@
-// components/edit-error-alert.jsx
-'use client';
-
-import React from 'react';
-import { AlertCircle, X } from 'lucide-react';
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-
-export function EditErrorAlert({ error, onDismiss }) {
-  if (!error) return null;
-
-  return (
-    <Alert variant="destructive" className="mb-4">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle className="flex items-center justify-between">
-        <span>Failed to save changes</span>
-        {onDismiss && (
-          <button 
-            onClick={onDismiss}
-            className="p-1 hover:bg-destructive/10 rounded-full"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        )}
-      </AlertTitle>
-      <AlertDescription>{error.message}</AlertDescription>
-    </Alert>
-  );
-}
-
-export default EditErrorAlert;

package/src/components/editable-cell.jsx

@@ -1,163 +0,0 @@
-// components/editable-cell.jsx
-
-'use client';
-
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { TableCell } from '@/components/ui/table';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-export function EditableCell({ 
-  value: initialValue, 
-  row: _row, 
-  column,
-  schema,
-  onChange,
-  onStartEdit,
-  isEditing
-}) {
-  const cleanValue = typeof initialValue === 'string' ? 
-    initialValue.replace(/^'|'$/g, '') : 
-    initialValue;
-
-  const [value, setValue] = useState(cleanValue);
-  const [width, setWidth] = useState('auto');
-  const cellRef = useRef(null);
-  const inputRef = useRef(null);
-
-  // Find column schema and extract column type and constraints
-  const columnSchema = schema.find(col => col.name === column);
-  const allowedValues = useMemo(() => columnSchema?.check || null, [columnSchema]);
-  const isBoolean = useMemo(() => {
-    const type = columnSchema?.type?.toLowerCase() || '';
-    return type === 'boolean' || type === 'bool' || (type === 'integer' && column.toLowerCase().startsWith('is_'));
-  }, [columnSchema, column]);
-
-  useEffect(() => {
-    setValue(cleanValue);
-  }, [cleanValue]);
-
-  useEffect(() => {
-    if (cellRef.current && !isEditing) {
-      const cellWidth = cellRef.current.offsetWidth;
-      setWidth(`${cellWidth}px`);
-    }
-  }, [isEditing]);
-
-  useEffect(() => {
-    if (isEditing && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, [isEditing]);
-
-  // Allow editing of primary key now.
-  const isPrimaryKey = columnSchema?.pk === 1;
-
-  const handleChange = useCallback((newValue) => {
-    // Convert boolean values to 1/0 for storage if it's a boolean field
-    const processedValue = isBoolean ? 
-      (newValue === 'true' ? 1 : newValue === 'false' ? 0 : newValue) : 
-      newValue;
-    
-    setValue(newValue);
-    onChange?.(processedValue);
-  }, [onChange, isBoolean]);
-
-  const handleCellClick = useCallback(() => {
-    // Removed isPrimaryKey check so that even primary key cells can be edited
-    if (!isEditing && onStartEdit) {
-      onStartEdit(cleanValue);
-    }
-  }, [isEditing, onStartEdit, cleanValue]);
-
-  const baseClasses = "border-x border-neutral-200 px-3 py-2.5 text-xs font-mono whitespace-nowrap";
-
-  // Display formatting for cell value when not editing
-  const displayValue = useMemo(() => {
-    if (cleanValue === null || cleanValue === undefined) return 'null';
-    if (isBoolean) {
-      return cleanValue === 1 || cleanValue === '1' || cleanValue === 'true' ? 'true' : 'false';
-    }
-    return cleanValue.toString();
-  }, [cleanValue, isBoolean]);
-
-  if (!isEditing) {
-    return (
-      <TableCell
-        ref={cellRef}
-        className={`${baseClasses} cursor-pointer hover:bg-muted/50`}
-        onClick={handleCellClick}
-      >
-        {displayValue}
-      </TableCell>
-    );
-  }
-
-  // Render boolean dropdown
-  if (isBoolean) {
-    return (
-      <TableCell className={`${baseClasses} p-0`} style={{ width }}>
-        <div className="w-full h-full">
-          <Select
-            value={displayValue}
-            onValueChange={handleChange}
-            defaultOpen={isEditing}
-          >
-            <SelectTrigger className="w-full h-9 min-w-0 rounded-none border-0 bg-orange-50 text-orange-900">
-              <SelectValue placeholder="Select value" />
-            </SelectTrigger>
-            <SelectContent className="min-w-[8rem]">
-              <SelectItem value="true">true</SelectItem>
-              <SelectItem value="false">false</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </TableCell>
-    );
-  }
-
-  // Render check constraint dropdown
-  if (allowedValues?.length > 0) {
-    return (
-      <TableCell className={`${baseClasses} p-0`} style={{ width }}>
-        <div className="w-full h-full">
-          <Select
-            value={value ?? allowedValues[0]}
-            onValueChange={handleChange}
-            defaultOpen={isEditing}
-          >
-            <SelectTrigger className="w-full h-9 min-w-0 rounded-none border-0 bg-orange-50 text-orange-900">
-              <SelectValue placeholder={`Select ${column}`} />
-            </SelectTrigger>
-            <SelectContent className="min-w-[8rem]">
-              {allowedValues.map(allowedValue => (
-                <SelectItem key={allowedValue} value={allowedValue}>
-                  {allowedValue}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </TableCell>
-    );
-  }
-
-  // Default input for other fields
-  return (
-    <TableCell className={`${baseClasses} p-0`} style={{ width }}>
-      <Input
-        ref={inputRef}
-        value={value ?? ''}
-        onChange={(e) => handleChange(e.target.value)}
-        className="w-full min-w-0 rounded-none border-0 bg-orange-50 text-orange-900"
-      />
-    </TableCell>
-  );
-}