ywana-core8 0.1.75 → 0.1.76

package/table2.test.js

@@ -0,0 +1,454 @@
+import React from 'react'
+import { DataTable2 } from './table2'
+
+// Pruebas unitarias para el componente DataTable2 mejorado
+describe('Enhanced DataTable2 Component', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+    const mockText = jest.fn()
+    const mockCheckBox = jest.fn()
+    const mockTextField = jest.fn()
+    const mockDropDown = jest.fn()
+    const mockEmptyMessage = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        
+        // Mock de componentes
+        jest.doMock('./icon', () => ({ Icon: mockIcon }))
+        jest.doMock('./text', () => ({ Text: mockText }))
+        jest.doMock('./checkbox', () => ({ CheckBox: mockCheckBox }))
+        jest.doMock('./textfield', () => ({ TextField: mockTextField, DropDown: mockDropDown }))
+        jest.doMock('../widgets/empty/EmptyMessage', () => ({ EmptyMessage: mockEmptyMessage }))
+        
+        // Mock de console.warn
+        jest.spyOn(console, 'warn').mockImplementation(() => {})
+        
+        // Mock de navigator.clipboard
+        global.navigator = {
+            clipboard: {
+                writeText: jest.fn().mockResolvedValue(undefined)
+            },
+            userLanguage: 'en-US',
+            language: 'en-US'
+        }
+
+        // Mock de URL.createObjectURL
+        global.URL = {
+            createObjectURL: jest.fn().mockReturnValue('mock-url'),
+            revokeObjectURL: jest.fn()
+        }
+
+        // Mock de Blob
+        global.Blob = jest.fn().mockImplementation((content, options) => ({
+            content,
+            options
+        }))
+
+        // Mock de document.createElement
+        const mockAnchor = {
+            href: '',
+            download: '',
+            click: jest.fn()
+        }
+        jest.spyOn(document, 'createElement').mockReturnValue(mockAnchor)
+    })
+
+    afterEach(() => {
+        console.warn.mockRestore()
+        document.createElement.mockRestore()
+    })
+
+    // DataTable2 Component Tests
+    describe('DataTable2 Component', () => {
+        const mockColumns = [
+            { id: 'name', label: 'Name', type: 'String', sortable: true },
+            { id: 'age', label: 'Age', type: 'Number', sortable: true },
+            { id: 'email', label: 'Email', type: 'String', filterable: true }
+        ]
+
+        const mockRows = [
+            { id: 1, name: 'John Doe', age: 30, email: 'john@example.com' },
+            { id: 2, name: 'Jane Smith', age: 25, email: 'jane@example.com' },
+            { id: 3, name: 'Bob Johnson', age: 35, email: 'bob@example.com' }
+        ]
+
+        test('component exports correctly', () => {
+            expect(DataTable2).toBeDefined()
+            expect(typeof DataTable2).toBe('function')
+        })
+
+        test('component has correct PropTypes', () => {
+            expect(DataTable2.propTypes).toBeDefined()
+            expect(DataTable2.propTypes.columns).toBeDefined()
+            expect(DataTable2.propTypes.rows).toBeDefined()
+            expect(DataTable2.propTypes.onRowSelection).toBeDefined()
+            expect(DataTable2.propTypes.onSort).toBeDefined()
+            expect(DataTable2.propTypes.onCheckAll).toBeDefined()
+            expect(DataTable2.propTypes.editable).toBeDefined()
+            expect(DataTable2.propTypes.outlined).toBeDefined()
+            expect(DataTable2.propTypes.expanded).toBeDefined()
+            expect(DataTable2.propTypes.multisort).toBeDefined()
+            expect(DataTable2.propTypes.filterable).toBeDefined()
+            // New props
+            expect(DataTable2.propTypes.loading).toBeDefined()
+            expect(DataTable2.propTypes.skeleton).toBeDefined()
+            expect(DataTable2.propTypes.searchable).toBeDefined()
+            expect(DataTable2.propTypes.exportable).toBeDefined()
+            expect(DataTable2.propTypes.virtualScrolling).toBeDefined()
+        })
+
+        test('component has correct defaultProps', () => {
+            expect(DataTable2.defaultProps).toBeDefined()
+            expect(DataTable2.defaultProps.columns).toEqual([])
+            expect(DataTable2.defaultProps.rows).toEqual([])
+            expect(DataTable2.defaultProps.expanded).toBe(false)
+            expect(DataTable2.defaultProps.emptyMessage).toBe("No Results Found")
+            expect(DataTable2.defaultProps.emptyIcon).toBe("search_off")
+            expect(DataTable2.defaultProps.multisort).toBe(false)
+            expect(DataTable2.defaultProps.filterable).toBe(false)
+            // New defaults
+            expect(DataTable2.defaultProps.loading).toBe(false)
+            expect(DataTable2.defaultProps.skeleton).toBe(false)
+            expect(DataTable2.defaultProps.striped).toBe(false)
+            expect(DataTable2.defaultProps.hover).toBe(true)
+            expect(DataTable2.defaultProps.responsive).toBe(true)
+            expect(DataTable2.defaultProps.stickyHeader).toBe(true)
+            expect(DataTable2.defaultProps.selectionMode).toBe('single')
+            expect(DataTable2.defaultProps.sortMode).toBe('single')
+        })
+
+        test('validates props correctly', () => {
+            const validateProps = (columns, rows, virtualScrolling, pageSize) => {
+                if (!Array.isArray(columns)) {
+                    console.warn('DataTable2: columns prop must be an array')
+                }
+                if (!Array.isArray(rows)) {
+                    console.warn('DataTable2: rows prop must be an array')
+                }
+                if (virtualScrolling && !pageSize) {
+                    console.warn('DataTable2: pageSize is required when virtualScrolling is enabled')
+                }
+            }
+
+            // Invalid columns prop
+            validateProps('not an array', [], false, null)
+            expect(console.warn).toHaveBeenCalledWith('DataTable2: columns prop must be an array')
+
+            console.warn.mockClear()
+
+            // Invalid rows prop
+            validateProps([], 'not an array', false, null)
+            expect(console.warn).toHaveBeenCalledWith('DataTable2: rows prop must be an array')
+
+            console.warn.mockClear()
+
+            // Virtual scrolling without pageSize
+            validateProps([], [], true, null)
+            expect(console.warn).toHaveBeenCalledWith('DataTable2: pageSize is required when virtualScrolling is enabled')
+
+            console.warn.mockClear()
+
+            // Valid props
+            validateProps(mockColumns, mockRows, false, null)
+            expect(console.warn).not.toHaveBeenCalled()
+        })
+
+        test('handles sort correctly (maintaining original behavior)', () => {
+            const changeSort = (id, sortDir, sortMode, multisort, setSortDir) => {
+                if (sortMode === 'none') return
+
+                if (sortMode === 'multiple' || multisort) {
+                    const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
+                    const next = Object.assign({}, sortDir, { [id]: nextDir })
+                    setSortDir(next)
+                } else {
+                    const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
+                    setSortDir({ [id]: nextDir })
+                }
+            }
+
+            const mockSetSortDir = jest.fn()
+
+            // Single sort mode
+            changeSort('name', {}, 'single', false, mockSetSortDir)
+            expect(mockSetSortDir).toHaveBeenCalledWith({ name: 1 })
+
+            mockSetSortDir.mockClear()
+
+            // Multiple sort mode
+            changeSort('age', { name: 1 }, 'multiple', false, mockSetSortDir)
+            expect(mockSetSortDir).toHaveBeenCalledWith({ name: 1, age: 1 })
+
+            mockSetSortDir.mockClear()
+
+            // Reverse sort
+            changeSort('name', { name: 1 }, 'single', false, mockSetSortDir)
+            expect(mockSetSortDir).toHaveBeenCalledWith({ name: -1 })
+
+            mockSetSortDir.mockClear()
+
+            // No sort mode
+            changeSort('name', {}, 'none', false, mockSetSortDir)
+            expect(mockSetSortDir).not.toHaveBeenCalled()
+        })
+
+        test('handles multiSort correctly (maintaining original logic)', () => {
+            const multiSort = (array, sortObject = {}) => {
+                const sortKeys = Object.keys(sortObject);
+
+                if (!sortKeys.length) {
+                    return array;
+                }
+
+                const keySort = (a, b, direction) => {
+                    direction = direction !== null ? direction : 1;
+
+                    // check if a and b are numbers and compare as numbers
+                    if (!isNaN(a) && !isNaN(b)) {
+                        a = Number(a);
+                        b = Number(b);
+                    }
+
+                    // If b > a, multiply by -1 to get the reverse direction.
+                    return a > b ? direction : -1 * direction;
+                };
+
+                return array.sort((a, b) => {
+                    let sorted = 0;
+                    let index = 0;
+
+                    // Loop until sorted (-1 or 1) or until the sort keys have been processed.
+                    while (sorted === 0 && index < sortKeys.length) {
+                        const key = sortKeys[index];
+                        if (key) {
+                            const direction = sortObject[key];
+                            sorted = keySort(a[key], b[key], direction);
+                            index++;
+                        }
+                    }
+
+                    return sorted;
+                });
+            };
+
+            const testData = [
+                { name: 'Charlie', age: 30 },
+                { name: 'Alice', age: 25 },
+                { name: 'Bob', age: 35 }
+            ]
+
+            // No sort
+            expect(multiSort([...testData], {})).toEqual(testData)
+
+            // Sort by name ascending
+            const sortedByName = multiSort([...testData], { name: 1 })
+            expect(sortedByName[0].name).toBe('Alice')
+            expect(sortedByName[1].name).toBe('Bob')
+            expect(sortedByName[2].name).toBe('Charlie')
+
+            // Sort by age descending
+            const sortedByAge = multiSort([...testData], { age: -1 })
+            expect(sortedByAge[0].age).toBe(35)
+            expect(sortedByAge[1].age).toBe(30)
+            expect(sortedByAge[2].age).toBe(25)
+
+            // Multi-sort: name asc, then age desc
+            const multiSorted = multiSort([...testData], { name: 1, age: -1 })
+            expect(multiSorted[0].name).toBe('Alice')
+        })
+
+        test('handles row selection correctly (maintaining original behavior)', () => {
+            const mockOnRowSelection = jest.fn()
+            const mockOnRowClick = jest.fn()
+
+            const select = (row, event, selectedRows, selectionMode, setSelectedRows, onRowSelection, onRowClick) => {
+                if (event.target.id !== "checked") {
+                    // Enhanced selection logic
+                    if (selectionMode === 'multiple') {
+                        const newSelected = new Set(selectedRows)
+                        if (newSelected.has(row.id)) {
+                            newSelected.delete(row.id)
+                        } else {
+                            newSelected.add(row.id)
+                        }
+                        setSelectedRows(newSelected)
+                    } else if (selectionMode === 'single') {
+                        setSelectedRows(new Set([row.id]))
+                    }
+
+                    // Call original callback
+                    if (onRowSelection) onRowSelection(row, event)
+                    if (onRowClick) onRowClick(row, event)
+                }
+            }
+
+            const mockSetSelectedRows = jest.fn()
+            const mockEvent = { target: { id: 'not-checked' } }
+            const mockRow = { id: 1, name: 'Test' }
+
+            // Single selection
+            select(mockRow, mockEvent, new Set(), 'single', mockSetSelectedRows, mockOnRowSelection, mockOnRowClick)
+            expect(mockSetSelectedRows).toHaveBeenCalledWith(new Set([1]))
+            expect(mockOnRowSelection).toHaveBeenCalledWith(mockRow, mockEvent)
+            expect(mockOnRowClick).toHaveBeenCalledWith(mockRow, mockEvent)
+
+            mockSetSelectedRows.mockClear()
+            mockOnRowSelection.mockClear()
+            mockOnRowClick.mockClear()
+
+            // Multiple selection - add
+            select(mockRow, mockEvent, new Set(), 'multiple', mockSetSelectedRows, mockOnRowSelection, mockOnRowClick)
+            expect(mockSetSelectedRows).toHaveBeenCalledWith(new Set([1]))
+
+            // Multiple selection - remove
+            select(mockRow, mockEvent, new Set([1]), 'multiple', mockSetSelectedRows, mockOnRowSelection, mockOnRowClick)
+            expect(mockSetSelectedRows).toHaveBeenCalledWith(new Set())
+
+            // Checkbox click (should not trigger selection)
+            const checkboxEvent = { target: { id: 'checked' } }
+            select(mockRow, checkboxEvent, new Set(), 'single', mockSetSelectedRows, mockOnRowSelection, mockOnRowClick)
+            expect(mockOnRowSelection).not.toHaveBeenCalled()
+        })
+
+        test('handles check all correctly (maintaining original behavior)', () => {
+            const mockOnCheckAll = jest.fn()
+
+            const checkAll = (id, value, rows, selectionMode, setAllChecked, setSelectedRows, onCheckAll) => {
+                const ids = rows.map(row => row.id)
+                setAllChecked(value)
+                
+                if (selectionMode === 'multiple') {
+                    if (value) {
+                        setSelectedRows(new Set(ids))
+                    } else {
+                        setSelectedRows(new Set())
+                    }
+                }
+                
+                if (onCheckAll) onCheckAll(ids, value)
+            }
+
+            const mockSetAllChecked = jest.fn()
+            const mockSetSelectedRows = jest.fn()
+
+            // Check all
+            checkAll('checked', true, mockRows, 'multiple', mockSetAllChecked, mockSetSelectedRows, mockOnCheckAll)
+            expect(mockSetAllChecked).toHaveBeenCalledWith(true)
+            expect(mockSetSelectedRows).toHaveBeenCalledWith(new Set([1, 2, 3]))
+            expect(mockOnCheckAll).toHaveBeenCalledWith([1, 2, 3], true)
+
+            mockSetAllChecked.mockClear()
+            mockSetSelectedRows.mockClear()
+            mockOnCheckAll.mockClear()
+
+            // Uncheck all
+            checkAll('checked', false, mockRows, 'multiple', mockSetAllChecked, mockSetSelectedRows, mockOnCheckAll)
+            expect(mockSetAllChecked).toHaveBeenCalledWith(false)
+            expect(mockSetSelectedRows).toHaveBeenCalledWith(new Set())
+            expect(mockOnCheckAll).toHaveBeenCalledWith([1, 2, 3], false)
+        })
+
+        test('handles search functionality', () => {
+            const searchRows = (rows, searchTerm, searchable, columns) => {
+                if (!searchTerm || !searchable) return rows
+
+                return rows.filter(row => {
+                    return columns.some(column => {
+                        const value = row[column.id]
+                        if (value == null) return false
+                        return String(value).toLowerCase().includes(searchTerm.toLowerCase())
+                    })
+                })
+            }
+
+            // No search term
+            expect(searchRows(mockRows, '', true, mockColumns)).toEqual(mockRows)
+
+            // Search disabled
+            expect(searchRows(mockRows, 'john', false, mockColumns)).toEqual(mockRows)
+
+            // Search for 'john'
+            const johnResults = searchRows(mockRows, 'john', true, mockColumns)
+            expect(johnResults).toHaveLength(2) // John Doe and Bob Johnson
+            expect(johnResults.map(r => r.name)).toEqual(['John Doe', 'Bob Johnson'])
+
+            // Search for email
+            const emailResults = searchRows(mockRows, 'jane@', true, mockColumns)
+            expect(emailResults).toHaveLength(1)
+            expect(emailResults[0].name).toBe('Jane Smith')
+
+            // No results
+            const noResults = searchRows(mockRows, 'xyz', true, mockColumns)
+            expect(noResults).toHaveLength(0)
+        })
+
+        test('handles export functionality', () => {
+            const handleExport = (processedRows, columns, onExport) => {
+                if (onExport) {
+                    onExport(processedRows, columns)
+                } else {
+                    // Default CSV export
+                    const csvContent = [
+                        columns.map(col => col.label || col.id).join(','),
+                        ...processedRows.map(row => 
+                            columns.map(col => {
+                                const value = row[col.id]
+                                return typeof value === 'string' ? `"${value}"` : value
+                            }).join(',')
+                        )
+                    ].join('\n')
+                    
+                    const blob = new Blob([csvContent], { type: 'text/csv' })
+                    const url = URL.createObjectURL(blob)
+                    const a = document.createElement('a')
+                    a.href = url
+                    a.download = 'table-export.csv'
+                    a.click()
+                    URL.revokeObjectURL(url)
+                }
+            }
+
+            const mockOnExport = jest.fn()
+
+            // Custom export
+            handleExport(mockRows, mockColumns, mockOnExport)
+            expect(mockOnExport).toHaveBeenCalledWith(mockRows, mockColumns)
+
+            mockOnExport.mockClear()
+
+            // Default CSV export
+            handleExport(mockRows, mockColumns, null)
+            expect(Blob).toHaveBeenCalledWith([expect.stringContaining('Name,Age,Email')], { type: 'text/csv' })
+            expect(URL.createObjectURL).toHaveBeenCalled()
+            expect(document.createElement).toHaveBeenCalledWith('a')
+        })
+
+        test('generates CSS classes correctly', () => {
+            const generateClasses = (outlined, striped, compact, bordered, hover, rowHeight, density, theme, responsive, isLoading, skeleton, className) => {
+                return [
+                    'datatable8', // Maintain original class for compatibility
+                    'datatable2', // New class for v2 features
+                    outlined && 'outlined',
+                    striped && 'datatable2--striped',
+                    compact && 'datatable2--compact',
+                    bordered && 'datatable2--bordered',
+                    !hover && 'datatable2--no-hover',
+                    `datatable2--${rowHeight}`,
+                    `datatable2--${density}`,
+                    `datatable2--${theme}`,
+                    responsive && 'datatable2--responsive',
+                    isLoading && 'datatable2--loading',
+                    skeleton && 'datatable2--skeleton',
+                    className
+                ].filter(Boolean).join(' ')
+            }
+
+            expect(generateClasses(false, false, false, false, true, 'medium', 'normal', 'default', true, false, false, ''))
+                .toBe('datatable8 datatable2 datatable2--medium datatable2--normal datatable2--default datatable2--responsive')
+            
+            expect(generateClasses(true, true, true, true, false, 'large', 'comfortable', 'dark', false, true, true, 'custom'))
+                .toBe('datatable8 datatable2 outlined datatable2--striped datatable2--compact datatable2--bordered datatable2--no-hover datatable2--large datatable2--comfortable datatable2--dark datatable2--loading datatable2--skeleton custom')
+        })
+    })
+})

package/src/html/button.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import './button.css'
-import { Icon } from './icon'
-
-
-interface Button2Props {
-    label: String
-    icon: String
-    action: () => {}, 
-    disabled: Boolean, 
-    outlined: Boolean, 
-    raised: Boolean
-}
-
-/**
- * HTML Button
- */
-export const Button2 = (props: Button2Props) => {
-
-    const { label,icon, action, disabled, outlined, raised} = props
-
-    function click(event) {
-        if (!disabled) {
-            event.stopPropagation();
-            event.preventDefault();
-            if (action) action()
-        }
-    }
-
-    let style = raised ? 'raised' : outlined ? 'outlined' : 'normal'
-    if (disabled) style = `${style} disabled`
-    return (
-        <button className={`btn ${style}`} onClick={click}>
-            { icon ? <Icon icon={icon} size="small" clickable action={click} /> : null }
-            <span>{ label }</span>
-        </button>
-    )
-}