@rangka/client 0.1.0 → 0.1.2

package/src/widgets/form/useFormValidation.ts

@@ -1,62 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useModelMeta } from '../../data/useModelMeta.js';
-import type { FieldMeta as BootFieldMeta } from '@rangka/shared';
-
-export interface UseFormValidationResult {
-  validateField(field: string, value: unknown): string | undefined;
-  validateAll(values: Record<string, unknown>): Record<string, string>;
-}
-
-export function useFormValidation(model: string): UseFormValidationResult {
-  const { modelMeta } = useModelMeta(model);
-
-  const fieldMap = useMemo(() => {
-    if (!modelMeta) return new Map<string, BootFieldMeta>();
-    const map = new Map<string, BootFieldMeta>();
-    for (const field of modelMeta.fields) {
-      map.set(field.name, field);
-    }
-    return map;
-  }, [modelMeta]);
-
-  const validateField = useCallback(
-    (field: string, value: unknown): string | undefined => {
-      const meta = fieldMap.get(field);
-      if (!meta) return undefined;
-
-      if (meta.required && isEmpty(value)) {
-        return `${meta.label ?? field} is required`;
-      }
-
-      if (meta.type === 'enum' && meta.options && value != null && value !== '') {
-        if (!meta.options.includes(String(value))) {
-          return `${meta.label ?? field} must be one of: ${meta.options.join(', ')}`;
-        }
-      }
-
-      return undefined;
-    },
-    [fieldMap],
-  );
-
-  const validateAll = useCallback(
-    (values: Record<string, unknown>): Record<string, string> => {
-      const errors: Record<string, string> = {};
-      for (const [name, meta] of fieldMap) {
-        if (meta.relationship) continue;
-        const error = validateField(name, values[name]);
-        if (error) errors[name] = error;
-      }
-      return errors;
-    },
-    [fieldMap, validateField],
-  );
-
-  return { validateField, validateAll };
-}
-
-function isEmpty(value: unknown): boolean {
-  if (value === null || value === undefined) return true;
-  if (typeof value === 'string' && value.trim() === '') return true;
-  return false;
-}

package/src/widgets/hooks/index.ts

@@ -1,8 +0,0 @@
-export { useWidgetContext, WidgetContextProvider } from './useWidgetContext.js';
-export { usePageState, useStateVersion, PageStateProvider } from './usePageState.js';
-export { useBind } from './useBind.js';
-export { useExpression } from './useExpression.js';
-export { useCondition } from './useCondition.js';
-export { useAction, useTriggerHandlers } from './useAction.js';
-export { useDataQuery } from './useDataQuery.js';
-export type { DataQueryState } from './useDataQuery.js';

package/src/widgets/hooks/useAction.ts

@@ -1,83 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import { useWidgetContext } from './useWidgetContext.js';
-import { usePageState } from './usePageState.js';
-import { useFormContext } from '../form/FormContext.js';
-import { dispatch } from '../action/dispatcher.js';
-import type { WidgetAction } from '@rangka/shared';
-import type { ActionHandlers } from '../action/dispatcher.js';
-
-export function useAction(handlers: ActionHandlers) {
-  const ctx = useWidgetContext();
-  const state = usePageState();
-  const form = useFormContext();
-
-  const mergedHandlers = useMemo<ActionHandlers>(() => {
-    if (!form) return handlers;
-    return {
-      ...handlers,
-      formSubmit: form.submit,
-      formReset: form.reset,
-    };
-  }, [handlers, form]);
-
-  const fire = useCallback(
-    async (action: WidgetAction) => {
-      await dispatch(action, { widgetContext: ctx, state }, mergedHandlers);
-    },
-    [ctx, state, mergedHandlers],
-  );
-
-  return useMemo(() => ({ fire }), [fire]);
-}
-
-export function useTriggerHandlers(
-  triggers: Record<string, WidgetAction | WidgetAction[]> | undefined,
-  handlers: ActionHandlers,
-  boundField?: string,
-): Record<string, (...args: unknown[]) => void> {
-  const ctx = useWidgetContext();
-  const state = usePageState();
-  const form = useFormContext();
-  const ctxRef = useRef(ctx);
-  ctxRef.current = ctx;
-
-  const mergedHandlers = useMemo<ActionHandlers>(() => {
-    if (!form) return handlers;
-    return {
-      ...handlers,
-      formSubmit: form.submit,
-      formReset: form.reset,
-    };
-  }, [handlers, form]);
-
-  return useMemo(() => {
-    if (!triggers) return {};
-    const result: Record<string, (...args: unknown[]) => void> = {};
-    for (const [trigger, actionOrActions] of Object.entries(triggers)) {
-      result[trigger] = async (...args: unknown[]) => {
-        const actions = Array.isArray(actionOrActions) ? actionOrActions : [actionOrActions];
-        const currentCtx = ctxRef.current;
-        let widgetContext = currentCtx;
-        if (args.length > 0 && boundField) {
-          widgetContext = {
-            ...currentCtx,
-            record: { ...currentCtx.record, [boundField]: args[0] },
-          };
-        } else if (args.length > 0 && typeof args[0] === 'object' && args[0] !== null) {
-          widgetContext = {
-            ...currentCtx,
-            record: { ...currentCtx.record, ...(args[0] as Record<string, unknown>) },
-          };
-        }
-        try {
-          for (const action of actions) {
-            await dispatch(action, { widgetContext, state }, mergedHandlers);
-          }
-        } catch {
-          // Action errors are handled by onError callbacks in the action tree.
-        }
-      };
-    }
-    return result;
-  }, [triggers, state, mergedHandlers, boundField]);
-}

package/src/widgets/hooks/useBind.ts

@@ -1,34 +0,0 @@
-import { useMemo } from 'react';
-import { useWidgetContext } from './useWidgetContext.js';
-import { usePageState, useStateVersion } from './usePageState.js';
-import { useFormContext } from '../form/FormContext.js';
-import { resolveBinding } from '../binding/resolver.js';
-import type { WidgetBinding } from '@rangka/shared';
-import type { BindingResult, FieldMeta } from '../binding/resolver.js';
-
-export function useBind(
-  bind: WidgetBinding | undefined,
-  fieldMeta?: Record<string, FieldMeta>,
-  setValue?: (field: string, val: unknown) => void,
-): BindingResult | null {
-  const ctx = useWidgetContext();
-  const state = usePageState();
-  const stateVersion = useStateVersion();
-  const form = useFormContext();
-
-  return useMemo(() => {
-    const result = resolveBinding(bind, ctx, fieldMeta, setValue, state);
-    if (!result || !bind?.field || !form) return result;
-
-    const error = form.getError(bind.field);
-    return {
-      value: form.getValue(bind.field),
-      setValue: (val: unknown) => {
-        form.setValue(bind.field!, val);
-        form.setTouched(bind.field!);
-      },
-      meta: result.meta ?? form.getFieldMeta(bind.field),
-      error,
-    };
-  }, [bind, ctx, fieldMeta, setValue, state, stateVersion, form, form?.errors, form?.touched]);
-}

package/src/widgets/hooks/useCondition.ts

@@ -1,21 +0,0 @@
-import { useMemo } from 'react';
-import { useWidgetContext } from './useWidgetContext.js';
-import { usePageState, useStateVersion } from './usePageState.js';
-import { evaluateConditions } from '../condition/index.js';
-import { flattenContext } from '../context/types.js';
-import type { Condition } from '@rangka/shared';
-
-export function useCondition(conditions: Condition | Condition[] | undefined): boolean {
-  const ctx = useWidgetContext();
-  const state = usePageState();
-  const stateVersion = useStateVersion();
-  return useMemo(() => {
-    if (!conditions) return true;
-    const flat = flattenContext(ctx);
-    const merged: Record<string, unknown> = {
-      ...flat,
-      $state: Object.fromEntries(state.keys().map((k) => [k, state.get(k)])),
-    };
-    return evaluateConditions(conditions, merged);
-  }, [conditions, ctx, state, stateVersion]);
-}

package/src/widgets/hooks/useDataQuery.ts

@@ -1,48 +0,0 @@
-import { useMemo } from 'react';
-import { usePageState, useStateVersion } from './usePageState.js';
-import {
-  getFiltersForModel,
-  getSortForModel,
-  getPageForModel,
-  getSearchForModel,
-  type ParsedFilter,
-  type SortEntry,
-} from '../reactivity/variables.js';
-
-export interface DataQueryState {
-  filters: ParsedFilter[];
-  sort: SortEntry[] | null;
-  page: number | null;
-  search: string | null;
-}
-
-/**
- * Hook that reads the current $filter, $sort, and $page reactive variables
- * for a given model from the page state store.
- *
- * Widgets like `table` and `data` (collection mode) use this to determine
- * what query params to send when fetching data.
- *
- * Re-renders whenever any value in the store changes (same granularity as
- * other widget hooks that use useStateVersion).
- */
-export function useDataQuery(model: string): DataQueryState {
-  const store = usePageState();
-  // Subscribe to version changes so we re-render when any store value changes
-  const version = useStateVersion();
-
-  return useMemo(() => {
-    // Build a Map view of the store for the helper functions
-    const stateMap = new Map<string, unknown>();
-    for (const key of store.keys()) {
-      stateMap.set(key, store.get(key));
-    }
-
-    return {
-      filters: getFiltersForModel(stateMap, model),
-      sort: getSortForModel(stateMap, model),
-      page: getPageForModel(stateMap, model),
-      search: getSearchForModel(stateMap, model),
-    };
-  }, [store, model, version]);
-}

package/src/widgets/hooks/useExpression.ts

@@ -1,14 +0,0 @@
-import { useMemo } from 'react';
-import { useWidgetContext } from './useWidgetContext.js';
-import { parse, evaluate } from '../expression/index.js';
-import { flattenContext } from '../context/types.js';
-
-export function useExpression(expression: string | undefined): unknown {
-  const ctx = useWidgetContext();
-  return useMemo(() => {
-    if (!expression) return undefined;
-    const flat = flattenContext(ctx);
-    const ast = parse(expression);
-    return evaluate(ast, flat);
-  }, [expression, ctx]);
-}

package/src/widgets/hooks/usePageState.ts

@@ -1,21 +0,0 @@
-import { createContext, useContext, useSyncExternalStore, useCallback } from 'react';
-import { StateStore } from '../state/store.js';
-
-const PageStateContext = createContext<StateStore | null>(null);
-
-export const PageStateProvider = PageStateContext.Provider;
-
-export function usePageState() {
-  const store = useContext(PageStateContext);
-  if (!store) {
-    throw new Error('usePageState must be used within a PageStateProvider');
-  }
-  return store;
-}
-
-export function useStateVersion(): number {
-  const store = usePageState();
-  const subscribe = useCallback((cb: () => void) => store.onchange(cb), [store]);
-  const getSnapshot = useCallback(() => store.getVersion(), [store]);
-  return useSyncExternalStore(subscribe, getSnapshot);
-}

package/src/widgets/hooks/useSurfaceContext.ts

@@ -1,11 +0,0 @@
-import { createContext, useContext } from 'react';
-
-type SurfaceType = 'page' | 'card';
-
-const SurfaceContext = createContext<SurfaceType>('page');
-
-export const SurfaceProvider = SurfaceContext.Provider;
-
-export function useSurfaceContext(): SurfaceType {
-  return useContext(SurfaceContext);
-}

package/src/widgets/hooks/useWidgetContext.ts

@@ -1,14 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { WidgetContext } from '../context/types.js';
-
-const WidgetContextReact = createContext<WidgetContext | null>(null);
-
-export const WidgetContextProvider = WidgetContextReact.Provider;
-
-export function useWidgetContext(): WidgetContext {
-  const ctx = useContext(WidgetContextReact);
-  if (!ctx) {
-    throw new Error('useWidgetContext must be used within a WidgetContextProvider');
-  }
-  return ctx;
-}

package/src/widgets/index.ts

@@ -1,80 +0,0 @@
-export { parse, evaluate, functions } from './expression/index.js';
-export type { AstNode, EvalContext } from './expression/index.js';
-
-export { evaluateCondition, evaluateConditions } from './condition/index.js';
-
-export { StateStore } from './state/index.js';
-export type { Subscriber } from './state/index.js';
-
-export {
-  buildContext,
-  buildRowContext,
-  createRootContext,
-  resolveContextValue,
-  getRootContext,
-  flattenContext,
-} from './context/index.js';
-export type { WidgetContext } from './context/index.js';
-
-export { resolveBinding } from './binding/index.js';
-export type { BindingResult, FieldMeta } from './binding/index.js';
-
-export { dispatch, resolveExpressionValue } from './action/index.js';
-export type { ActionContext, ActionHandlers } from './action/index.js';
-
-export { buildDependencyMap, getAffectedWidgets } from './reactivity/index.js';
-export type { DependencyMap } from './reactivity/index.js';
-export {
-  parseFilterKey,
-  getFiltersForModel,
-  getSortForModel,
-  getPageForModel,
-  isReactiveVariableKey,
-  getModelFromKey,
-} from './reactivity/index.js';
-export type {
-  FilterOperator,
-  ParsedFilterKey,
-  ParsedFilter,
-  SortEntry,
-} from './reactivity/index.js';
-
-export { validateWidgetTree } from './validation/index.js';
-export type { ValidationError } from './validation/index.js';
-
-export {
-  registerWidget,
-  getWidget,
-  getWidgetMeta,
-  getAllWidgetMeta,
-  getWidgetRegistry,
-  clearWidgetRegistry,
-} from './registry.js';
-export type { WidgetRegistryEntry } from './registry.js';
-export type { WidgetProps } from './types.js';
-
-export { WidgetRenderer } from './renderer/index.js';
-export type { WidgetRendererProps } from './renderer/index.js';
-export { SlotRenderer } from './renderer/index.js';
-export type { SlotRendererProps } from './renderer/index.js';
-
-export { useWidgetContext, WidgetContextProvider } from './hooks/index.js';
-export { usePageState, PageStateProvider } from './hooks/index.js';
-export { useBind } from './hooks/index.js';
-export { useExpression } from './hooks/index.js';
-export { useCondition } from './hooks/index.js';
-export { useAction, useTriggerHandlers } from './hooks/index.js';
-export { useDataQuery } from './hooks/index.js';
-export type { DataQueryState } from './hooks/index.js';
-
-export { registerBuiltInWidgets } from './components/register.js';
-export { ButtonWidget } from './components/index.js';
-export { InputWidget } from './components/index.js';
-export { TextWidget } from './components/index.js';
-export { BadgeWidget } from './components/index.js';
-export { IconWidget } from './components/index.js';
-export { ImageWidget } from './components/index.js';
-export { GroupWidget } from './components/index.js';
-export { SectionWidget } from './components/index.js';
-export { DividerWidget } from './components/index.js';
-export { SpacerWidget } from './components/index.js';

package/src/widgets/lib/layout-props.ts

@@ -1,135 +0,0 @@
-import type { LayoutProps, SpacingToken } from '@rangka/shared';
-
-const LAYOUT_PROP_KEYS: readonly string[] = [
-  'flex',
-  'span',
-  'rowSpan',
-  'align',
-  'width',
-  'height',
-  'minWidth',
-  'maxWidth',
-  'minHeight',
-  'maxHeight',
-  'scroll',
-  'padding',
-  'paddingX',
-  'paddingY',
-  'margin',
-  'marginX',
-  'marginY',
-  'hidden',
-];
-
-const SPACING_MAP: Record<SpacingToken, string> = {
-  none: '0',
-  xs: '1',
-  sm: '2',
-  md: '4',
-  lg: '6',
-  xl: '8',
-  '2xl': '12',
-};
-
-function spacingClass(prefix: string, token: SpacingToken): string {
-  return `${prefix}-${SPACING_MAP[token]}`;
-}
-
-export function extractLayoutProps(props: Record<string, unknown>): {
-  layoutProps: LayoutProps;
-  widgetProps: Record<string, unknown>;
-} {
-  const layoutProps: Record<string, unknown> = {};
-  const widgetProps: Record<string, unknown> = {};
-
-  for (const [key, value] of Object.entries(props)) {
-    if (LAYOUT_PROP_KEYS.includes(key)) {
-      layoutProps[key] = value;
-    } else {
-      widgetProps[key] = value;
-    }
-  }
-
-  return { layoutProps: layoutProps as LayoutProps, widgetProps };
-}
-
-export function hasLayoutProps(props: Record<string, unknown>): boolean {
-  return Object.keys(props).some((key) => LAYOUT_PROP_KEYS.includes(key));
-}
-
-export function resolveLayoutClasses(layout: LayoutProps): string {
-  const classes: string[] = [];
-
-  // Flex
-  if (layout.flex !== undefined) {
-    if (layout.flex === 1) {
-      classes.push('flex-1');
-    } else if (typeof layout.flex === 'number') {
-      classes.push(`flex-[${layout.flex}]`);
-    } else if (typeof layout.flex === 'string') {
-      classes.push(`flex-[${layout.flex.replace(/ /g, '_')}]`);
-    }
-  }
-
-  // Grid span
-  if (layout.span !== undefined) {
-    classes.push(`col-span-${layout.span}`);
-  }
-  if (layout.rowSpan !== undefined) {
-    classes.push(`row-span-${layout.rowSpan}`);
-  }
-
-  // Self-alignment
-  if (layout.align) {
-    const alignMap: Record<string, string> = {
-      start: 'self-start',
-      center: 'self-center',
-      end: 'self-end',
-      stretch: 'self-stretch',
-    };
-    classes.push(alignMap[layout.align] ?? '');
-  }
-
-  // Dimensions
-  if (layout.width) {
-    if (layout.width === '100%') classes.push('w-full');
-    else if (layout.width === 'auto') classes.push('w-auto');
-    else classes.push(`w-[${layout.width}]`);
-  }
-  if (layout.height) {
-    if (layout.height === '100%') classes.push('h-full');
-    else if (layout.height === 'auto') classes.push('h-auto');
-    else classes.push(`h-[${layout.height}]`);
-  }
-  if (layout.minWidth) classes.push(`min-w-[${layout.minWidth}]`);
-  if (layout.maxWidth) classes.push(`max-w-[${layout.maxWidth}]`);
-  if (layout.minHeight) classes.push(`min-h-[${layout.minHeight}]`);
-  if (layout.maxHeight) classes.push(`max-h-[${layout.maxHeight}]`);
-
-  // Scroll
-  if (layout.scroll) {
-    const scrollMap: Record<string, string> = {
-      auto: 'overflow-auto',
-      vertical: 'overflow-y-auto',
-      horizontal: 'overflow-x-auto',
-    };
-    classes.push(scrollMap[layout.scroll] ?? '');
-  }
-
-  // Padding
-  if (layout.padding) classes.push(spacingClass('p', layout.padding));
-  if (layout.paddingX) classes.push(spacingClass('px', layout.paddingX));
-  if (layout.paddingY) classes.push(spacingClass('py', layout.paddingY));
-
-  // Margin
-  if (layout.margin) classes.push(spacingClass('m', layout.margin));
-  if (layout.marginX) classes.push(spacingClass('mx', layout.marginX));
-  if (layout.marginY) classes.push(spacingClass('my', layout.marginY));
-
-  // Hidden
-  if (layout.hidden) {
-    classes.push(`${layout.hidden}:hidden`);
-  }
-
-  return classes.filter(Boolean).join(' ');
-}

package/src/widgets/reactivity/index.ts

@@ -1,11 +0,0 @@
-export { buildDependencyMap, getAffectedWidgets } from './tracker.js';
-export type { DependencyMap } from './tracker.js';
-export {
-  parseFilterKey,
-  getFiltersForModel,
-  getSortForModel,
-  getPageForModel,
-  isReactiveVariableKey,
-  getModelFromKey,
-} from './variables.js';
-export type { FilterOperator, ParsedFilterKey, ParsedFilter, SortEntry } from './variables.js';