@kronor/dtv 0.2.9

package/src/views/payment-requests-initial-values.test.ts

@@ -0,0 +1,73 @@
+import { parseInitialValue } from '../framework/view-parser';
+
+describe('Payment Requests Date Range Initial Values', () => {
+    // Mock runtime with initial values similar to payment requests
+    const mockRuntime = {
+        cellRenderers: {},
+        queryTransforms: {},
+        noRowsComponents: {},
+        customFilterComponents: {},
+        initialValues: {
+            dateRangeStart: (() => {
+                const date = new Date();
+                date.setMonth(date.getMonth() - 1);
+                return date; // Return Date object for calendar component
+            })(),
+            dateRangeEnd: (() => {
+                const date = new Date();
+                return date; // Return Date object for calendar component
+            })()
+        }
+    };
+
+    it('should resolve date range start initial value correctly', () => {
+        const startRef = {
+            section: 'initialValues',
+            key: 'dateRangeStart'
+        };
+
+        const resolvedValue = parseInitialValue(startRef, mockRuntime);
+        expect(resolvedValue).toBeInstanceOf(Date); // Should be a Date object
+
+        // Calculate expected date (one month back)
+        const expectedDate = new Date();
+        expectedDate.setMonth(expectedDate.getMonth() - 1);
+
+        // Compare dates by converting to same day start (ignoring milliseconds)
+        expect(resolvedValue.toDateString()).toBe(expectedDate.toDateString());
+    }); it('should resolve date range end initial value correctly', () => {
+        const endRef = {
+            section: 'initialValues',
+            key: 'dateRangeEnd'
+        };
+
+        const resolvedValue = parseInitialValue(endRef, mockRuntime);
+        expect(resolvedValue).toBeInstanceOf(Date); // Should be a Date object
+
+        // Should be today's date
+        const today = new Date();
+        expect(resolvedValue.toDateString()).toBe(today.toDateString());
+    });
+
+    it('should have start date earlier than end date', () => {
+        const startRef = { section: 'initialValues', key: 'dateRangeStart' };
+        const endRef = { section: 'initialValues', key: 'dateRangeEnd' };
+
+        const startDate = parseInitialValue(startRef, mockRuntime);
+        const endDate = parseInitialValue(endRef, mockRuntime);
+
+        expect(startDate.getTime()).toBeLessThan(endDate.getTime());
+    });
+
+    it('should have approximately one month difference', () => {
+        const startRef = { section: 'initialValues', key: 'dateRangeStart' };
+        const endRef = { section: 'initialValues', key: 'dateRangeEnd' };
+
+        const startDate = parseInitialValue(startRef, mockRuntime);
+        const endDate = parseInitialValue(endRef, mockRuntime);
+
+        const diffInDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+        expect(diffInDays).toBeGreaterThan(27); // At least 27 days (shortest month minus a few days)
+        expect(diffInDays).toBeLessThanOrEqual(32); // At most 32 days (longest month plus a day)
+    });
+});

package/src/views/request-log/index.ts

@@ -0,0 +1,2 @@
+export { requestLogViewRuntime } from "./runtime";
+export { default as view } from "./view.json";

package/src/views/request-log/runtime.tsx

@@ -0,0 +1,47 @@
+import { CellRenderer } from "../../framework/column-definition";
+import { DateTime, FlexRow } from "../../framework/cell-renderer-components/LayoutHelpers";
+import { Runtime } from "../../framework/runtime";
+
+// Merchant cell renderer
+const merchantCellRenderer: CellRenderer = ({ data: { merchantId } }) =>
+    (({ 1: 'Boozt', 2: 'Boozt Dev' } as any)[merchantId]);
+
+// Date cell renderer
+const dateCellRenderer: CellRenderer = ({ data: { createdAt } }) =>
+    <DateTime date={createdAt} options={{ dateStyle: "long", timeStyle: "medium" }} />;
+
+// Idempotency key cell renderer
+const idempotencyKeyCellRenderer: CellRenderer = ({ data: { idempotencyKey } }) =>
+    <div className="tw:whitespace-pre-wrap">{idempotencyKey}</div>;
+
+// Namespace cell renderer
+const namespaceCellRenderer: CellRenderer = ({ data: { namespace } }) =>
+    <div className="tw:whitespace-pre-wrap">{namespace}</div>;
+
+// JSON cell renderer for request params
+const jsonCellRenderer: CellRenderer = ({ data: { requestParams } }) =>
+    <FlexRow align="center" justify="start">
+        <pre className="tw:text-left">{JSON.stringify(requestParams, null, 2)}</pre>
+    </FlexRow>;
+
+// JSON response cell renderer
+const jsonResponseCellRenderer: CellRenderer = ({ data: { responseBody } }) =>
+    <FlexRow align="center" justify="start">
+        <pre>{JSON.stringify(responseBody, null, 2)}</pre>
+    </FlexRow>;
+
+// Runtime configuration for request log view
+export const requestLogViewRuntime: Runtime = {
+    cellRenderers: {
+        merchantCellRenderer,
+        dateCellRenderer,
+        idempotencyKeyCellRenderer,
+        namespaceCellRenderer,
+        jsonCellRenderer,
+        jsonResponseCellRenderer
+    },
+    queryTransforms: {},
+    noRowsComponents: {},
+    customFilterComponents: {},
+    initialValues: {}
+};

package/src/views/request-log/view.json

@@ -0,0 +1,123 @@
+{
+    "title": "Request Logs",
+    "id": "request-logs",
+    "collectionName": "requestsLog",
+    "paginationKey": "createdAt",
+    "boolExpType": "RequestLogBoolExp",
+    "orderByType": "[RequestLogOrderBy!]",
+    "columns": [
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "merchantId"
+                }
+            ],
+            "name": "Merchant",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "merchant"
+            }
+        },
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "createdAt"
+                }
+            ],
+            "name": "Date",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "placedAt"
+            }
+        },
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "idempotencyKey"
+                }
+            ],
+            "name": "Idempotency Key",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "text"
+            }
+        },
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "namespace"
+                }
+            ],
+            "name": "Namespace",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "text"
+            }
+        },
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "requestParams"
+                }
+            ],
+            "name": "Request",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "json"
+            }
+        },
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "responseBody"
+                }
+            ],
+            "name": "Response",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "json"
+            }
+        }
+    ],
+    "filterSchema": {
+        "groups": [
+            {
+                "name": "default",
+                "label": "Default Filters"
+            }
+        ],
+        "filters": [
+            {
+                "id": "date-range",
+                "label": "Date",
+                "expression": {
+                    "type": "and",
+                    "filters": [
+                        {
+                            "type": "greaterThanOrEqual",
+                            "field": "createdAt",
+                            "value": {
+                                "type": "date"
+                            }
+                        },
+                        {
+                            "type": "lessThanOrEqual",
+                            "field": "createdAt",
+                            "value": {
+                                "type": "date"
+                            }
+                        }
+                    ]
+                },
+                "group": "default",
+                "aiGenerated": false
+            }
+        ]
+    }
+}

package/src/views/simple-test-view/index.ts

@@ -0,0 +1,3 @@
+export { simpleTestViewRuntime } from "./runtime";
+export { default as view } from "./view.json";
+export type { SimpleTestData } from "./runtime";

package/src/views/simple-test-view/runtime.tsx

@@ -0,0 +1,85 @@
+import { CellRenderer } from "../../framework/column-definition";
+import { PhoneNumberFilter } from "../../components/PhoneNumberFilter";
+import { Runtime } from "../../framework/runtime";
+
+// Define a simple data type for this view
+export type SimpleTestData = {
+    id: number;
+    testField: string;
+    amount: number;
+    email: string;
+    phone?: string;
+};
+
+// Email cell renderer that allows filtering by email
+const emailCellRenderer: CellRenderer = ({ data, updateFilterById, applyFilters }) => {
+    const handleEmailClick = () => {
+        updateFilterById('email-eq', (currentFilter: any) => {
+            return { ...currentFilter, value: data.email };
+        });
+        applyFilters();
+    };
+
+    return (
+        <button
+            className="tw:text-blue-500 tw:underline hover:tw:text-blue-700 tw:cursor-pointer"
+            onClick={handleEmailClick}
+            title={`Filter by email: ${data.email}`}
+        >
+            {data.email}
+        </button>
+    );
+};
+
+// Amount cell renderer that demonstrates using the Badge component and FlexRow layout
+const amountCellRenderer: CellRenderer = ({ data, components, createElement }) => {
+    const { Badge, FlexRow } = components;
+    const amount = data.amount;
+
+    // Determine severity based on amount value
+    const getSeverity = (amount: number) => {
+        if (amount > 250) return 'success';
+        if (amount > 200) return 'warning';
+        return 'danger';
+    };
+
+    return createElement(FlexRow, {
+        align: 'center',
+        gap: 'gap-2',
+        children: [
+            createElement(Badge, {
+                value: `$${amount}`,
+                severity: getSeverity(amount),
+                style: { fontSize: '.8rem', padding: '0.3em 1em' }
+            }),
+            amount > 200 ? '🔥' : '💰'
+        ]
+    });
+};
+
+// Runtime configuration for simple test view
+export const simpleTestViewRuntime: Runtime = {
+    cellRenderers: {
+        emailCellRenderer,
+        amountCellRenderer
+    },
+    queryTransforms: {
+        amountOffset: {
+            toQuery: (input: number) => ({ value: input + 5 })
+        },
+        keyValueTransform: {
+            toQuery: (input: any) => {
+                // Handle empty or null input
+                if (!input || input === '') {
+                    return { value: input }; // Return object with original value for empty input
+                }
+                return { field: "transformedField", value: `prefix_${input}` };
+            }
+        }
+    },
+    noRowsComponents: {},
+    customFilterComponents: {
+        PhoneNumberFilter
+    },
+    initialValues: {}
+};

package/src/views/simple-test-view/view.json

@@ -0,0 +1,191 @@
+{
+    "title": "Simple Test View",
+    "id": "simple-test-view",
+    "collectionName": "simpleTestDataCollection",
+    "paginationKey": "id",
+    "boolExpType": "SimpleTestBoolExp",
+    "orderByType": "[SimpleTestOrderBy!]",
+    "columns": [
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "testField"
+                }
+            ],
+            "name": "Test Column Header",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "text"
+            }
+        },
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "amount"
+                }
+            ],
+            "name": "Amount",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "amountCellRenderer"
+            }
+        },
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "email"
+                }
+            ],
+            "name": "Email",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "emailCellRenderer"
+            }
+        },
+        {
+            "data": [
+                {
+                    "type": "field",
+                    "path": "phone"
+                }
+            ],
+            "name": "Phone",
+            "cellRenderer": {
+                "section": "cellRenderers",
+                "key": "text"
+            }
+        }
+    ],
+    "filterSchema": {
+        "groups": [
+            {
+                "name": "default",
+                "label": "Default Filters"
+            },
+            {
+                "name": "extra",
+                "label": "Extra Filters"
+            }
+        ],
+        "filters": [
+            {
+                "id": "amount-gte",
+                "label": "Amount",
+                "expression": {
+                    "type": "greaterThanOrEqual",
+                    "field": "amount",
+                    "value": {
+                        "type": "number"
+                    },
+                    "transform": {
+                        "section": "queryTransforms",
+                        "key": "amountOffset"
+                    }
+                },
+                "group": "default",
+                "aiGenerated": false
+            },
+            {
+                "id": "test-field-eq",
+                "label": "Test Field",
+                "expression": {
+                    "type": "equals",
+                    "field": "testField",
+                    "value": {
+                        "type": "text"
+                    }
+                },
+                "group": "extra",
+                "aiGenerated": false
+            },
+            {
+                "id": "email-eq",
+                "label": "Email",
+                "expression": {
+                    "type": "equals",
+                    "field": "email",
+                    "value": {
+                        "type": "text"
+                    }
+                },
+                "group": "default",
+                "aiGenerated": false
+            },
+            {
+                "id": "phone-eq",
+                "label": "Phone",
+                "expression": {
+                    "type": "equals",
+                    "field": "phone",
+                    "value": {
+                        "type": "custom",
+                        "component": {
+                            "section": "customFilterComponents",
+                            "key": "PhoneNumberFilter"
+                        }
+                    }
+                },
+                "group": "extra",
+                "aiGenerated": false
+            },
+            {
+                "id": "test-field-kv-transform",
+                "label": "Test Field (Key-Value Transform)",
+                "expression": {
+                    "type": "equals",
+                    "field": "testField",
+                    "value": {
+                        "type": "text"
+                    },
+                    "transform": {
+                        "section": "queryTransforms",
+                        "key": "keyValueTransform"
+                    }
+                },
+                "group": "extra",
+                "aiGenerated": false
+            },
+            {
+                "id": "search-multi-fields-or",
+                "label": "Search Multiple Fields (OR)",
+                "expression": {
+                    "type": "iLike",
+                    "field": {
+                        "or": [
+                            "testField",
+                            "email"
+                        ]
+                    },
+                    "value": {
+                        "type": "text",
+                        "placeholder": "Search in test field or email..."
+                    }
+                },
+                "group": "default",
+                "aiGenerated": false
+            },
+            {
+                "id": "match-multi-fields-and",
+                "label": "Match Multiple Fields (AND)",
+                "expression": {
+                    "type": "equals",
+                    "field": {
+                        "and": [
+                            "testField",
+                            "email"
+                        ]
+                    },
+                    "value": {
+                        "type": "text",
+                        "placeholder": "Value that must match both fields..."
+                    }
+                },
+                "group": "extra",
+                "aiGenerated": false
+            }
+        ]
+    }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: []
+};

package/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.jest.json

@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "jsx": "react-jsx"
+    }
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,11 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+    base: '/portal/static/assets/table-views',
+    plugins: [
+        react(),
+        tailwindcss(),
+    ],
+});