@libredb/studio 0.9.7

package/src/components/TestDataGenerator.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import React, { useState, useMemo } from 'react';
+import { Wand2, X, Play, Copy, Check, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { TableSchema } from '@/lib/types';
+
+interface TestDataGeneratorProps {
+  isOpen: boolean;
+  onClose: () => void;
+  tableName: string;
+  tableSchema: TableSchema | null;
+  databaseType?: string;
+  queryLanguage?: string;
+  onExecuteQuery: (query: string) => void;
+}
+
+function inferFakerType(colName: string, colType: string): { generator: string; example: string } {
+  const name = colName.toLowerCase();
+  const type = colType.toLowerCase();
+
+  // Name-based inference
+  if (name.includes('email')) return { generator: 'email', example: 'user@example.com' };
+  if (name.includes('phone') || name.includes('mobile') || name.includes('tel')) return { generator: 'phone', example: '+1-555-0123' };
+  if (name === 'first_name' || name === 'firstname') return { generator: 'firstName', example: 'John' };
+  if (name === 'last_name' || name === 'lastname' || name === 'surname') return { generator: 'lastName', example: 'Doe' };
+  if (name === 'name' || name === 'full_name' || name === 'fullname') return { generator: 'fullName', example: 'John Doe' };
+  if (name.includes('address') || name.includes('street')) return { generator: 'address', example: '123 Main St' };
+  if (name.includes('city')) return { generator: 'city', example: 'New York' };
+  if (name.includes('country')) return { generator: 'country', example: 'United States' };
+  if (name.includes('zip') || name.includes('postal')) return { generator: 'zipCode', example: '10001' };
+  if (name.includes('state') || name.includes('province')) return { generator: 'state', example: 'California' };
+  if (name.includes('url') || name.includes('website') || name.includes('link')) return { generator: 'url', example: 'https://example.com' };
+  if (name.includes('company') || name.includes('organization') || name.includes('org')) return { generator: 'company', example: 'Acme Corp' };
+  if (name.includes('title') || name.includes('subject')) return { generator: 'sentence', example: 'A brief title here' };
+  if (name.includes('description') || name.includes('bio') || name.includes('about') || name.includes('content') || name.includes('body')) return { generator: 'paragraph', example: 'Lorem ipsum dolor sit amet...' };
+  if (name.includes('avatar') || name.includes('image') || name.includes('photo') || name.includes('picture')) return { generator: 'imageUrl', example: 'https://picsum.photos/200' };
+  if (name.includes('color') || name.includes('colour')) return { generator: 'color', example: '#3b82f6' };
+  if (name.includes('ip')) return { generator: 'ip', example: '192.168.1.1' };
+  if (name.includes('username') || name === 'login') return { generator: 'username', example: 'johndoe42' };
+  if (name.includes('password') || name.includes('hash') || name.includes('token') || name.includes('secret')) return { generator: 'hash', example: 'a1b2c3d4e5f6...' };
+  if (name.includes('price') || name.includes('amount') || name.includes('cost') || name.includes('total') || name.includes('salary')) return { generator: 'price', example: '99.99' };
+  if (name.includes('age')) return { generator: 'age', example: '28' };
+  if (name.includes('status')) return { generator: 'status', example: 'active' };
+  if (name.includes('gender') || name.includes('sex')) return { generator: 'gender', example: 'male' };
+
+  // Type-based inference
+  if (type.includes('serial') || name === 'id' || name.endsWith('_id')) return { generator: 'autoIncrement', example: '1' };
+  if (type.includes('bool')) return { generator: 'boolean', example: 'true' };
+  if (type.includes('int')) return { generator: 'integer', example: '42' };
+  if (type.includes('float') || type.includes('double') || type.includes('decimal') || type.includes('numeric')) return { generator: 'decimal', example: '3.14' };
+  if (type.includes('date') && !type.includes('time')) return { generator: 'date', example: '2024-03-15' };
+  if (type.includes('time')) return { generator: 'datetime', example: '2024-03-15 14:30:00' };
+  if (type.includes('uuid')) return { generator: 'uuid', example: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890' };
+  if (type.includes('json')) return { generator: 'json', example: '{}' };
+
+  return { generator: 'text', example: 'Lorem ipsum' };
+}
+
+// Lightweight fake data generators
+const FAKE = {
+  autoIncrement: (i: number) => String(i + 1),
+  email: (i: number) => `user${i + 1}@example.com`,
+  phone: () => `+1-555-${String(Math.floor(Math.random() * 9000) + 1000)}`,
+  firstName: () => ['John', 'Jane', 'Alice', 'Bob', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry'][Math.floor(Math.random() * 10)],
+  lastName: () => ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Wilson', 'Taylor'][Math.floor(Math.random() * 10)],
+  fullName: () => `${FAKE.firstName()} ${FAKE.lastName()}`,
+  address: (i: number) => `${(i + 1) * 100} ${['Main', 'Oak', 'Pine', 'Elm', 'Maple'][Math.floor(Math.random() * 5)]} St`,
+  city: () => ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix', 'London', 'Paris', 'Berlin', 'Tokyo', 'Sydney'][Math.floor(Math.random() * 10)],
+  country: () => ['United States', 'United Kingdom', 'Canada', 'Germany', 'France', 'Japan', 'Australia', 'Brazil'][Math.floor(Math.random() * 8)],
+  zipCode: () => String(Math.floor(Math.random() * 90000) + 10000),
+  state: () => ['California', 'New York', 'Texas', 'Florida', 'Illinois', 'Pennsylvania', 'Ohio', 'Georgia'][Math.floor(Math.random() * 8)],
+  url: (i: number) => `https://example.com/page/${i + 1}`,
+  company: () => ['Acme Corp', 'TechStart', 'GlobalSync', 'NovaTech', 'DataFlow', 'CloudPeak', 'ByteWise', 'NetSphere'][Math.floor(Math.random() * 8)],
+  sentence: () => ['Quick update needed', 'New feature request', 'Bug fix applied', 'Performance review', 'System maintenance'][Math.floor(Math.random() * 5)],
+  paragraph: () => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.',
+  imageUrl: (i: number) => `https://picsum.photos/200?id=${i}`,
+  color: () => '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'),
+  ip: () => `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+  username: (i: number) => `user_${String.fromCharCode(97 + (i % 26))}${Math.floor(Math.random() * 100)}`,
+  hash: () => Array.from({ length: 32 }, () => Math.floor(Math.random() * 16).toString(16)).join(''),
+  price: () => (Math.random() * 999 + 0.01).toFixed(2),
+  age: () => String(Math.floor(Math.random() * 60) + 18),
+  status: () => ['active', 'inactive', 'pending', 'archived'][Math.floor(Math.random() * 4)],
+  gender: () => ['male', 'female', 'non-binary'][Math.floor(Math.random() * 3)],
+  boolean: () => Math.random() > 0.5 ? 'true' : 'false',
+  integer: () => String(Math.floor(Math.random() * 10000)),
+  decimal: () => (Math.random() * 1000).toFixed(2),
+  date: () => { const d = new Date(Date.now() - Math.random() * 365 * 86400000); return d.toISOString().split('T')[0]; },
+  datetime: () => { const d = new Date(Date.now() - Math.random() * 365 * 86400000); return d.toISOString().replace('T', ' ').substring(0, 19); },
+  uuid: () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { const r = Math.random() * 16 | 0; return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); }),
+  json: () => '{}',
+  text: () => ['Sample text', 'Test data', 'Example value', 'Test content', 'Placeholder'][Math.floor(Math.random() * 5)],
+};
+
+export function TestDataGenerator({
+  isOpen,
+  onClose,
+  tableName,
+  tableSchema,
+  queryLanguage,
+  onExecuteQuery,
+}: TestDataGeneratorProps) {
+  const [rowCount, setRowCount] = useState(10);
+  const [copied, setCopied] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const columnConfigs = useMemo(() => {
+    if (!tableSchema?.columns) return [];
+    return tableSchema.columns.map(col => ({
+      ...col,
+      faker: inferFakerType(col.name, col.type),
+    }));
+  }, [tableSchema]);
+
+  const generatedQuery = useMemo(() => {
+    if (!tableSchema?.columns || columnConfigs.length === 0) return '';
+
+    // Filter out auto-increment columns
+    const cols = columnConfigs.filter(c => c.faker.generator !== 'autoIncrement');
+
+    if (queryLanguage === 'json') {
+      // MongoDB insertMany
+      const docs = Array.from({ length: rowCount }, (_, i) => {
+        const doc: Record<string, string> = {};
+        for (const col of cols) {
+          const gen = FAKE[col.faker.generator as keyof typeof FAKE];
+          doc[col.name] = gen ? gen(i) : `value_${i}`;
+        }
+        return doc;
+      });
+      return JSON.stringify({ collection: tableName, operation: 'insertMany', documents: docs }, null, 2);
+    }
+
+    // SQL INSERT
+    const colNames = cols.map(c => `"${c.name}"`).join(', ');
+    const rows = Array.from({ length: rowCount }, (_, i) => {
+      const values = cols.map(col => {
+        const gen = FAKE[col.faker.generator as keyof typeof FAKE];
+        const val = gen ? gen(i) : `value_${i}`;
+        // Determine if value should be quoted
+        const type = col.type.toLowerCase();
+        if (type.includes('bool')) return val;
+        if (type.includes('int') || type.includes('float') || type.includes('double') || type.includes('decimal') || type.includes('numeric') || type.includes('real')) return val;
+        return `'${val.replace(/'/g, "''")}'`;
+      });
+      return `(${values.join(', ')})`;
+    });
+
+    return `INSERT INTO ${tableName} (${colNames})\nVALUES\n  ${rows.join(',\n  ')};`;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableSchema, columnConfigs, rowCount, queryLanguage, tableName, refreshKey]);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(generatedQuery);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="bg-[#111] border border-white/10 rounded-xl shadow-2xl w-full max-w-2xl mx-4 max-h-[85vh] flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
+          <div className="flex items-center gap-2">
+            <Wand2 className="w-4 h-4 text-amber-400" />
+            <span className="text-sm font-bold text-zinc-200">Test Data Generator</span>
+            <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
+          </div>
+          <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Controls */}
+        <div className="px-5 py-3 border-b border-white/5 bg-[#0a0a0a] flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] text-zinc-500 uppercase tracking-wider font-bold">Rows:</span>
+            <div className="flex items-center gap-1">
+              {[5, 10, 25, 50, 100].map(n => (
+                <button
+                  key={n}
+                  onClick={() => setRowCount(n)}
+                  className={cn(
+                    "px-2 py-0.5 rounded text-[10px] font-bold transition-colors",
+                    rowCount === n
+                      ? "bg-amber-500/20 text-amber-400 border border-amber-500/20"
+                      : "text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                  )}
+                >
+                  {n}
+                </button>
+              ))}
+            </div>
+          </div>
+          <button
+            onClick={() => setRefreshKey(k => k + 1)}
+            className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold text-zinc-500 hover:text-zinc-300 hover:bg-white/5 transition-colors"
+            title="Regenerate random data"
+          >
+            <RefreshCw className="w-3 h-3" /> Regenerate
+          </button>
+        </div>
+
+        {/* Column mapping preview */}
+        <div className="px-5 py-2 border-b border-white/5 bg-[#0a0a0a]">
+          <div className="flex flex-wrap gap-1.5">
+            {columnConfigs.map(col => (
+              <span
+                key={col.name}
+                className={cn(
+                  "text-[10px] px-1.5 py-0.5 rounded font-mono",
+                  col.faker.generator === 'autoIncrement'
+                    ? "bg-zinc-800 text-zinc-600 line-through"
+                    : "bg-amber-500/10 text-amber-400/80"
+                )}
+                title={`${col.name} → ${col.faker.generator} (e.g., ${col.faker.example})`}
+              >
+                {col.name}: {col.faker.generator}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {/* Preview */}
+        <div className="flex-1 overflow-auto relative">
+          <pre className="p-5 text-[11px] font-mono text-blue-300 whitespace-pre-wrap leading-relaxed">
+            {generatedQuery}
+          </pre>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-between px-5 py-3 border-t border-white/5 bg-[#0a0a0a]">
+          <p className="text-[10px] text-zinc-600">
+            {columnConfigs.filter(c => c.faker.generator !== 'autoIncrement').length} columns • {rowCount} rows
+          </p>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleCopy}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 text-zinc-400 text-[10px] font-bold hover:bg-white/10 transition-colors"
+            >
+              {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+            <button
+              onClick={() => {
+                onExecuteQuery(generatedQuery);
+                onClose();
+              }}
+              className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-amber-600 hover:bg-amber-500 text-white text-[10px] font-bold transition-colors"
+            >
+              <Play className="w-3 h-3 fill-current" /> Execute
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}