d1s 0.2.10 → 0.2.12

package/src/components/push-preview-toast.jsx

@@ -1,183 +0,0 @@
-// components/push-preview-toast.jsx
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Loader2, X } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-export function PushPreviewToast({ 
-   preview = [],
-   onConfirm,      
-   onCancel,       
-   isConfirming,   
-   error,
-   isLoading,
-   success     
- }) {
-  const [isDetailsOpen, setIsDetailsOpen] = useState(true);
-
-  // Handle loading state
-  if (isLoading) {
-    return (
-      <div className="fixed bottom-4 right-4 z-50 font-sans w-[600px]">
-        <div className="rounded-lg border p-4 shadow-lg bg-background">
-          <div className="flex items-start gap-3">
-            <Loader2 className="h-5 w-5 text-neutral-600 shrink-0 mt-0.5 animate-spin" />
-            <div className="flex-1 space-y-3">
-              <div className="space-y-1">
-                <p className="font-medium text-neutral-800">
-                  Preparing Push Migration
-                </p>
-                <p className="text-sm text-neutral-600">
-                  Checking local migrations...
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!preview?.length) {
-    return (
-      <div className="fixed bottom-4 right-4 z-50 w-[600px]">
-        <div className="rounded-lg border p-4">
-          <p className="text-sm font-medium">No migrations to preview</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Calculate migration stats
-  const pendingCount = preview.filter(m => m.action === 'will be applied').length;
-  const skippedCount = preview.filter(m => m.action === 'skipped').length;
-  const appliedCount = preview.filter(m => m.action === 'applied').length;
-
-  // Get status style based on action
-  const getStatusEmoji = (action) => {
-    switch (action) {
-      case 'will be applied':
-        return '🕒️';
-      case 'applied':
-      case 'skipped':
-        return '✅';
-      case 'failed':
-        return '❌';
-      default:
-        return '';
-    }
-  };
-
-  return (
-    <div className="fixed bottom-4 right-4 z-50 font-sans w-[600px]">
-      <div className={cn(
-        "rounded-lg border p-4 shadow-lg", 
-        error ? "bg-destructive/15" : "bg-background"
-      )}>
-        <div className="flex flex-col gap-3">
-          {/* Header */}
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-                <h5 className="font-medium text-neutral-900">
-                  Push Migration Preview
-                </h5>
-                <button
-                  onClick={onCancel}
-                  className="text-neutral-500 hover:text-neutral-900 p-1 rounded-md hover:bg-neutral-100"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              </div>
-            <p className="text-sm text-neutral-700">
-              {pendingCount} migration(s) 🕒️ pending, {skippedCount} to ✅ skip
-            </p>
-            {/* Status Messages */}
-            {error ? (
-              <p className="text-sm text-destructive font-medium mt-1">
-                {error.message}
-              </p>
-            ) : success && (
-              <p className="text-sm text-green-700 font-medium mt-1">
-                {success}
-              </p>
-            )}
-          </div>
-
-          {/* Migration Details */}
-          <div>
-            <button 
-              onClick={() => setIsDetailsOpen(!isDetailsOpen)}
-              className="text-sm font-medium hover:underline"
-            >
-              {isDetailsOpen ? 'Hide Details' : 'Show Details'}
-            </button>
-
-            {isDetailsOpen && (
-              <ScrollArea className="h-[480px] mt-2 rounded border border-neutral-200">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Migration</TableHead>
-                      <TableHead className="text-center w-24">Status</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {preview.map((item, index) => (
-                      <TableRow key={index}>
-                        <TableCell className="font-mono text-xs">
-                          {item.name}
-                        </TableCell>
-                        <TableCell className="text-center align-middle">
-                          {getStatusEmoji(item.action)}
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </ScrollArea>
-            )}
-          </div>
-
-          {/* Action Buttons */}
-          <div className="flex gap-2 pt-1">
-            <Button
-              onClick={onConfirm}
-              disabled={isConfirming || pendingCount === 0}
-              className="flex-1"
-            >
-              {isConfirming ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Confirming...
-                </>
-              ) : (
-                'Confirm Push'
-              )}
-            </Button>
-            <Button
-              variant="outline"
-              onClick={onCancel}
-              disabled={isConfirming}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default PushPreviewToast;

package/src/components/query-results.jsx

@@ -1,112 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-
-function QuerySummary({ results }) {
-  if (!results || !Array.isArray(results)) return null;
-
-  return (
-    <div className="text-xs font-medium text-neutral-900 flex items-center gap-2 mb-2">
-      {results.length} {results.length === 1 ? 'row' : 'rows'} returned
-    </div>
-  );
-}
-
-/**
- * SQLErrorDisplay now logs the error object received from the parent.
- * It safely handles null/undefined errors and logs them to the console.
- */
-export function SQLErrorDisplay({ error }) {
-  console.debug("SQLErrorDisplay - Received error prop:", error);
-  // Create a safe fallback error object if needed.
-  const safeError =
-    error && typeof error.message === 'string'
-      ? error
-      : { message: 'An unknown error occurred', details: {} };
-
-  return (
-    <div>
-      <div className="text-neutral-700 text-sm">{safeError.message}</div>
-      {safeError.details?.stderr && (
-        <pre className="mt-2 p-2 text-xs text-red-500 whitespace-pre-wrap">
-          {safeError.details.stderr}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-export function SQLResultsView({ query, results }) {
-  if (!results?.length) {
-    return (
-      <div className="text-sm text-neutral-500">
-        No results to display.
-      </div>
-    );
-  }
-
-  // Detect if the query is a PRAGMA table_info query
-  const isSchemaQuery = query?.trim().toLowerCase().startsWith('pragma table_info');
-
-  // Define columns for schema queries
-  const schemaColumns = isSchemaQuery
-    ? ['Column Name', 'Type', 'Not Null', 'Default Value', 'Primary Key']
-    : Object.keys(results[0]);
-
-  // Format schema rows if it's a schema query
-  const formattedResults = isSchemaQuery
-    ? results.map((row) => ({
-        'Column Name': row.name,
-        'Type': row.type,
-        'Not Null': row.notnull === 1 ? 'YES' : 'NO',
-        'Default Value': row.dflt_value || '(null)',
-        'Primary Key': row.pk === 1 ? 'YES' : 'NO',
-      }))
-    : results;
-
-  return (
-    <div className="flex flex-col h-full">
-      <QuerySummary results={formattedResults} />
-      <div className="flex-1 overflow-auto border rounded-lg">
-        <div className="min-w-full">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50">
-                {schemaColumns.map((column) => (
-                  <TableHead 
-                    key={column} 
-                    className="font-mono text-xs font-medium text-muted-foreground"
-                  >
-                    {column}
-                  </TableHead>
-                ))}
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {formattedResults.map((row, rowIndex) => (
-                <TableRow key={rowIndex} className="hover:bg-muted/50">
-                  {schemaColumns.map((column) => {
-                    const value = row[column];
-                    const displayValue = value === null ? '(null)' : String(value);
-
-                    return (
-                      <TableCell 
-                        key={`${rowIndex}-${column}`} 
-                        className="font-monospace text-xs whitespace-nowrap"
-                      >
-                        {displayValue}
-                      </TableCell>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default SQLResultsView;

package/src/components/refresh-button.jsx

@@ -1,61 +0,0 @@
-// components/refresh-button.jsx
-'use client';
-
-import React, { memo, useState } from 'react';
-import { Button } from "@/components/ui/button";
-import { RefreshCw, Loader2 } from 'lucide-react';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-const RefreshButton = memo(({ onRefresh, disabled }) => {
-  const [isRefreshing, setIsRefreshing] = useState(false);
-
-  const handleRefresh = async () => {
-    if (isRefreshing || disabled) return;
-
-    setIsRefreshing(true);
-    try {
-      await onRefresh();
-    } catch (error) {
-      console.error('Refresh failed:', error);
-    } finally {
-      // Add a small delay before allowing another refresh
-      setTimeout(() => {
-        setIsRefreshing(false);
-      }, 500);
-    }
-  };
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button 
-            variant="outline" 
-            size="icon" 
-            onClick={handleRefresh}
-            disabled={isRefreshing || disabled}
-            className="h-8"
-          >
-            {isRefreshing ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <RefreshCw className="h-4 w-4" />
-            )}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Refresh table data</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-});
-
-RefreshButton.displayName = 'RefreshButton';
-
-export default RefreshButton;

package/src/components/resize-columns.jsx

@@ -1,101 +0,0 @@
-// components/resize-columns.jsx
-'use client';
-
-import React, { useState, useCallback, useRef } from 'react';
-
-const MIN_COLUMN_WIDTH = 100;
-
-/**
- * A resizable table header component.
- */
-export const ResizableHeader = ({ 
-  children, 
-  width, 
-  onResize,
-  className = "" 
-}) => {
-  const [isResizing, setIsResizing] = useState(false);
-  const headerRef = useRef(null);
-
-  const startResizing = useCallback((e) => {
-    e.preventDefault();
-    setIsResizing(true);
-
-    const startX = e.clientX;
-    const startWidth = headerRef.current?.offsetWidth || 0;
-
-    const handleMouseMove = (e) => {
-      if (!headerRef.current) return;
-
-      // Calculate the new width based on mouse movement
-      const diff = e.clientX - startX;
-      const newWidth = Math.max(startWidth + diff, MIN_COLUMN_WIDTH);
-
-      // Update only the current column's width
-      onResize(newWidth);
-    };
-
-    const handleMouseUp = () => {
-      setIsResizing(false);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [onResize]); 
-
-  return (
-    <th 
-      ref={headerRef}
-      className={`relative ${className} ${isResizing ? 'select-none' : ''}`}
-      style={{ width: `${width}px` }} 
-    >
-      {children}
-      <div
-        className="absolute top-0 right-0 h-full w-1 cursor-col-resize group hover:bg-neutral-300"
-        onMouseDown={startResizing}
-      />
-    </th>
-  );
-};
-
-/**
- * A resizable table wrapper component.
- */
-export const ResizableTable = ({ 
-  columns,
-  children,
-  onColumnsResize,
-  className = ""
-}) => {
-  const [columnWidths, setColumnWidths] = useState(
-    columns.reduce((acc, col) => ({
-      ...acc,
-      [col.key]: col.width || 150
-    }), {})
-  );
-
-  const handleColumnResize = useCallback((columnKey, newWidth) => {
-    setColumnWidths((prev) => {
-      const updated = { ...prev, [columnKey]: newWidth };
-      onColumnsResize?.(updated); // Notify parent of updated widths
-      return updated;
-    });
-  }, [onColumnsResize]);
-
-  return (
-    <div className={`w-full ${className}`}>
-      {React.Children.map(children, child => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child, {
-            onResize: handleColumnResize, // ✅ Only pass valid props
-          });
-        }
-        return child;
-      })}
-    </div>
-  );
-};
-
-export default ResizableTable;