@rangka/client 0.1.0 → 0.1.2

package/src/widgets/shell/WidgetSlotRenderer.tsx

@@ -1,73 +0,0 @@
-import React, { useState, useCallback, useMemo, useRef } from 'react';
-import type { WidgetNode } from '@rangka/shared';
-import { SlotRenderer } from '../renderer/SlotRenderer.js';
-import { StateStore } from '../state/store.js';
-import { createRootContext } from '../context/builder.js';
-import { useActionHandlers } from './useActionHandlers.js';
-import type { UseActionHandlersOptions } from './useActionHandlers.js';
-import type { FieldMeta } from '../binding/resolver.js';
-
-export interface WidgetSlotRendererProps {
-  nodes: WidgetNode[];
-  record?: Record<string, unknown>;
-  model?: string;
-  mode?: 'view' | 'edit';
-  fieldMeta?: Record<string, FieldMeta>;
-  sourceQueryKey?: unknown[];
-  onRecordChange?: (record: Record<string, unknown>) => void;
-}
-
-export function WidgetSlotRenderer({
-  nodes,
-  record: initialRecord,
-  model,
-  mode = 'view',
-  fieldMeta,
-  sourceQueryKey,
-  onRecordChange,
-}: WidgetSlotRendererProps) {
-  const [record, setRecord] = useState<Record<string, unknown>>(initialRecord ?? {});
-  const recordRef = useRef(record);
-  recordRef.current = record;
-  const state = useMemo(() => new StateStore(), []);
-
-  const handlerOptions: UseActionHandlersOptions = useMemo(
-    () => ({ model, sourceQueryKey }),
-    [model, sourceQueryKey],
-  );
-  const actionHandlers = useActionHandlers(handlerOptions);
-
-  const setValue = useCallback(
-    (field: string, value: unknown) => {
-      const next = { ...recordRef.current, [field]: value };
-      recordRef.current = next;
-      setRecord(next);
-      onRecordChange?.(next);
-    },
-    [onRecordChange],
-  );
-
-  const handlersWithRecord = useMemo(
-    () => ({
-      ...actionHandlers,
-      setRecordValue: setValue,
-    }),
-    [actionHandlers, setValue],
-  );
-
-  const context = useMemo(
-    () => createRootContext(record, model ?? '', mode),
-    [record, model, mode],
-  );
-
-  return (
-    <SlotRenderer
-      nodes={nodes}
-      context={context}
-      state={state}
-      handlers={handlersWithRecord}
-      fieldMeta={fieldMeta}
-      setValue={setValue}
-    />
-  );
-}

package/src/widgets/shell/index.ts

@@ -1,4 +0,0 @@
-export { WidgetSlotRenderer } from './WidgetSlotRenderer.js';
-export { useActionHandlers } from './useActionHandlers.js';
-export type { UseActionHandlersOptions } from './useActionHandlers.js';
-export type { WidgetSlotRendererProps } from './WidgetSlotRenderer.js';

package/src/widgets/shell/useActionHandlers.ts

@@ -1,170 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { apiClient } from '../../api/client.js';
-import { modelToPath } from '../../api/paths.js';
-import { useNavigate } from '../../router/hooks.js';
-import type { ActionHandlers } from '../action/dispatcher.js';
-
-export interface UseActionHandlersOptions {
-  model?: string;
-  sourceQueryKey?: unknown[];
-}
-
-export function useActionHandlers(options: UseActionHandlersOptions = {}): ActionHandlers {
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-
-  const handleNavigate = useCallback(
-    (path: string) => {
-      navigate(path);
-    },
-    [navigate],
-  );
-
-  const handleService = useCallback(
-    async (name: string, params: Record<string, unknown>): Promise<Record<string, unknown>> => {
-      const response = await apiClient(`/api/services/${name}`, {
-        method: 'POST',
-        body: JSON.stringify(params),
-      });
-      if (!response.ok) {
-        const err = await response.json().catch(() => ({ message: 'Service call failed' }));
-        throw new Error(err.message ?? 'Service call failed');
-      }
-      return response.json();
-    },
-    [],
-  );
-
-  const handleRefreshSource = useCallback(() => {
-    if (options.sourceQueryKey) {
-      queryClient.invalidateQueries({ queryKey: options.sourceQueryKey });
-    } else if (options.model) {
-      queryClient.invalidateQueries({ queryKey: ['model', options.model] });
-    }
-  }, [queryClient, options.sourceQueryKey, options.model]);
-
-  const handleFocus = useCallback((field: string) => {
-    const el = document.querySelector(`[data-field="${field}"]`) as HTMLElement | null;
-    el?.focus();
-  }, []);
-
-  const handleValidate = useCallback(async (_fields?: string[]): Promise<boolean> => {
-    return true;
-  }, []);
-
-  const handleModelCreate = useCallback(
-    async (model: string, data: Record<string, unknown>): Promise<Record<string, unknown>> => {
-      const path = modelToPath(model);
-      const response = await apiClient(path, {
-        method: 'POST',
-        body: JSON.stringify(data),
-      });
-      if (!response.ok) {
-        const err = await response.json().catch(() => ({ message: 'Create failed' }));
-        throw new Error(err.message ?? 'Create failed');
-      }
-      const result = await response.json();
-      queryClient.invalidateQueries({ queryKey: ['model', model] });
-      return result;
-    },
-    [queryClient],
-  );
-
-  const handleModelUpdate = useCallback(
-    async (
-      model: string,
-      id: string,
-      data: Record<string, unknown>,
-    ): Promise<Record<string, unknown>> => {
-      const path = `${modelToPath(model)}/${id}`;
-      const response = await apiClient(path, {
-        method: 'PUT',
-        body: JSON.stringify(data),
-      });
-      if (!response.ok) {
-        const err = await response.json().catch(() => ({ message: 'Update failed' }));
-        throw new Error(err.message ?? 'Update failed');
-      }
-      const result = await response.json();
-      queryClient.invalidateQueries({ queryKey: ['model', model] });
-      return result;
-    },
-    [queryClient],
-  );
-
-  const handleModelDelete = useCallback(
-    async (model: string, id: string): Promise<void> => {
-      const path = `${modelToPath(model)}/${id}`;
-      const response = await apiClient(path, { method: 'DELETE' });
-      if (!response.ok) {
-        const err = await response.json().catch(() => ({ message: 'Delete failed' }));
-        throw new Error(err.message ?? 'Delete failed');
-      }
-      queryClient.invalidateQueries({ queryKey: ['model', model] });
-    },
-    [queryClient],
-  );
-
-  const handleModelFetch = useCallback(
-    async (model: string, id: string): Promise<Record<string, unknown>> => {
-      const path = `${modelToPath(model)}/${id}`;
-      const response = await apiClient(path);
-      if (!response.ok) {
-        const err = await response.json().catch(() => ({ message: 'Fetch failed' }));
-        throw new Error(err.message ?? 'Fetch failed');
-      }
-      return response.json();
-    },
-    [],
-  );
-
-  const handleModelList = useCallback(
-    async (
-      model: string,
-      filters?: Record<string, unknown>,
-    ): Promise<Record<string, unknown>[]> => {
-      const url = new URL(modelToPath(model), window.location.origin);
-      if (filters) {
-        for (const [key, value] of Object.entries(filters)) {
-          url.searchParams.set(`filter[${key}]`, String(value));
-        }
-      }
-      const response = await apiClient(url.pathname + url.search);
-      if (!response.ok) {
-        const err = await response.json().catch(() => ({ message: 'List failed' }));
-        throw new Error(err.message ?? 'List failed');
-      }
-      const result = await response.json();
-      return Array.isArray(result) ? result : (result.data ?? []);
-    },
-    [],
-  );
-
-  return useMemo(
-    () => ({
-      navigate: handleNavigate,
-      service: handleService,
-      refreshSource: handleRefreshSource,
-      focus: handleFocus,
-      validate: handleValidate,
-      modelCreate: handleModelCreate,
-      modelUpdate: handleModelUpdate,
-      modelDelete: handleModelDelete,
-      modelFetch: handleModelFetch,
-      modelList: handleModelList,
-    }),
-    [
-      handleNavigate,
-      handleService,
-      handleRefreshSource,
-      handleFocus,
-      handleValidate,
-      handleModelCreate,
-      handleModelUpdate,
-      handleModelDelete,
-      handleModelFetch,
-      handleModelList,
-    ],
-  );
-}

package/src/widgets/state/index.ts

@@ -1,2 +0,0 @@
-export { StateStore } from './store.js';
-export type { Subscriber } from './store.js';

package/src/widgets/state/store.ts

@@ -1,96 +0,0 @@
-export type Subscriber = (value: unknown) => void;
-export type StoreListener = () => void;
-
-export class StateStore {
-  private state: Map<string, unknown> = new Map();
-  private subscribers: Map<string, Set<Subscriber>> = new Map();
-  private listeners: Set<StoreListener> = new Set();
-  private version = 0;
-
-  get(key: string): unknown {
-    return this.state.get(key);
-  }
-
-  set(key: string, value: unknown): void {
-    const prev = this.state.get(key);
-    if (prev === value) return;
-    this.state.set(key, value);
-    this.version++;
-    this.notify(key, value);
-    this.notifyListeners();
-  }
-
-  setMany(entries: Record<string, unknown>): void {
-    const changed: [string, unknown][] = [];
-    for (const [key, value] of Object.entries(entries)) {
-      const prev = this.state.get(key);
-      if (prev !== value) {
-        this.state.set(key, value);
-        changed.push([key, value]);
-      }
-    }
-    if (changed.length > 0) {
-      this.version++;
-      for (const [key, value] of changed) {
-        this.notify(key, value);
-      }
-      this.notifyListeners();
-    }
-  }
-
-  subscribe(key: string, fn: Subscriber): () => void {
-    let subs = this.subscribers.get(key);
-    if (!subs) {
-      subs = new Set();
-      this.subscribers.set(key, subs);
-    }
-    subs.add(fn);
-    return () => {
-      subs!.delete(fn);
-      if (subs!.size === 0) {
-        this.subscribers.delete(key);
-      }
-    };
-  }
-
-  onchange(fn: StoreListener): () => void {
-    this.listeners.add(fn);
-    return () => {
-      this.listeners.delete(fn);
-    };
-  }
-
-  getVersion(): number {
-    return this.version;
-  }
-
-  clear(): void {
-    this.state.clear();
-    this.subscribers.clear();
-    this.listeners.clear();
-    this.version = 0;
-  }
-
-  keys(): string[] {
-    return [...this.state.keys()];
-  }
-
-  snapshot(): Record<string, unknown> {
-    return Object.fromEntries(this.state);
-  }
-
-  private notify(key: string, value: unknown): void {
-    const subs = this.subscribers.get(key);
-    if (subs) {
-      for (const fn of subs) {
-        fn(value);
-      }
-    }
-  }
-
-  private notifyListeners(): void {
-    for (const fn of this.listeners) {
-      fn();
-    }
-  }
-}

package/src/widgets/types.ts

@@ -1,28 +0,0 @@
-import type { ReactNode } from 'react';
-import type { WidgetNode } from '@rangka/shared';
-
-export interface WidgetProps {
-  props: Record<string, unknown>;
-  bind: {
-    value: unknown;
-    setValue?: (val: unknown) => void;
-    meta?: {
-      type: string;
-      label: string;
-      required: boolean;
-      options?: unknown[];
-      readOnly: boolean;
-    };
-    error?: string;
-    id?: string;
-  };
-  on: Record<string, (...args: unknown[]) => void>;
-  context: {
-    record: Record<string, unknown>;
-    model: string;
-    mode: 'view' | 'edit';
-    index?: number;
-  };
-  childNodes?: WidgetNode[];
-  children?: ReactNode;
-}

package/src/widgets/validation/index.ts

@@ -1,2 +0,0 @@
-export { validateWidgetTree } from './validator.js';
-export type { ValidationError } from './validator.js';

package/src/widgets/validation/validator.ts

@@ -1,140 +0,0 @@
-import type { WidgetNode, WidgetDefinitionMeta } from '@rangka/shared';
-
-export interface ValidationError {
-  path: string;
-  message: string;
-}
-
-export function validateWidgetTree(
-  nodes: WidgetNode[],
-  registry: Map<string, WidgetDefinitionMeta>,
-  parentPath: string = '',
-): ValidationError[] {
-  const errors: ValidationError[] = [];
-
-  nodes.forEach((node, index) => {
-    const path = parentPath ? `${parentPath}[${index}]` : `[${index}]`;
-    const def = registry.get(node.type);
-
-    if (!def) {
-      errors.push({ path, message: `Unknown widget type: '${node.type}'` });
-      return;
-    }
-
-    if (node.children && node.children.length > 0) {
-      if (!def.container) {
-        errors.push({ path, message: `Widget '${node.type}' is not a container but has children` });
-      } else if (def.accepts) {
-        for (let i = 0; i < node.children.length; i++) {
-          const child = node.children[i];
-          if (!def.accepts.includes(child.type)) {
-            errors.push({
-              path: `${path}.children[${i}]`,
-              message: `Widget '${node.type}' does not accept child type '${child.type}'. Allowed: ${def.accepts.join(', ')}`,
-            });
-          }
-        }
-      }
-    }
-
-    if (node.props) {
-      for (const [key, value] of Object.entries(node.props)) {
-        const propDef = def.schema[key];
-        if (!propDef) {
-          errors.push({
-            path: `${path}.props.${key}`,
-            message: `Unknown prop '${key}' on widget '${node.type}'`,
-          });
-          continue;
-        }
-        if (typeof value === 'string' && value.includes('{{')) {
-          continue;
-        }
-        if (!validatePropType(value, propDef.type, propDef.options)) {
-          errors.push({
-            path: `${path}.props.${key}`,
-            message: `Invalid value for prop '${key}': expected ${propDef.type}${propDef.options ? ` (${propDef.options.join(' | ')})` : ''}`,
-          });
-        }
-      }
-
-      for (const [key, propDef] of Object.entries(def.schema)) {
-        if (propDef.required && !(key in node.props) && propDef.default === undefined) {
-          errors.push({
-            path: `${path}.props`,
-            message: `Missing required prop '${key}' on widget '${node.type}'`,
-          });
-        }
-      }
-    } else {
-      for (const [key, propDef] of Object.entries(def.schema)) {
-        if (propDef.required && propDef.default === undefined) {
-          errors.push({
-            path: `${path}.props`,
-            message: `Missing required prop '${key}' on widget '${node.type}'`,
-          });
-        }
-      }
-    }
-
-    if (node.on) {
-      for (const trigger of Object.keys(node.on)) {
-        if (!def.triggers.includes(trigger)) {
-          errors.push({
-            path: `${path}.on.${trigger}`,
-            message: `Unknown trigger '${trigger}' on widget '${node.type}'. Available: ${def.triggers.join(', ') || 'none'}`,
-          });
-        }
-      }
-    }
-
-    if (node.bind) {
-      const bindMode = getBindMode(node.bind);
-      if (bindMode !== def.binding && def.binding !== 'none') {
-        if (bindMode !== def.binding) {
-          errors.push({
-            path: `${path}.bind`,
-            message: `Widget '${node.type}' expects binding mode '${def.binding}' but got '${bindMode}'`,
-          });
-        }
-      } else if (def.binding === 'none' && bindMode !== 'none') {
-        errors.push({
-          path: `${path}.bind`,
-          message: `Widget '${node.type}' does not support data binding`,
-        });
-      }
-    }
-
-    if (node.children) {
-      errors.push(...validateWidgetTree(node.children, registry, `${path}.children`));
-    }
-  });
-
-  return errors;
-}
-
-function getBindMode(bind: { field?: string; expression?: string; model?: unknown }): string {
-  if (bind.field) return 'field';
-  if (bind.expression) return 'expression';
-  if (bind.model) return 'model';
-  return 'none';
-}
-
-function validatePropType(value: unknown, type: string, options?: string[]): boolean {
-  switch (type) {
-    case 'string':
-      return typeof value === 'string';
-    case 'number':
-      return typeof value === 'number';
-    case 'boolean':
-      return typeof value === 'boolean';
-    case 'enum':
-      return typeof value === 'string' && (options ? options.includes(value) : true);
-    case 'object':
-      return typeof value === 'object' && value !== null;
-    case 'array':
-      return Array.isArray(value);
-    default:
-      return true;
-  }
-}

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "composite": true,
-    "outDir": "dist",
-    "rootDir": "src",
-    "jsx": "react-jsx",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"],
-  "exclude": ["src/__tests__", "src/**/__tests__"],
-  "references": [{ "path": "../shared" }]
-}