@akinon/ai-modal-table 1.0.0

package/dist/esm/ai-table/constants/index.js

@@ -0,0 +1,16 @@
+export const FILTER_TYPES = {
+    INPUT: 'text'
+};
+export const DEBOUNCE_DELAY = 300;
+export const DEFAULT_PAGE_SIZE = 20;
+export const DEFAULT_CURRENT_PAGE = 1;
+export const PAGE_SIZE_OPTIONS = [20, 50, 100, 250].map(item => ({
+    label: item,
+    value: item
+}));
+export const DEFAULT_ROW_KEY = 'pk';
+export const IS_EDITING_INITIAL_VALUE = null;
+export const MAPPER_ITEM_TYPES = {
+    SELECT: 'select',
+    TEXT: 'text'
+};

package/dist/esm/ai-table/i18n/index.d.ts

@@ -0,0 +1,3 @@
+import { type AkilocaleInstance } from '@akinon/akilocale';
+export declare const i18n: AkilocaleInstance;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/ai-table/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/i18n/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAKtE,eAAO,MAAM,IAAI,EAAE,iBAOjB,CAAC"}

package/dist/esm/ai-table/i18n/index.js

@@ -0,0 +1,11 @@
+import { Akilocale } from '@akinon/akilocale';
+import en from './translations/en';
+import tr from './translations/tr';
+export const i18n = Akilocale.createInstance({
+    debug: false,
+    fallbackLng: 'en',
+    translations: {
+        en,
+        tr
+    }
+});

package/dist/esm/ai-table/i18n/translations/en.d.ts

@@ -0,0 +1,8 @@
+declare const translations: {
+    readonly 'show.value': "Show Value";
+    readonly 'filter.no.match': "No matching results found";
+    readonly 'expand.all': "Expand All";
+    readonly 'collapse.all': "Collapse All";
+};
+export default translations;
+//# sourceMappingURL=en.d.ts.map

package/dist/esm/ai-table/i18n/translations/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../../src/ai-table/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;CAKR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/esm/ai-table/i18n/translations/en.js

@@ -0,0 +1,7 @@
+const translations = {
+    'show.value': 'Show Value',
+    'filter.no.match': 'No matching results found',
+    'expand.all': 'Expand All',
+    'collapse.all': 'Collapse All'
+};
+export default translations;

package/dist/esm/ai-table/i18n/translations/tr.d.ts

@@ -0,0 +1,8 @@
+declare const translations: {
+    readonly 'show.value': "Değer Göster";
+    readonly 'filter.no.match': "Filtreye uygun sonuç bulunamadı";
+    readonly 'expand.all': "Tümünü Genişlet";
+    readonly 'collapse.all': "Tümünü Daralt";
+};
+export default translations;
+//# sourceMappingURL=tr.d.ts.map

package/dist/esm/ai-table/i18n/translations/tr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../../src/ai-table/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;CAKR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/esm/ai-table/i18n/translations/tr.js

@@ -0,0 +1,7 @@
+const translations = {
+    'show.value': 'Değer Göster',
+    'filter.no.match': 'Filtreye uygun sonuç bulunamadı',
+    'expand.all': 'Tümünü Genişlet',
+    'collapse.all': 'Tümünü Daralt'
+};
+export default translations;

package/dist/esm/ai-table/index.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { AiTableProps } from '../types';
+export declare const AiTable: ({ columns, customActionButtons, data, editDataIndexes, filters, isLoading, isSubmitting, onChangeSelectedRows, onEdit, onSubmitAllData, onSubmitSelectedData, rowKey, selectedRows, submitAllLabel, submitSelectedLabel, mapperConfig, tableClassName }: AiTableProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/ai-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ai-table/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAe7C,eAAO,MAAM,OAAO,GAAI,yPAkBrB,YAAY,sBA4Hd,CAAC"}

package/dist/esm/ai-table/index.js

@@ -0,0 +1,67 @@
+import { AiSpinner } from '@akinon/ui-ai-spinner';
+import { Button } from '@akinon/ui-button';
+import { Flex } from '@akinon/ui-layout';
+import * as React from 'react';
+import { TableContent } from './components/content';
+import { TableFilters } from './components/filters';
+import { TableFooter } from './components/footer';
+import { TablePagination } from './components/pagination';
+import { DEFAULT_CURRENT_PAGE, DEFAULT_PAGE_SIZE, DEFAULT_ROW_KEY } from './constants';
+import { i18n } from './i18n';
+import { filterDataByFilters, paginateData } from './utils/data-format';
+const { t } = i18n;
+export const AiTable = ({ columns = [], customActionButtons, data = [], editDataIndexes, filters = [], isLoading, isSubmitting, onChangeSelectedRows, onEdit, onSubmitAllData, onSubmitSelectedData, rowKey = DEFAULT_ROW_KEY, selectedRows, submitAllLabel, submitSelectedLabel, mapperConfig, tableClassName }) => {
+    const [currentPage, setCurrentPage] = React.useState(DEFAULT_CURRENT_PAGE);
+    const [pageSize, setPageSize] = React.useState(DEFAULT_PAGE_SIZE);
+    const [filterValues, setFilterValues] = React.useState({});
+    const [expandedRows, setExpandedRows] = React.useState([]);
+    const hasMapper = !!mapperConfig;
+    const filteredData = React.useMemo(() => {
+        return filterDataByFilters(data, filterValues);
+    }, [data, filterValues]);
+    const paginatedData = React.useMemo(() => {
+        return paginateData({ currentPage, data: filteredData, pageSize });
+    }, [filteredData, currentPage, pageSize]);
+    const handleFilterChange = (key, value) => {
+        if (currentPage !== DEFAULT_CURRENT_PAGE) {
+            setCurrentPage(DEFAULT_CURRENT_PAGE);
+        }
+        setFilterValues(prev => (Object.assign(Object.assign({}, prev), { [key]: value })));
+    };
+    const handleToggleSelection = React.useCallback((rowId) => {
+        const newSelectedRows = selectedRows.includes(rowId)
+            ? selectedRows.filter(id => id !== rowId)
+            : [...selectedRows, rowId];
+        onChangeSelectedRows(newSelectedRows);
+    }, [selectedRows, onChangeSelectedRows]);
+    const handlePageChange = (page) => {
+        setCurrentPage(page);
+    };
+    const handlePageSizeChange = (size) => {
+        setPageSize(size);
+    };
+    const handleToggleExpand = React.useCallback((rowId) => {
+        setExpandedRows(prev => prev.includes(rowId) ? prev.filter(id => id !== rowId) : [...prev, rowId]);
+    }, []);
+    const handleExpandAll = React.useCallback(() => {
+        const allRowIds = data.map(row => row[rowKey]);
+        setExpandedRows(allRowIds);
+    }, [data, rowKey]);
+    const handleCollapseAll = React.useCallback(() => {
+        setExpandedRows([]);
+    }, []);
+    if (isLoading) {
+        return (React.createElement("div", { className: "w-full h-80" },
+            React.createElement(AiSpinner, null)));
+    }
+    return (React.createElement(Flex, { gap: 10, vertical: true, className: tableClassName },
+        React.createElement(Flex, { justify: "space-between", align: "center" },
+            React.createElement(Flex, { align: "center", gap: 22 },
+                React.createElement(TableFilters, { filters: filters, filterValues: filterValues, onFilterChange: handleFilterChange }),
+                hasMapper && (React.createElement(Flex, { gap: 8 },
+                    React.createElement(Button, { size: "small", onClick: handleExpandAll }, t('expand.all')),
+                    React.createElement(Button, { size: "small", onClick: handleCollapseAll }, t('collapse.all'))))),
+            React.createElement(TablePagination, { currentPage: currentPage, onPageChange: handlePageChange, onPageSizeChange: handlePageSizeChange, pageSize: pageSize, total: filteredData.length })),
+        React.createElement(TableContent, { columns: columns, customActionButtons: customActionButtons, data: paginatedData, editDataIndexes: editDataIndexes, expandedRows: expandedRows, onEdit: onEdit, onToggleExpand: handleToggleExpand, onToggleSelection: handleToggleSelection, rowKey: rowKey, selectedRows: selectedRows, mapperConfig: mapperConfig }),
+        React.createElement(TableFooter, { isSubmitting: isSubmitting, selectedCount: selectedRows.length, submitAllLabel: submitAllLabel, submitSelectedLabel: submitSelectedLabel, onSubmitAll: onSubmitAllData, onSubmitSelected: onSubmitSelectedData })));
+};

package/dist/esm/ai-table/utils/data-format/__tests__/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/esm/ai-table/utils/data-format/__tests__/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../../../../src/ai-table/utils/data-format/__tests__/index.test.ts"],"names":[],"mappings":""}

package/dist/esm/ai-table/utils/data-format/__tests__/index.test.js

@@ -0,0 +1,144 @@
+import { describe, expect, it } from 'vitest';
+import { filterDataByFilters, paginateData } from '../index';
+describe('filterDataByFilters', () => {
+    const mockData = [
+        { id: 1, name: 'Ali', category: 'Electronics' },
+        { id: 2, name: 'Ayşe', category: 'Clothing' },
+        { id: 3, name: 'Mehmet', category: 'Electronics' }
+    ];
+    it('should return all data when filter values are empty', () => {
+        const result = filterDataByFilters(mockData, {});
+        expect(result).toEqual(mockData);
+    });
+    it('should return all data when filter values is null or undefined', () => {
+        const result1 = filterDataByFilters(mockData, {});
+        expect(result1).toEqual(mockData);
+    });
+    it('should filter data by single field', () => {
+        const result = filterDataByFilters(mockData, { category: 'Electronics' });
+        expect(result).toHaveLength(2);
+        expect(result).toEqual([
+            { id: 1, name: 'Ali', category: 'Electronics' },
+            { id: 3, name: 'Mehmet', category: 'Electronics' }
+        ]);
+    });
+    it('should filter data by multiple fields', () => {
+        const result = filterDataByFilters(mockData, {
+            category: 'Electronics',
+            name: 'Ali'
+        });
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ id: 1, name: 'Ali', category: 'Electronics' });
+    });
+    it('should be case insensitive', () => {
+        const result = filterDataByFilters(mockData, { category: 'electronics' });
+        expect(result).toHaveLength(2);
+    });
+    it('should handle Turkish characters correctly', () => {
+        const turkishData = [
+            { id: 1, name: 'Çağlar' },
+            { id: 2, name: 'Şahan' },
+            { id: 3, name: 'Züleyha' }
+        ];
+        const result = filterDataByFilters(turkishData, { name: 'çağ' });
+        expect(result).toHaveLength(1);
+        expect(result[0].name).toBe('Çağlar');
+    });
+    it('should ignore empty string filter values', () => {
+        const result = filterDataByFilters(mockData, {
+            category: 'Electronics',
+            name: ''
+        });
+        expect(result).toHaveLength(2);
+    });
+    it('should ignore whitespace-only filter values', () => {
+        const result = filterDataByFilters(mockData, {
+            category: 'Electronics',
+            name: '   '
+        });
+        expect(result).toHaveLength(2);
+    });
+    it('should handle nested property paths', () => {
+        const nestedData = [
+            { id: 1, user: { name: 'Ali', role: 'admin' } },
+            { id: 2, user: { name: 'Ayşe', role: 'user' } }
+        ];
+        const result = filterDataByFilters(nestedData, { 'user.name': 'Ali' });
+        expect(result).toHaveLength(1);
+        expect(result[0].id).toBe(1);
+    });
+    it('should return empty array when no matches found', () => {
+        const result = filterDataByFilters(mockData, { name: 'Nonexistent' });
+        expect(result).toHaveLength(0);
+    });
+});
+describe('paginateData', () => {
+    const mockData = Array.from({ length: 25 }, (_, i) => ({
+        id: i + 1,
+        title: `Item ${i + 1}`
+    }));
+    it('should return first page correctly', () => {
+        const result = paginateData({
+            data: mockData,
+            currentPage: 1,
+            pageSize: 10
+        });
+        expect(result).toHaveLength(10);
+        expect(result[0].id).toBe(1);
+        expect(result[9].id).toBe(10);
+    });
+    it('should return second page correctly', () => {
+        const result = paginateData({
+            data: mockData,
+            currentPage: 2,
+            pageSize: 10
+        });
+        expect(result).toHaveLength(10);
+        expect(result[0].id).toBe(11);
+        expect(result[9].id).toBe(20);
+    });
+    it('should return last page with remaining items', () => {
+        const result = paginateData({
+            data: mockData,
+            currentPage: 3,
+            pageSize: 10
+        });
+        expect(result).toHaveLength(5);
+        expect(result[0].id).toBe(21);
+        expect(result[4].id).toBe(25);
+    });
+    it('should return empty array when page is beyond data length', () => {
+        const result = paginateData({
+            data: mockData,
+            currentPage: 10,
+            pageSize: 10
+        });
+        expect(result).toHaveLength(0);
+    });
+    it('should handle single item per page', () => {
+        const result = paginateData({
+            data: mockData,
+            currentPage: 1,
+            pageSize: 1
+        });
+        expect(result).toHaveLength(1);
+        expect(result[0].id).toBe(1);
+    });
+    it('should handle data length less than page size', () => {
+        const smallData = mockData.slice(0, 5);
+        const result = paginateData({
+            data: smallData,
+            currentPage: 1,
+            pageSize: 10
+        });
+        expect(result).toHaveLength(5);
+    });
+    it('should return empty array for empty data', () => {
+        const result = paginateData({
+            data: [],
+            currentPage: 1,
+            pageSize: 10
+        });
+        expect(result).toHaveLength(0);
+    });
+});

package/dist/esm/ai-table/utils/data-format/__tests__/index.test.ts

@@ -0,0 +1,184 @@
+import { describe, expect, it } from 'vitest';
+
+import { filterDataByFilters, paginateData } from '../index';
+
+describe('filterDataByFilters', () => {
+  const mockData = [
+    { id: 1, name: 'Ali', category: 'Electronics' },
+    { id: 2, name: 'Ayşe', category: 'Clothing' },
+    { id: 3, name: 'Mehmet', category: 'Electronics' }
+  ];
+
+  it('should return all data when filter values are empty', () => {
+    const result = filterDataByFilters(mockData, {});
+
+    expect(result).toEqual(mockData);
+  });
+
+  it('should return all data when filter values is null or undefined', () => {
+    const result1 = filterDataByFilters(mockData, {});
+
+    expect(result1).toEqual(mockData);
+  });
+
+  it('should filter data by single field', () => {
+    const result = filterDataByFilters(mockData, { category: 'Electronics' });
+
+    expect(result).toHaveLength(2);
+    expect(result).toEqual([
+      { id: 1, name: 'Ali', category: 'Electronics' },
+      { id: 3, name: 'Mehmet', category: 'Electronics' }
+    ]);
+  });
+
+  it('should filter data by multiple fields', () => {
+    const result = filterDataByFilters(mockData, {
+      category: 'Electronics',
+      name: 'Ali'
+    });
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({ id: 1, name: 'Ali', category: 'Electronics' });
+  });
+
+  it('should be case insensitive', () => {
+    const result = filterDataByFilters(mockData, { category: 'electronics' });
+
+    expect(result).toHaveLength(2);
+  });
+
+  it('should handle Turkish characters correctly', () => {
+    const turkishData = [
+      { id: 1, name: 'Çağlar' },
+      { id: 2, name: 'Şahan' },
+      { id: 3, name: 'Züleyha' }
+    ];
+
+    const result = filterDataByFilters(turkishData, { name: 'çağ' });
+
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('Çağlar');
+  });
+
+  it('should ignore empty string filter values', () => {
+    const result = filterDataByFilters(mockData, {
+      category: 'Electronics',
+      name: ''
+    });
+
+    expect(result).toHaveLength(2);
+  });
+
+  it('should ignore whitespace-only filter values', () => {
+    const result = filterDataByFilters(mockData, {
+      category: 'Electronics',
+      name: '   '
+    });
+
+    expect(result).toHaveLength(2);
+  });
+
+  it('should handle nested property paths', () => {
+    const nestedData = [
+      { id: 1, user: { name: 'Ali', role: 'admin' } },
+      { id: 2, user: { name: 'Ayşe', role: 'user' } }
+    ];
+
+    const result = filterDataByFilters(nestedData, { 'user.name': 'Ali' });
+
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe(1);
+  });
+
+  it('should return empty array when no matches found', () => {
+    const result = filterDataByFilters(mockData, { name: 'Nonexistent' });
+
+    expect(result).toHaveLength(0);
+  });
+});
+
+describe('paginateData', () => {
+  const mockData = Array.from({ length: 25 }, (_, i) => ({
+    id: i + 1,
+    title: `Item ${i + 1}`
+  }));
+
+  it('should return first page correctly', () => {
+    const result = paginateData({
+      data: mockData,
+      currentPage: 1,
+      pageSize: 10
+    });
+
+    expect(result).toHaveLength(10);
+    expect(result[0].id).toBe(1);
+    expect(result[9].id).toBe(10);
+  });
+
+  it('should return second page correctly', () => {
+    const result = paginateData({
+      data: mockData,
+      currentPage: 2,
+      pageSize: 10
+    });
+
+    expect(result).toHaveLength(10);
+    expect(result[0].id).toBe(11);
+    expect(result[9].id).toBe(20);
+  });
+
+  it('should return last page with remaining items', () => {
+    const result = paginateData({
+      data: mockData,
+      currentPage: 3,
+      pageSize: 10
+    });
+
+    expect(result).toHaveLength(5);
+    expect(result[0].id).toBe(21);
+    expect(result[4].id).toBe(25);
+  });
+
+  it('should return empty array when page is beyond data length', () => {
+    const result = paginateData({
+      data: mockData,
+      currentPage: 10,
+      pageSize: 10
+    });
+
+    expect(result).toHaveLength(0);
+  });
+
+  it('should handle single item per page', () => {
+    const result = paginateData({
+      data: mockData,
+      currentPage: 1,
+      pageSize: 1
+    });
+
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe(1);
+  });
+
+  it('should handle data length less than page size', () => {
+    const smallData = mockData.slice(0, 5);
+
+    const result = paginateData({
+      data: smallData,
+      currentPage: 1,
+      pageSize: 10
+    });
+
+    expect(result).toHaveLength(5);
+  });
+
+  it('should return empty array for empty data', () => {
+    const result = paginateData({
+      data: [],
+      currentPage: 1,
+      pageSize: 10
+    });
+
+    expect(result).toHaveLength(0);
+  });
+});

package/dist/esm/ai-table/utils/data-format/index.d.ts

@@ -0,0 +1,7 @@
+export declare const filterDataByFilters: (data: Record<string, any>[], filterValues: Record<string, string>) => Record<string, any>[];
+export declare const paginateData: ({ currentPage, data, pageSize }: {
+    data: Record<string, any>[];
+    currentPage: number;
+    pageSize: number;
+}) => Record<string, any>[];
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/ai-table/utils/data-format/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ai-table/utils/data-format/index.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAC3B,cAAc,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,0BAgBrC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,iCAI1B;IACD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,0BAIA,CAAC"}

package/dist/esm/ai-table/utils/data-format/index.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { get } from 'lodash-es';
+const includesMultiLocale = (sourceText, searchText) => {
+    const locale1 = 'tr-TR';
+    const locale2 = 'en-US';
+    return (sourceText
+        .toLocaleLowerCase(locale1)
+        .includes(searchText.toLocaleLowerCase(locale1)) ||
+        sourceText
+            .toLocaleLowerCase(locale2)
+            .includes(searchText.toLocaleLowerCase(locale2)) ||
+        // Additional cross-locale matching for better Turkish character handling
+        sourceText
+            .toLocaleLowerCase(locale1)
+            .includes(searchText.toLocaleLowerCase(locale2)) ||
+        sourceText
+            .toLocaleLowerCase(locale2)
+            .includes(searchText.toLocaleLowerCase(locale1)));
+};
+export const filterDataByFilters = (data, filterValues) => {
+    if (!filterValues || Object.keys(filterValues).length === 0) {
+        return data;
+    }
+    return data.filter(item => {
+        return Object.entries(filterValues).every(([dataIndex, filterValue]) => {
+            if (!filterValue || filterValue.trim() === '') {
+                return true;
+            }
+            const itemValue = get(item, dataIndex, '');
+            return includesMultiLocale(String(itemValue), filterValue.trim());
+        });
+    });
+};
+export const paginateData = ({ currentPage, data, pageSize }) => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return data.slice(startIndex, endIndex);
+};

package/dist/esm/ai-table/utils/render-mapper-fields/__tests__/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/esm/ai-table/utils/render-mapper-fields/__tests__/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../../../../src/ai-table/utils/render-mapper-fields/__tests__/index.test.tsx"],"names":[],"mappings":""}