@akinon/ai-modal-table 1.0.0

package/dist/cjs/ai-table/utils/render-mapper-fields/__tests__/index.test.js

@@ -0,0 +1,291 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = require("@testing-library/react");
+const user_event_1 = require("@testing-library/user-event");
+const React = require("react");
+const vitest_1 = require("vitest");
+const constants_1 = require("../../../constants");
+const index_1 = require("../index");
+// Mock Input to avoid theming issues in tests
+vitest_1.vi.mock('@akinon/ui-input', () => {
+    const MockInput = React.forwardRef((_a, ref) => {
+        var { value, onChange } = _a, props = __rest(_a, ["value", "onChange"]);
+        return (React.createElement("input", Object.assign({ ref: ref, type: "text", value: value || '', onChange: onChange }, props)));
+    });
+    MockInput.displayName = 'MockInput';
+    return {
+        Input: MockInput
+    };
+});
+// Mock Select to avoid theming issues in tests
+vitest_1.vi.mock('@akinon/ui-select', () => ({
+    Select: (_a) => {
+        var { value, options, onChange } = _a, props = __rest(_a, ["value", "options", "onChange"]);
+        const handleChange = React.useCallback((e) => {
+            const newValue = e.target.value;
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }, [onChange]);
+        return (React.createElement("select", Object.assign({ value: value || '', onChange: handleChange, "data-testid": "mock-select" }, props),
+            React.createElement("option", { value: "" }, "-- Select --"), options === null || options === void 0 ? void 0 :
+            options.map((opt) => (React.createElement("option", { key: opt.value, value: opt.value }, opt.label)))));
+    }
+}));
+(0, vitest_1.describe)('renderMapperRow', () => {
+    (0, vitest_1.it)('renders text input items correctly', () => {
+        var _a;
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            firstName: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: 'John'
+            }
+        };
+        const { container } = (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        const input = react_1.screen.getByDisplayValue('John');
+        (0, vitest_1.expect)(input).toBeInTheDocument();
+        (0, vitest_1.expect)(input).toHaveClass('w-40');
+        // Verify structure: container with input present
+        const divElements = container.querySelectorAll('div');
+        (0, vitest_1.expect)(divElements.length).toBeGreaterThan(0);
+        (0, vitest_1.expect)((_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement).toBeInTheDocument();
+    });
+    (0, vitest_1.it)('renders select items with options as select element', () => {
+        var _a;
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            country: {
+                type: constants_1.MAPPER_ITEM_TYPES.SELECT,
+                value: 'TR',
+                options: [
+                    { label: 'Turkey', value: 'TR' },
+                    { label: 'USA', value: 'US' }
+                ]
+            }
+        };
+        const { container } = (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        const selectElement = react_1.screen.getByTestId('mock-select');
+        (0, vitest_1.expect)(selectElement).toBeInTheDocument();
+        (0, vitest_1.expect)(selectElement.options).toHaveLength(3); // incl. "-- Select --"
+        // Verify structure: container with select present
+        const divElements = container.querySelectorAll('div');
+        (0, vitest_1.expect)(divElements.length).toBeGreaterThan(0);
+        (0, vitest_1.expect)((_a = selectElement.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement).toBeInTheDocument();
+    });
+    (0, vitest_1.it)('renders multiple items with dividers between them', () => {
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            firstName: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: 'John'
+            },
+            lastName: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: 'Doe'
+            }
+        };
+        const { container } = (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        (0, vitest_1.expect)(react_1.screen.getByDisplayValue('John')).toBeInTheDocument();
+        (0, vitest_1.expect)(react_1.screen.getByDisplayValue('Doe')).toBeInTheDocument();
+        // Check for divider (children of flex)
+        const dividers = container.querySelectorAll('.w-3.h-1.bg-ebonyClay-550');
+        (0, vitest_1.expect)(dividers.length).toBe(1); // One divider between two items
+    });
+    (0, vitest_1.it)('calls handleItemChange when text input changes', async () => {
+        const user = user_event_1.default.setup();
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            firstName: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: ''
+            }
+        };
+        (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        const input = react_1.screen.getByRole('textbox');
+        await user.type(input, 'Jane');
+        // Verify the handler was called for each character
+        (0, vitest_1.expect)(handleItemChange).toHaveBeenCalled();
+        // Verify the final call includes "Jane"
+        (0, vitest_1.expect)(handleItemChange).toHaveBeenCalledWith(vitest_1.expect.objectContaining({
+            index: 0,
+            key: 'firstName'
+        }));
+    });
+    (0, vitest_1.it)('calls handleItemChange when select value changes', async () => {
+        const user = user_event_1.default.setup();
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            country: {
+                type: constants_1.MAPPER_ITEM_TYPES.SELECT,
+                value: 'TR',
+                options: [
+                    { label: 'Turkey', value: 'TR' },
+                    { label: 'USA', value: 'US' }
+                ]
+            }
+        };
+        (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        const selectElement = react_1.screen.getByTestId('mock-select');
+        await user.selectOptions(selectElement, 'US');
+        (0, vitest_1.expect)(handleItemChange).toHaveBeenCalledWith({
+            index: 0,
+            key: 'country',
+            value: 'US'
+        });
+    });
+    (0, vitest_1.it)('handles empty mapper row', () => {
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {};
+        const { container } = (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        (0, vitest_1.expect)(container.querySelectorAll('input').length).toBe(0);
+    });
+    (0, vitest_1.it)('renders mixed item types in single row', () => {
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            firstName: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: 'John'
+            },
+            country: {
+                type: constants_1.MAPPER_ITEM_TYPES.SELECT,
+                value: 'TR',
+                options: [
+                    { label: 'Turkey', value: 'TR' },
+                    { label: 'USA', value: 'US' }
+                ]
+            }
+        };
+        const { container } = (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        (0, vitest_1.expect)(react_1.screen.getByDisplayValue('John')).toBeInTheDocument();
+        (0, vitest_1.expect)(react_1.screen.getByTestId('mock-select')).toBeInTheDocument();
+        // Check for divider between items
+        const dividers = container.querySelectorAll('.w-3.h-1.bg-ebonyClay-550');
+        (0, vitest_1.expect)(dividers.length).toBe(1);
+    });
+    (0, vitest_1.it)('passes correct index to handleItemChange', async () => {
+        const user = user_event_1.default.setup();
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            field: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: ''
+            }
+        };
+        (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 5,
+            handleItemChange
+        })));
+        const input = react_1.screen.getByRole('textbox');
+        await user.type(input, 'test');
+        (0, vitest_1.expect)(handleItemChange).toHaveBeenCalledWith(vitest_1.expect.objectContaining({
+            index: 5
+        }));
+    });
+    (0, vitest_1.it)('renders with unknown type as text input', () => {
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            field: {
+                type: 'unknown_type',
+                value: 'test'
+            }
+        };
+        (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        const input = react_1.screen.getByDisplayValue('test');
+        (0, vitest_1.expect)(input).toBeInTheDocument();
+    });
+    (0, vitest_1.it)('does not render divider after last item', () => {
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            field1: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: 'value1'
+            },
+            field2: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: 'value2'
+            },
+            field3: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: 'value3'
+            }
+        };
+        const { container } = (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 0,
+            handleItemChange
+        })));
+        // Should have 2 dividers (between 3 items)
+        const dividers = container.querySelectorAll('.w-3.h-1.bg-ebonyClay-550');
+        (0, vitest_1.expect)(dividers.length).toBe(2);
+    });
+    (0, vitest_1.it)('handles text input change correctly with multiple fields', async () => {
+        const user = user_event_1.default.setup();
+        const handleItemChange = vitest_1.vi.fn();
+        const row = {
+            field1: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: ''
+            },
+            field2: {
+                type: constants_1.MAPPER_ITEM_TYPES.TEXT,
+                value: 'value'
+            }
+        };
+        (0, react_1.render)(React.createElement("div", null, (0, index_1.renderMapperRow)({
+            row,
+            index: 2,
+            handleItemChange
+        })));
+        const inputs = react_1.screen.getAllByRole('textbox');
+        await user.type(inputs[0], 'updated');
+        (0, vitest_1.expect)(handleItemChange).toHaveBeenCalled();
+        (0, vitest_1.expect)(handleItemChange).toHaveBeenCalledWith(vitest_1.expect.objectContaining({
+            index: 2,
+            key: 'field1'
+        }));
+    });
+});

package/dist/cjs/ai-table/utils/render-mapper-fields/__tests__/index.test.tsx

@@ -0,0 +1,399 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { MapperRow } from '../../../../types';
+import { MAPPER_ITEM_TYPES } from '../../../constants';
+import { renderMapperRow } from '../index';
+
+// Mock Input to avoid theming issues in tests
+vi.mock('@akinon/ui-input', () => {
+  const MockInput = React.forwardRef(
+    ({ value, onChange, ...props }: any, ref: any) => (
+      <input
+        ref={ref}
+        type="text"
+        value={value || ''}
+        onChange={onChange}
+        {...props}
+      />
+    )
+  );
+
+  MockInput.displayName = 'MockInput';
+
+  return {
+    Input: MockInput
+  };
+});
+
+// Mock Select to avoid theming issues in tests
+vi.mock('@akinon/ui-select', () => ({
+  Select: ({ value, options, onChange, ...props }: any) => {
+    const handleChange = React.useCallback(
+      (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const newValue = e.target.value;
+        onChange?.(newValue);
+      },
+      [onChange]
+    );
+
+    return (
+      <select
+        value={value || ''}
+        onChange={handleChange}
+        data-testid="mock-select"
+        {...props}
+      >
+        <option value="">-- Select --</option>
+        {options?.map((opt: any) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    );
+  }
+}));
+
+describe('renderMapperRow', () => {
+  it('renders text input items correctly', () => {
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      firstName: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: 'John'
+      }
+    };
+
+    const { container } = render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    const input = screen.getByDisplayValue('John') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveClass('w-40');
+
+    // Verify structure: container with input present
+    const divElements = container.querySelectorAll('div');
+    expect(divElements.length).toBeGreaterThan(0);
+    expect(input.parentElement?.parentElement).toBeInTheDocument();
+  });
+
+  it('renders select items with options as select element', () => {
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      country: {
+        type: MAPPER_ITEM_TYPES.SELECT,
+        value: 'TR',
+        options: [
+          { label: 'Turkey', value: 'TR' },
+          { label: 'USA', value: 'US' }
+        ]
+      }
+    };
+
+    const { container } = render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    const selectElement = screen.getByTestId(
+      'mock-select'
+    ) as HTMLSelectElement;
+    expect(selectElement).toBeInTheDocument();
+    expect(selectElement.options).toHaveLength(3); // incl. "-- Select --"
+
+    // Verify structure: container with select present
+    const divElements = container.querySelectorAll('div');
+    expect(divElements.length).toBeGreaterThan(0);
+    expect(selectElement.parentElement?.parentElement).toBeInTheDocument();
+  });
+
+  it('renders multiple items with dividers between them', () => {
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      firstName: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: 'John'
+      },
+      lastName: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: 'Doe'
+      }
+    };
+
+    const { container } = render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    expect(screen.getByDisplayValue('John')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Doe')).toBeInTheDocument();
+
+    // Check for divider (children of flex)
+    const dividers = container.querySelectorAll('.w-3.h-1.bg-ebonyClay-550');
+    expect(dividers.length).toBe(1); // One divider between two items
+  });
+
+  it('calls handleItemChange when text input changes', async () => {
+    const user = userEvent.setup();
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      firstName: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: ''
+      }
+    };
+
+    render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    await user.type(input, 'Jane');
+
+    // Verify the handler was called for each character
+    expect(handleItemChange).toHaveBeenCalled();
+    // Verify the final call includes "Jane"
+    expect(handleItemChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        index: 0,
+        key: 'firstName'
+      })
+    );
+  });
+
+  it('calls handleItemChange when select value changes', async () => {
+    const user = userEvent.setup();
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      country: {
+        type: MAPPER_ITEM_TYPES.SELECT,
+        value: 'TR',
+        options: [
+          { label: 'Turkey', value: 'TR' },
+          { label: 'USA', value: 'US' }
+        ]
+      }
+    };
+
+    render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    const selectElement = screen.getByTestId(
+      'mock-select'
+    ) as HTMLSelectElement;
+    await user.selectOptions(selectElement, 'US');
+
+    expect(handleItemChange).toHaveBeenCalledWith({
+      index: 0,
+      key: 'country',
+      value: 'US'
+    });
+  });
+
+  it('handles empty mapper row', () => {
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {};
+
+    const { container } = render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    expect(container.querySelectorAll('input').length).toBe(0);
+  });
+
+  it('renders mixed item types in single row', () => {
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      firstName: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: 'John'
+      },
+      country: {
+        type: MAPPER_ITEM_TYPES.SELECT,
+        value: 'TR',
+        options: [
+          { label: 'Turkey', value: 'TR' },
+          { label: 'USA', value: 'US' }
+        ]
+      }
+    };
+
+    const { container } = render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    expect(screen.getByDisplayValue('John')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-select')).toBeInTheDocument();
+
+    // Check for divider between items
+    const dividers = container.querySelectorAll('.w-3.h-1.bg-ebonyClay-550');
+    expect(dividers.length).toBe(1);
+  });
+
+  it('passes correct index to handleItemChange', async () => {
+    const user = userEvent.setup();
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      field: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: ''
+      }
+    };
+
+    render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 5,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    await user.type(input, 'test');
+
+    expect(handleItemChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        index: 5
+      })
+    );
+  });
+
+  it('renders with unknown type as text input', () => {
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      field: {
+        type: 'unknown_type' as any,
+        value: 'test'
+      }
+    };
+
+    render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    const input = screen.getByDisplayValue('test');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('does not render divider after last item', () => {
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      field1: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: 'value1'
+      },
+      field2: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: 'value2'
+      },
+      field3: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: 'value3'
+      }
+    };
+
+    const { container } = render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 0,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    // Should have 2 dividers (between 3 items)
+    const dividers = container.querySelectorAll('.w-3.h-1.bg-ebonyClay-550');
+    expect(dividers.length).toBe(2);
+  });
+
+  it('handles text input change correctly with multiple fields', async () => {
+    const user = userEvent.setup();
+    const handleItemChange = vi.fn();
+    const row: MapperRow = {
+      field1: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: ''
+      },
+      field2: {
+        type: MAPPER_ITEM_TYPES.TEXT,
+        value: 'value'
+      }
+    };
+
+    render(
+      <div>
+        {renderMapperRow({
+          row,
+          index: 2,
+          handleItemChange
+        })}
+      </div>
+    );
+
+    const inputs = screen.getAllByRole('textbox');
+    await user.type(inputs[0], 'updated');
+
+    expect(handleItemChange).toHaveBeenCalled();
+    expect(handleItemChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        index: 2,
+        key: 'field1'
+      })
+    );
+  });
+});

package/dist/cjs/ai-table/utils/render-mapper-fields/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { HandleMapperItemChange, MapperRow } from '../../../types';
+type RenderMapperRow = ({ row, index, handleItemChange }: {
+    row: MapperRow;
+    index: number;
+    handleItemChange: HandleMapperItemChange;
+}) => React.ReactNode;
+export declare const renderMapperRow: RenderMapperRow;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/ai-table/utils/render-mapper-fields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ai-table/utils/render-mapper-fields/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,sBAAsB,EAEtB,SAAS,EAEV,MAAM,gBAAgB,CAAC;AA2GxB,KAAK,eAAe,GAAG,CAAC,EACtB,GAAG,EACH,KAAK,EACL,gBAAgB,EACjB,EAAE;IACD,GAAG,EAAE,SAAS,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C,KAAK,KAAK,CAAC,SAAS,CAAC;AACtB,eAAO,MAAM,eAAe,EAAE,eAoB7B,CAAC"}