@rangka/client 0.0.1

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

@@ -0,0 +1,99 @@
+import { describe, test, expect } from 'vitest';
+import {
+  buildContext,
+  buildRowContext,
+  createRootContext,
+  resolveContextValue,
+} from '../context/builder.js';
+
+describe('Context Builder', () => {
+  const rootCtx = createRootContext(
+    { id: '1', name: 'Order #1', total: 500 },
+    'sales.order',
+    'edit',
+  );
+
+  test('createRootContext creates context with record and model', () => {
+    expect(rootCtx.record).toEqual({ id: '1', name: 'Order #1', total: 500 });
+    expect(rootCtx.model).toBe('sales.order');
+    expect(rootCtx.mode).toBe('edit');
+    expect(rootCtx.parent).toBeUndefined();
+  });
+
+  test('layout widgets pass through context', () => {
+    const ctx = buildContext({ type: 'group', children: [] }, rootCtx);
+    expect(ctx).toBe(rootCtx);
+  });
+
+  test('section passes through context', () => {
+    const ctx = buildContext({ type: 'section', children: [] }, rootCtx);
+    expect(ctx).toBe(rootCtx);
+  });
+
+  test('divider passes through context', () => {
+    const ctx = buildContext({ type: 'divider' }, rootCtx);
+    expect(ctx).toBe(rootCtx);
+  });
+
+  test('table with model binding creates child scope', () => {
+    const node = { type: 'table', bind: { model: { name: 'sales.orderItem' } }, children: [] };
+    const ctx = buildContext(node, rootCtx);
+    expect(ctx.model).toBe('sales.orderItem');
+    expect(ctx.parent).toBe(rootCtx);
+    expect(ctx.record).toEqual({});
+    expect(ctx.records).toEqual([]);
+  });
+
+  test('buildRowContext creates row-level context with index', () => {
+    const tableCtx = buildContext(
+      { type: 'table', bind: { model: { name: 'sales.orderItem' } }, children: [] },
+      rootCtx,
+    );
+    const row = { id: '10', product: 'Widget', qty: 5 };
+    const rowCtx = buildRowContext(row, 2, tableCtx);
+    expect(rowCtx.record).toBe(row);
+    expect(rowCtx.index).toBe(2);
+    expect(rowCtx.model).toBe('sales.orderItem');
+    expect(rowCtx.parent).toBe(rootCtx);
+  });
+
+  test('non-layout non-model widget inherits parent context', () => {
+    const ctx = buildContext({ type: 'input', bind: { field: 'name' } }, rootCtx);
+    expect(ctx).toBe(rootCtx);
+  });
+});
+
+describe('resolveContextValue', () => {
+  const parentCtx = createRootContext({ id: '1', company: 'Acme' }, 'core.company');
+  const _childCtx = buildContext(
+    { type: 'table', bind: { model: { name: 'sales.order' } }, children: [] },
+    parentCtx,
+  );
+  const rowCtx = {
+    record: { id: '10', product: 'Widget', qty: 5 },
+    model: 'sales.order',
+    mode: 'view' as const,
+    index: 0,
+    parent: parentCtx,
+  };
+
+  test('resolves simple field', () => {
+    expect(resolveContextValue('company', parentCtx)).toBe('Acme');
+  });
+
+  test('resolves $parent field', () => {
+    expect(resolveContextValue('$parent.company', rowCtx)).toBe('Acme');
+  });
+
+  test('resolves $root field', () => {
+    expect(resolveContextValue('$root.company', rowCtx)).toBe('Acme');
+  });
+
+  test('resolves $row field', () => {
+    expect(resolveContextValue('$row.qty', rowCtx)).toBe(5);
+  });
+
+  test('returns undefined for missing field', () => {
+    expect(resolveContextValue('missing', parentCtx)).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,204 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { registerWidget, clearWidgetRegistry } from '../registry.js';
+import { DataWidget } from '../components/DataWidget.js';
+import { WidgetContextProvider } from '../hooks/useWidgetContext.js';
+import { PageStateProvider } from '../hooks/usePageState.js';
+import { StateStore } from '../state/store.js';
+import { createRootContext } from '../context/builder.js';
+import type { WidgetProps } from '../types.js';
+import type { ComponentType } from 'react';
+
+vi.mock('../data/useModelRecord.js', () => ({
+  useModelRecord: vi.fn(() => ({
+    data: { id: '1', name: 'Test Order' },
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+vi.mock('../data/useModelQuery.js', () => ({
+  useModelQuery: vi.fn(() => ({
+    data: [
+      { id: '1', name: 'Order 1' },
+      { id: '2', name: 'Order 2' },
+    ],
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    total: 2,
+    page: 1,
+    pageSize: 20,
+    sort: null,
+  })),
+}));
+
+function Wrapper({
+  children,
+  model = 'sales.order',
+}: {
+  children: React.ReactNode;
+  model?: string;
+}) {
+  const ctx = createRootContext({}, model, 'view');
+  const store = new StateStore();
+  return (
+    <PageStateProvider value={store}>
+      <WidgetContextProvider value={ctx}>{children}</WidgetContextProvider>
+    </PageStateProvider>
+  );
+}
+
+beforeEach(() => {
+  clearWidgetRegistry();
+  registerWidget(
+    {
+      name: 'data',
+      label: 'Data',
+      category: 'data',
+      schema: {},
+      binding: 'model',
+      triggers: ['load', 'error'],
+      container: true,
+    },
+    DataWidget as unknown as ComponentType<WidgetProps>,
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  clearWidgetRegistry();
+});
+
+describe('DataWidget', () => {
+  it('renders data-widget attribute in record mode', () => {
+    const { container } = render(
+      <Wrapper>
+        <DataWidget
+          props={{}}
+          bind={
+            {
+              value: null,
+              id: '123',
+              query: { name: 'sales.order' },
+            } as unknown as WidgetProps['bind']
+          }
+          on={{}}
+          context={{ record: {}, model: 'sales.order', mode: 'view' }}
+        >
+          <span>child</span>
+        </DataWidget>
+      </Wrapper>,
+    );
+
+    const dataEl = container.querySelector('[data-rangka-widget="data"]');
+    expect(dataEl).not.toBeNull();
+  });
+
+  it('renders children in record mode', () => {
+    const { container } = render(
+      <Wrapper>
+        <DataWidget
+          props={{}}
+          bind={
+            {
+              value: null,
+              id: '123',
+              query: { name: 'sales.order' },
+            } as unknown as WidgetProps['bind']
+          }
+          on={{}}
+          context={{ record: {}, model: 'sales.order', mode: 'view' }}
+          childNodes={[{ type: 'context-reader', bind: { field: 'name' } }]}
+        >
+          <span data-testid="child">hello</span>
+        </DataWidget>
+      </Wrapper>,
+    );
+
+    expect(container.querySelector('[data-rangka-widget="data"]')).not.toBeNull();
+  });
+
+  it('renders children in list mode', () => {
+    const { container } = render(
+      <Wrapper>
+        <DataWidget
+          props={{}}
+          bind={{ value: null, query: { name: 'sales.order' } } as unknown as WidgetProps['bind']}
+          on={{}}
+          context={{ record: {}, model: 'sales.order', mode: 'view' }}
+          childNodes={[{ type: 'context-reader', bind: { field: 'name' } }]}
+        >
+          <span data-testid="child">hello</span>
+        </DataWidget>
+      </Wrapper>,
+    );
+
+    expect(container.querySelector('[data-rangka-widget="data"]')).not.toBeNull();
+  });
+
+  it('fires load trigger when data loads in record mode', () => {
+    const loadFn = vi.fn();
+    render(
+      <Wrapper>
+        <DataWidget
+          props={{}}
+          bind={
+            {
+              value: null,
+              id: '1',
+              query: { name: 'sales.order' },
+            } as unknown as WidgetProps['bind']
+          }
+          on={{ load: loadFn }}
+          context={{ record: {}, model: 'sales.order', mode: 'view' }}
+        >
+          <span>child</span>
+        </DataWidget>
+      </Wrapper>,
+    );
+
+    expect(loadFn).toHaveBeenCalledWith({ record: { id: '1', name: 'Test Order' } });
+  });
+
+  it('fires load trigger when data loads in list mode', () => {
+    const loadFn = vi.fn();
+    render(
+      <Wrapper>
+        <DataWidget
+          props={{}}
+          bind={{ value: null, query: { name: 'sales.order' } } as unknown as WidgetProps['bind']}
+          on={{ load: loadFn }}
+          context={{ record: {}, model: 'sales.order', mode: 'view' }}
+        >
+          <span>child</span>
+        </DataWidget>
+      </Wrapper>,
+    );
+
+    expect(loadFn).toHaveBeenCalledWith({
+      records: [
+        { id: '1', name: 'Order 1' },
+        { id: '2', name: 'Order 2' },
+      ],
+    });
+  });
+
+  it('returns null when no model name provided', () => {
+    const { container } = render(
+      <Wrapper model="">
+        <DataWidget
+          props={{}}
+          bind={{ value: null } as unknown as WidgetProps['bind']}
+          on={{}}
+          context={{ record: {}, model: '', mode: 'view' }}
+        >
+          <span>child</span>
+        </DataWidget>
+      </Wrapper>,
+    );
+
+    expect(container.querySelector('[data-rangka-widget="data"]')).toBeNull();
+  });
+});

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

@@ -0,0 +1,66 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { DatePickerWidget } from '../components/DatePickerWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: { value: null },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('DatePickerWidget', () => {
+  it('renders a button trigger', () => {
+    render(<DatePickerWidget {...defaultProps} />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('displays label from props', () => {
+    render(<DatePickerWidget {...defaultProps} props={{ label: 'Start Date' }} />);
+    expect(screen.getByText('Start Date')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when no date selected', () => {
+    render(<DatePickerWidget {...defaultProps} />);
+    expect(screen.getByText('Pick a date')).toBeInTheDocument();
+  });
+
+  it('displays formatted date when value is set', () => {
+    render(<DatePickerWidget {...defaultProps} bind={{ value: '2024-03-15' }} />);
+    expect(screen.getByRole('button').textContent).toContain('March');
+    expect(screen.getByRole('button').textContent).toContain('15');
+  });
+
+  it('handles disabled state', () => {
+    render(<DatePickerWidget {...defaultProps} props={{ disabled: true }} />);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('handles null bind.value gracefully', () => {
+    render(<DatePickerWidget {...defaultProps} bind={{ value: null }} />);
+    expect(screen.getByText('Pick a date')).toBeInTheDocument();
+  });
+
+  it('falls back to bind.meta.label', () => {
+    render(
+      <DatePickerWidget
+        {...defaultProps}
+        bind={{
+          value: null,
+          meta: { type: 'date', label: 'Due Date', required: false, readOnly: false },
+        }}
+      />,
+    );
+    expect(screen.getByText('Due Date')).toBeInTheDocument();
+  });
+
+  it('opens popover on click', () => {
+    render(<DatePickerWidget {...defaultProps} />);
+    fireEvent.click(screen.getByRole('button'));
+    // DayPicker renders a table for the calendar
+    expect(document.querySelector('table')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,67 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { DatetimeWidget } from '../components/DatetimeWidget.js';
+
+const defaultProps = {
+  props: {},
+  bind: { value: null },
+  on: {},
+  context: { record: {}, model: '', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('DatetimeWidget', () => {
+  it('renders a button trigger', () => {
+    render(<DatetimeWidget {...defaultProps} />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('displays label from props', () => {
+    render(<DatetimeWidget {...defaultProps} props={{ label: 'Created At' }} />);
+    expect(screen.getByText('Created At')).toBeInTheDocument();
+  });
+
+  it('shows placeholder when no datetime selected', () => {
+    render(<DatetimeWidget {...defaultProps} />);
+    expect(screen.getByText('Pick date and time')).toBeInTheDocument();
+  });
+
+  it('displays formatted datetime when value is set', () => {
+    render(<DatetimeWidget {...defaultProps} bind={{ value: '2024-03-15T14:30:00.000Z' }} />);
+    const btn = screen.getByRole('button');
+    expect(btn.textContent).toContain('March');
+    expect(btn.textContent).toContain('15');
+  });
+
+  it('handles disabled state', () => {
+    render(<DatetimeWidget {...defaultProps} props={{ disabled: true }} />);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('handles null bind.value gracefully', () => {
+    render(<DatetimeWidget {...defaultProps} bind={{ value: null }} />);
+    expect(screen.getByText('Pick date and time')).toBeInTheDocument();
+  });
+
+  it('falls back to bind.meta.label', () => {
+    render(
+      <DatetimeWidget
+        {...defaultProps}
+        bind={{
+          value: null,
+          meta: { type: 'datetime', label: 'Updated At', required: false, readOnly: false },
+        }}
+      />,
+    );
+    expect(screen.getByText('Updated At')).toBeInTheDocument();
+  });
+
+  it('opens popover on click and shows time selects', () => {
+    render(<DatetimeWidget {...defaultProps} bind={{ value: '2024-03-15T14:30:00.000Z' }} />);
+    fireEvent.click(screen.getByRole('button'));
+    const triggers = document.querySelectorAll('[data-slot="select-trigger"]');
+    expect(triggers.length).toBeGreaterThanOrEqual(2);
+  });
+});

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

@@ -0,0 +1,149 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { DrawerWidget } from '../components/DrawerWidget.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('DrawerWidget', () => {
+  it('renders children', () => {
+    renderWithState(
+      <DrawerWidget
+        props={{ width: 'md' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div data-testid="child">Hello</div>
+      </DrawerWidget>,
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+    expect(screen.getByTestId('child')).toHaveTextContent('Hello');
+  });
+
+  it('renders with sm width class', () => {
+    renderWithState(
+      <DrawerWidget
+        props={{ width: 'sm' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </DrawerWidget>,
+    );
+
+    const sheet = screen.getByRole('dialog');
+    expect(sheet.className).toContain('w-80');
+  });
+
+  it('renders with md width class by default', () => {
+    renderWithState(
+      <DrawerWidget
+        props={{}}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </DrawerWidget>,
+    );
+
+    const sheet = screen.getByRole('dialog');
+    expect(sheet.className).toContain('w-[28rem]');
+  });
+
+  it('renders with lg width class', () => {
+    renderWithState(
+      <DrawerWidget
+        props={{ width: 'lg' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </DrawerWidget>,
+    );
+
+    const sheet = screen.getByRole('dialog');
+    expect(sheet.className).toContain('w-[40rem]');
+  });
+
+  it('renders title', () => {
+    renderWithState(
+      <DrawerWidget
+        props={{ title: 'Order Details' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </DrawerWidget>,
+    );
+
+    expect(screen.getByText('Order Details')).toBeInTheDocument();
+  });
+
+  it('renders close button by default', () => {
+    renderWithState(
+      <DrawerWidget
+        props={{ title: 'Test' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </DrawerWidget>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+  });
+
+  it('close button sets $state key to false', () => {
+    const store = new StateStore();
+    store.set('showDrawer', true);
+
+    renderWithState(
+      <DrawerWidget
+        props={{ title: 'Test', _visibleField: '$state.showDrawer' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </DrawerWidget>,
+      store,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(store.get('showDrawer')).toBe(false);
+  });
+
+  it('drawer is visible when open', () => {
+    renderWithState(
+      <DrawerWidget
+        props={{}}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>Content</div>
+      </DrawerWidget>,
+    );
+
+    const sheet = screen.getByRole('dialog');
+    expect(sheet).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,52 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import { DynamicLinkWidget } from '../components/DynamicLinkWidget.js';
+
+const defaultProps = {
+  props: { models: ['sales.customer', 'sales.supplier'], modelField: 'ref_type' },
+  bind: {
+    value: null,
+    meta: {
+      type: 'dynamicLink',
+      label: 'Reference',
+      required: false,
+      readOnly: false,
+      options: [{ label: 'Acme Corp', value: 'rec-1' }],
+    },
+  },
+  on: {},
+  context: { record: { ref_type: 'sales.customer' }, model: 'sales.order', mode: 'view' as const },
+};
+
+afterEach(() => cleanup());
+
+describe('DynamicLinkWidget', () => {
+  it('renders model selector and record selector', () => {
+    render(<DynamicLinkWidget {...defaultProps} />);
+    expect(screen.getAllByRole('combobox').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('displays label', () => {
+    render(<DynamicLinkWidget {...defaultProps} />);
+    expect(screen.getByText('Reference')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    render(
+      <DynamicLinkWidget {...defaultProps} props={{ ...defaultProps.props, disabled: true }} />,
+    );
+    const buttons = screen.getAllByRole('combobox');
+    buttons.forEach((btn) => expect(btn).toBeDisabled());
+  });
+
+  it('handles null bind.value gracefully', () => {
+    render(<DynamicLinkWidget {...defaultProps} />);
+    expect(screen.getByText('Select record...')).toBeInTheDocument();
+  });
+
+  it('shows selected record label', () => {
+    render(<DynamicLinkWidget {...defaultProps} bind={{ ...defaultProps.bind, value: 'rec-1' }} />);
+    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+  });
+});