insforge 0.3.1

package/frontend/src/components/datagrid/cell-editors/JsonCellEditor.tsx

@@ -0,0 +1,362 @@
+import { useEffect, useState } from 'react';
+import { FileJson, AlertCircle, CheckCircle } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/radix/Popover';
+import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { cn } from '@/lib/utils/utils';
+import type { JsonCellEditorProps } from './types';
+
+export function JsonCellEditor({
+  value,
+  nullable,
+  onValueChange,
+  onCancel,
+  className,
+}: JsonCellEditorProps) {
+  const [open, setOpen] = useState(true);
+  const [showNullConfirm, setShowNullConfirm] = useState(false);
+  const [jsonText, setJsonText] = useState(() => {
+    // Ensure value is always converted to string
+    if (!value || value === 'null') {
+      return '';
+    }
+
+    // If value is already a string, try to parse and format it
+    if (typeof value === 'string') {
+      try {
+        const parsed = JSON.parse(value);
+        return JSON.stringify(parsed, null, 2);
+      } catch {
+        return value;
+      }
+    }
+
+    // If value is an object/array, stringify it
+    if (typeof value === 'object') {
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch {
+        return JSON.stringify(value);
+      }
+    }
+
+    // For any other type, convert to string
+    return String(value || '');
+  });
+  const [isValid, setIsValid] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Auto-open the popover when component mounts
+    setOpen(true);
+  }, []);
+
+  const validateJson = (text: string) => {
+    // Ensure text is a string before calling trim
+    const textStr = String(text || '');
+    if (textStr.trim() === '') {
+      setIsValid(true);
+      setError(null);
+      return true;
+    }
+
+    try {
+      JSON.parse(textStr);
+      setIsValid(true);
+      setError(null);
+      return true;
+    } catch (e) {
+      setIsValid(false);
+      setError(e instanceof Error ? e.message : 'Invalid JSON');
+      return false;
+    }
+  };
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newText = e.target.value;
+    setJsonText(newText);
+    validateJson(newText);
+  };
+
+  const handleFormat = () => {
+    // Ensure jsonText is a string before calling trim
+    const textStr = String(jsonText || '');
+    if (textStr.trim() === '') {
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(textStr);
+      setJsonText(JSON.stringify(parsed, null, 2));
+      setIsValid(true);
+      setError(null);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleMinify = () => {
+    // Ensure jsonText is a string before calling trim
+    const textStr = String(jsonText || '');
+    if (textStr.trim() === '') {
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(textStr);
+      setJsonText(JSON.stringify(parsed));
+      setIsValid(true);
+      setError(null);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleSave = () => {
+    if (!isValid) {
+      return;
+    }
+
+    // Ensure jsonText is a string before calling trim
+    const textStr = String(jsonText || '');
+    if (textStr.trim() === '') {
+      onValueChange(nullable ? 'null' : '{}');
+    } else {
+      try {
+        // Validate and normalize the JSON before saving
+        const parsed = JSON.parse(textStr);
+        onValueChange(JSON.stringify(parsed));
+      } catch {
+        // This shouldn't happen as we validate before enabling save
+        return;
+      }
+    }
+    setOpen(false);
+  };
+
+  const handleSetNull = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!nullable) {
+      return;
+    }
+
+    // Check if there's existing data
+    const textStr = String(jsonText || '');
+    const hasData = textStr.trim() !== '' && textStr !== 'null';
+
+    if (hasData) {
+      // Show confirmation dialog if there's existing data
+      setShowNullConfirm(true);
+    } else {
+      // Directly set to null if no data
+      confirmSetNull();
+    }
+  };
+
+  const confirmSetNull = () => {
+    setShowNullConfirm(false);
+    onValueChange('null');
+    setOpen(false);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen && !showNullConfirm) {
+      // Only cancel if confirmation dialog is not showing
+      onCancel();
+    }
+    setOpen(isOpen);
+  };
+
+  const formatDisplayValue = () => {
+    if (!value || value === 'null') {
+      return 'Empty JSON';
+    }
+
+    try {
+      const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+
+      if (typeof parsed !== 'object' || parsed === null) {
+        return 'Invalid JSON';
+      }
+
+      const keys = Object.keys(parsed);
+      if (keys.length === 0) {
+        return '{}';
+      }
+      if (keys.length === 1) {
+        return `{ ${keys[0]}: ... }`;
+      }
+      return `{ ${keys.length} properties }`;
+    } catch {
+      return 'Invalid JSON';
+    }
+  };
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={showNullConfirm ? undefined : handleOpenChange}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start text-sm text-left font-normal h-full border-0 p-0 hover:bg-transparent dark:text-white',
+              (!value || value === 'null') && 'text-muted-foreground',
+              className
+            )}
+          >
+            <FileJson className="mr-2 h-4 w-4" />
+            {formatDisplayValue()}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="overflow-hidden w-125 p-0 dark:bg-neutral-800 dark:border-neutral-700"
+          align="start"
+          side="bottom"
+        >
+          <div className="p-4">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <FileJson className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">JSON Editor</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleFormat}
+                  disabled={!isValid || String(jsonText || '').trim() === ''}
+                  className="h-7 px-2"
+                >
+                  Format
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleMinify}
+                  disabled={!isValid || String(jsonText || '').trim() === ''}
+                  className="h-7 px-2"
+                >
+                  Minify
+                </Button>
+              </div>
+            </div>
+
+            <div className="relative">
+              <textarea
+                value={jsonText}
+                onChange={handleTextChange}
+                onKeyDown={(e) => {
+                  if (e.key === 'Tab') {
+                    e.preventDefault();
+                    const target = e.target as HTMLTextAreaElement;
+                    const start = target.selectionStart;
+                    const end = target.selectionEnd;
+
+                    // Insert 2 spaces at cursor position
+                    const newValue = jsonText.substring(0, start) + '  ' + jsonText.substring(end);
+                    setJsonText(newValue);
+                    validateJson(newValue);
+
+                    // Move cursor after the inserted spaces
+                    setTimeout(() => {
+                      target.selectionStart = target.selectionEnd = start + 2;
+                    }, 0);
+                  } else if (e.key === 'Enter' && e.ctrlKey) {
+                    e.preventDefault();
+                    handleSave();
+                  } else if (e.key === 'Enter') {
+                    // Allow Enter to create new lines (prevent it from bubbling up to parent components)
+                    e.stopPropagation();
+                  } else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    onCancel();
+                    setOpen(false);
+                  }
+                }}
+                placeholder="Enter JSON here..."
+                className={cn(
+                  'w-full h-75 px-3 py-2 text-sm border border-border-gray dark:border-neutral-600 rounded-md font-mono resize-none',
+                  'focus:outline-none focus:ring-2 focus:ring-offset-2',
+                  isValid ? 'focus:ring-primary' : 'focus:ring-red-500 border-red-500'
+                )}
+                spellCheck={false}
+                autoFocus
+              />
+
+              {/* Validation indicator */}
+              <div
+                className={cn(
+                  'absolute bottom-2 right-2 flex items-center gap-1',
+                  isValid ? 'text-green-600' : 'text-red-600'
+                )}
+              >
+                {isValid ? (
+                  <>
+                    <CheckCircle className="h-4 w-4" />
+                    <span className="text-xs">Valid JSON</span>
+                  </>
+                ) : (
+                  <>
+                    <AlertCircle className="h-4 w-4" />
+                    <span className="text-xs">Invalid JSON</span>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Error message */}
+            {error && (
+              <div className="mt-2 text-xs text-red-600 bg-red-50 p-2 rounded">{error}</div>
+            )}
+
+            {/* Tips */}
+            <div className="mt-2 text-xs text-muted-foreground">
+              Tip: Use Tab for indentation, Ctrl+Enter to save, Escape to cancel
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex items-center gap-2 p-3 border-t border-border-gray dark:border-neutral-600 bg-muted/30 dark:bg-neutral-800">
+            {nullable && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleSetNull}
+                className="flex-1 dark:bg-neutral-600 dark:text-white dark:hover:bg-neutral-700"
+              >
+                Null
+              </Button>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                onCancel();
+                setOpen(false);
+              }}
+              className="flex-1 dark:bg-neutral-600 dark:text-white dark:hover:bg-neutral-700"
+            >
+              Cancel
+            </Button>
+            <Button size="sm" onClick={handleSave} disabled={!isValid} className="flex-1">
+              Save
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <ConfirmDialog
+        open={showNullConfirm}
+        onOpenChange={setShowNullConfirm}
+        title="Clear JSON Data"
+        description="This action will permanently remove the current JSON data from this cell and set it to null. Are you sure you want to continue?"
+        confirmText="Clear Data"
+        cancelText="Cancel"
+        onConfirm={confirmSetNull}
+        destructive={true}
+      />
+    </>
+  );
+}

package/frontend/src/components/datagrid/cell-editors/TextCellEditor.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from 'react';
+import type { TextCellEditorProps } from './types';
+import { cn } from '@/lib/utils/utils';
+
+export function TextCellEditor({ value, onValueChange, onCancel, className }: TextCellEditorProps) {
+  const [inputValue, setInputValue] = useState(String(value || ''));
+
+  const handleSave = useCallback(() => {
+    onValueChange(inputValue);
+  }, [inputValue, onValueChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [handleSave, onCancel]
+  );
+
+  return (
+    <input
+      value={inputValue}
+      onChange={(e) => setInputValue(e.target.value)}
+      onKeyDown={handleKeyDown}
+      onBlur={handleSave}
+      className={cn(
+        'w-full border-none outline-none bg-white dark:bg-neutral-800 focus:border-0! focus:ring-0! focus:ring-offset-0! focus:outline-none!',
+        className
+      )}
+      autoFocus
+    />
+  );
+}

package/frontend/src/components/datagrid/cell-editors/index.ts

@@ -0,0 +1,14 @@
+// Export all cell editor types
+export type {
+  BaseCellEditorProps,
+  BooleanCellEditorProps,
+  DateCellEditorProps,
+  JsonCellEditorProps,
+  TextCellEditorProps,
+} from './types';
+
+// Export all cell editor components
+export { BooleanCellEditor } from './BooleanCellEditor';
+export { DateCellEditor } from './DateCellEditor';
+export { JsonCellEditor } from './JsonCellEditor';
+export { TextCellEditor } from './TextCellEditor';

package/frontend/src/components/datagrid/cell-editors/types.ts

@@ -0,0 +1,43 @@
+import { ColumnType } from '@insforge/shared-schemas';
+
+/**
+ * Base props for all cell editors
+ */
+export interface BaseCellEditorProps {
+  nullable: boolean;
+  onCancel: () => void;
+  className?: string;
+}
+
+/**
+ * Boolean cell editor specific props
+ */
+export interface BooleanCellEditorProps extends BaseCellEditorProps {
+  value: boolean | null;
+  onValueChange: (newValue: string) => void; // Returns 'true', 'false', or 'null'
+}
+
+/**
+ * Date cell editor specific props
+ */
+export interface DateCellEditorProps extends BaseCellEditorProps {
+  value: string | null;
+  type: ColumnType.DATE | ColumnType.DATETIME;
+  onValueChange: (newValue: string | null) => void;
+}
+
+/**
+ * JSON cell editor specific props
+ */
+export interface JsonCellEditorProps extends BaseCellEditorProps {
+  value: string | null;
+  onValueChange: (newValue: string) => void;
+}
+
+/**
+ * Text cell editor specific props
+ */
+export interface TextCellEditorProps extends BaseCellEditorProps {
+  value: string;
+  onValueChange: (newValue: string) => void;
+}

package/frontend/src/components/datagrid/datagridTypes.tsx

@@ -0,0 +1,72 @@
+import { ColumnType } from '@insforge/shared-schemas';
+import type {
+  Column,
+  RenderCellProps,
+  RenderEditCellProps,
+  RenderHeaderCellProps,
+} from 'react-data-grid';
+
+/**
+ * Raw database values - these are the actual data types stored in the database
+ * and received from the backend API.
+ */
+export type ConvertedValue =
+  | string // STRING, UUID, DATETIME, DATE (as ISO string)
+  | number // INTEGER, FLOAT
+  | boolean // BOOLEAN
+  | null // NULL values for any nullable column
+  | JSON; // JSON (as parsed object or string)
+
+/**
+ * User input values - these are the types of values users enter in forms and cell editors
+ * All user inputs need to be converted to ConvertedValue
+ */
+export type UserInputValue = string | number | boolean | null;
+
+/**
+ * Display values - these are always strings formatted for UI display
+ * Used by cell renderers and form display components
+ */
+export type DisplayValue = string;
+
+/**
+ * Database record type - represents a row in the database
+ */
+export interface DatabaseRecord {
+  [columnName: string]: ConvertedValue | { [key: string]: string }[];
+}
+
+/**
+ * DataGrid row data - extends DatabaseRecord with required id
+ */
+export interface DataGridRow extends DatabaseRecord {
+  id: string;
+}
+
+/**
+ * Generic row type that can be either a DatabaseRecord or a specific schema
+ * This allows us to support both AI-generated tables and predefined schemas
+ * The id field is optional as react-data-grid can generate it automatically
+ */
+export type DataGridRowType = DatabaseRecord & { id?: string };
+
+/**
+ * DataGrid column definition - generic version that extends react-data-grid's Column
+ * TRow must extend DataGridRowType to ensure it has both id and index signature
+ */
+export interface DataGridColumn<TRow extends DataGridRowType = DataGridRow> extends Column<TRow> {
+  type?: ColumnType;
+  isPrimaryKey?: boolean;
+  isNullable?: boolean;
+  // Override render functions to use our custom prop types
+  renderCell?: (props: RenderCellProps<TRow>) => React.ReactNode;
+  renderEditCell?: (props: RenderEditCellProps<TRow>) => React.ReactNode;
+  renderHeaderCell?: (props: RenderHeaderCellProps<TRow>) => React.ReactNode;
+}
+
+/**
+ * Value conversion result for user input validation
+ */
+export type ValueConversionResult =
+  | { success: true; value: ConvertedValue }
+  | { success: false; error: string };

package/frontend/src/components/datagrid/index.tsx

@@ -0,0 +1,20 @@
+export type {
+  Column,
+  SortColumn,
+  RenderCellProps,
+  RenderEditCellProps,
+  RenderHeaderCellProps,
+  CellClickArgs,
+  CellMouseEvent,
+} from 'react-data-grid';
+export * from './datagridTypes';
+
+import IdCell from './IdCell';
+import SortableHeaderRenderer from './SortableHeader';
+import { createDefaultCellRenderer } from './DefaultCellRenderer';
+import DataGrid, { type DataGridProps } from './DataGrid';
+
+export { IdCell, SortableHeaderRenderer, DataGrid, type DataGridProps, createDefaultCellRenderer };
+
+// Export cell editors
+export * from './cell-editors';

package/frontend/src/components/index.ts

@@ -0,0 +1,39 @@
+// Core radix/ui components
+export * from './radix/Button';
+export * from './radix/Card';
+export * from './radix/Input';
+export * from './radix/Form';
+export * from './radix/Tabs';
+export * from './radix/Badge';
+export * from './radix/Skeleton';
+export * from './radix/ScrollArea';
+export * from './radix/Separator';
+export * from './radix/Alert';
+export * from './radix/DropdownMenu';
+export * from './radix/Dialog';
+export * from './radix/Label';
+export * from './radix/Popover';
+export * from './radix/Select';
+export * from './radix/Sheet';
+export * from './radix/Switch';
+export * from './radix/Tooltip';
+export * from './radix/AlertDialog';
+export * from './radix/Avatar';
+export * from './ConfirmDialog';
+export * from './ButtonWithLoading';
+
+// Custom UI components
+export { EmptyState } from './EmptyState';
+export { LoadingState } from './LoadingState';
+export { ErrorState } from './ErrorState';
+export { JsonHighlight } from './JsonHighlight';
+export { SearchInput } from './SearchInput';
+export { PaginationControls } from './PaginationControls';
+export { SelectionClearButton } from './SelectionClearButton';
+export { DeleteActionButton } from './DeleteActionButton';
+export { Checkbox } from './Checkbox';
+export { TypeBadge } from './TypeBadge';
+
+// Data Grid Components
+export { DataGrid, SortableHeaderRenderer } from './datagrid';
+export type { DataGridProps } from './datagrid';