@rangka/client 0.0.1

package/src/widgets/context/builder.ts

@@ -0,0 +1,99 @@
+import type { WidgetNode } from '@rangka/shared';
+import type { WidgetContext } from './types.js';
+
+const LAYOUT_WIDGETS = new Set(['group', 'section', 'divider', 'spacer']);
+
+export function buildContext(node: WidgetNode, parentContext: WidgetContext): WidgetContext {
+  if (node.bind?.model) {
+    return {
+      record: {},
+      records: parentContext.records ?? [],
+      model: node.bind.model.name,
+      mode: parentContext.mode,
+      parent: parentContext,
+      __columns: node.children,
+    };
+  }
+
+  if (node.source) {
+    const isRecordMode = Boolean(node.source.id);
+    if (isRecordMode) {
+      return {
+        record: {},
+        model: node.source.model,
+        mode: parentContext.mode,
+        parent: parentContext,
+      };
+    } else {
+      return {
+        record: {},
+        records: [],
+        model: node.source.model,
+        mode: parentContext.mode,
+        parent: parentContext,
+      };
+    }
+  }
+
+  if (LAYOUT_WIDGETS.has(node.type)) {
+    return parentContext;
+  }
+
+  return parentContext;
+}
+
+export function buildRowContext(
+  row: Record<string, unknown>,
+  index: number,
+  tableContext: WidgetContext,
+): WidgetContext {
+  return {
+    record: row,
+    model: tableContext.model,
+    mode: tableContext.mode,
+    index,
+    parent: tableContext.parent,
+  };
+}
+
+export function createRootContext(
+  record: Record<string, unknown>,
+  model: string,
+  mode: 'view' | 'edit' = 'view',
+): WidgetContext {
+  return {
+    record,
+    model,
+    mode,
+  };
+}
+
+export function resolveContextValue(path: string, context: WidgetContext): unknown {
+  const parts = path.split('.');
+
+  if (parts[0] === '$parent') {
+    if (!context.parent) return undefined;
+    return resolveContextValue(parts.slice(1).join('.'), context.parent);
+  }
+
+  if (parts[0] === '$root') {
+    let root = context;
+    while (root.parent) root = root.parent;
+    return resolveContextValue(parts.slice(1).join('.'), root);
+  }
+
+  if (parts[0] === '$row') {
+    return resolveFromRecord(parts.slice(1), context.record);
+  }
+
+  return resolveFromRecord(parts, context.record);
+}
+
+function resolveFromRecord(parts: string[], record: Record<string, unknown>): unknown {
+  let current: unknown = record;
+  for (const part of parts) {
+    if (current == null || typeof current !== 'object') return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+}

package/src/widgets/context/index.ts

@@ -0,0 +1,8 @@
+export type { WidgetContext } from './types.js';
+export { getRootContext, flattenContext } from './types.js';
+export {
+  buildContext,
+  buildRowContext,
+  createRootContext,
+  resolveContextValue,
+} from './builder.js';

package/src/widgets/context/types.ts

@@ -0,0 +1,37 @@
+import type { WidgetNode } from '@rangka/shared';
+
+export interface WidgetContext {
+  record: Record<string, unknown>;
+  records?: Record<string, unknown>[];
+  model: string;
+  mode: 'view' | 'edit';
+  index?: number;
+  parent?: WidgetContext;
+  __columns?: WidgetNode[];
+}
+
+export function getRootContext(ctx: WidgetContext): WidgetContext {
+  let current = ctx;
+  while (current.parent) {
+    current = current.parent;
+  }
+  return current;
+}
+
+export function flattenContext(ctx: WidgetContext): Record<string, unknown> {
+  return flattenContextInner(ctx, getRootContext(ctx));
+}
+
+function flattenContextInner(ctx: WidgetContext, root: WidgetContext): Record<string, unknown> {
+  const result: Record<string, unknown> = { ...ctx.record };
+
+  if (ctx.parent) {
+    result['$parent'] = flattenContextInner(ctx.parent, root);
+  }
+
+  if (ctx !== root) {
+    result['$root'] = flattenContextInner(root, root);
+  }
+
+  return result;
+}

package/src/widgets/data/index.ts

@@ -0,0 +1,5 @@
+export { useModelRecord } from './useModelRecord.js';
+export type { UseModelRecordOptions, UseModelRecordResult } from './useModelRecord.js';
+
+export { useModelQuery, filtersToParams, sortToString } from './useModelQuery.js';
+export type { UseModelQueryOptions, UseModelQueryResult } from './useModelQuery.js';

package/src/widgets/data/useModelQuery.ts

@@ -0,0 +1,116 @@
+import { useMemo } from 'react';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { useDataQuery } from '../hooks/useDataQuery.js';
+import { apiClient } from '../../api/client.js';
+import { modelToPath } from '../../api/paths.js';
+import type { ParsedFilter, SortEntry } from '../reactivity/variables.js';
+
+export interface UseModelQueryOptions {
+  model: string;
+  pageSize?: number;
+  enabled?: boolean;
+  staticFilters?: Record<string, unknown>;
+}
+
+export interface UseModelQueryResult {
+  data: Record<string, unknown>[];
+  isLoading: boolean;
+  isFetching: boolean;
+  error: Error | null;
+  total: number | undefined;
+  page: number;
+  pageSize: number;
+  sort: SortEntry[] | null;
+}
+
+export function filtersToParams(filters: ParsedFilter[]): Record<string, string> {
+  const params: Record<string, string> = {};
+  for (const f of filters) {
+    const key = f.operator === 'eq' ? `filter[${f.field}]` : `filter[${f.field}][${f.operator}]`;
+    params[key] = String(f.value);
+  }
+  return params;
+}
+
+export function sortToString(sort: SortEntry[] | null): string | undefined {
+  if (!sort || sort.length === 0) return undefined;
+  return sort.map((s) => (s.direction === 'desc' ? `-${s.field}` : s.field)).join(',');
+}
+
+function staticFiltersToParams(filters: Record<string, unknown>): Record<string, string> {
+  const params: Record<string, string> = {};
+  for (const [field, value] of Object.entries(filters)) {
+    if (value !== null && value !== undefined) {
+      params[`filter[${field}]`] = String(value);
+    }
+  }
+  return params;
+}
+
+export function useModelQuery(options: UseModelQueryOptions): UseModelQueryResult {
+  const { model, pageSize = 20, enabled = true, staticFilters } = options;
+  const { filters, sort, page: storePage, search } = useDataQuery(model);
+  const page = storePage ?? 1;
+
+  const queryParams = useMemo(() => {
+    const params: Record<string, string> = {
+      page: String(page),
+      limit: String(pageSize),
+      ...filtersToParams(filters),
+      ...(staticFilters ? staticFiltersToParams(staticFilters) : {}),
+    };
+    const sortStr = sortToString(sort);
+    if (sortStr) {
+      params.sort = sortStr;
+    }
+    if (search) {
+      params.search = search;
+    }
+    return params;
+  }, [filters, sort, page, pageSize, search, staticFilters]);
+
+  const path = modelToPath(model);
+  const queryKey = ['model', model, queryParams];
+
+  const query = useQuery<
+    { data: Record<string, unknown>[]; total?: number } | Record<string, unknown>[]
+  >({
+    queryKey,
+    queryFn: async () => {
+      const url = new URL(path, window.location.origin);
+      for (const [key, value] of Object.entries(queryParams)) {
+        url.searchParams.set(key, value);
+      }
+      const response = await apiClient(url.pathname + url.search);
+      if (!response.ok) throw new Error(`Failed to fetch ${model} list`);
+      return response.json();
+    },
+    enabled: enabled && !!model,
+    placeholderData: keepPreviousData,
+  });
+
+  const rawData = query.data;
+  let data: Record<string, unknown>[] = [];
+  let total: number | undefined;
+
+  if (rawData && !Array.isArray(rawData) && 'data' in rawData) {
+    data = (
+      rawData as { data: Record<string, unknown>[]; meta?: { total?: number }; total?: number }
+    ).data;
+    const raw = rawData as { meta?: { total?: number }; total?: number };
+    total = raw.meta?.total ?? raw.total;
+  } else if (Array.isArray(rawData)) {
+    data = rawData;
+  }
+
+  return {
+    data,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    total,
+    page,
+    pageSize,
+    sort,
+  };
+}

package/src/widgets/data/useModelRecord.ts

@@ -0,0 +1,37 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '../../api/client.js';
+import { modelToPath } from '../../api/paths.js';
+
+export interface UseModelRecordOptions {
+  model: string;
+  id: string | null | undefined;
+  enabled?: boolean;
+}
+
+export interface UseModelRecordResult {
+  data: Record<string, unknown> | undefined;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function useModelRecord(options: UseModelRecordOptions): UseModelRecordResult {
+  const { model, id, enabled = true } = options;
+  const path = modelToPath(model);
+
+  const query = useQuery<Record<string, unknown>>({
+    queryKey: ['model', model, id],
+    queryFn: async () => {
+      const response = await apiClient(`${path}/${id}`);
+      if (!response.ok) throw new Error(`Failed to fetch ${model}/${id}`);
+      const json = await response.json();
+      return json.data ?? json;
+    },
+    enabled: enabled && !!id,
+  });
+
+  return {
+    data: query.data,
+    isLoading: query.isLoading,
+    error: query.error,
+  };
+}

package/src/widgets/expression/evaluator.ts

@@ -0,0 +1,100 @@
+import type { AstNode } from './types.js';
+import { functions } from './functions.js';
+
+export type EvalContext = Record<string, unknown>;
+
+export function evaluate(ast: AstNode, context: EvalContext): unknown {
+  switch (ast.type) {
+    case 'literal':
+      return ast.value;
+
+    case 'field':
+      return resolveField(ast.path, context);
+
+    case 'unary':
+      return evalUnary(ast.operator, evaluate(ast.operand, context));
+
+    case 'binary':
+      return evalBinary(ast.operator, ast.left, ast.right, context);
+
+    case 'call':
+      return evalCall(ast.name, ast.args, context);
+  }
+}
+
+function resolveField(path: string[], context: EvalContext): unknown {
+  let current: unknown = context;
+  for (const segment of path) {
+    if (current == null || typeof current !== 'object') return undefined;
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current;
+}
+
+function evalUnary(operator: '!' | '-', value: unknown): unknown {
+  switch (operator) {
+    case '!':
+      return !value;
+    case '-':
+      return -(value as number);
+  }
+}
+
+function evalBinary(
+  operator: string,
+  leftNode: AstNode,
+  rightNode: AstNode,
+  context: EvalContext,
+): unknown {
+  if (operator === '&&') {
+    const left = evaluate(leftNode, context);
+    return left ? evaluate(rightNode, context) : left;
+  }
+  if (operator === '||') {
+    const left = evaluate(leftNode, context);
+    return left ? left : evaluate(rightNode, context);
+  }
+
+  const left = evaluate(leftNode, context);
+  const right = evaluate(rightNode, context);
+
+  switch (operator) {
+    case '+':
+      if (typeof left === 'string' || typeof right === 'string') {
+        return String(left ?? '') + String(right ?? '');
+      }
+      return (left as number) + (right as number);
+    case '-':
+      return (left as number) - (right as number);
+    case '*':
+      return (left as number) * (right as number);
+    case '/':
+      if ((right as number) === 0) return 0;
+      return (left as number) / (right as number);
+    case '%':
+      return (left as number) % (right as number);
+    case '==':
+      return left == right;
+    case '!=':
+      return left != right;
+    case '>':
+      return (left as number) > (right as number);
+    case '<':
+      return (left as number) < (right as number);
+    case '>=':
+      return (left as number) >= (right as number);
+    case '<=':
+      return (left as number) <= (right as number);
+    default:
+      throw new Error(`Unknown operator: ${operator}`);
+  }
+}
+
+function evalCall(name: string, args: AstNode[], context: EvalContext): unknown {
+  const fn = functions[name];
+  if (!fn) {
+    throw new Error(`Unknown function: ${name}`);
+  }
+  const evaluatedArgs = args.map((arg) => evaluate(arg, context));
+  return fn(evaluatedArgs, context);
+}

package/src/widgets/expression/functions.ts

@@ -0,0 +1,131 @@
+import type { EvalContext } from './evaluator.js';
+
+type ExprFn = (args: unknown[], context: EvalContext) => unknown;
+
+function toNumber(v: unknown): number {
+  if (v == null) return 0;
+  const n = Number(v);
+  return isNaN(n) ? 0 : n;
+}
+
+function toArray(v: unknown): unknown[] {
+  if (Array.isArray(v)) return v;
+  return [];
+}
+
+export const functions: Record<string, ExprFn> = {
+  // Aggregate
+  sum(args) {
+    const arr = toArray(args[0]);
+    return arr.reduce((acc: number, item) => acc + toNumber(item), 0);
+  },
+  count(args) {
+    const arr = toArray(args[0]);
+    return arr.length;
+  },
+  avg(args) {
+    const arr = toArray(args[0]);
+    if (arr.length === 0) return 0;
+    const total = arr.reduce((acc: number, item) => acc + toNumber(item), 0);
+    return total / arr.length;
+  },
+  min(args) {
+    const arr = toArray(args[0]);
+    if (arr.length === 0) return 0;
+    return Math.min(...arr.map(toNumber));
+  },
+  max(args) {
+    const arr = toArray(args[0]);
+    if (arr.length === 0) return 0;
+    return Math.max(...arr.map(toNumber));
+  },
+
+  // Math
+  round(args) {
+    const value = toNumber(args[0]);
+    const decimals = args[1] != null ? toNumber(args[1]) : 0;
+    const factor = Math.pow(10, decimals);
+    return Math.round(value * factor) / factor;
+  },
+  abs(args) {
+    return Math.abs(toNumber(args[0]));
+  },
+  ceil(args) {
+    return Math.ceil(toNumber(args[0]));
+  },
+  floor(args) {
+    return Math.floor(toNumber(args[0]));
+  },
+
+  // String
+  upper(args) {
+    return String(args[0] ?? '').toUpperCase();
+  },
+  lower(args) {
+    return String(args[0] ?? '').toLowerCase();
+  },
+  concat(args) {
+    return args.map((a) => String(a ?? '')).join('');
+  },
+  trim(args) {
+    return String(args[0] ?? '').trim();
+  },
+
+  // Date
+  today() {
+    const now = new Date();
+    return new Date(now.getFullYear(), now.getMonth(), now.getDate()).toISOString().slice(0, 10);
+  },
+  now() {
+    return new Date().toISOString();
+  },
+  add_days(args) {
+    const date = new Date(String(args[0]));
+    const days = toNumber(args[1]);
+    date.setDate(date.getDate() + days);
+    return date.toISOString().slice(0, 10);
+  },
+  diff_days(args) {
+    const a = new Date(String(args[0]));
+    const b = new Date(String(args[1]));
+    return Math.round((a.getTime() - b.getTime()) / (1000 * 60 * 60 * 24));
+  },
+  format_date(args) {
+    const date = new Date(String(args[0]));
+    const pattern = String(args[1] ?? '');
+    return pattern
+      .replace('YYYY', String(date.getFullYear()))
+      .replace('MM', String(date.getMonth() + 1).padStart(2, '0'))
+      .replace('DD', String(date.getDate()).padStart(2, '0'));
+  },
+
+  // Format
+  format_currency(args) {
+    const value = toNumber(args[0]);
+    const currency = String(args[1] ?? 'USD');
+    try {
+      return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(value);
+    } catch {
+      return `${currency} ${value.toFixed(2)}`;
+    }
+  },
+  format_number(args) {
+    const value = toNumber(args[0]);
+    const decimals = args[1] != null ? toNumber(args[1]) : 0;
+    return new Intl.NumberFormat('en-US', {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    }).format(value);
+  },
+
+  // Logic
+  if(args) {
+    return args[0] ? args[1] : args[2];
+  },
+  coalesce(args) {
+    for (const arg of args) {
+      if (arg != null) return arg;
+    }
+    return null;
+  },
+};

package/src/widgets/expression/index.ts

@@ -0,0 +1,13 @@
+export { parse } from './parser.js';
+export { evaluate } from './evaluator.js';
+export type { EvalContext } from './evaluator.js';
+export type {
+  AstNode,
+  BinaryOperator,
+  LiteralNode,
+  FieldRefNode,
+  UnaryNode,
+  BinaryNode,
+  CallNode,
+} from './types.js';
+export { functions } from './functions.js';