@rangka/client 0.0.1

package/src/widgets/__tests__/integration.test.ts

@@ -0,0 +1,116 @@
+import { describe, test, expect } from 'vitest';
+import { parse, evaluate } from '../expression/index.js';
+import { evaluateConditions } from '../condition/index.js';
+import { StateStore } from '../state/index.js';
+import { createRootContext } from '../context/index.js';
+import { resolveBinding } from '../binding/index.js';
+import { dispatch } from '../action/index.js';
+import { buildDependencyMap, getAffectedWidgets } from '../reactivity/index.js';
+import type { ActionContext, ActionHandlers } from '../action/index.js';
+import type { WidgetNode } from '@rangka/shared';
+
+describe('Integration: Form scenario', () => {
+  test('field change → expression recomputes → condition re-evaluates → action fires', () => {
+    const record = { qty: 5, rate: 100, total: 500, status: 'draft' };
+    const _ctx = createRootContext(record, 'sales.order', 'edit');
+
+    record.qty = 10;
+    const exprAst = parse('{{qty * rate}}');
+    const newTotal = evaluate(exprAst, record);
+    expect(newTotal).toBe(1000);
+
+    record.total = newTotal as number;
+    const visible = evaluateConditions({ field: 'total', operator: 'gt', value: 500 }, record);
+    expect(visible).toBe(true);
+  });
+});
+
+describe('Integration: Table row context', () => {
+  test('model binding → row context → action in row uses correct record', async () => {
+    const parentRecord = { id: '1', customer: 'Acme' };
+    const parentCtx = createRootContext(parentRecord, 'sales.order', 'view');
+
+    const rowRecord = { id: '10', product: 'Widget', qty: 5, rate: 20 };
+    const rowCtx = {
+      record: rowRecord,
+      model: 'sales.orderItem',
+      mode: 'view' as const,
+      index: 0,
+      parent: parentCtx,
+    };
+
+    const binding = resolveBinding({ expression: '{{qty * rate}}' }, rowCtx);
+    expect(binding!.value).toBe(100);
+
+    const deleted: [string, string][] = [];
+    const handlers: ActionHandlers = {
+      modelDelete: async (model, id) => {
+        deleted.push([model, id]);
+      },
+    };
+    const actionCtx: ActionContext = {
+      widgetContext: rowCtx,
+      state: new StateStore(),
+    };
+    await dispatch({ type: 'model.delete' }, actionCtx, handlers);
+    expect(deleted).toEqual([['sales.orderItem', '10']]);
+  });
+});
+
+describe('Integration: $state reactivity scenario', () => {
+  test('action writes $state → dependent widgets flagged for re-render', async () => {
+    const state = new StateStore();
+    const nodes: WidgetNode[] = [
+      { id: 'step1', type: 'section', visible: { field: '$state.step', operator: 'eq', value: 1 } },
+      { id: 'step2', type: 'section', visible: { field: '$state.step', operator: 'eq', value: 2 } },
+      {
+        id: 'nextBtn',
+        type: 'button',
+        props: { label: '{{if($state.step == 2, "Submit", "Next")}}' },
+      },
+    ];
+
+    const depMap = buildDependencyMap(nodes);
+
+    const actionCtx: ActionContext = {
+      widgetContext: createRootContext({}, 'app.page', 'view'),
+      state,
+    };
+    await dispatch({ type: 'setValue', field: '$state.step', value: 2 }, actionCtx, {});
+
+    expect(state.get('step')).toBe(2);
+
+    const affected = getAffectedWidgets(depMap, 'step', true);
+    expect(affected).toContain('step1');
+    expect(affected).toContain('step2');
+    expect(affected).toContain('nextBtn');
+  });
+});
+
+describe('Integration: Wizard scenario', () => {
+  test('$state.step changes → visibility toggles → props update', async () => {
+    const state = new StateStore();
+    state.set('step', 1);
+
+    const flat = { $state: { step: 1 } };
+
+    expect(evaluateConditions({ field: '$state.step', operator: 'eq', value: 1 }, flat)).toBe(true);
+    expect(evaluateConditions({ field: '$state.step', operator: 'eq', value: 2 }, flat)).toBe(
+      false,
+    );
+
+    const labelAst = parse('{{if($state.step == 2, "Submit", "Next")}}');
+    expect(evaluate(labelAst, flat)).toBe('Next');
+
+    state.set('step', 2);
+    const flat2 = { $state: { step: 2 } };
+
+    expect(evaluateConditions({ field: '$state.step', operator: 'eq', value: 1 }, flat2)).toBe(
+      false,
+    );
+    expect(evaluateConditions({ field: '$state.step', operator: 'eq', value: 2 }, flat2)).toBe(
+      true,
+    );
+    expect(evaluate(labelAst, flat2)).toBe('Submit');
+  });
+});

package/src/widgets/__tests__/json-widget.test.tsx

@@ -0,0 +1,70 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { JsonWidget } from '../components/JsonWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: { value: null },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('JsonWidget', () => {
+  it('renders a textarea', () => {
+    const { container } = render(<JsonWidget {...defaultProps} />);
+    expect(container.querySelector('textarea')).toBeInTheDocument();
+  });
+
+  it('has monospace font', () => {
+    const { container } = render(<JsonWidget {...defaultProps} />);
+    expect(container.querySelector('textarea')?.className).toContain('font-mono');
+  });
+
+  it('displays label from props', () => {
+    render(<JsonWidget {...defaultProps} props={{ label: 'Metadata' }} />);
+    expect(screen.getByText('Metadata')).toBeInTheDocument();
+  });
+
+  it('renders object value as formatted JSON', () => {
+    const { container } = render(<JsonWidget {...defaultProps} bind={{ value: { key: 'val' } }} />);
+    expect(container.querySelector('textarea')?.value).toContain('"key": "val"');
+  });
+
+  it('formats JSON on blur', () => {
+    const setValue = vi.fn();
+    const { container } = render(<JsonWidget {...defaultProps} bind={{ value: null, setValue }} />);
+    const textarea = container.querySelector('textarea')!;
+    fireEvent.change(textarea, { target: { value: '{"a":1}' } });
+    fireEvent.blur(textarea);
+    expect(textarea.value).toContain('"a": 1');
+    expect(setValue).toHaveBeenCalledWith({ a: 1 });
+  });
+
+  it('shows error for invalid JSON on blur', () => {
+    const { container } = render(<JsonWidget {...defaultProps} bind={{ value: null }} />);
+    const textarea = container.querySelector('textarea')!;
+    fireEvent.change(textarea, { target: { value: '{invalid' } });
+    fireEvent.blur(textarea);
+    expect(screen.getByRole('alert').textContent).toBe('Invalid JSON');
+  });
+
+  it('handles disabled state', () => {
+    const { container } = render(<JsonWidget {...defaultProps} props={{ disabled: true }} />);
+    expect(container.querySelector('textarea')?.disabled).toBe(true);
+  });
+
+  it('handles null bind.value gracefully', () => {
+    const { container } = render(<JsonWidget {...defaultProps} bind={{ value: null }} />);
+    expect(container.querySelector('textarea')?.value).toBe('');
+  });
+
+  it('fires on.change when typing', () => {
+    const onChange = vi.fn();
+    const { container } = render(<JsonWidget {...defaultProps} on={{ change: onChange }} />);
+    fireEvent.change(container.querySelector('textarea')!, { target: { value: '{}' } });
+    expect(onChange).toHaveBeenCalledWith('{}');
+  });
+});

package/src/widgets/__tests__/link-widget.test.tsx

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LinkWidget } from '../components/LinkWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: {
+    value: null,
+    meta: {
+      type: 'link',
+      label: 'Customer',
+      required: false,
+      readOnly: false,
+      options: [
+        { label: 'Acme Corp', value: 'cust-1' },
+        { label: 'Globex', value: 'cust-2' },
+      ],
+    },
+  },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('LinkWidget', () => {
+  it('renders a combobox button', () => {
+    render(<LinkWidget {...defaultProps} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('displays label from props', () => {
+    render(<LinkWidget {...defaultProps} props={{ label: 'Supplier' }} />);
+    expect(screen.getByText('Supplier')).toBeInTheDocument();
+  });
+
+  it('falls back to bind.meta.label', () => {
+    render(<LinkWidget {...defaultProps} />);
+    expect(screen.getByText('Customer')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when no value', () => {
+    render(<LinkWidget {...defaultProps} />);
+    expect(screen.getByText('Select...')).toBeInTheDocument();
+  });
+
+  it('shows selected option label', () => {
+    render(<LinkWidget {...defaultProps} bind={{ ...defaultProps.bind, value: 'cust-1' }} />);
+    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    render(<LinkWidget {...defaultProps} props={{ disabled: true }} />);
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it.skip('opens dropdown on click', async () => {
+    render(<LinkWidget {...defaultProps} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+  });
+
+  it.skip('shows options in dropdown', async () => {
+    render(<LinkWidget {...defaultProps} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+    expect(screen.getByText('Globex')).toBeInTheDocument();
+  });
+
+  it.skip('fires on.change when selecting', async () => {
+    const onChange = vi.fn();
+    render(<LinkWidget {...defaultProps} on={{ change: onChange }} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Globex'));
+    expect(onChange).toHaveBeenCalledWith('cust-2');
+  });
+
+  it.skip('fires on.search when typing', async () => {
+    const onSearch = vi.fn();
+    render(<LinkWidget {...defaultProps} on={{ search: onSearch }} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'acm' } });
+    expect(onSearch).toHaveBeenCalledWith('acm');
+  });
+
+  it('handles null bind.value gracefully', () => {
+    render(<LinkWidget {...defaultProps} bind={{ ...defaultProps.bind, value: null }} />);
+    expect(screen.getByText('Select...')).toBeInTheDocument();
+  });
+});

package/src/widgets/__tests__/many-to-many-widget.test.tsx

@@ -0,0 +1,93 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ManyToManyWidget } from '../components/ManyToManyWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: {
+    value: [],
+    meta: {
+      type: 'manyToMany',
+      label: 'Tags',
+      required: false,
+      readOnly: false,
+      options: [
+        { label: 'VIP', value: 'tag-1' },
+        { label: 'Active', value: 'tag-2' },
+        { label: 'New', value: 'tag-3' },
+      ],
+    },
+  },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('ManyToManyWidget', () => {
+  it('renders a combobox button', () => {
+    render(<ManyToManyWidget {...defaultProps} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('displays label', () => {
+    render(<ManyToManyWidget {...defaultProps} />);
+    expect(screen.getByText('Tags')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when empty', () => {
+    render(<ManyToManyWidget {...defaultProps} />);
+    expect(screen.getByText('Select...')).toBeInTheDocument();
+  });
+
+  it('shows badges for selected values', () => {
+    render(
+      <ManyToManyWidget
+        {...defaultProps}
+        bind={{ ...defaultProps.bind, value: ['tag-1', 'tag-2'] }}
+      />,
+    );
+    expect(screen.getByText('VIP')).toBeInTheDocument();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    render(<ManyToManyWidget {...defaultProps} props={{ disabled: true }} />);
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it.skip('fires on.change when toggling selection', async () => {
+    const onChange = vi.fn();
+    render(<ManyToManyWidget {...defaultProps} on={{ change: onChange }} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('VIP'));
+    expect(onChange).toHaveBeenCalledWith(['tag-1']);
+  });
+
+  it('removes item via badge button', () => {
+    const setValue = vi.fn();
+    render(
+      <ManyToManyWidget
+        {...defaultProps}
+        bind={{ ...defaultProps.bind, value: ['tag-1', 'tag-2'], setValue }}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText('Remove VIP'));
+    expect(setValue).toHaveBeenCalledWith(['tag-2']);
+  });
+
+  it('handles null bind.value gracefully', () => {
+    render(<ManyToManyWidget {...defaultProps} bind={{ ...defaultProps.bind, value: null }} />);
+    expect(screen.getByText('Select...')).toBeInTheDocument();
+  });
+
+  it.skip('fires on.search when typing', async () => {
+    const onSearch = vi.fn();
+    render(<ManyToManyWidget {...defaultProps} on={{ search: onSearch }} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'vi' } });
+    expect(onSearch).toHaveBeenCalledWith('vi');
+  });
+});

package/src/widgets/__tests__/modal-widget.test.tsx

@@ -0,0 +1,148 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { ModalWidget } from '../components/ModalWidget.js';
+import { PageStateProvider } from '../hooks/usePageState.js';
+import { StateStore } from '../state/store.js';
+
+function renderWithState(ui: React.ReactElement, state?: StateStore) {
+  const store = state ?? new StateStore();
+  return { ...render(<PageStateProvider value={store}>{ui}</PageStateProvider>), store };
+}
+
+beforeEach(() => {});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('ModalWidget', () => {
+  it('renders children', () => {
+    renderWithState(
+      <ModalWidget
+        props={{ size: 'md' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div data-testid="child">Hello</div>
+      </ModalWidget>,
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+    expect(screen.getByTestId('child')).toHaveTextContent('Hello');
+  });
+
+  it('renders with sm size', () => {
+    renderWithState(
+      <ModalWidget
+        props={{ size: 'sm' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </ModalWidget>,
+    );
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog.className).toContain('sm:max-w-sm');
+  });
+
+  it('renders with md size by default', () => {
+    renderWithState(
+      <ModalWidget
+        props={{}}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </ModalWidget>,
+    );
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog.className).toContain('sm:max-w-lg');
+  });
+
+  it('renders with lg size', () => {
+    renderWithState(
+      <ModalWidget
+        props={{ size: 'lg' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </ModalWidget>,
+    );
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog.className).toContain('sm:max-w-3xl');
+  });
+
+  it('renders title', () => {
+    renderWithState(
+      <ModalWidget
+        props={{ title: 'Confirm Action' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </ModalWidget>,
+    );
+
+    expect(screen.getByText('Confirm Action')).toBeInTheDocument();
+  });
+
+  it('renders close button by default', () => {
+    renderWithState(
+      <ModalWidget
+        props={{ title: 'Test' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </ModalWidget>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+  });
+
+  it('close button sets $state key to false', () => {
+    const store = new StateStore();
+    store.set('showModal', true);
+
+    renderWithState(
+      <ModalWidget
+        props={{ title: 'Test', _visibleField: '$state.showModal' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </ModalWidget>,
+      store,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(store.get('showModal')).toBe(false);
+  });
+
+  it('has correct aria role', () => {
+    renderWithState(
+      <ModalWidget
+        props={{ title: 'My Modal' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </ModalWidget>,
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+});

package/src/widgets/__tests__/money-widget.test.tsx

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { MoneyWidget } from '../components/MoneyWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: { value: null },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('MoneyWidget', () => {
+  it('renders input element', () => {
+    const { container } = render(<MoneyWidget {...defaultProps} />);
+    expect(container.querySelector('input')).toBeInTheDocument();
+  });
+
+  it('displays label from props', () => {
+    render(<MoneyWidget {...defaultProps} props={{ label: 'Amount' }} />);
+    expect(screen.getByText('Amount')).toBeInTheDocument();
+  });
+
+  it('shows currency prefix', () => {
+    render(<MoneyWidget {...defaultProps} props={{ currency: '€' }} />);
+    expect(screen.getByText('€')).toBeInTheDocument();
+  });
+
+  it('shows default $ prefix', () => {
+    render(<MoneyWidget {...defaultProps} />);
+    expect(screen.getByText('$')).toBeInTheDocument();
+  });
+
+  it('displays value with 2 decimal places', () => {
+    const { container } = render(<MoneyWidget {...defaultProps} bind={{ value: 1234.5 }} />);
+    expect(container.querySelector('input')?.value).toBe('1234.50');
+  });
+
+  it('fires on.change with numeric value', () => {
+    const onChange = vi.fn();
+    const { container } = render(<MoneyWidget {...defaultProps} on={{ change: onChange }} />);
+    fireEvent.focus(container.querySelector('input')!);
+    fireEvent.change(container.querySelector('input')!, { target: { value: '99.99' } });
+    expect(onChange).toHaveBeenCalledWith(99.99);
+  });
+
+  it('fires on.change with null for empty input', () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <MoneyWidget {...defaultProps} bind={{ value: 100 }} on={{ change: onChange }} />,
+    );
+    fireEvent.focus(container.querySelector('input')!);
+    fireEvent.change(container.querySelector('input')!, { target: { value: '' } });
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('formats value on blur', () => {
+    const { container } = render(<MoneyWidget {...defaultProps} bind={{ value: null }} />);
+    const input = container.querySelector('input')!;
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: '42.1' } });
+    fireEvent.blur(input);
+    expect(input.value).toBe('42.10');
+  });
+
+  it('handles disabled state', () => {
+    const { container } = render(<MoneyWidget {...defaultProps} props={{ disabled: true }} />);
+    expect(container.querySelector('input')?.disabled).toBe(true);
+  });
+
+  it('handles null bind.value gracefully', () => {
+    const { container } = render(<MoneyWidget {...defaultProps} bind={{ value: null }} />);
+    expect(container.querySelector('input')?.value).toBe('');
+  });
+
+  it('handles readOnly from bind.meta', () => {
+    const { container } = render(
+      <MoneyWidget
+        {...defaultProps}
+        bind={{ value: 0, meta: { type: 'money', label: 'X', required: false, readOnly: true } }}
+      />,
+    );
+    expect(container.querySelector('input')?.readOnly).toBe(true);
+  });
+
+  it('calls bind.setValue on change', () => {
+    const setValue = vi.fn();
+    const { container } = render(
+      <MoneyWidget {...defaultProps} bind={{ value: null, setValue }} />,
+    );
+    fireEvent.focus(container.querySelector('input')!);
+    fireEvent.change(container.querySelector('input')!, { target: { value: '50' } });
+    expect(setValue).toHaveBeenCalledWith(50);
+  });
+});