@rangka/client 0.0.1

package/src/widgets/__tests__/edge-cases.test.ts

@@ -0,0 +1,232 @@
+import { describe, test, expect } from 'vitest';
+import { parse } from '../expression/parser.js';
+import { evaluate } from '../expression/evaluator.js';
+
+describe('Expression Edge Cases', () => {
+  describe('Parser edge cases', () => {
+    test('deeply nested parentheses', () => {
+      const ast = parse('{{((((a))))}}');
+      expect(ast).toEqual({ type: 'field', path: ['a'] });
+    });
+
+    test('multiple unary operators', () => {
+      const result = evaluate(parse('{{!!true}}'), {});
+      expect(result).toBe(true);
+    });
+
+    test('double negation', () => {
+      expect(evaluate(parse('{{- -5}}'), {})).toBe(5);
+    });
+
+    test('empty string literal', () => {
+      expect(evaluate(parse('{{""}}'), {})).toBe('');
+    });
+
+    test('string with escaped quotes', () => {
+      expect(evaluate(parse('{{"hello \\"world\\""}}'), {})).toBe('hello "world"');
+    });
+
+    test('string with escaped newline', () => {
+      expect(evaluate(parse('{{"line1\\nline2"}}'), {})).toBe('line1\nline2');
+    });
+
+    test('whitespace around expression', () => {
+      expect(evaluate(parse('{{  42  }}'), {})).toBe(42);
+    });
+
+    test('complex chained comparisons', () => {
+      const result = evaluate(parse('{{a > 0 && a < 100}}'), { a: 50 });
+      expect(result).toBe(true);
+    });
+
+    test('function call with expression arguments', () => {
+      const result = evaluate(parse('{{round(a * b / 100, 2)}}'), { a: 33, b: 7 });
+      expect(result).toBe(2.31);
+    });
+
+    test('identifier starting with $', () => {
+      expect(parse('{{$state.loading}}')).toEqual({ type: 'field', path: ['$state', 'loading'] });
+    });
+
+    test('identifier with underscores and numbers', () => {
+      expect(parse('{{field_name_2}}')).toEqual({ type: 'field', path: ['field_name_2'] });
+    });
+
+    test('throws on unclosed string', () => {
+      expect(() => parse('{{"unclosed}}')).toThrow();
+    });
+
+    test('throws on unclosed parenthesis', () => {
+      expect(() => parse('{{(a + b}}')).toThrow();
+    });
+
+    test('throws on empty input', () => {
+      expect(() => parse('{{}}')).toThrow();
+    });
+
+    test('throws on trailing operator', () => {
+      expect(() => parse('{{a +}}')).toThrow();
+    });
+  });
+
+  describe('Evaluator edge cases', () => {
+    test('null arithmetic yields 0', () => {
+      expect(evaluate(parse('{{a + b}}'), { a: null, b: null })).toBe(0);
+    });
+
+    test('undefined field in arithmetic', () => {
+      expect(evaluate(parse('{{a * 5}}'), {})).toBeNaN();
+    });
+
+    test('string + number concatenates', () => {
+      expect(evaluate(parse('{{prefix + 42}}'), { prefix: 'item-' })).toBe('item-42');
+    });
+
+    test('number + string concatenates', () => {
+      expect(evaluate(parse('{{42 + suffix}}'), { suffix: '-end' })).toBe('42-end');
+    });
+
+    test('null == null is true', () => {
+      expect(evaluate(parse('{{a == b}}'), { a: null, b: null })).toBe(true);
+    });
+
+    test('undefined == null is true (loose equality)', () => {
+      expect(evaluate(parse('{{a == b}}'), { a: undefined, b: null })).toBe(true);
+    });
+
+    test('0 == false is true (loose equality)', () => {
+      expect(evaluate(parse('{{a == b}}'), { a: 0, b: false })).toBe(true);
+    });
+
+    test('deeply nested field access', () => {
+      const ctx = { a: { b: { c: { d: 42 } } } };
+      expect(evaluate(parse('{{a.b.c.d}}'), ctx)).toBe(42);
+    });
+
+    test('field access on null returns undefined', () => {
+      expect(evaluate(parse('{{a.b.c}}'), { a: null })).toBeUndefined();
+    });
+
+    test('field access on missing intermediate returns undefined', () => {
+      expect(evaluate(parse('{{a.b.c}}'), {})).toBeUndefined();
+    });
+
+    test('logical AND short-circuits (no error on null access)', () => {
+      const result = evaluate(parse('{{a && a.b}}'), { a: null });
+      expect(result).toBe(null);
+    });
+
+    test('logical OR short-circuits', () => {
+      const result = evaluate(parse('{{a || "default"}}'), { a: 'value' });
+      expect(result).toBe('value');
+    });
+
+    test('division by zero returns 0', () => {
+      expect(evaluate(parse('{{100 / 0}}'), {})).toBe(0);
+    });
+
+    test('modulo by zero returns NaN', () => {
+      expect(evaluate(parse('{{10 % 0}}'), {})).toBeNaN();
+    });
+
+    test('not on null is true', () => {
+      expect(evaluate(parse('{{!a}}'), { a: null })).toBe(true);
+    });
+
+    test('not on 0 is true', () => {
+      expect(evaluate(parse('{{!a}}'), { a: 0 })).toBe(true);
+    });
+
+    test('not on empty string is true', () => {
+      expect(evaluate(parse('{{!a}}'), { a: '' })).toBe(true);
+    });
+
+    test('complex real-world: order total with discount', () => {
+      const ctx = { qty: 10, rate: 50, discount: 15, tax_rate: 0.1 };
+      const expr = '{{(qty * rate * (100 - discount) / 100) * (1 + tax_rate)}}';
+      expect(evaluate(parse(expr), ctx)).toBeCloseTo(467.5);
+    });
+  });
+
+  describe('Function edge cases', () => {
+    test('sum with non-array returns 0', () => {
+      expect(evaluate(parse('{{sum(items)}}'), { items: null })).toBe(0);
+    });
+
+    test('sum with mixed types coerces to numbers', () => {
+      expect(evaluate(parse('{{sum(items)}}'), { items: ['10', 20, null, '30'] })).toBe(60);
+    });
+
+    test('count of non-array returns 0', () => {
+      expect(evaluate(parse('{{count(items)}}'), { items: undefined })).toBe(0);
+    });
+
+    test('min of single element', () => {
+      expect(evaluate(parse('{{min(items)}}'), { items: [42] })).toBe(42);
+    });
+
+    test('max of negative numbers', () => {
+      expect(evaluate(parse('{{max(items)}}'), { items: [-5, -2, -10] })).toBe(-2);
+    });
+
+    test('round negative number', () => {
+      expect(evaluate(parse('{{round(-3.7)}}'), {})).toBe(-4);
+    });
+
+    test('round with many decimals', () => {
+      expect(evaluate(parse('{{round(1.005, 2)}}'), {})).toBeCloseTo(1.01, 1);
+    });
+
+    test('concat with null values', () => {
+      expect(evaluate(parse('{{concat(a, "-", b)}}'), { a: null, b: null })).toBe('-');
+    });
+
+    test('upper of number coerces to string', () => {
+      expect(evaluate(parse('{{upper(val)}}'), { val: 123 })).toBe('123');
+    });
+
+    test('format_currency with zero', () => {
+      const result = evaluate(parse('{{format_currency(0, "USD")}}'), {}) as string;
+      expect(result).toContain('0.00');
+    });
+
+    test('format_number with large number', () => {
+      const result = evaluate(parse('{{format_number(1000000000, 0)}}'), {}) as string;
+      expect(result).toBe('1,000,000,000');
+    });
+
+    test('coalesce with 0 (not null) returns 0', () => {
+      expect(evaluate(parse('{{coalesce(a, 99)}}'), { a: 0 })).toBe(0);
+    });
+
+    test('coalesce with empty string (not null) returns empty string', () => {
+      expect(evaluate(parse('{{coalesce(a, "default")}}'), { a: '' })).toBe('');
+    });
+
+    test('if with falsy 0 takes else branch', () => {
+      expect(evaluate(parse('{{if(count, "has items", "empty")}}'), { count: 0 })).toBe('empty');
+    });
+
+    test('if with truthy non-zero takes then branch', () => {
+      expect(evaluate(parse('{{if(count, "has items", "empty")}}'), { count: 5 })).toBe(
+        'has items',
+      );
+    });
+
+    test('add_days crossing month boundary', () => {
+      expect(evaluate(parse('{{add_days("2024-01-30", 5)}}'), {})).toBe('2024-02-04');
+    });
+
+    test('add_days negative days', () => {
+      expect(evaluate(parse('{{add_days("2024-03-01", -1)}}'), {})).toBe('2024-02-29');
+    });
+
+    test('diff_days same date is 0', () => {
+      expect(evaluate(parse('{{diff_days("2024-01-01", "2024-01-01")}}'), {})).toBe(0);
+    });
+
+    test('diff_days negative result', () => {
+      expect(evaluate(parse('{{diff_days("2024-01-01", "2024-01-10")}}'), {})).toBe(-9);
+    });
+  });
+});

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

@@ -0,0 +1,107 @@
+import { describe, test, expect } from 'vitest';
+import { parse } from '../expression/parser.js';
+import { evaluate } from '../expression/evaluator.js';
+
+describe('Expression Evaluator', () => {
+  test('evaluates number literal', () => {
+    expect(evaluate(parse('{{42}}'), {})).toBe(42);
+  });
+
+  test('evaluates string literal', () => {
+    expect(evaluate(parse('{{"hello"}}'), {})).toBe('hello');
+  });
+
+  test('evaluates boolean literal', () => {
+    expect(evaluate(parse('{{true}}'), {})).toBe(true);
+  });
+
+  test('evaluates null literal', () => {
+    expect(evaluate(parse('{{null}}'), {})).toBe(null);
+  });
+
+  test('evaluates field reference', () => {
+    expect(evaluate(parse('{{qty}}'), { qty: 5 })).toBe(5);
+  });
+
+  test('evaluates dotted field reference', () => {
+    expect(evaluate(parse('{{$parent.currency}}'), { $parent: { currency: 'USD' } })).toBe('USD');
+  });
+
+  test('returns undefined for missing field', () => {
+    expect(evaluate(parse('{{missing}}'), {})).toBeUndefined();
+  });
+
+  test('evaluates addition', () => {
+    expect(evaluate(parse('{{a + b}}'), { a: 3, b: 7 })).toBe(10);
+  });
+
+  test('evaluates subtraction', () => {
+    expect(evaluate(parse('{{a - b}}'), { a: 10, b: 3 })).toBe(7);
+  });
+
+  test('evaluates multiplication', () => {
+    expect(evaluate(parse('{{qty * rate}}'), { qty: 5, rate: 100 })).toBe(500);
+  });
+
+  test('evaluates division', () => {
+    expect(evaluate(parse('{{a / b}}'), { a: 10, b: 2 })).toBe(5);
+  });
+
+  test('division by zero returns 0', () => {
+    expect(evaluate(parse('{{a / b}}'), { a: 10, b: 0 })).toBe(0);
+  });
+
+  test('evaluates modulo', () => {
+    expect(evaluate(parse('{{a % b}}'), { a: 10, b: 3 })).toBe(1);
+  });
+
+  test('string concatenation with +', () => {
+    expect(evaluate(parse('{{name + " " + suffix}}'), { name: 'Order', suffix: '#1' })).toBe(
+      'Order #1',
+    );
+  });
+
+  test('evaluates equality', () => {
+    expect(evaluate(parse('{{status == "draft"}}'), { status: 'draft' })).toBe(true);
+    expect(evaluate(parse('{{status == "draft"}}'), { status: 'submitted' })).toBe(false);
+  });
+
+  test('evaluates inequality', () => {
+    expect(evaluate(parse('{{status != "draft"}}'), { status: 'submitted' })).toBe(true);
+  });
+
+  test('evaluates comparison operators', () => {
+    expect(evaluate(parse('{{a > b}}'), { a: 5, b: 3 })).toBe(true);
+    expect(evaluate(parse('{{a < b}}'), { a: 5, b: 3 })).toBe(false);
+    expect(evaluate(parse('{{a >= b}}'), { a: 5, b: 5 })).toBe(true);
+    expect(evaluate(parse('{{a <= b}}'), { a: 3, b: 5 })).toBe(true);
+  });
+
+  test('evaluates logical AND (short-circuit)', () => {
+    expect(evaluate(parse('{{a && b}}'), { a: true, b: 'yes' })).toBe('yes');
+    expect(evaluate(parse('{{a && b}}'), { a: false, b: 'yes' })).toBe(false);
+  });
+
+  test('evaluates logical OR (short-circuit)', () => {
+    expect(evaluate(parse('{{a || b}}'), { a: null, b: 'fallback' })).toBe('fallback');
+    expect(evaluate(parse('{{a || b}}'), { a: 'first', b: 'second' })).toBe('first');
+  });
+
+  test('evaluates unary not', () => {
+    expect(evaluate(parse('{{!active}}'), { active: true })).toBe(false);
+    expect(evaluate(parse('{{!active}}'), { active: false })).toBe(true);
+  });
+
+  test('evaluates unary negation', () => {
+    expect(evaluate(parse('{{-amount}}'), { amount: 50 })).toBe(-50);
+  });
+
+  test('evaluates nested expressions', () => {
+    expect(evaluate(parse('{{(qty * rate) + tax}}'), { qty: 5, rate: 100, tax: 25 })).toBe(525);
+  });
+
+  test('evaluates complex expression', () => {
+    const expr = '{{qty * rate * (1 - discount / 100)}}';
+    expect(evaluate(parse(expr), { qty: 10, rate: 50, discount: 10 })).toBe(450);
+  });
+});

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

@@ -0,0 +1,147 @@
+import { describe, test, expect } from 'vitest';
+import { parse } from '../expression/parser.js';
+import { evaluate } from '../expression/evaluator.js';
+
+describe('Expression Functions', () => {
+  describe('Aggregate', () => {
+    test('sum', () => {
+      expect(evaluate(parse('{{sum(items)}}'), { items: [10, 20, 30] })).toBe(60);
+    });
+
+    test('sum of empty array', () => {
+      expect(evaluate(parse('{{sum(items)}}'), { items: [] })).toBe(0);
+    });
+
+    test('count', () => {
+      expect(evaluate(parse('{{count(items)}}'), { items: [1, 2, 3] })).toBe(3);
+    });
+
+    test('avg', () => {
+      expect(evaluate(parse('{{avg(items)}}'), { items: [10, 20, 30] })).toBe(20);
+    });
+
+    test('avg of empty array', () => {
+      expect(evaluate(parse('{{avg(items)}}'), { items: [] })).toBe(0);
+    });
+
+    test('min', () => {
+      expect(evaluate(parse('{{min(items)}}'), { items: [5, 2, 8, 1] })).toBe(1);
+    });
+
+    test('max', () => {
+      expect(evaluate(parse('{{max(items)}}'), { items: [5, 2, 8, 1] })).toBe(8);
+    });
+  });
+
+  describe('Math', () => {
+    test('round without decimals', () => {
+      expect(evaluate(parse('{{round(3.7)}}'), {})).toBe(4);
+    });
+
+    test('round with decimals', () => {
+      expect(evaluate(parse('{{round(3.14159, 2)}}'), {})).toBe(3.14);
+    });
+
+    test('abs', () => {
+      expect(evaluate(parse('{{abs(-5)}}'), {})).toBe(5);
+    });
+
+    test('ceil', () => {
+      expect(evaluate(parse('{{ceil(3.2)}}'), {})).toBe(4);
+    });
+
+    test('floor', () => {
+      expect(evaluate(parse('{{floor(3.9)}}'), {})).toBe(3);
+    });
+  });
+
+  describe('String', () => {
+    test('upper', () => {
+      expect(evaluate(parse('{{upper("hello")}}'), {})).toBe('HELLO');
+    });
+
+    test('lower', () => {
+      expect(evaluate(parse('{{lower("HELLO")}}'), {})).toBe('hello');
+    });
+
+    test('concat', () => {
+      expect(evaluate(parse('{{concat("a", "b", "c")}}'), {})).toBe('abc');
+    });
+
+    test('trim', () => {
+      expect(evaluate(parse('{{trim("  hello  ")}}'), {})).toBe('hello');
+    });
+
+    test('upper with null', () => {
+      expect(evaluate(parse('{{upper(val)}}'), { val: null })).toBe('');
+    });
+  });
+
+  describe('Date', () => {
+    test('today returns date string', () => {
+      const result = evaluate(parse('{{today()}}'), {}) as string;
+      expect(result).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    });
+
+    test('now returns ISO string', () => {
+      const result = evaluate(parse('{{now()}}'), {}) as string;
+      expect(result).toMatch(/^\d{4}-\d{2}-\d{2}T/);
+    });
+
+    test('add_days', () => {
+      expect(evaluate(parse('{{add_days("2024-01-01", 5)}}'), {})).toBe('2024-01-06');
+    });
+
+    test('diff_days', () => {
+      expect(evaluate(parse('{{diff_days("2024-01-10", "2024-01-01")}}'), {})).toBe(9);
+    });
+
+    test('format_date', () => {
+      expect(evaluate(parse('{{format_date("2024-03-15", "YYYY-MM-DD")}}'), {})).toBe('2024-03-15');
+    });
+  });
+
+  describe('Format', () => {
+    test('format_currency', () => {
+      const result = evaluate(parse('{{format_currency(1234.5, "USD")}}'), {}) as string;
+      expect(result).toContain('1,234.50');
+    });
+
+    test('format_number', () => {
+      const result = evaluate(parse('{{format_number(1234567, 2)}}'), {}) as string;
+      expect(result).toBe('1,234,567.00');
+    });
+  });
+
+  describe('Logic', () => {
+    test('if true branch', () => {
+      expect(evaluate(parse('{{if(true, "yes", "no")}}'), {})).toBe('yes');
+    });
+
+    test('if false branch', () => {
+      expect(evaluate(parse('{{if(false, "yes", "no")}}'), {})).toBe('no');
+    });
+
+    test('if with expression condition', () => {
+      expect(
+        evaluate(parse('{{if(status == "draft", "Pending", "Done")}}'), { status: 'draft' }),
+      ).toBe('Pending');
+    });
+
+    test('coalesce returns first non-null', () => {
+      expect(evaluate(parse('{{coalesce(a, b, c)}}'), { a: null, b: undefined, c: 'found' })).toBe(
+        'found',
+      );
+    });
+
+    test('coalesce all null returns null', () => {
+      expect(evaluate(parse('{{coalesce(a, b)}}'), { a: null, b: null })).toBe(null);
+    });
+  });
+
+  describe('Error handling', () => {
+    test('unknown function throws', () => {
+      expect(() => evaluate(parse('{{unknown_fn()}}'), {})).toThrow('Unknown function: unknown_fn');
+    });
+  });
+});

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

@@ -0,0 +1,137 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { registerWidget, clearWidgetRegistry } from '../registry.js';
+import { GridWidget } from '../components/GridWidget.js';
+import type { WidgetProps } from '../types.js';
+import type { ComponentType } from 'react';
+
+beforeEach(() => {
+  clearWidgetRegistry();
+  registerWidget(
+    {
+      name: 'grid',
+      label: 'Grid',
+      category: 'layout',
+      schema: {},
+      binding: 'none',
+      triggers: [],
+      container: true,
+    },
+    GridWidget as unknown as ComponentType<WidgetProps>,
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  clearWidgetRegistry();
+});
+
+describe('GridWidget', () => {
+  it('renders with default 3 columns and md gap', () => {
+    const { container } = render(
+      <GridWidget
+        props={{}}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+      </GridWidget>,
+    );
+
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.className).toContain('grid');
+    expect(grid.className).toContain('grid-cols-3');
+    expect(grid.className).toContain('gap-4');
+  });
+
+  it('renders with custom columns', () => {
+    const { container } = render(
+      <GridWidget
+        props={{ columns: 4 }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+      </GridWidget>,
+    );
+
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.className).toContain('grid-cols-4');
+  });
+
+  it('renders with sm gap', () => {
+    const { container } = render(
+      <GridWidget
+        props={{ gap: 'sm' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>1</div>
+      </GridWidget>,
+    );
+
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.className).toContain('gap-2');
+  });
+
+  it('renders with lg gap', () => {
+    const { container } = render(
+      <GridWidget
+        props={{ gap: 'lg' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>1</div>
+      </GridWidget>,
+    );
+
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.className).toContain('gap-6');
+  });
+
+  it('renders children inside the grid', () => {
+    const { container } = render(
+      <GridWidget
+        props={{ columns: 2, gap: 'md' }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div data-testid="item-1">Item 1</div>
+        <div data-testid="item-2">Item 2</div>
+      </GridWidget>,
+    );
+
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.children).toHaveLength(2);
+    expect(grid.children[0].textContent).toBe('Item 1');
+    expect(grid.children[1].textContent).toBe('Item 2');
+  });
+
+  it('applies default responsive classes', () => {
+    const { container } = render(
+      <GridWidget
+        props={{ columns: 3 }}
+        bind={{ value: undefined }}
+        on={{}}
+        context={{ record: {}, model: '', mode: 'view' }}
+      >
+        <div>1</div>
+      </GridWidget>,
+    );
+
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.className).toContain('max-md:grid-cols-2');
+    expect(grid.className).toContain('max-sm:grid-cols-1');
+  });
+});