d1s 0.2.10 → 0.2.12

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>
-  );
-}

package/src/components/editable-row.jsx

@@ -1,169 +0,0 @@
-// components/editable-row.jsx
-'use client';
-
-import React, { useState } from 'react';
-import { TableRow, TableCell } from '@/components/ui/table';
-import { Input } from '@/components/ui/input';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Trash2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-function cleanValue(value) {
-  return typeof value === 'string' ? value.replace(/^'|'$/g, '') : value;
-}
-
-export function EditableRow({ 
-  schema,
-  onRemove,
-  onChange,
-  showCheckbox = false,
-  initialData = {}
-}) {
-  const [rowData, setRowData] = useState(() => {
-    return schema.reduce((acc, col) => {
-      let defaultValue = initialData[col.name] ?? null;
-      defaultValue = cleanValue(defaultValue);
-      
-      if (defaultValue === null) {
-        if (col.dflt_value) {
-          defaultValue = cleanValue(col.dflt_value);
-        } else if (col.type.toUpperCase() === 'INTEGER') {
-          defaultValue = '';
-        } else if (col.type.toUpperCase() === 'TEXT') {
-          defaultValue = '';
-        }
-      }
-
-      acc[col.name] = defaultValue;
-      return acc;
-    }, {});
-  });
-
-  const handleChange = (column, value) => {
-    const newData = { ...rowData, [column]: value };
-    setRowData(newData);
-    onChange?.(newData);
-  };
-
-  const isBoolean = (col) => {
-    const type = col.type?.toLowerCase() || '';
-    return type === 'boolean' || 
-           type === 'bool' || 
-           (type === 'integer' && col.name.toLowerCase().startsWith('is_'));
-  };
-
-  return (
-    <TableRow className="bg-orange-50/50">
-      <TableCell className="w-10 p-0">
-        <div className="pl-1 flex items-center">
-          {showCheckbox ? (
-            <Checkbox disabled />
-          ) : (
-            <Button 
-              variant="ghost" 
-              size="icon"
-              className="h-8 w-8 text-orange-700 hover:text-orange-800"
-              onClick={onRemove}
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
-      </TableCell>
-      {schema.map((col) => {
-        const isPrimaryKey = col.pk === 1;
-        const allowedValues = col.check || null;
-
-        // Handle boolean fields
-        if (isBoolean(col)) {
-          // Parse default value from schema
-          let defaultBoolValue = 'false';
-          if (col.dflt_value !== null && col.dflt_value !== undefined) {
-            // Handle different formats of default values
-            const dfltVal = col.dflt_value.toString().toLowerCase();
-            defaultBoolValue = (
-              dfltVal === '1' || 
-              dfltVal === 'true' || 
-              dfltVal === "'true'" || 
-              dfltVal === '"true"'
-            ) ? 'true' : 'false';
-          }
-
-          // Use rowData if it exists, otherwise use default
-          const currentValue = rowData[col.name] !== null && rowData[col.name] !== undefined
-            ? (rowData[col.name] === 1 || rowData[col.name] === true || rowData[col.name] === 'true' ? 'true' : 'false')
-            : defaultBoolValue;
-
-          return (
-            <TableCell key={col.name} className="border-x border-neutral-200 p-0">
-              <div className="w-full">
-                <Select
-                  value={currentValue}
-                  onValueChange={(value) => handleChange(col.name, value === 'true' ? 1 : 0)}
-                  // Removed disabled={isPrimaryKey} to allow editing
-                >
-                  <SelectTrigger 
-                    className="w-full h-9 min-w-0 rounded-none border-0 bg-orange-50 text-orange-900"
-                    title={`Default: ${defaultBoolValue}`}
-                  >
-                    <SelectValue placeholder={`Select ${col.name}`} />
-                  </SelectTrigger>
-                  <SelectContent className="min-w-[8rem]">
-                    <SelectItem value="true">true</SelectItem>
-                    <SelectItem value="false">false</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </TableCell>
-          );
-        }
-        
-        // Handle fields with check constraints
-        if (allowedValues?.length > 0) {
-          return (
-            <TableCell key={col.name} className="border-x border-neutral-200 p-0">
-              <div className="w-full">
-                <Select
-                  value={rowData[col.name] ?? allowedValues[0]}
-                  onValueChange={(value) => handleChange(col.name, value)}
-                  // Removed disabled={isPrimaryKey} to allow editing
-                >
-                  <SelectTrigger className="w-full h-9 min-w-0 rounded-none border-0 bg-orange-50 text-orange-900">
-                    <SelectValue placeholder={`Select ${col.name}`} />
-                  </SelectTrigger>
-                  <SelectContent className="min-w-[8rem]">
-                    {allowedValues.map(value => (
-                      <SelectItem key={value} value={value}>
-                        {value}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </TableCell>
-          );
-        }
-
-        // Default input for other fields (primary key input is now editable)
-        return (
-          <TableCell key={col.name} className="border-x border-neutral-200 p-0">
-            <Input
-              value={rowData[col.name] ?? ''}
-              onChange={(e) => handleChange(col.name, e.target.value)}
-              className="w-full min-w-0 rounded-none border-0 px-2 bg-orange-50 text-orange-900"
-              placeholder={isPrimaryKey ? 'Auto-generated' : `Enter ${col.name}`}
-              // Removed disabled={isPrimaryKey} so primary key can be edited
-            />
-          </TableCell>
-        );
-      })}
-    </TableRow>
-  );
-}