d1s 0.2.10 → 0.2.12

package/src/components/sql-error-display.jsx

@@ -1,167 +0,0 @@
-// components/sql-error-display.jsx
-import React from 'react';
-import { AlertCircle, X, ChevronDown, ChevronUp } from 'lucide-react';
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-
-// Keep the original ErrorMessages mapping
-const ErrorMessages = {
-  TABLE_EXISTS: {
-    title: 'Table Already Exists',
-    message: 'A table with this name already exists',
-    action: 'Use a different table name or DROP the existing table first'
-  },
-  TABLE_NOT_FOUND: {
-    title: 'Table Not Found',
-    message: 'The specified table does not exist',
-    action: 'Check the table name and ensure it exists'
-  },
-  SYNTAX_ERROR: {
-    title: 'Syntax Error',
-    message: 'There is a syntax error in your SQL query',
-    action: 'Check your query syntax and try again'
-  },
-  CONSTRAINT_ERROR: {
-    title: 'Constraint Violation',
-    message: 'The operation violates a database constraint',
-    action: 'Ensure your data meets all table constraints'
-  },
-  VALIDATION_ERROR: {
-    title: 'Invalid Query',
-    message: 'The query is not valid',
-    action: 'Check your query and try again'
-  },
-  SQL_ERROR: {
-    title: 'SQL Error',
-    message: 'An error occurred while executing the query',
-    action: 'Review your query and try again'
-  },
-  EXECUTION_ERROR: {
-    title: 'Execution Error',
-    message: 'An error occurred during query execution',
-    action: 'Ensure Node.js is installed and your environment is configured correctly'
-  },
-  UNKNOWN_ERROR: {
-    title: 'Unknown Error',
-    message: 'An unexpected error occurred',
-    action: 'Try again or contact support if the issue persists'
-  }
-};
-
-export function SQLErrorDisplay({ error, onDismiss, onFixError }) {
-  const [showDetails, setShowDetails] = React.useState(true);
-
-  if (!error) return null;
-
-  const isSyntaxError = error.type === 'SYNTAX_ERROR';
-  const showQueryPreview = error.details?.originalQuery;
-  const showErrorLocation = isSyntaxError && error.details?.errorLocation;
-
-  // Get error info from ErrorMessages mapping
-  const errorInfo = ErrorMessages[error.type] || ErrorMessages.UNKNOWN_ERROR;
-
-  return (
-    <Alert variant="destructive" className="mt-4 mb-4">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle className="flex items-center justify-between">
-        <span>{errorInfo.title}</span>
-        {onDismiss && (
-          <button 
-            onClick={onDismiss}
-            className="p-1 hover:bg-destructive/10 rounded-full"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        )}
-      </AlertTitle>
-      
-      <AlertDescription className="mt-2">
-        <div className="font-medium">{error.message || errorInfo.message}</div>
-        
-        <Collapsible 
-          open={showDetails} 
-          onOpenChange={setShowDetails}
-          className="space-y-2 mt-4"
-        >
-          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium">
-            {showDetails ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
-            Error Details
-          </CollapsibleTrigger>
-          
-          <CollapsibleContent className="space-y-4">
-            {showQueryPreview && (
-              <div className="mt-2">
-                <div className="text-sm font-medium mb-1">Query preview:</div>
-                <div className="relative">
-                  <pre className="text-xs bg-destructive/10 p-2 rounded overflow-x-auto whitespace-pre-wrap">
-                    {error.details.originalQuery}
-                  </pre>
-                  {showErrorLocation && (
-                    <div 
-                      className="absolute left-0 top-0 w-full"
-                      style={{
-                        transform: `translateY(${Math.floor(error.details.offset / 50)}rem)`
-                      }}
-                    >
-                      <div 
-                        className="absolute h-4 w-2 bg-red-500"
-                        style={{ left: `${(error.details.offset % 50) * 0.5}rem` }}
-                      />
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {(error.details?.suggestions || errorInfo.action) && (
-              <div className="mt-2">
-                <div className="text-sm font-medium mb-1">Suggestions:</div>
-                <ul className="list-disc pl-4 space-y-1">
-                  {error.details?.suggestions ? (
-                    error.details.suggestions.map((suggestion, index) => (
-                      <li key={index} className="text-sm text-destructive-foreground/90">
-                        {suggestion}
-                      </li>
-                    ))
-                  ) : (
-                    <li className="text-sm text-destructive-foreground/90">
-                      {errorInfo.action}
-                    </li>
-                  )}
-                </ul>
-              </div>
-            )}
-
-            {error.details?.error && (
-              <div className="mt-2">
-                <div className="text-sm font-medium mb-1">Technical details:</div>
-                <pre className="text-xs bg-destructive/10 p-2 rounded overflow-x-auto">
-                  {error.details.error}
-                </pre>
-              </div>
-            )}
-
-            {onFixError && isSyntaxError && (
-              <div className="mt-4">
-                <Button 
-                  variant="outline" 
-                  size="sm"
-                  onClick={() => onFixError(error.details.errorLocation)}
-                >
-                  Go to Error Location
-                </Button>
-              </div>
-            )}
-          </CollapsibleContent>
-        </Collapsible>
-      </AlertDescription>
-    </Alert>
-  );
-}
-
-export { ErrorMessages };

package/src/components/sync-migrations-button.jsx

@@ -1,87 +0,0 @@
-// components/sync-migrations-button.jsx
-'use client';
-
-import React, { memo, useState } from 'react';
-import { Button } from "@/components/ui/button";
-import { FolderSync, Loader2 } from 'lucide-react';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useToast } from "@/hooks/use-toast";
-
-const SyncMigrationsButton = memo(({ tableName, onSync }) => {
-  const [isSyncing, setIsSyncing] = useState(false);
-  const { toast } = useToast();
-
-  // Only show for d1_migrations table
-  if (tableName !== 'd1_migrations') return null;
-
-  const handleSync = async () => {
-    try {
-      setIsSyncing(true);
-      const response = await fetch('/api/migrations/sync-files', {
-        method: 'POST'
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to sync migrations');
-      }
-
-      const { added = [], removed = [] } = data.details || {};
-      
-      toast({
-        title: "Migrations Synced",
-        description: `Added: ${added.length}, Removed: ${removed.length}`
-      });
-
-      // Refresh the table data if sync was successful
-      if (onSync) {
-        await onSync();
-      }
-
-    } catch (error) {
-      console.error('Error syncing migrations:', error);
-      toast({
-        variant: "destructive",
-        title: "Sync Failed",
-        description: error.message
-      });
-    } finally {
-      setIsSyncing(false);
-    }
-  };
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={handleSync}
-            disabled={isSyncing}
-            className="h-8"
-          >
-            {isSyncing ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <FolderSync className="h-4 w-4" />
-            )}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Sync migration files with d1_migrations table</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-});
-
-SyncMigrationsButton.displayName = 'SyncMigrationsButton';
-
-export default SyncMigrationsButton;

package/src/components/table-error-dialog.jsx

@@ -1,65 +0,0 @@
-// components/table-error-dialog.jsx
-'use client';
-
-import React from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { AlertCircle } from 'lucide-react';
-
-// Simple function that focuses on just message display
-function getErrorInfo(error) {
-  if (!error) {
-    return {
-      message: 'An unknown error occurred.',
-      icon: AlertCircle,
-    };
-  }
-  return {
-    message: error.message,
-    icon: AlertCircle,
-  };
-}
-
-export function DatabaseErrorDialog({ isOpen, onClose, error }) {
-  if (!error || !isOpen) return null;
-
-  const { message, icon: Icon } = getErrorInfo(error);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-md font-sans">
-        <DialogHeader>
-          <div className="flex items-center gap-2">
-            <Icon className="h-4 w-4 text-red-500" />
-            <DialogTitle>Error</DialogTitle>
-          </div>
-        </DialogHeader>
-        <div className="space-y-4">
-          <p className="bg-neutral-100 p-2 rounded-md text-neutral-900">
-            {message}
-          </p>
-          {error.details?.suggestions && (
-            <div className="text-sm space-y-1">
-              <p className="font-medium">Suggestions:</p>
-              <ul className="list-disc pl-4 space-y-1">
-                {error.details.suggestions.map((suggestion, index) => (
-                  <li key={index}>{suggestion}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-        <div className="flex justify-end gap-2 mt-4">
-          <Button variant="default" onClick={onClose}>
-            Got it
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/table-toolbar.jsx

@@ -1,285 +0,0 @@
-// components/table-toolbar.jsx
-'use client';
-
-import React, { memo } from 'react';
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  ArrowLeft,
-  ArrowRight,
-  SlidersHorizontal,
-  Columns,
-  Loader2
-} from 'lucide-react';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import RefreshButton from './refresh-button';
-import SyncMigrationsButton from './sync-migrations-button';
-import DownloadButton from './download-button';
-import ColumnSelector from './column-selector';
-
-const StaticControls = memo(({ 
-  onAdd, 
-  onDelete, 
-  selectedCount, 
-  disabled, 
-  newRecordsCount,
-  schema,             
-  visibleColumns,
-  onColumnToggle
-}) => (
-  <div className="flex items-center space-x-2">
-     <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          {/* Wrapping the disabled button in a span so the tooltip can trigger */}
-          <span>
-            <Button 
-              size="sm"
-              variant="outline"
-              className="font-semibold opacity-50 cursor-not-allowed"
-              disabled
-            >
-              <SlidersHorizontal className="h-4 w-4" />
-              Filters
-            </Button>
-          </span>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Filters are not available yet. Coming soon!</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-
-    <ColumnSelector 
-      schema={schema}
-      visibleColumns={visibleColumns}
-      onColumnToggle={onColumnToggle}
-    />
-
-    <div className="h-4 border-r mx-2" />
-
-    <Button
-      size="sm"
-      variant="default"
-      className="font-semibold"
-      onClick={onAdd}
-    >
-      Add record
-    </Button>
-
-    {selectedCount > 0 && (
-      <Button 
-        size="sm"
-        className="font-semibold"
-        onClick={onDelete} 
-        variant="destructive"
-        disabled={disabled || newRecordsCount > 0}
-      >
-        Delete {selectedCount} {selectedCount === 1 ? 'record' : 'records'}
-      </Button>
-    )}
-  </div>
-));
-
-const RowCount = memo(({ totalRows }) => (
-  <span className="text-sm text-neutral-600">
-    {totalRows} {totalRows === 1 ? 'row' : 'rows'}
-  </span>
-));
-
-const PaginationControls = memo(({ 
-  currentPage, 
-  totalPages, 
-  onPageChange, 
-  disabled,
-  newRecordsCount 
-}) => (
-  <div className="flex items-center space-x-2">
-    <Button 
-      variant="ghost" 
-      size="icon"
-      onClick={() => {
-        console.log("Pagination: navigating to previous page", currentPage - 1);
-        onPageChange(currentPage - 1);
-      }}
-      disabled={currentPage === 1 || disabled || newRecordsCount > 0}
-      className="h-8"
-    >
-      <ArrowLeft className="h-4 w-4" />
-    </Button>
-    <span className="text-sm">
-      Page {currentPage} of {totalPages}
-    </span>
-    <Button 
-      variant="ghost" 
-      size="icon"
-      onClick={() => {
-        console.log("Pagination: navigating to next page", currentPage + 1);
-        onPageChange(currentPage + 1);
-      }}
-      disabled={currentPage === totalPages || disabled || newRecordsCount > 0}
-      className="h-8"
-    >
-      <ArrowRight className="h-4 w-4" />
-    </Button>
-  </div>
-));
-
-const RowsPerPageSelect = memo(({ value, onValueChange, disabled, newRecordsCount }) => (
-  <Select
-    value={value.toString()}
-    onValueChange={onValueChange}
-    disabled={disabled || newRecordsCount > 0}
-  >
-    <SelectTrigger className="w-20 h-8">
-      <SelectValue />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="50">50</SelectItem>
-      <SelectItem value="100">100</SelectItem>
-      <SelectItem value="250">250</SelectItem>
-    </SelectContent>
-  </Select>
-));
-
-const SaveDiscardButtons = memo(({ onSave, onDiscard, totalChanges, isSaving }) => (
-  <div className="flex items-center gap-2">
-    <Button
-      size="sm"
-      variant="ghost"
-      className="font-semibold"
-      onClick={onDiscard}
-      disabled={isSaving}
-    >
-      Discard changes
-    </Button>
-    <Button
-      size="sm"
-      className="font-semibold bg-green-600 hover:bg-green-700"
-      variant="default"
-      onClick={onSave}
-      disabled={isSaving}
-    >
-      {isSaving ? (
-        <>
-          <Loader2 className="h-4 w-4 animate-spin" />
-          Saving...
-        </>
-      ) : (
-        `Save ${totalChanges} ${totalChanges === 1 ? 'change' : 'changes'}`
-      )}
-    </Button>
-  </div>
-));
-
-const TableToolbar = ({
-  selectedCount = 0,
-  onAdd,
-  onDelete,
-  onRefresh,
-  totalRows = 0,
-  currentPage = 1,
-  totalPages = 1,
-  onPageChange,
-  rowsPerPage = 50,
-  onRowsPerPageChange,
-  tableName,
-  onDownloadStart,
-  onDownloadComplete,
-  disabled = false,
-  editCount = 0,
-  newRecordsCount = 0,
-  onSaveChanges,
-  onDiscardChanges,
-  isSaving = false,
-  schema,              
-  visibleColumns,
-  onColumnToggle,
-}) => {
-  const handleRowsPerPageChange = (value) => {
-    const newRowsPerPage = parseInt(value, 10);
-    onRowsPerPageChange(newRowsPerPage);
-    onPageChange(1); // Reset to first page when rows per page changes
-  };
-
-  const totalChanges = editCount + newRecordsCount;
-
-  return (
-    <div className="flex items-center justify-between p-3 border-b bg-background font-sans">
-      <div className="flex items-center justify-between w-full">
-        <StaticControls
-          onAdd={onAdd}
-          onDelete={onDelete}
-          selectedCount={selectedCount}
-          disabled={disabled || isSaving}
-          newRecordsCount={newRecordsCount}
-          schema={schema}              
-          visibleColumns={visibleColumns}
-          onColumnToggle={onColumnToggle}
-        />
-
-        <div className="flex items-center gap-4">
-          {totalChanges > 0 ? (
-            <SaveDiscardButtons
-              onSave={onSaveChanges}
-              onDiscard={onDiscardChanges}
-              totalChanges={totalChanges}
-              isSaving={isSaving}
-            />
-          ) : (
-            <div className="flex items-center space-x-2">
-              <RowCount totalRows={totalRows} />
-
-              <PaginationControls
-                currentPage={currentPage}
-                totalPages={totalPages}
-                onPageChange={onPageChange}
-                disabled={disabled}
-                newRecordsCount={newRecordsCount}
-              />
-
-              <RowsPerPageSelect
-                value={rowsPerPage}
-                onValueChange={handleRowsPerPageChange}
-                disabled={disabled}
-                newRecordsCount={newRecordsCount}
-              />
-
-              <RefreshButton 
-                onRefresh={onRefresh}
-                disabled={disabled}
-              />
-
-              <SyncMigrationsButton
-                tableName={tableName}
-                onSync={onRefresh}
-                disabled={disabled}
-              />
-
-              <DownloadButton
-                tableName={tableName}
-                onDownloadStart={onDownloadStart}
-                onDownloadComplete={onDownloadComplete}
-                disabled={disabled}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-TableToolbar.displayName = 'TableToolbar';
-export default memo(TableToolbar);