@object-ui/react 3.1.5 → 3.3.1

package/src/hooks/useCrudShortcuts.ts

@@ -1,126 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useMemo } from 'react';
-import {
-  useKeyboardShortcuts,
-  type KeyboardShortcutDefinition,
-} from './useKeyboardShortcuts';
-
-export interface CrudShortcutCallbacks {
-  onCreate?: () => void;
-  onEdit?: () => void;
-  onDelete?: () => void;
-  onSave?: () => void;
-  onDuplicate?: () => void;
-  onCancel?: () => void;
-  onSearch?: () => void;
-}
-
-/**
- * Registers standard CRUD keyboard shortcuts using the useKeyboardShortcuts hook.
- *
- * Shortcuts:
- * - Ctrl/Cmd+N: Create new record
- * - Ctrl/Cmd+E: Edit selected record
- * - Delete / Backspace: Delete selected record(s)
- * - Ctrl/Cmd+S: Save current record
- * - Ctrl/Cmd+D: Duplicate selected record
- * - Escape: Cancel/close current operation
- * - Ctrl/Cmd+F: Focus search
- *
- * @example
- * ```tsx
- * useCrudShortcuts({
- *   onCreate: () => openCreateDialog(),
- *   onSave: () => saveRecord(),
- *   onDelete: () => deleteSelected(),
- *   onCancel: () => closeDialog(),
- * });
- * ```
- */
-export function useCrudShortcuts(
-  callbacks: CrudShortcutCallbacks,
-  enabled = true
-): void {
-  const shortcuts = useMemo<KeyboardShortcutDefinition[]>(() => {
-    const defs: KeyboardShortcutDefinition[] = [];
-
-    if (callbacks.onCreate) {
-      defs.push({
-        key: 'n',
-        ctrlOrMeta: true,
-        handler: () => callbacks.onCreate!(),
-        description: 'New record',
-      });
-    }
-
-    if (callbacks.onEdit) {
-      defs.push({
-        key: 'e',
-        ctrlOrMeta: true,
-        handler: () => callbacks.onEdit!(),
-        description: 'Edit selected record',
-      });
-    }
-
-    if (callbacks.onDelete) {
-      defs.push(
-        {
-          key: 'Delete',
-          handler: () => callbacks.onDelete!(),
-          description: 'Delete selected record(s)',
-        },
-        {
-          key: 'Backspace',
-          handler: () => callbacks.onDelete!(),
-          description: 'Delete selected record(s)',
-        }
-      );
-    }
-
-    if (callbacks.onSave) {
-      defs.push({
-        key: 's',
-        ctrlOrMeta: true,
-        handler: () => callbacks.onSave!(),
-        description: 'Save current record',
-      });
-    }
-
-    if (callbacks.onDuplicate) {
-      defs.push({
-        key: 'd',
-        ctrlOrMeta: true,
-        handler: () => callbacks.onDuplicate!(),
-        description: 'Duplicate selected record',
-      });
-    }
-
-    if (callbacks.onCancel) {
-      defs.push({
-        key: 'Escape',
-        handler: () => callbacks.onCancel!(),
-        description: 'Cancel/close current operation',
-      });
-    }
-
-    if (callbacks.onSearch) {
-      defs.push({
-        key: 'f',
-        ctrlOrMeta: true,
-        handler: () => callbacks.onSearch!(),
-        description: 'Focus search',
-      });
-    }
-
-    return defs;
-  }, [callbacks]);
-
-  useKeyboardShortcuts(shortcuts, { enabled });
-}

package/src/hooks/useDebugMode.ts

@@ -1,95 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { parseDebugFlags, type DebugFlags } from '@object-ui/core';
-
-/**
- * Result returned by {@link useDebugMode}.
- */
-export interface UseDebugModeResult {
-  /** Whether debug mode is currently enabled */
-  enabled: boolean;
-  /** Fine-grained debug flags parsed from the URL */
-  flags: DebugFlags;
-  /** Toggle debug mode on/off */
-  toggle: () => void;
-  /** Explicitly set debug mode */
-  setEnabled: (value: boolean) => void;
-}
-
-/**
- * Hook for managing debug mode.
- *
- * Automatically detects `?__debug` (and sub-flags like `?__debug_schema`)
- * from the URL. Supports manual toggle and Ctrl+Shift+D keyboard shortcut.
- *
- * SSR-safe — returns disabled state when `window` is unavailable.
- *
- * @example
- * ```tsx
- * function App() {
- *   const debug = useDebugMode();
- *   return (
- *     <>
- *       {debug.enabled && <DebugPanel flags={debug.flags} />}
- *       <button onClick={debug.toggle}>Toggle Debug</button>
- *     </>
- *   );
- * }
- * ```
- */
-export function useDebugMode(): UseDebugModeResult {
-  const urlFlags = useMemo(() => {
-    try {
-      return typeof window !== 'undefined'
-        ? parseDebugFlags(window.location.search)
-        : { enabled: false } as DebugFlags;
-    } catch {
-      return { enabled: false } as DebugFlags;
-    }
-  }, []);
-
-  const [manualEnabled, setManualEnabled] = useState<boolean | null>(null);
-
-  // Effective enabled: manual override wins, then URL flags
-  const enabled = manualEnabled !== null ? manualEnabled : urlFlags.enabled;
-
-  // Flags reflect URL-parsed flags plus effective enabled state
-  const flags: DebugFlags = useMemo(
-    () => ({ ...urlFlags, enabled }),
-    [urlFlags, enabled],
-  );
-
-  const toggle = useCallback(() => {
-    setManualEnabled((prev) => {
-      if (prev === null) return !urlFlags.enabled;
-      return !prev;
-    });
-  }, [urlFlags.enabled]);
-
-  const setEnabled = useCallback((value: boolean) => {
-    setManualEnabled(value);
-  }, []);
-
-  // Ctrl+Shift+D keyboard shortcut
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handler = (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
-        e.preventDefault();
-        toggle();
-      }
-    };
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [toggle]);
-
-  return { enabled, flags, toggle, setEnabled };
-}

package/src/hooks/useDensityMode.ts

@@ -1,102 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState, useCallback, useMemo } from 'react';
-
-/** Density mode aligned with DensityMode from @objectstack/spec v2.0.7 */
-export type DensityModeValue = 'compact' | 'comfortable' | 'spacious';
-
-export interface DensityConfig {
-  /** Row height in pixels for each density mode */
-  rowHeights?: Record<DensityModeValue, number>;
-  /** Padding classes for each density mode */
-  paddingClasses?: Record<DensityModeValue, string>;
-  /** Font size classes for each density mode */
-  fontSizeClasses?: Record<DensityModeValue, string>;
-}
-
-export interface DensityResult {
-  /** Current density mode */
-  mode: DensityModeValue;
-  /** Set the density mode */
-  setMode: (mode: DensityModeValue) => void;
-  /** Cycle through density modes */
-  cycle: () => void;
-  /** Row height for the current mode (in pixels) */
-  rowHeight: number;
-  /** Tailwind padding class for the current mode */
-  paddingClass: string;
-  /** Tailwind font-size class for the current mode */
-  fontSizeClass: string;
-}
-
-const DEFAULT_ROW_HEIGHTS: Record<DensityModeValue, number> = {
-  compact: 32,
-  comfortable: 40,
-  spacious: 52,
-};
-
-const DEFAULT_PADDING_CLASSES: Record<DensityModeValue, string> = {
-  compact: 'py-1 px-2',
-  comfortable: 'py-2 px-3',
-  spacious: 'py-3 px-4',
-};
-
-const DEFAULT_FONT_SIZE_CLASSES: Record<DensityModeValue, string> = {
-  compact: 'text-xs',
-  comfortable: 'text-sm',
-  spacious: 'text-base',
-};
-
-const DENSITY_ORDER: DensityModeValue[] = ['compact', 'comfortable', 'spacious'];
-
-/**
- * Hook for managing view density modes (compact/comfortable/spacious).
- * Implements DensityMode from @objectstack/spec v2.0.7.
- *
- * @example
- * ```tsx
- * const density = useDensityMode('comfortable');
- *
- * return (
- *   <div className={density.paddingClass}>
- *     <table style={{ rowHeight: density.rowHeight }}>...</table>
- *     <button onClick={density.cycle}>Toggle Density</button>
- *   </div>
- * );
- * ```
- */
-export function useDensityMode(
-  initialMode: DensityModeValue = 'comfortable',
-  config?: DensityConfig
-): DensityResult {
-  const [mode, setMode] = useState<DensityModeValue>(initialMode);
-
-  const rowHeights = config?.rowHeights ?? DEFAULT_ROW_HEIGHTS;
-  const paddingClasses = config?.paddingClasses ?? DEFAULT_PADDING_CLASSES;
-  const fontSizeClasses = config?.fontSizeClasses ?? DEFAULT_FONT_SIZE_CLASSES;
-
-  const cycle = useCallback(() => {
-    setMode((current) => {
-      const idx = DENSITY_ORDER.indexOf(current);
-      return DENSITY_ORDER[(idx + 1) % DENSITY_ORDER.length];
-    });
-  }, []);
-
-  return useMemo(
-    () => ({
-      mode,
-      setMode,
-      cycle,
-      rowHeight: rowHeights[mode],
-      paddingClass: paddingClasses[mode],
-      fontSizeClass: fontSizeClasses[mode],
-    }),
-    [mode, cycle, rowHeights, paddingClasses, fontSizeClasses]
-  );
-}

package/src/hooks/useDiscovery.ts

@@ -1,154 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState, useEffect, useContext } from 'react';
-import { SchemaRendererContext } from '../context/SchemaRendererContext';
-
-/**
- * Discovery service information structure.
- * Represents server capabilities and service status.
- */
-export interface DiscoveryInfo {
-  /** Server name and version */
-  name?: string;
-  version?: string;
-  
-  /** Runtime mode (e.g., 'development', 'production', 'preview') */
-  mode?: string;
-
-  /** Preview mode configuration from the kernel (present when mode is 'preview') */
-  previewMode?: {
-    autoLogin?: boolean;
-    simulatedRole?: 'admin' | 'user' | 'viewer';
-    simulatedUserName?: string;
-    readOnly?: boolean;
-    expiresInSeconds?: number;
-    bannerMessage?: string;
-  };
-  
-  /** Service availability status */
-  services?: {
-    /** Authentication service status */
-    auth?: {
-      enabled: boolean;
-      status?: 'available' | 'unavailable';
-      message?: string;
-    };
-    /** Data access service status */
-    data?: {
-      enabled: boolean;
-      status?: 'available' | 'unavailable';
-    };
-    /** Metadata service status */
-    metadata?: {
-      enabled: boolean;
-      status?: 'available' | 'unavailable';
-    };
-    [key: string]: any;
-  };
-  
-  /** API capabilities */
-  capabilities?: string[];
-  
-  /** Additional discovery metadata */
-  [key: string]: any;
-}
-
-/**
- * Hook to access discovery information from the ObjectStack server.
- * 
- * This hook retrieves server capabilities and service status, which can be used
- * to conditionally enable/disable features based on server configuration.
- * 
- * @example
- * ```tsx
- * function App() {
- *   const { discovery, isLoading } = useDiscovery();
- *   
- *   if (isLoading) {
- *     return <LoadingScreen />;
- *   }
- *   
- *   // Check if auth is enabled on the server
- *   const authEnabled = discovery?.services?.auth?.enabled ?? true;
- *   
- *   return (
- *     <div>
- *       {authEnabled ? <AuthProvider>...</AuthProvider> : <App />}
- *     </div>
- *   );
- * }
- * ```
- * 
- * @returns Discovery information and loading state
- */
-export function useDiscovery() {
-  const context = useContext(SchemaRendererContext);
-  const dataSource = context?.dataSource;
-  const [discovery, setDiscovery] = useState<DiscoveryInfo | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function fetchDiscovery() {
-      if (!dataSource) {
-        setIsLoading(false);
-        return;
-      }
-
-      try {
-        setIsLoading(true);
-        
-        // Check if dataSource has getDiscovery method
-        if (typeof (dataSource as any).getDiscovery === 'function') {
-          const discoveryData = await (dataSource as any).getDiscovery();
-          
-          if (!cancelled) {
-            setDiscovery(discoveryData);
-            setError(null);
-          }
-        } else {
-          // DataSource doesn't support discovery
-          if (!cancelled) {
-            setDiscovery(null);
-            setError(null);
-          }
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err : new Error('Failed to fetch discovery'));
-          setDiscovery(null);
-        }
-      } finally {
-        if (!cancelled) {
-          setIsLoading(false);
-        }
-      }
-    }
-
-    fetchDiscovery();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [dataSource]);
-
-  return {
-    discovery,
-    isLoading,
-    error,
-    /**
-     * Check if authentication is enabled on the server.
-     * Defaults to true if discovery data is not available.
-     */
-    isAuthEnabled: discovery?.services?.auth?.enabled ?? true,
-  };
-}
-

package/src/hooks/useDynamicApp.ts

@@ -1,142 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-
-/**
- * Options for dynamic app configuration loading.
- */
-export interface DynamicAppOptions<TAppConfig = unknown> {
-  /** Application identifier to load */
-  appId: string;
-  /**
-   * Static (fallback) configuration used when the server does not
-   * provide an app definition or is unreachable.
-   */
-  staticConfig?: TAppConfig;
-  /**
-   * Data source adapter with `getApp` and `invalidateCache` methods.
-   * Typically an ObjectStackAdapter instance.
-   */
-  adapter?: {
-    getApp: (appId: string) => Promise<unknown | null>;
-    invalidateCache?: (key?: string) => void;
-    getObjectSchema?: (objectName: string) => Promise<unknown>;
-  };
-  /** Whether to attempt loading from the server (default: true) */
-  enabled?: boolean;
-}
-
-/**
- * Result returned by useDynamicApp.
- */
-export interface DynamicAppResult<TAppConfig = unknown> {
-  /** The resolved app configuration (server or static fallback) */
-  config: TAppConfig | null;
-  /** Whether the configuration is currently loading */
-  isLoading: boolean;
-  /** Error from the most recent load attempt */
-  error: Error | null;
-  /** Whether the config was loaded from the server (vs static fallback) */
-  isServerConfig: boolean;
-  /** Re-fetch the app configuration from the server, invalidating cache */
-  refresh: () => Promise<void>;
-}
-
-/**
- * React hook for dynamic app configuration loading.
- *
- * Fetches app configuration from the server via `adapter.getApp(appId)`,
- * falling back to `staticConfig` when the server is unavailable.
- * Supports cache-based hot-reload via the `refresh()` callback.
- *
- * @example
- * ```tsx
- * import { useDynamicApp } from '@object-ui/react';
- * import staticAppConfig from '../config/app.json';
- *
- * function App() {
- *   const { config, isLoading, refresh } = useDynamicApp({
- *     appId: 'crm',
- *     staticConfig: staticAppConfig,
- *     adapter: dataSource,
- *   });
- *
- *   if (isLoading) return <LoadingScreen />;
- *   return <Console config={config} onRefresh={refresh} />;
- * }
- * ```
- */
-export function useDynamicApp<TAppConfig = unknown>(
-  options: DynamicAppOptions<TAppConfig>,
-): DynamicAppResult<TAppConfig> {
-  const { appId, staticConfig, adapter, enabled = true } = options;
-
-  const [config, setConfig] = useState<TAppConfig | null>(staticConfig ?? null);
-  const [isLoading, setIsLoading] = useState(enabled && !!adapter);
-  const [error, setError] = useState<Error | null>(null);
-  const [isServerConfig, setIsServerConfig] = useState(false);
-
-  // Ref to track unmount / stale requests
-  const mountedRef = useRef(true);
-  useEffect(() => {
-    mountedRef.current = true;
-    return () => { mountedRef.current = false; };
-  }, []);
-
-  const loadConfig = useCallback(async () => {
-    if (!adapter || !enabled) {
-      setConfig(staticConfig ?? null);
-      setIsServerConfig(false);
-      setIsLoading(false);
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const serverConfig = await adapter.getApp(appId);
-
-      if (!mountedRef.current) return;
-
-      if (serverConfig) {
-        setConfig(serverConfig as TAppConfig);
-        setIsServerConfig(true);
-      } else {
-        // Server returned null — fall back to static config
-        setConfig(staticConfig ?? null);
-        setIsServerConfig(false);
-      }
-    } catch (err) {
-      if (!mountedRef.current) return;
-
-      setError(err instanceof Error ? err : new Error(String(err)));
-      // Fall back to static config on error
-      setConfig(staticConfig ?? null);
-      setIsServerConfig(false);
-    } finally {
-      if (mountedRef.current) {
-        setIsLoading(false);
-      }
-    }
-  }, [adapter, appId, staticConfig, enabled]);
-
-  // Load on mount and when appId changes
-  useEffect(() => {
-    loadConfig();
-  }, [loadConfig]);
-
-  const refresh = useCallback(async () => {
-    // Invalidate cache before re-fetching
-    adapter?.invalidateCache?.(`app:${appId}`);
-    await loadConfig();
-  }, [adapter, appId, loadConfig]);
-
-  return { config, isLoading, error, isServerConfig, refresh };
-}