@objectql/studio 1.3.1 → 1.4.0

package/src/pages/ObjectView.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useState, useMemo } from 'react';
+import { AgGridReact } from 'ag-grid-react';
+import { ColDef } from 'ag-grid-community';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-quartz.css';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, Plus, Table2, FileCode } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { FileEditor } from '@/components/FileEditor';
+
+interface ObjectViewProps {
+    objectName: string;
+}
+
+export function ObjectView({ objectName }: ObjectViewProps) {
+    const [rowData, setRowData] = useState<any[]>([]);
+    const [columnDefs, setColumnDefs] = useState<ColDef[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [activeTab, setActiveTab] = useState<'data' | 'schema'>('data');
+    const [schemaFile, setSchemaFile] = useState<string | null>(null);
+
+    const fetchData = async () => {
+        setLoading(true);
+        try {
+            // 1. Fetch Schema to build columns
+            // Ideally we should cache metadata, but fetching it here is safer for now
+            const metaRes = await fetch('/api/metadata');
+            const meta = await metaRes.json();
+            const objects = Array.isArray(meta) ? meta : meta.objects;
+            const currentObj = objects.find((o: any) => o.name === objectName);
+
+            if (currentObj) {
+                const cols: ColDef[] = [
+                    { field: 'id', headerName: 'ID', width: 100, pinned: 'left' }
+                ];
+                
+                Object.entries(currentObj.fields).forEach(([key, field]: [string, any]) => {
+                    cols.push({
+                        field: key,
+                        headerName: field.label || key,
+                        flex: 1,
+                        filter: true
+                    });
+                });
+                
+                // Add system fields if not present
+                if (!cols.find(c => c.field === 'createdAt')) cols.push({ field: 'createdAt', hide: true });
+                if (!cols.find(c => c.field === 'updatedAt')) cols.push({ field: 'updatedAt', hide: true });
+
+                setColumnDefs(cols);
+            }
+
+            // 2. Fetch Data
+            const res = await fetch(`/api/objectql/${objectName}`);
+            const data = await res.json();
+            setRowData(Array.isArray(data) ? data : []);
+
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const fetchSchemaFile = async () => {
+        // If we already have the file for this object, don't re-fetch unless objectName changed
+        // But here we rely on useEffect deps
+        try {
+            const res = await fetch(`/api/schema/find?object=${objectName}`);
+            if (res.ok) {
+                const data = await res.json();
+                setSchemaFile(data.file);
+            } else {
+                setSchemaFile(null);
+                console.error('Failed to find schema file');
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    useEffect(() => {
+        setActiveTab('data');
+    }, [objectName]);
+
+    useEffect(() => {
+        if (activeTab === 'data') {
+            fetchData();
+        } else {
+            fetchSchemaFile();
+        }
+    }, [objectName, activeTab]);
+
+    const defaultColDef = useMemo(() => {
+        return {
+            sortable: true,
+            filter: true,
+            resizable: true,
+        };
+    }, []);
+
+    return (
+        <div className="flex h-full flex-col">
+            {/* Header */}
+            <div className="border-b px-6 py-4 flex items-center justify-between bg-card text-card-foreground">
+                <div className="flex flex-col gap-1">
+                    <h1 className="text-2xl font-bold tracking-tight capitalize">{objectName}</h1>
+                    <div className="flex space-x-1">
+                         <button
+                            onClick={() => setActiveTab('data')}
+                            className={cn(
+                                "flex items-center space-x-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                                activeTab === 'data' 
+                                    ? "bg-primary/10 text-primary" 
+                                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                            )}
+                        >
+                            <Table2 className="h-4 w-4" />
+                            <span>Data</span>
+                        </button>
+                        <button
+                            onClick={() => setActiveTab('schema')}
+                            className={cn(
+                                "flex items-center space-x-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                                activeTab === 'schema' 
+                                    ? "bg-primary/10 text-primary" 
+                                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                            )}
+                        >
+                            <FileCode className="h-4 w-4" />
+                            <span>Schema</span>
+                        </button>
+                    </div>
+                </div>
+                
+                {activeTab === 'data' && (
+                    <div className="flex items-center space-x-2">
+                        <Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
+                            <RefreshCw className={cn("mr-2 h-4 w-4", loading && "animate-spin")} />
+                            Refresh
+                        </Button>
+                        <Button size="sm">
+                            <Plus className="mr-2 h-4 w-4" />
+                            New Record
+                        </Button>
+                    </div>
+                )}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-hidden p-6 bg-muted/20">
+                {activeTab === 'data' ? (
+                     <div className="border rounded-md overflow-hidden bg-card h-full" style={{opacity: loading ? 0.6 : 1}}>
+                        <div className="ag-theme-quartz h-full w-full">
+                            <AgGridReact
+                                rowData={rowData}
+                                columnDefs={columnDefs}
+                                defaultColDef={defaultColDef}
+                                pagination={true}
+                                paginationPageSize={20}
+                                rowSelection="multiple"
+                            />
+                        </div>
+                    </div>
+                ) : (
+                    <div className="h-full bg-card rounded-md border">
+                        {schemaFile ? (
+                            <FileEditor filePath={schemaFile} className="h-full border-0" />
+                        ) : (
+                            <div className="flex h-full items-center justify-center text-muted-foreground">
+                                {loading ? 'Loading schema...' : 'Could not find definition file for this object.'}
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/pages/SchemaEditor.tsx

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { FileCode, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { FileEditor } from '@/components/FileEditor';
+
+export function SchemaEditor() {
+    const [files, setFiles] = useState<string[]>([]);
+    const [selectedFile, setSelectedFile] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetchFiles();
+    }, []);
+
+    const fetchFiles = async () => {
+        try {
+            const res = await fetch('/api/schema/files');
+            if (!res.ok) throw new Error('Failed to fetch files');
+            const data = await res.json();
+            setFiles(data.files || []);
+        } catch (e) {
+            console.error(e);
+            setError('Failed to load file list');
+        }
+    };
+
+    return (
+        <div className="flex h-full flex-col p-6 space-y-6">
+            <div className="flex items-center justify-between">
+                <div className="flex flex-col gap-1">
+                    <h2 className="text-3xl font-bold tracking-tight">Schema Editor</h2>
+                    {error && <p className="text-sm text-red-500">{error}</p>}
+                </div>
+                <Button variant="outline" size="sm" onClick={fetchFiles}>
+                    <RefreshCw className="mr-2 h-4 w-4" /> Refresh
+                </Button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 h-full min-h-[500px]">
+                {/* File List */}
+                <Card className="md:col-span-1 flex flex-col">
+                    <CardHeader className="py-4">
+                        <CardTitle className="text-lg">Files</CardTitle>
+                        <CardDescription>Select a schema file to edit</CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex-1 overflow-auto p-2">
+                        <div className="space-y-1">
+                            {files.map(file => (
+                                <button
+                                    key={file}
+                                    onClick={() => setSelectedFile(file)}
+                                    className={cn(
+                                        "w-full text-left px-3 py-2 text-sm rounded-md transition-colors flex items-center",
+                                        selectedFile === file 
+                                            ? "bg-primary text-primary-foreground font-medium" 
+                                            : "hover:bg-muted"
+                                    )}
+                                >
+                                    <FileCode className="mr-2 h-4 w-4 opacity-70" />
+                                    {file}
+                                </button>
+                            ))}
+                            {files.length === 0 && (
+                                <div className="text-sm text-muted-foreground p-2">No schema files found</div>
+                            )}
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Editor */}
+                <div className="md:col-span-3 h-full">
+                    {selectedFile ? (
+                        <FileEditor filePath={selectedFile} />
+                    ) : (
+                        <Card className="h-full flex items-center justify-center">
+                            <div className="text-muted-foreground">Select a file to view content</div>
+                        </Card>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

package/tailwind.config.cjs

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

package/tsconfig.json

@@ -15,7 +15,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }