@rangka/client 0.1.0 → 0.1.2

package/src/widgets/components/table/CellRenderers.tsx

@@ -1,83 +0,0 @@
-import type { WidgetNode } from '@rangka/shared';
-import type { WidgetContext } from '../../context/types.js';
-import { getWidget } from '../../registry.js';
-import { flattenContext } from '../../context/types.js';
-import { parse, evaluate } from '../../expression/index.js';
-
-export function ColumnChildRenderer({ node, rowCtx }: { node: WidgetNode; rowCtx: WidgetContext }) {
-  const entry = getWidget(node.type);
-  if (!entry) return <span data-widget-error={`Unknown: ${node.type}`} />;
-
-  const Component = entry.component;
-  const flat = flattenContext(rowCtx);
-  const resolvedProps = resolveProps(node.props, flat);
-  const bindResult = resolveBindValue(node, rowCtx);
-
-  return (
-    <Component
-      props={resolvedProps}
-      bind={{ value: bindResult, setValue: undefined, meta: undefined }}
-      on={{}}
-      context={{
-        record: rowCtx.record,
-        model: rowCtx.model,
-        mode: rowCtx.mode,
-        index: rowCtx.index,
-      }}
-    />
-  );
-}
-
-export function CellValue({ col, row }: { col: WidgetNode; row: Record<string, unknown> }) {
-  const field = col.bind?.field;
-  if (!field) return null;
-  const value = row[field];
-  return <>{value != null ? String(value) : ''}</>;
-}
-
-function resolveProps(
-  props: Record<string, unknown> | undefined,
-  flat: Record<string, unknown>,
-): Record<string, unknown> {
-  if (!props) return {};
-  const resolved: Record<string, unknown> = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (typeof value === 'string' && value.includes('{{')) {
-      const trimmed = value.trim();
-      if (
-        trimmed.startsWith('{{') &&
-        trimmed.endsWith('}}') &&
-        !trimmed.slice(2, -2).includes('{{')
-      ) {
-        const ast = parse(trimmed);
-        resolved[key] = evaluate(ast, flat);
-      } else {
-        resolved[key] = value.replace(/\{\{(.+?)\}\}/g, (_m, expr: string) => {
-          const ast = parse(expr.trim());
-          return String(evaluate(ast, flat) ?? '');
-        });
-      }
-    } else {
-      resolved[key] = value;
-    }
-  }
-  return resolved;
-}
-
-function resolveBindValue(node: WidgetNode, ctx: WidgetContext): unknown {
-  if (!node.bind) return null;
-  if (node.bind.field) {
-    return ctx.record[node.bind.field] ?? null;
-  }
-  if (node.bind.expression) {
-    const flat = flattenContext(ctx);
-    const expr = node.bind.expression;
-    const trimmed = expr.trim();
-    if (trimmed.startsWith('{{') && trimmed.endsWith('}}')) {
-      const ast = parse(trimmed);
-      return evaluate(ast, flat);
-    }
-    return expr;
-  }
-  return null;
-}

package/src/widgets/components/table/TablePagination.tsx

@@ -1,45 +0,0 @@
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import { Button } from '../../../components/ui/button.js';
-
-interface TablePaginationProps {
-  page: number;
-  pageSize: number;
-  total: number | undefined;
-  recordCount: number;
-  onPageChange: (page: number) => void;
-}
-
-export function TablePagination({ page, pageSize, total, recordCount, onPageChange }: TablePaginationProps) {
-  const start = (page - 1) * pageSize + 1;
-  const end = total != null ? Math.min(page * pageSize, total) : start + recordCount - 1;
-  const hasPrev = page > 1;
-  const hasNext = total != null ? end < total : recordCount >= pageSize;
-
-  return (
-    <div className="flex items-center justify-between border-t border-border px-5 py-2.5 text-sm">
-      <span className="text-muted-foreground tabular-nums">
-        {total != null ? `Showing ${start}\u2013${end} of ${total}` : `Page ${page}`}
-      </span>
-      <div className="flex items-center gap-1">
-        <Button
-          variant="outline"
-          size="icon-sm"
-          disabled={!hasPrev}
-          onClick={() => onPageChange(page - 1)}
-          aria-label="Previous page"
-        >
-          <ChevronLeftIcon className="h-4 w-4" />
-        </Button>
-        <Button
-          variant="outline"
-          size="icon-sm"
-          disabled={!hasNext}
-          onClick={() => onPageChange(page + 1)}
-          aria-label="Next page"
-        >
-          <ChevronRightIcon className="h-3.5 w-3.5" />
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/widgets/components/table/TableToolbar.tsx

@@ -1,285 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import {
-  FilterIcon,
-  XIcon,
-  SearchIcon,
-} from 'lucide-react';
-import type { WidgetNode } from '@rangka/shared';
-import { Badge } from '../../../components/ui/badge.js';
-import { Button } from '../../../components/ui/button.js';
-import { Input } from '../../../components/ui/input.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../../../components/ui/popover.js';
-import { useModelMeta } from '../../../data/useModelMeta.js';
-import {
-  getOperatorsForType,
-  getDefaultOperator,
-  getOperatorSymbol,
-  getActiveFilters,
-  getLabelForField,
-} from './filter-operators.js';
-
-interface PageStore {
-  get(key: string): unknown;
-  set(key: string, value: unknown): void;
-  keys(): Iterable<string>;
-}
-
-interface TableToolbarProps {
-  model: string;
-  store: PageStore;
-  columns: WidgetNode[];
-  hasSearch: boolean;
-  hasFilters: boolean;
-}
-
-export function TableToolbar({ model, store, columns, hasSearch, hasFilters }: TableToolbarProps) {
-  const [searchInput, setSearchInput] = useState(() => {
-    const val = store.get(`$search.${model}`);
-    return val ? String(val) : '';
-  });
-  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const handleSearchChange = useCallback(
-    (value: string) => {
-      setSearchInput(value);
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        store.set(`$search.${model}`, value || null);
-        store.set(`$page.${model}`, 1);
-      }, 300);
-    },
-    [model, store],
-  );
-
-  const activeFilters = getActiveFilters(store, model, columns);
-
-  return (
-    <div className="flex flex-col border-b border-border/50">
-      <div className="flex items-center gap-2 px-5 py-2">
-        {hasSearch && (
-          <div className="flex flex-1 items-center gap-2">
-            <SearchIcon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-            <input
-              type="text"
-              value={searchInput}
-              onChange={(e) => handleSearchChange(e.target.value)}
-              placeholder="Search..."
-              className="flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground"
-            />
-            {searchInput && (
-              <button
-                className="rounded-sm p-0.5 hover:bg-muted"
-                onClick={() => handleSearchChange('')}
-                aria-label="Clear search"
-              >
-                <XIcon className="h-3 w-3 text-muted-foreground" />
-              </button>
-            )}
-          </div>
-        )}
-        {hasFilters && <TableFilterPopover columns={columns} model={model} store={store} />}
-      </div>
-      {activeFilters.length > 0 && (
-        <div className="flex flex-wrap items-center gap-2 px-5 pb-2">
-          {activeFilters.map((f) => (
-            <Badge key={f.key} variant="secondary" className="gap-1 pr-1">
-              <span className="text-xs">
-                {f.label} {getOperatorSymbol(f.operator)} {f.displayValue}
-              </span>
-              <button
-                className="ml-1 rounded-sm p-0.5 hover:bg-muted"
-                onClick={() => {
-                  store.set(f.key, null);
-                  store.set(`$page.${model}`, 1);
-                }}
-                aria-label={`Remove ${f.label} filter`}
-              >
-                <XIcon className="h-3 w-3" />
-              </button>
-            </Badge>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// --- Filter Popover ---
-
-interface FilterPopoverProps {
-  columns: WidgetNode[];
-  model: string;
-  store: PageStore;
-}
-
-function TableFilterPopover({ columns, model, store }: FilterPopoverProps) {
-  const [adding, setAdding] = useState(false);
-  const [selectedField, setSelectedField] = useState<string | null>(null);
-  const [selectedOperator, setSelectedOperator] = useState<string>('');
-  const [filterValue, setFilterValue] = useState('');
-  const [search, setSearch] = useState('');
-
-  const { modelMeta } = useModelMeta(model);
-
-  const getFieldType = useCallback(
-    (field: string): string => {
-      const meta = modelMeta?.fields.find((f) => f.name === field);
-      return meta?.type ?? 'string';
-    },
-    [modelMeta],
-  );
-
-  const filteredColumns = useMemo(() => {
-    if (!search) return columns.filter((col) => col.bind?.field);
-    const q = search.toLowerCase();
-    return columns.filter((col) => {
-      if (!col.bind?.field) return false;
-      const label = String(col.props?.label ?? col.bind.field).toLowerCase();
-      return label.includes(q);
-    });
-  }, [columns, search]);
-
-  const handleFieldSelect = (field: string) => {
-    setSelectedField(field);
-    setSelectedOperator(getDefaultOperator(getFieldType(field)));
-    setFilterValue('');
-    setSearch('');
-  };
-
-  const handleApply = () => {
-    if (!selectedField) return;
-    const operators = getOperatorsForType(getFieldType(selectedField));
-    const op = operators.find((o) => o.value === selectedOperator);
-    if (!op) return;
-    if (op.needsValue && !filterValue) return;
-
-    const suffix = selectedOperator === 'eq' ? '' : `__${selectedOperator}`;
-    const key = `$filter.${model}.${selectedField}${suffix}`;
-
-    let value: unknown = filterValue;
-    if (selectedOperator === 'empty') value = 'true';
-    else if (selectedOperator === 'not_empty') value = 'true';
-    else if (selectedOperator === 'eq' && getFieldType(selectedField) === 'boolean') value = 'true';
-    else if (selectedOperator === 'neq' && getFieldType(selectedField) === 'boolean')
-      value = 'false';
-
-    store.set(key, value);
-    store.set(`$page.${model}`, 1);
-    setAdding(false);
-    setSelectedField(null);
-    setSelectedOperator('');
-    setFilterValue('');
-  };
-
-  const handleBack = () => {
-    setSelectedField(null);
-    setSelectedOperator('');
-    setFilterValue('');
-  };
-
-  const handleOpenChange = (open: boolean) => {
-    setAdding(open);
-    if (!open) {
-      setSelectedField(null);
-      setSelectedOperator('');
-      setFilterValue('');
-      setSearch('');
-    }
-  };
-
-  const currentOperators = selectedField ? getOperatorsForType(getFieldType(selectedField)) : [];
-  const currentOp = currentOperators.find((o) => o.value === selectedOperator);
-
-  return (
-    <Popover open={adding} onOpenChange={handleOpenChange}>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs shrink-0">
-          <FilterIcon className="h-3.5 w-3.5" />
-          Filter
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-56 p-0" align="end">
-        {!selectedField ? (
-          <div className="flex flex-col">
-            <div className="flex items-center gap-2 border-b border-border/50 px-2.5 py-2">
-              <SearchIcon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-              <input
-                type="text"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder="Search fields..."
-                className="flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground"
-                autoFocus
-              />
-            </div>
-            <div className="flex flex-col py-1 max-h-48 overflow-auto">
-              {filteredColumns.map((col) => {
-                const field = col.bind?.field;
-                if (!field) return null;
-                return (
-                  <button
-                    key={field}
-                    className="px-2.5 py-1.5 text-left text-xs hover:bg-muted transition-colors"
-                    onClick={() => handleFieldSelect(field)}
-                  >
-                    {String(col.props?.label ?? field)}
-                  </button>
-                );
-              })}
-              {filteredColumns.length === 0 && (
-                <p className="px-2.5 py-1.5 text-xs text-muted-foreground">No fields found</p>
-              )}
-            </div>
-          </div>
-        ) : (
-          <div className="flex flex-col">
-            <div className="px-2.5 pt-2.5 pb-2">
-              <p className="text-xs font-semibold">{getLabelForField(columns, selectedField)}</p>
-            </div>
-            <div className="flex flex-col gap-2 px-2.5 pb-2.5">
-              <select
-                value={selectedOperator}
-                onChange={(e) => {
-                  setSelectedOperator(e.target.value);
-                  setFilterValue('');
-                }}
-                className="h-7 w-full rounded-none border border-border bg-transparent px-2 text-xs outline-none focus:border-ring"
-              >
-                {currentOperators.map((op) => (
-                  <option key={op.value} value={op.value}>
-                    {op.label}
-                  </option>
-                ))}
-              </select>
-              {currentOp?.needsValue && (
-                <Input
-                  value={filterValue}
-                  onChange={(e) => setFilterValue(e.target.value)}
-                  placeholder="Value..."
-                  className="h-7 text-xs"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') handleApply();
-                  }}
-                  autoFocus
-                />
-              )}
-            </div>
-            <div className="flex items-center justify-between border-t border-border/50 px-2.5 py-2">
-              <Button variant="ghost" size="xs" onClick={handleBack}>
-                Back
-              </Button>
-              <Button
-                variant="default"
-                size="xs"
-                onClick={handleApply}
-                disabled={currentOp?.needsValue ? !filterValue : false}
-              >
-                Apply
-              </Button>
-            </div>
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/widgets/components/table/filter-operators.ts

@@ -1,134 +0,0 @@
-import type { WidgetNode } from '@rangka/shared';
-
-export interface OperatorOption {
-  value: string;
-  label: string;
-  needsValue: boolean;
-}
-
-export const STRING_OPERATORS: OperatorOption[] = [
-  { value: 'like', label: 'Contains', needsValue: true },
-  { value: 'eq', label: 'Equals', needsValue: true },
-  { value: 'neq', label: 'Not equals', needsValue: true },
-  { value: 'empty', label: 'Empty', needsValue: false },
-  { value: 'not_empty', label: 'Not empty', needsValue: false },
-];
-
-export const NUMERIC_OPERATORS: OperatorOption[] = [
-  { value: 'eq', label: 'Equals', needsValue: true },
-  { value: 'neq', label: 'Not equals', needsValue: true },
-  { value: 'gt', label: 'Greater than', needsValue: true },
-  { value: 'gte', label: 'Greater or equal', needsValue: true },
-  { value: 'lt', label: 'Less than', needsValue: true },
-  { value: 'lte', label: 'Less or equal', needsValue: true },
-  { value: 'empty', label: 'Empty', needsValue: false },
-  { value: 'not_empty', label: 'Not empty', needsValue: false },
-];
-
-export const DATE_OPERATORS: OperatorOption[] = [
-  { value: 'eq', label: 'Equals', needsValue: true },
-  { value: 'gt', label: 'After', needsValue: true },
-  { value: 'gte', label: 'On or after', needsValue: true },
-  { value: 'lt', label: 'Before', needsValue: true },
-  { value: 'lte', label: 'On or before', needsValue: true },
-  { value: 'empty', label: 'Empty', needsValue: false },
-  { value: 'not_empty', label: 'Not empty', needsValue: false },
-];
-
-export const BOOLEAN_OPERATORS: OperatorOption[] = [
-  { value: 'eq', label: 'Is true', needsValue: false },
-  { value: 'neq', label: 'Is false', needsValue: false },
-];
-
-export const ENUM_OPERATORS: OperatorOption[] = [
-  { value: 'eq', label: 'Equals', needsValue: true },
-  { value: 'neq', label: 'Not equals', needsValue: true },
-];
-
-export function getOperatorsForType(fieldType: string): OperatorOption[] {
-  switch (fieldType) {
-    case 'string':
-    case 'text':
-      return STRING_OPERATORS;
-    case 'int':
-    case 'decimal':
-    case 'money':
-      return NUMERIC_OPERATORS;
-    case 'date':
-    case 'datetime':
-      return DATE_OPERATORS;
-    case 'boolean':
-      return BOOLEAN_OPERATORS;
-    case 'enum':
-      return ENUM_OPERATORS;
-    default:
-      return STRING_OPERATORS;
-  }
-}
-
-export function getDefaultOperator(fieldType: string): string {
-  if (fieldType === 'string' || fieldType === 'text') return 'like';
-  return 'eq';
-}
-
-export function getOperatorSymbol(operator: string): string {
-  switch (operator) {
-    case 'eq':
-      return '=';
-    case 'neq':
-      return '\u2260';
-    case 'gt':
-      return '>';
-    case 'gte':
-      return '\u2265';
-    case 'lt':
-      return '<';
-    case 'lte':
-      return '\u2264';
-    case 'like':
-      return '\u2248';
-    case 'empty':
-      return 'is empty';
-    case 'not_empty':
-      return 'is not empty';
-    default:
-      return '=';
-  }
-}
-
-export function getActiveFilters(
-  store: { get(key: string): unknown; keys(): Iterable<string> },
-  model: string,
-  columns: WidgetNode[],
-): { key: string; field: string; operator: string; label: string; displayValue: string }[] {
-  const prefix = `$filter.${model}.`;
-  const results: {
-    key: string;
-    field: string;
-    operator: string;
-    label: string;
-    displayValue: string;
-  }[] = [];
-  for (const key of store.keys()) {
-    if (!key.startsWith(prefix)) continue;
-    const value = store.get(key);
-    if (value === null || value === undefined) continue;
-    const fieldPart = key.slice(prefix.length);
-    let operator = 'eq';
-    let field = fieldPart;
-    const suffixMatch = fieldPart.match(/__(\w+)$/);
-    if (suffixMatch) {
-      operator = suffixMatch[1];
-      field = fieldPart.slice(0, -suffixMatch[0].length);
-    }
-    const label = getLabelForField(columns, field);
-    const displayValue = operator === 'empty' || operator === 'not_empty' ? '' : String(value);
-    results.push({ key, field, operator, label, displayValue });
-  }
-  return results;
-}
-
-export function getLabelForField(columns: WidgetNode[], field: string): string {
-  const col = columns.find((c) => c.bind?.field === field);
-  return String(col?.props?.label ?? field);
-}

package/src/widgets/components/table/index.ts

@@ -1,11 +0,0 @@
-export { TableToolbar } from './TableToolbar.js';
-export { TablePagination } from './TablePagination.js';
-export { ColumnChildRenderer, CellValue } from './CellRenderers.js';
-export {
-  getOperatorsForType,
-  getDefaultOperator,
-  getOperatorSymbol,
-  getActiveFilters,
-  getLabelForField,
-} from './filter-operators.js';
-export type { OperatorOption } from './filter-operators.js';

package/src/widgets/condition/evaluator.ts

@@ -1,57 +0,0 @@
-import type { Condition } from '@rangka/shared';
-import { parse, evaluate } from '../expression/index.js';
-import type { EvalContext } from '../expression/index.js';
-
-export function evaluateCondition(condition: Condition, context: EvalContext): boolean {
-  const fieldValue = resolveFieldValue(condition.field, context);
-  const compareValue = resolveValue(condition.value, context);
-
-  switch (condition.operator) {
-    case 'eq':
-      return fieldValue == compareValue;
-    case 'neq':
-      return fieldValue != compareValue;
-    case 'in':
-      return Array.isArray(compareValue) && compareValue.includes(fieldValue);
-    case 'notIn':
-      return Array.isArray(compareValue) && !compareValue.includes(fieldValue);
-    case 'empty':
-      return fieldValue == null || fieldValue === '';
-    case 'notEmpty':
-      return fieldValue != null && fieldValue !== '';
-    case 'gt':
-      return Number(fieldValue) > Number(compareValue);
-    case 'lt':
-      return Number(fieldValue) < Number(compareValue);
-    case 'gte':
-      return Number(fieldValue) >= Number(compareValue);
-    case 'lte':
-      return Number(fieldValue) <= Number(compareValue);
-  }
-}
-
-export function evaluateConditions(
-  conditions: Condition | Condition[],
-  context: EvalContext,
-): boolean {
-  const list = Array.isArray(conditions) ? conditions : [conditions];
-  return list.every((c) => evaluateCondition(c, context));
-}
-
-function resolveFieldValue(field: string, context: EvalContext): unknown {
-  const parts = field.split('.');
-  let current: unknown = context;
-  for (const part of parts) {
-    if (current == null || typeof current !== 'object') return undefined;
-    current = (current as Record<string, unknown>)[part];
-  }
-  return current;
-}
-
-function resolveValue(value: unknown, context: EvalContext): unknown {
-  if (typeof value === 'string' && value.includes('{{')) {
-    const ast = parse(value);
-    return evaluate(ast, context);
-  }
-  return value;
-}

package/src/widgets/condition/index.ts

@@ -1 +0,0 @@
-export { evaluateCondition, evaluateConditions } from './evaluator.js';