d1s 0.2.10 → 0.2.12

package/src/app/api/update/route.js

@@ -1,45 +0,0 @@
-// app/api/update/route.js
-import { NextResponse } from 'next/server';
-import pkg from '../../../../package.json' assert { type: 'json' };
-
-export async function GET() {
-  try {
-    // Get current version from package.json
-    const currentVersion = pkg.version;
-    
-    // Fetch the latest version from npm registry
-    const response = await fetch('https://registry.npmjs.org/d1s/latest', {
-      headers: {
-        'Accept': 'application/json',
-        'User-Agent': 'd1-studio'
-      },
-      // Add cache control to prevent excessive requests
-      cache: 'no-cache'
-    });
-    
-    if (!response.ok) {
-      throw new Error('Failed to check for updates');
-    }
-    
-    const data = await response.json();
-    const latestVersion = data.version;
-    
-    // Compare versions - only return update info if there's a newer version
-    if (latestVersion && currentVersion && latestVersion !== currentVersion) {
-      console.log(`Update available: ${currentVersion} → ${latestVersion}`);
-      return NextResponse.json({ 
-        update: {
-          latest: latestVersion,
-          current: currentVersion
-        }
-      });
-    }
-    
-    // No update available
-    return NextResponse.json({ update: null });
-  } catch (error) {
-    console.error('Error checking for updates:', error);
-    // Return null on error to prevent banner from showing
-    return NextResponse.json({ update: null });
-  }
-}

package/src/app/globals.css

@@ -1,93 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-.table-fixed {
-  table-layout: fixed;
-  width: 100%;
-}

package/src/app/layout.jsx

@@ -1,35 +0,0 @@
-// app/layout.js
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-import { DatabaseProvider } from '@/context/database-context';
-import { Toaster } from '@/components/ui/toaster'; // Change this import
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata = {
-  title: "d1-studio",
-  description: "Native D1 database studio.",
-};
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <DatabaseProvider>
-          {children}
-          <Toaster /> {/* Add this component */}
-        </DatabaseProvider>
-      </body>
-    </html>
-  );
-}

package/src/app/page.jsx

@@ -1,44 +0,0 @@
-// app/page.js
-'use client'
-
-import { useState } from 'react';
-import { AppSidebar } from '../components/sidebar';
-import { SQLEditor } from '../components/sql-editor';
-import { TableView } from '../components/table-view';
-import UpdateBanner from '@/components/update-banner';
-
-export default function StudioPage() {
-  const [currentView, setCurrentView] = useState('sql-editor');
-  const [selectedTable, setSelectedTable] = useState(null);
-
-  const handleTableSelect = (tableName) => {
-    setSelectedTable(tableName);
-    setCurrentView('table-view');
-  };
-
-  return (
-    <div className="flex flex-col min-h-screen bg-background">
-      {/* Banner */}
-      <UpdateBanner />
-      
-      {/* Main layout with adjusted positioning for banner */}
-      <div className="flex flex-1 mt-[var(--banner-height,0px)]">
-        {/* Sidebar with adjusted height */}
-        <AppSidebar 
-          className="w-64 border-r fixed top-[var(--banner-height,0px)] h-[calc(100vh-var(--banner-height,0px))]"
-          currentView={currentView}
-          onNavigate={setCurrentView}
-          onTableSelect={handleTableSelect}
-        />
-        
-        {/* Main content with adjusted margin-top and height */}
-        <main className="ml-64 flex-1 h-[calc(100vh-var(--banner-height,0px))]">
-          {currentView === 'sql-editor' && <SQLEditor />}
-          {currentView === 'table-view' && selectedTable && (
-            <TableView tableName={selectedTable} />
-          )}
-        </main>
-      </div>
-    </div>
-  );
-}

package/src/components/cloudflare-credentials-modal.jsx

@@ -1,94 +0,0 @@
-// components/cloudflare-credentials-modal.jsx
-'use client';
-
-import React, { useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Loader2 } from 'lucide-react';
-import { Alert, AlertDescription } from "@/components/ui/alert";
-
-export function CloudflareCredentialsModal({ open, onClose, onSubmit }) {
-  const [accountId, setAccountId] = useState('');
-  const [apiToken, setApiToken] = useState('');
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError('');
-    setIsLoading(true);
-
-    try {
-      await onSubmit({ accountId, apiToken });
-      // Store credentials in localStorage
-      localStorage.setItem('cf_credentials', JSON.stringify({
-        accountId,
-        apiToken
-      }));
-      onClose();
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Connect to Cloudflare</DialogTitle>
-          <DialogDescription>
-            Enter your Cloudflare credentials to push your database to production.
-          </DialogDescription>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium">Account ID</label>
-            <Input
-              placeholder="Your Cloudflare Account ID"
-              value={accountId}
-              onChange={(e) => setAccountId(e.target.value)}
-              required
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium">API Token</label>
-            <Input
-              type="password"
-              placeholder="Your D1 Database API Token"
-              value={apiToken}
-              onChange={(e) => setApiToken(e.target.value)}
-              required
-            />
-          </div>
-
-          <div className="flex justify-end gap-3">
-            <Button type="button" variant="outline" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button type="submit" disabled={isLoading}>
-              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              Connect
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}

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;