@rangka/client 0.1.0 → 0.1.2

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

@@ -1,99 +0,0 @@
-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

@@ -1,204 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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();
-  });
-});