ywana-core8 0.1.103 → 0.2.2

package/src/html/tab_enhanced.test.js

@@ -1,504 +0,0 @@
-import React from 'react'
-import { Tabs, Tab, Stack } from './tab'
-
-// Pruebas unitarias para los componentes Tab mejorados
-describe('Enhanced Tab Components', () => {
-    // Mock de los componentes dependientes
-    const mockIcon = jest.fn()
-    const mockText = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock de componentes
-        jest.doMock('./icon', () => ({ Icon: mockIcon }))
-        jest.doMock('./text', () => ({ Text: mockText }))
-        
-        // Mock de console.warn
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-        
-        // Mock de localStorage
-        const localStorageMock = {
-            getItem: jest.fn(),
-            setItem: jest.fn(),
-            removeItem: jest.fn(),
-            clear: jest.fn(),
-        }
-        global.localStorage = localStorageMock
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    // Tabs Component Tests
-    describe('Tabs Component', () => {
-        test('component exports correctly', () => {
-            expect(Tabs).toBeDefined()
-            expect(typeof Tabs).toBe('function')
-        })
-
-        test('component has correct PropTypes', () => {
-            expect(Tabs.propTypes).toBeDefined()
-            expect(Tabs.propTypes.children).toBeDefined()
-            expect(Tabs.propTypes.selected).toBeDefined()
-            expect(Tabs.propTypes.onChange).toBeDefined()
-            expect(Tabs.propTypes.fillLeft).toBeDefined()
-            expect(Tabs.propTypes.fillRight).toBeDefined()
-            expect(Tabs.propTypes.orientation).toBeDefined()
-            expect(Tabs.propTypes.variant).toBeDefined()
-            expect(Tabs.propTypes.disabled).toBeDefined()
-            expect(Tabs.propTypes.animated).toBeDefined()
-            expect(Tabs.propTypes.persistent).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(Tabs.defaultProps).toBeDefined()
-            expect(Tabs.defaultProps.fillLeft).toBe(false)
-            expect(Tabs.defaultProps.fillRight).toBe(true)
-            expect(Tabs.defaultProps.orientation).toBe('horizontal')
-            expect(Tabs.defaultProps.variant).toBe('standard')
-            expect(Tabs.defaultProps.disabled).toBe(false)
-            expect(Tabs.defaultProps.animated).toBe(true)
-            expect(Tabs.defaultProps.persistent).toBe(false)
-        })
-
-        test('warns when children is empty', () => {
-            const validateChildren = (children) => {
-                if (children && !React.Children.count(children)) {
-                    console.warn('Tabs component: children prop should contain Tab components')
-                }
-            }
-            
-            validateChildren([])
-            expect(console.warn).toHaveBeenCalledWith('Tabs component: children prop should contain Tab components')
-
-            console.warn.mockClear()
-            validateChildren(null)
-            expect(console.warn).not.toHaveBeenCalled()
-        })
-
-        test('handles selection correctly', () => {
-            const mockOnChange = jest.fn()
-            
-            const handleSelect = async (id, index, disabled, beforeChange, onChange, selected) => {
-                if (disabled) return
-
-                if (beforeChange) {
-                    try {
-                        const canChange = await beforeChange(id || index, selected)
-                        if (canChange === false) return
-                    } catch (error) {
-                        console.warn('Tabs beforeChange hook error:', error)
-                        return
-                    }
-                }
-
-                if (onChange) onChange(id || index)
-            }
-
-            // Normal selection
-            handleSelect('tab1', 0, false, null, mockOnChange, null)
-            expect(mockOnChange).toHaveBeenCalledWith('tab1')
-
-            mockOnChange.mockClear()
-
-            // Disabled state
-            handleSelect('tab1', 0, true, null, mockOnChange, null)
-            expect(mockOnChange).not.toHaveBeenCalled()
-        })
-
-        test('handles beforeChange hook correctly', async () => {
-            const mockOnChange = jest.fn()
-            const mockBeforeChange = jest.fn()
-            
-            const handleSelect = async (id, index, disabled, beforeChange, onChange, selected) => {
-                if (disabled) return
-
-                if (beforeChange) {
-                    try {
-                        const canChange = await beforeChange(id || index, selected)
-                        if (canChange === false) return
-                    } catch (error) {
-                        console.warn('Tabs beforeChange hook error:', error)
-                        return
-                    }
-                }
-
-                if (onChange) onChange(id || index)
-            }
-
-            // Allow change
-            mockBeforeChange.mockResolvedValue(true)
-            await handleSelect('tab1', 0, false, mockBeforeChange, mockOnChange, 'tab0')
-            expect(mockBeforeChange).toHaveBeenCalledWith('tab1', 'tab0')
-            expect(mockOnChange).toHaveBeenCalledWith('tab1')
-
-            mockOnChange.mockClear()
-            mockBeforeChange.mockClear()
-
-            // Prevent change
-            mockBeforeChange.mockResolvedValue(false)
-            await handleSelect('tab1', 0, false, mockBeforeChange, mockOnChange, 'tab0')
-            expect(mockBeforeChange).toHaveBeenCalledWith('tab1', 'tab0')
-            expect(mockOnChange).not.toHaveBeenCalled()
-
-            mockOnChange.mockClear()
-            mockBeforeChange.mockClear()
-
-            // Error in beforeChange
-            mockBeforeChange.mockRejectedValue(new Error('Test error'))
-            await handleSelect('tab1', 0, false, mockBeforeChange, mockOnChange, 'tab0')
-            expect(console.warn).toHaveBeenCalledWith('Tabs beforeChange hook error:', expect.any(Error))
-            expect(mockOnChange).not.toHaveBeenCalled()
-        })
-
-        test('handles keyboard navigation correctly', () => {
-            const mockHandleSelect = jest.fn()
-            const children = [
-                { props: { id: 'tab1' } },
-                { props: { id: 'tab2' } },
-                { props: { id: 'tab3' } }
-            ]
-
-            const handleKeyDown = (event, disabled, selected, notNullChildren, handleSelect) => {
-                if (disabled) return
-
-                const currentIndex = typeof selected === 'number' ? selected : 
-                    notNullChildren.findIndex(child => child.props.id === selected)
-                
-                let newIndex = currentIndex
-
-                switch (event.key) {
-                    case 'ArrowLeft':
-                    case 'ArrowUp':
-                        event.preventDefault()
-                        newIndex = currentIndex > 0 ? currentIndex - 1 : notNullChildren.length - 1
-                        break
-                    case 'ArrowRight':
-                    case 'ArrowDown':
-                        event.preventDefault()
-                        newIndex = currentIndex < notNullChildren.length - 1 ? currentIndex + 1 : 0
-                        break
-                    case 'Home':
-                        event.preventDefault()
-                        newIndex = 0
-                        break
-                    case 'End':
-                        event.preventDefault()
-                        newIndex = notNullChildren.length - 1
-                        break
-                    default:
-                        return
-                }
-
-                const targetChild = notNullChildren[newIndex]
-                if (targetChild && !targetChild.props.disabled) {
-                    handleSelect(targetChild.props.id, newIndex)
-                }
-            }
-
-            const mockEvent = { preventDefault: jest.fn() }
-
-            // Arrow right from first tab
-            handleKeyDown({ ...mockEvent, key: 'ArrowRight' }, false, 0, children, mockHandleSelect)
-            expect(mockHandleSelect).toHaveBeenCalledWith('tab2', 1)
-
-            mockHandleSelect.mockClear()
-
-            // Arrow left from last tab (wrap around)
-            handleKeyDown({ ...mockEvent, key: 'ArrowLeft' }, false, 2, children, mockHandleSelect)
-            expect(mockHandleSelect).toHaveBeenCalledWith('tab2', 1)
-
-            mockHandleSelect.mockClear()
-
-            // Home key
-            handleKeyDown({ ...mockEvent, key: 'Home' }, false, 2, children, mockHandleSelect)
-            expect(mockHandleSelect).toHaveBeenCalledWith('tab1', 0)
-
-            mockHandleSelect.mockClear()
-
-            // End key
-            handleKeyDown({ ...mockEvent, key: 'End' }, false, 0, children, mockHandleSelect)
-            expect(mockHandleSelect).toHaveBeenCalledWith('tab3', 2)
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (orientation, variant, scrollable, centered, disabled, animated, className) => {
-                return [
-                    'tabs',
-                    `tabs--${orientation}`,
-                    `tabs--${variant}`,
-                    scrollable && 'tabs--scrollable',
-                    centered && 'tabs--centered',
-                    disabled && 'tabs--disabled',
-                    animated && 'tabs--animated',
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses('horizontal', 'standard', false, false, false, false, ''))
-                .toBe('tabs tabs--horizontal tabs--standard')
-            
-            expect(generateClasses('vertical', 'scrollable', true, true, true, true, 'custom'))
-                .toBe('tabs tabs--vertical tabs--scrollable tabs--scrollable tabs--centered tabs--disabled tabs--animated custom')
-        })
-
-        test('generates accessibility attributes correctly', () => {
-            const generateAriaAttributes = (ariaLabel, disabled, orientation) => {
-                return {
-                    'aria-label': ariaLabel || 'Tabs',
-                    'aria-disabled': disabled,
-                    'aria-orientation': orientation,
-                    role: 'tablist'
-                }
-            }
-
-            const result1 = generateAriaAttributes(null, false, 'horizontal')
-            expect(result1['aria-label']).toBe('Tabs')
-            expect(result1['aria-disabled']).toBe(false)
-            expect(result1['aria-orientation']).toBe('horizontal')
-            expect(result1.role).toBe('tablist')
-
-            const result2 = generateAriaAttributes('Custom Tabs', true, 'vertical')
-            expect(result2['aria-label']).toBe('Custom Tabs')
-            expect(result2['aria-disabled']).toBe(true)
-            expect(result2['aria-orientation']).toBe('vertical')
-        })
-
-        test('handles persistent tabs correctly', () => {
-            const mockOnChange = jest.fn()
-
-            // Test persistence logic
-            const testPersistence = (persistent, persistKey, savedValue, currentSelected) => {
-                if (persistent && persistKey && savedValue !== null) {
-                    const parsedTab = isNaN(savedValue) ? savedValue : parseInt(savedValue)
-                    if (parsedTab !== currentSelected) {
-                        return parsedTab
-                    }
-                }
-                return currentSelected
-            }
-
-            // Test loading saved tab
-            const result1 = testPersistence(true, 'test-tabs', '2', 0)
-            expect(result1).toBe(2)
-
-            // Test no change when same tab
-            const result2 = testPersistence(true, 'test-tabs', '1', 1)
-            expect(result2).toBe(1)
-
-            // Test disabled persistence
-            const result3 = testPersistence(false, 'test-tabs', '2', 0)
-            expect(result3).toBe(0)
-
-            // Test save logic
-            const testSave = (persistent, persistKey, selected) => {
-                if (persistent && persistKey && selected !== undefined) {
-                    return `tabs-${persistKey}:${selected.toString()}`
-                }
-                return null
-            }
-
-            expect(testSave(true, 'test-tabs', 1)).toBe('tabs-test-tabs:1')
-            expect(testSave(false, 'test-tabs', 1)).toBe(null)
-        })
-    })
-
-    // Tab Component Tests
-    describe('Tab Component', () => {
-        test('component has correct PropTypes', () => {
-            expect(Tab.propTypes).toBeDefined()
-            expect(Tab.propTypes.id).toBeDefined()
-            expect(Tab.propTypes.icon).toBeDefined()
-            expect(Tab.propTypes.label).toBeDefined()
-            expect(Tab.propTypes.selected).toBeDefined()
-            expect(Tab.propTypes.disabled).toBeDefined()
-            expect(Tab.propTypes.closeable).toBeDefined()
-            expect(Tab.propTypes.badge).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(Tab.defaultProps).toBeDefined()
-            expect(Tab.defaultProps.disabled).toBe(false)
-            expect(Tab.defaultProps.closeable).toBe(false)
-            expect(Tab.defaultProps.animated).toBe(true)
-        })
-
-        test('handles selection correctly', () => {
-            const mockOnSelect = jest.fn()
-
-            const handleSelect = (event, disabled, onSelect, id) => {
-                if (disabled) return
-                event.preventDefault()
-                if (onSelect) onSelect(id)
-            }
-
-            const mockEvent = { preventDefault: jest.fn() }
-
-            // Normal selection
-            handleSelect(mockEvent, false, mockOnSelect, 'tab1')
-            expect(mockEvent.preventDefault).toHaveBeenCalled()
-            expect(mockOnSelect).toHaveBeenCalledWith('tab1')
-
-            mockOnSelect.mockClear()
-
-            // Disabled state
-            handleSelect(mockEvent, true, mockOnSelect, 'tab1')
-            expect(mockOnSelect).not.toHaveBeenCalled()
-        })
-
-        test('handles close correctly', () => {
-            const mockOnClose = jest.fn()
-
-            const handleClose = (event, onClose, id) => {
-                event.stopPropagation()
-                if (onClose) onClose(id)
-            }
-
-            const mockEvent = { stopPropagation: jest.fn() }
-
-            handleClose(mockEvent, mockOnClose, 'tab1')
-            expect(mockEvent.stopPropagation).toHaveBeenCalled()
-            expect(mockOnClose).toHaveBeenCalledWith('tab1')
-        })
-
-        test('handles keyboard interaction correctly', () => {
-            const mockOnSelect = jest.fn()
-            const mockOnClose = jest.fn()
-
-            const handleKeyDown = (event, disabled, onSelect, id, closeable, onClose) => {
-                if (disabled) return
-
-                switch (event.key) {
-                    case 'Enter':
-                    case ' ':
-                        event.preventDefault()
-                        if (onSelect) onSelect(id)
-                        break
-                    case 'Delete':
-                    case 'Backspace':
-                        if (closeable && onClose) {
-                            event.preventDefault()
-                            onClose(id)
-                        }
-                        break
-                    default:
-                        break
-                }
-            }
-
-            const mockEvent = { preventDefault: jest.fn() }
-
-            // Enter key
-            handleKeyDown({ ...mockEvent, key: 'Enter' }, false, mockOnSelect, 'tab1', false, null)
-            expect(mockOnSelect).toHaveBeenCalledWith('tab1')
-
-            mockOnSelect.mockClear()
-
-            // Delete key with closeable tab
-            handleKeyDown({ ...mockEvent, key: 'Delete' }, false, mockOnSelect, 'tab1', true, mockOnClose)
-            expect(mockOnClose).toHaveBeenCalledWith('tab1')
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (selected, disabled, closeable, animated, orientation, variant, className) => {
-                return [
-                    'tab',
-                    selected && 'selected',
-                    disabled && 'tab--disabled',
-                    closeable && 'tab--closeable',
-                    animated && 'tab--animated',
-                    `tab--${orientation}`,
-                    `tab--${variant}`,
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, false, false, false, 'horizontal', 'standard', ''))
-                .toBe('tab tab--horizontal tab--standard')
-            
-            expect(generateClasses(true, true, true, true, 'vertical', 'scrollable', 'custom'))
-                .toBe('tab selected tab--disabled tab--closeable tab--animated tab--vertical tab--scrollable custom')
-        })
-
-        test('generates accessibility attributes correctly', () => {
-            const generateAriaAttributes = (selected, disabled, id, tabIndex, label) => {
-                return {
-                    'aria-selected': selected,
-                    'aria-disabled': disabled,
-                    'aria-controls': `tabpanel-${id || tabIndex}`,
-                    'aria-label': typeof label === 'string' ? label : `Tab ${(tabIndex || 0) + 1}`,
-                    role: 'tab',
-                    tabIndex: selected ? 0 : -1,
-                    id: `tab-${id || tabIndex}`
-                }
-            }
-
-            const result1 = generateAriaAttributes(true, false, 'tab1', 0, 'First Tab')
-            expect(result1['aria-selected']).toBe(true)
-            expect(result1['aria-disabled']).toBe(false)
-            expect(result1['aria-controls']).toBe('tabpanel-tab1')
-            expect(result1['aria-label']).toBe('First Tab')
-            expect(result1.role).toBe('tab')
-            expect(result1.tabIndex).toBe(0)
-            expect(result1.id).toBe('tab-tab1')
-
-            const result2 = generateAriaAttributes(false, true, null, 1, null)
-            expect(result2['aria-selected']).toBe(false)
-            expect(result2['aria-disabled']).toBe(true)
-            expect(result2['aria-label']).toBe('Tab 2')
-            expect(result2.tabIndex).toBe(-1)
-        })
-    })
-
-    // Stack Component Tests
-    describe('Stack Component', () => {
-        test('component has correct PropTypes', () => {
-            expect(Stack.propTypes).toBeDefined()
-            expect(Stack.propTypes.selected).toBeDefined()
-            expect(Stack.propTypes.children).toBeDefined()
-            expect(Stack.propTypes.lazy).toBeDefined()
-            expect(Stack.propTypes.keepMounted).toBeDefined()
-            expect(Stack.propTypes.animated).toBeDefined()
-        })
-
-        test('component has correct defaultProps', () => {
-            expect(Stack.defaultProps).toBeDefined()
-            expect(Stack.defaultProps.selected).toBe(0)
-            expect(Stack.defaultProps.lazy).toBe(false)
-            expect(Stack.defaultProps.keepMounted).toBe(false)
-            expect(Stack.defaultProps.animated).toBe(true)
-        })
-
-        test('handles lazy loading correctly', () => {
-            const handleLazyLoading = (selected, lazy, keepMounted, mountedTabs) => {
-                if (lazy || keepMounted) {
-                    return new Set([...mountedTabs, selected])
-                }
-                return mountedTabs
-            }
-
-            const initialMounted = new Set([0])
-            
-            // Add new tab to mounted set
-            const newMounted = handleLazyLoading(2, true, false, initialMounted)
-            expect(newMounted.has(0)).toBe(true)
-            expect(newMounted.has(2)).toBe(true)
-            expect(newMounted.has(1)).toBe(false)
-        })
-
-        test('generates CSS classes correctly', () => {
-            const generateClasses = (animated, className) => {
-                return [
-                    'stack',
-                    animated && 'stack--animated',
-                    className
-                ].filter(Boolean).join(' ')
-            }
-
-            expect(generateClasses(false, '')).toBe('stack')
-            expect(generateClasses(true, 'custom')).toBe('stack stack--animated custom')
-        })
-    })
-})

package/src/html/table.test.js

@@ -1,70 +0,0 @@
-import React, { useState } from 'react'
-import { FORMATS } from '../domain/ContentType'
-import { DataTable } from './table'
-
-export const TableTest = (prop) => {
-
-    const [rows, setRows] = useState(
-        [
-            { id: 1, checked: false, name: "John Smith"    , description: "lorem ipsum 9", color: "#CACAFF", num: "25", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png" },
-            { id: 2, checked: false, name: "Ann Martin"    , description: "lorem ipsum 2", color: "#CCFFFF", num: "1234567890.1234567890" },
-            { id: 3, checked: false, name: "Ann Martin"    , description: "lorem ipsum 8", color: "#CCFFFF", num: "12340.1234567890" },
-            { id: 4, checked: false, name: "Zack McCracken", description: "lorem ipsum 4", color: "#CCFFFF", num: "567890.1234567890" },
-            { id: 5, checked: false, name: "Ann Martin"    , description: "lorem ipsum 1", color: "#CCFFFF", num: "23670.190" },
-            { id: 6, checked: false, name: "John Smith"    , description: "lorem ipsum 2", color: "#CCFFFF", num: "71230.10" },
-            { id: 7, checked: false, name: "Ann Martin"    , description: "lorem ipsum 1", color: "#CCFFFF", num: "3490.23" },
-            { id: 8, checked: false, name: "Martin Freeman", description: "lorem ipsum 4", color: "#CCFFFF" , num: "890.1234567890" },
-            { id: 9, checked: false, name: "Ann Martin"    , description: "lorem ipsum 5", color: "#CCFFFF", num: "365", date: new Date().toString() },
-        ]
-    )
-
-    function editCell(row, cell, value) {
-        //console.log(row, cell, value)
-    }
-
-    function select(row) {
-        const next = rows.map(r => r.id === row.id ? { ...r, selected: !r.selected } : r)
-        setRows(next)
-    }
-
-    function check(rowID, columnID, value) {
-        const next = rows.map(r => r.id === rowID ? { ...r, checked: value } : r)
-        setRows(next)
-    }
-
-    function checkAll(ids, checked) {
-        const next = rows.map(row => Object.assign({}, row, { checked }))
-        setRows(next)
-    }
-
-    const table1 = {
-        className: "xxx",
-        editable: true,
-        columns: [
-            { id: "index"      , label: "#"          , type: "INDEX"                         },
-            { id: "checked"                                          , onChange: check       },
-            { id: "name"       , label: "Name"       , type: "String", sortable: true, filterable: true, resizable: true },
-            { id: "category"  , label: "Category"   , type: "String", sortable: true, filterable: true, resizable: false, options: [
-                { label: "A", value: "A" },
-                { label: "B", value: "B" },
-                { label: "C", value: "C" },
-            ]},
-            { id: "description", label: "Description", type: "String", sortable: true       },
-            { id: "color"      , label: "Color"      , type: "String", format: FORMATS.COLOR },
-            { id: "date"       , label: "Date"       , type: "String", format: FORMATS.DATE  },
-            { id: "num"        , label: "Num"        , type: "Number", maxDecimals: 2, sortable: true},
-        ],
-        rows
-    }
-
-    return (
-        <>
-            <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem", display: "flex" }}>
-                <DataTable {...table1} onRowSelection={select} outlined multisort={true}/>
-            </div>
-            <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem" }}>
-                <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll} filterable={true} />
-            </div>
-        </>
-    )
-}