@kronor/dtv 0.2.9

package/src/framework/cell-renderer-components.test.ts

@@ -0,0 +1,353 @@
+import * as React from 'react';
+import { Tag } from 'primereact/tag';
+import { CellRenderer } from './column-definition';
+import { FlexRow, FlexColumn, DateTime } from './cell-renderer-components/LayoutHelpers';
+import { CurrencyAmount } from './cell-renderer-components/CurrencyAmount';
+import { Mapping } from './cell-renderer-components/Mapping';
+import { Link } from './cell-renderer-components/Link';
+
+describe('Cell Renderer Components', () => {
+    it('should provide Badge component to cell renderers', () => {
+        // Create a test cell renderer that uses the Badge component
+        const testCellRenderer: CellRenderer = ({ data, components, createElement }) => {
+            const { Badge } = components;
+            return createElement(Badge, {
+                value: `Test: ${data.value}`,
+                severity: 'success' as any,
+                style: { fontSize: '.8rem' }
+            });
+        };
+
+        // Create mock props with the components property
+        const mockProps = {
+            data: { value: 'Hello' },
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        // Test that the cell renderer can access and use the Badge component
+        expect(() => {
+            const result = testCellRenderer(mockProps);
+            expect(result).toBeDefined();
+        }).not.toThrow();
+    });
+
+    it('should provide the correct Badge component type', () => {
+        const testCellRenderer: CellRenderer = ({ components }) => {
+            const { Badge } = components;
+            // Verify Badge is the PrimeReact Tag component
+            expect(Badge).toBe(Tag);
+            return null;
+        };
+
+        const mockProps = {
+            data: {},
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        testCellRenderer(mockProps);
+    });
+
+    it('should allow creating Badge elements with typical PrimeReact Tag props', () => {
+        const testCellRenderer: CellRenderer = ({ data, components, createElement }) => {
+            const { Badge } = components;
+
+            // Create a Badge using React.createElement (similar to JSX)
+            return createElement(Badge, {
+                value: data.status,
+                severity: 'warning' as any,
+                style: { fontSize: '0.8rem', padding: '0.3em 1em' }
+            });
+        };
+
+        const mockProps = {
+            data: { status: 'Pending' },
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        expect(() => {
+            const result = testCellRenderer(mockProps);
+            expect(result).toBeDefined();
+        }).not.toThrow();
+    });
+
+    it('should provide FlexRow and FlexColumn components to cell renderers', () => {
+        // Create a test cell renderer that uses FlexRow and FlexColumn components
+        const testCellRenderer: CellRenderer = ({ components, createElement }) => {
+            const { FlexRow, FlexColumn } = components;
+            return createElement(FlexRow, {
+                children: [
+                    createElement(FlexColumn, { children: 'Vertical Layout' }),
+                    createElement(FlexColumn, { children: 'Another Column' })
+                ]
+            });
+        };
+
+        const mockProps = {
+            data: { value: 'Layout Test' },
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        // Test that the cell renderer can access and use FlexRow/FlexColumn components
+        expect(() => {
+            const result = testCellRenderer(mockProps);
+            expect(result).toBeDefined();
+        }).not.toThrow();
+    });
+
+    it('should support flex-wrap property on FlexRow component', () => {
+        // Create a test cell renderer that uses FlexRow with wrap property
+        const testCellRenderer: CellRenderer = ({ components, createElement }) => {
+            const { FlexRow } = components;
+            return createElement(FlexRow, {
+                wrap: true,
+                children: ['Item 1', 'Item 2', 'Item 3']
+            });
+        };
+
+        const mockProps = {
+            data: { value: 'Wrap Test' },
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        // Test that FlexRow can handle wrap property
+        expect(() => {
+            const result = testCellRenderer(mockProps);
+            expect(result).toBeDefined();
+        }).not.toThrow();
+    });
+
+    it('should support different wrap values on FlexRow component', () => {
+        const wrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
+
+        wrapValues.forEach(wrapValue => {
+            const testCellRenderer: CellRenderer = ({ components, createElement }) => {
+                const { FlexRow } = components;
+                return createElement(FlexRow, {
+                    wrap: wrapValue,
+                    children: ['Test Item']
+                });
+            };
+
+            const mockProps = {
+                data: { value: `Wrap Test ${wrapValue}` },
+                setFilterState: jest.fn(),
+                applyFilters: jest.fn(),
+                updateFilterById: jest.fn(),
+                createElement: React.createElement,
+                components: {
+                    Badge: Tag,
+                    FlexRow,
+                    FlexColumn,
+                    Mapping,
+                    DateTime,
+                    CurrencyAmount,
+                    Link
+                },
+                currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+            };
+
+            expect(() => {
+                const result = testCellRenderer(mockProps);
+                expect(result).toBeDefined();
+            }).not.toThrow();
+        });
+    });
+
+    it('should provide Mapping component to cell renderers', () => {
+        const testCellRenderer: CellRenderer = ({ data, components, createElement }) => {
+            const { Mapping } = components;
+            const statusMap = { 'pending': 'Pending', 'approved': 'Approved', 'rejected': 'Rejected' };
+            return createElement(Mapping, { value: data.status, map: statusMap });
+        };
+
+        const mockProps = {
+            data: { status: 'pending' },
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        // Test that the cell renderer can access and use the Mapping component
+        expect(() => {
+            const result = testCellRenderer(mockProps);
+            expect(result).toBeDefined();
+        }).not.toThrow();
+    });
+
+    it('should provide DateTime component to cell renderers', () => {
+        const testCellRenderer: CellRenderer = ({ data, components, createElement }) => {
+            const { DateTime } = components;
+            return createElement(DateTime, { date: data.createdAt, options: { dateStyle: 'short' } });
+        };
+
+        const mockProps = {
+            data: { createdAt: '2023-01-01T12:00:00Z' },
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        // Test that the cell renderer can access and use the DateTime component
+        expect(() => {
+            const result = testCellRenderer(mockProps);
+            expect(result).toBeDefined();
+        }).not.toThrow();
+    });
+
+    it('should provide CurrencyAmount component to cell renderers', () => {
+        const testCellRenderer: CellRenderer = ({ data, components, createElement }) => {
+            const { CurrencyAmount } = components;
+            return createElement(CurrencyAmount, {
+                amount: data.amount,
+                currency: data.currency || 'USD',
+                options: { minimumFractionDigits: 2 }
+            });
+        };
+
+        const mockProps = {
+            data: { amount: 12345, currency: 'EUR' },
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        // Test that the cell renderer can access and use the CurrencyAmount component
+        expect(() => {
+            const result = testCellRenderer(mockProps);
+            expect(result).toBeDefined();
+        }).not.toThrow();
+    });
+
+    it('should provide Link component to cell renderers', () => {
+        const testCellRenderer: CellRenderer = ({ data, components, createElement }) => {
+            const { Link } = components;
+            return createElement(Link, {
+                text: data.linkText || 'Click here',
+                href: data.url || '#',
+                className: 'custom-link-class'
+            });
+        };
+
+        const mockProps = {
+            data: { linkText: 'Visit Example', url: 'https://example.com' },
+            setFilterState: jest.fn(),
+            applyFilters: jest.fn(),
+            updateFilterById: jest.fn(),
+            createElement: React.createElement,
+            components: {
+                Badge: Tag,
+                FlexRow,
+                FlexColumn,
+                Mapping,
+                DateTime,
+                CurrencyAmount,
+                Link
+            },
+            currency: { majorToMinor: jest.fn(), minorToMajor: jest.fn() }
+        };
+
+        // Test that the cell renderer can access and use the Link component
+        expect(() => {
+            const result = testCellRenderer(mockProps);
+            expect(result).toBeDefined();
+        }).not.toThrow();
+    });
+});

package/src/framework/column-definition.tsx

@@ -0,0 +1,85 @@
+import { ReactNode, createElement } from "react";
+import { FlexRow, FlexColumn, DateTime } from "./cell-renderer-components/LayoutHelpers";
+import { CurrencyAmount } from './cell-renderer-components/CurrencyAmount';
+import { majorToMinor, minorToMajor } from './currency';
+import { Mapping } from "./cell-renderer-components/Mapping";
+import { Link } from "./cell-renderer-components/Link";
+import { Tag } from 'primereact/tag';
+import { FilterState } from "./state";
+import { FilterId } from "./filters";
+
+export type CellRendererProps = {
+    data: Record<string, any>;
+    setFilterState: (updater: (currentState: FilterState) => FilterState) => void; // Function to update filter state
+    applyFilters: () => void; // Function to trigger data fetch with current filter state
+    updateFilterById: (filterId: FilterId, updater: (currentValue: any) => any) => void; // Narrow helper to update a specific filter by id
+    createElement: typeof createElement; // React createElement function
+    components: {
+        Badge: typeof Tag; // PrimeReact Tag component exposed as Badge for user convenience
+        FlexRow: typeof FlexRow; // Horizontal layout component
+        FlexColumn: typeof FlexColumn; // Vertical layout component
+        Mapping: typeof Mapping; // Generic mapping component for displaying mapped values
+        DateTime: typeof DateTime; // Date formatting component
+        CurrencyAmount: typeof CurrencyAmount; // Currency formatting component
+        Link: typeof Link; // Link component for creating hyperlinks
+    };
+    currency: {
+        minorToMajor: typeof minorToMajor;
+        majorToMinor: typeof majorToMinor;
+    }
+};
+
+export type CellRenderer = (props: CellRendererProps) => ReactNode;
+
+export type OrderByConfig = {
+    key: string; // data key to order by
+    direction: 'ASC' | 'DESC';
+};
+
+// Tagged ADT for QueryConfig: either a path or a config group
+export type Field = {
+    type: 'field';
+    path: string; // dot-separated data path
+};
+
+export type QueryConfig = {
+    field: string
+    path?: string; // path for querying inside JSON columns
+    orderBy?: OrderByConfig | OrderByConfig[];
+    limit?: number;
+}
+
+export type QueryConfigs = {
+    type: 'queryConfigs'
+    configs: QueryConfig[]
+};
+
+// Field alias support - wraps any FieldQuery with an alias name
+export type FieldAlias = {
+    type: 'fieldAlias';
+    alias: string; // the alias name to use in GraphQL
+    field: FieldQuery; // the underlying field query
+};
+
+export type FieldQuery = Field | QueryConfigs | FieldAlias;
+
+// Helper to create a Field
+export function field(path: string): FieldQuery {
+    return { type: 'field', path };
+}
+
+// Helper to create QueryConfigs
+export function queryConfigs(configs: QueryConfig[]): FieldQuery {
+    return { type: 'queryConfigs', configs };
+}
+
+// Helper to create a FieldAlias
+export function fieldAlias(alias: string, fieldQuery: FieldQuery): FieldQuery {
+    return { type: 'fieldAlias', alias, field: fieldQuery };
+}
+
+export type ColumnDefinition = {
+    data: FieldQuery[];
+    name: string; // column display name
+    cellRenderer: CellRenderer;
+};

package/src/framework/currency.test.ts

@@ -0,0 +1,46 @@
+import { majorToMinor, minorToMajor, getCurrencyMajorUnitScale } from './currency';
+
+describe('currency unit conversion', () => {
+    it('converts USD major to minor and back (2 decimals)', () => {
+        const scale = getCurrencyMajorUnitScale('USD');
+        expect(scale).toBe(100);
+        const minor = majorToMinor(12.34, 'USD');
+        expect(minor).toBe(1234);
+        const major = minorToMajor(minor, 'USD');
+        expect(major).toBeCloseTo(12.34);
+    });
+
+    it('handles rounding correctly (USD)', () => {
+        // 0.015 * 100 = 1.5 -> rounds to 2 cents
+        const minor = majorToMinor(0.015, 'USD');
+        expect(minor).toBe(2);
+        expect(minorToMajor(minor, 'USD')).toBeCloseTo(0.02);
+    });
+
+    it('supports zero-decimal currency (JPY)', () => {
+        const scale = getCurrencyMajorUnitScale('JPY');
+        expect(scale).toBe(1);
+        const minor = majorToMinor(1234, 'JPY');
+        expect(minor).toBe(1234);
+        const major = minorToMajor(minor, 'JPY');
+        expect(major).toBe(1234);
+    });
+
+    it('supports three-decimal currency (KWD)', () => {
+        const scale = getCurrencyMajorUnitScale('KWD');
+        expect(scale).toBe(1000);
+        const minor = majorToMinor(1.234, 'KWD');
+        expect(minor).toBe(1234);
+        const major = minorToMajor(minor, 'KWD');
+        expect(major).toBeCloseTo(1.234);
+    });
+
+    it('throws on non-finite major', () => {
+        expect(() => majorToMinor(Number.NaN, 'USD')).toThrow();
+        expect(() => majorToMinor(Number.POSITIVE_INFINITY, 'USD')).toThrow();
+    });
+
+    it('throws on non-integer minor', () => {
+        expect(() => minorToMajor(12.34 as unknown as number, 'USD')).toThrow();
+    });
+});

package/src/framework/currency.ts

@@ -0,0 +1,62 @@
+// Currency helper utilities extracted from the former Currency component file.
+// These functions provide locale resolution, fraction digit discovery, and
+// conversion helpers between major (display) and minor (integer) currency units.
+
+// Cache for currency fraction digit lookups
+const currencyFractionDigitCache: Map<string, number> = new Map();
+
+/**
+ * Resolve a locale to use for currency formatting.
+ * Priority:
+ * 1. Explicitly provided locale argument
+ * 2. navigator.language (browser default)
+ * 3. First entry in navigator.languages
+ * 4. undefined (lets Intl use implementation default)
+ */
+export function resolveLocale(locale?: string): string | undefined {
+    if (locale) return locale;
+    if (typeof navigator !== 'undefined') {
+        const lang = (navigator as any).language || (Array.isArray((navigator as any).languages) && (navigator as any).languages[0]);
+        return typeof lang === 'string' ? lang : undefined;
+    }
+    return undefined;
+}
+
+export function getCurrencyFractionDigits(currency: string, locale: string | undefined = undefined): number {
+    const code = currency.toUpperCase();
+    if (currencyFractionDigitCache.has(code)) return currencyFractionDigitCache.get(code)!;
+    try {
+        const { maximumFractionDigits } = new Intl.NumberFormat(locale, { style: 'currency', currency: code }).resolvedOptions();
+        const value: number = typeof maximumFractionDigits === 'number' ? maximumFractionDigits : 2;
+        currencyFractionDigitCache.set(code, value);
+        return value;
+    } catch {
+        currencyFractionDigitCache.set(code, 2);
+        return 2;
+    }
+}
+
+export function getCurrencyMajorUnitScale(currency: string, locale: string | undefined = undefined): number {
+    return Math.pow(10, getCurrencyFractionDigits(currency, locale));
+}
+
+export function majorToMinor(major: number, currency: string, locale?: string): number {
+    if (typeof major !== 'number' || !isFinite(major)) throw new Error('major must be a finite number');
+    const scale = getCurrencyMajorUnitScale(currency, locale);
+    // Use rounding to nearest minor unit to avoid FP drift
+    return Math.round(major * scale);
+}
+
+export function minorToMajor(minor: number, currency: string, locale?: string): number {
+    if (typeof minor !== 'number' || !Number.isInteger(minor)) throw new Error('minor must be an integer number of minor units');
+    const scale = getCurrencyMajorUnitScale(currency, locale);
+    return minor / scale;
+}
+
+export default {
+    resolveLocale,
+    getCurrencyFractionDigits,
+    getCurrencyMajorUnitScale,
+    majorToMinor,
+    minorToMajor
+};

package/src/framework/data.staticConditions.test.ts

@@ -0,0 +1,46 @@
+import { fetchData } from './data';
+import { View } from './view';
+import { ColumnDefinition } from './column-definition';
+import { FilterSchemasAndGroups } from './filters';
+
+// We only test merging logic; GraphQL call will be mocked.
+
+describe('fetchData staticConditions merging', () => {
+    const mockClient: any = {
+        request: jest.fn()
+    };
+    let capturedVariables: any = null;
+    const requestSpy = mockClient.request.mockImplementation((_query: string, _vars: any) => {
+        capturedVariables = _vars;
+        return Promise.resolve({ testCollection: [] });
+    });
+
+    const view: View = {
+        title: 'Test',
+        id: 'test',
+        collectionName: 'testCollection',
+        columnDefinitions: [{ data: [{ type: 'field', path: 'id' }] } as ColumnDefinition],
+        filterSchema: { groups: [], filters: [] } as FilterSchemasAndGroups,
+        boolExpType: 'BoolExp',
+        orderByType: '[OrderBy!]',
+        paginationKey: 'id',
+        staticConditions: [{ status: { _eq: 'ACTIVE' } }, { deleted_at: { _is_null: true } }]
+    };
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('merges staticConditions when no user filters', async () => {
+        const result = await fetchData({ client: mockClient, view, query: 'query', filterState: new Map(), rows: 10, cursor: null });
+        expect(requestSpy).toHaveBeenCalled();
+        expect(capturedVariables.conditions).toEqual({ _and: [{}, { status: { _eq: 'ACTIVE' } }, { deleted_at: { _is_null: true } }] });
+        expect(result.rows).toEqual([]);
+    });
+
+    it('merges pagination condition efficiently by appending', async () => {
+        await fetchData({ client: mockClient, view, query: 'query', filterState: new Map(), rows: 10, cursor: 50 });
+        expect(capturedVariables.conditions._and.length).toBe(4); // {}, two static, pagination
+        expect(capturedVariables.conditions._and[3]).toEqual({ id: { _lt: 50 } });
+    });
+});