ywana-core8 0.1.102 → 0.2.1

package/src/domain2/CollectionContext.test.js

@@ -1,71 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react'
-import { CheckBox } from '../html'
-import { CollectionContext, CollectionContextProvider } from './CollectionContext'
-import { CollectionEditor } from './CollectionEditor'
-import { CollectionFilters } from './CollectionFilters'
-import { CollectionList } from './CollectionList'
-
-const CollectionContextTest = (props) => {
-
-    const config = {
-        host: "http://localhost:3000",
-        url: "/references",
-    }
-
-    const style = {
-        display: "flex",
-        flexDirection: "row",
-    }
-
-    const schema = [
-        { id: "id", type: "string", label: "ID" },
-        { id: "name", type: "string", label: "Name", filter: true, like: true },
-        { id: "gender", type: "string", label: "Gender", filter: true, options: [ 
-            { label: "Masculine", value: 1 }, 
-            { label: "Feminine", value: 0 }
-        ]},
-        { id: "description", type: "string", label: "Description" },
-    ]
-
-    return (
-        <div style={style}>
-            <CollectionContextProvider {...config}>
-                <CollectionFilters schema={schema} >
-                    <CustomFilter1 />
-                </CollectionFilters>
-                <CollectionList />
-                <CollectionEditor />
-            </CollectionContextProvider>
-        </div>
-
-    )
-}
-
-const CustomFilter1 = (props) => {
-
-    const context = useContext(CollectionContext)
-    const [active, setActive] = useState(false)
-
-    useEffect(() => {
-        if (active) {
-            context.addCustomFilter("ACTIVE", filter)
-        } else {
-            context.removeCustomFilter("ACTIVE")
-        }
-    }, [active])
-
-    function change(id, value) {
-        setActive(value)
-    }
-
-    function filter(all) {
-        console.log("CUSTOMFILTER1 DO NOTHING")
-        return all
-    }
-
-    return (
-        <div>
-            <CheckBox id="custom1" label="Custom Filter 1" value={active} onChange={change} />
-        </div>
-    )
-}

package/src/domain2/CollectionPage.test.js

@@ -1,112 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react'
-import { CheckBox } from '../html'
-import { CollectionContext } from './CollectionContext'
-import { CollectionPage } from './CollectionPage'
-
-const CollectionPageTest = (prop) => {
-
-    const schema = {
-        id: { id: "id", type: "string", label: "ID" },
-        name: { id: "name", type: "string", label: "Name", filter: true },
-        gender: {
-            id: "gender", type: "string", label: "Gender", filter: true, options: [
-                { label: "Masculine", value: 1 },
-                { label: "Feminine", value: 0 }
-            ]
-        }
-    }
-
-    const listItemRenderer = (item) => {
-        return {
-            id: item.id,
-            icon: "star",
-            line1: item.name,
-            line2: item.name,
-            meta: item.state,
-        }
-    }
-
-    const props = {
-        host: "http://localhost:3000",
-        url: "/references",
-        schema,
-        layout: "ide",
-        title: <CustomTitle />,
-        canFilter: true,
-        customFilters: [<CustomFilters/>,],
-        filtersValue: {},
-        listSearchBy: ["name"],
-        listGroupBy: "name",
-        listItemRenderer,
-        customEditor: <CustomEditor />
-    }
-
-    return (
-        <>
-            <CollectionPage {...props} />
-        </>
-    )
-}
-
-const CustomTitle = (props) => {
-    return (
-        <h1>Custom Title</h1>
-    )
-}
-
-const CustomEditor = () => {
-
-    const context = useContext(CollectionContext)
-    const { all, selected } = context
-
-    return (
-        <div>
-            <header>
-                CUSTOM EDITOR {all.length} 
-                </header>
-                <main>
-                    ID: {selected ? selected.id : null}
-                </main>
-        </div>
-    )
-}
-
-
-const CustomFilters = (props) => {
-    
-    return (
-        <>
-            <CustomFilter1 id="customfilter1" label="1"/>
-            <CustomFilter1 id="customfilter2" label="2"/>
-        </>
-    )
-}
-
-const CustomFilter1 = (props) => {
-
-    const { id, label}    = props
-    const context = useContext(CollectionContext)
-    const [active, setActive] = useState(true)
-
-    useEffect(async () => {
-        if (active) {
-            await context.addCustomFilter(id, filter)
-        } else {
-            await context.removeCustomFilter(id)
-        }
-    }, [active])
-
-    function change(id, value) {
-        setActive(value)
-    }
-
-    function filter(all) {
-        return all.filter(item => {
-            return item.name.startsWith("1")
-        })
-    }
-
-    return (
-        <CheckBox id={id} value={active} label={label} onChange={change} />
-    )
-}

package/src/domain2/DynamicForm.test.js

@@ -1,47 +0,0 @@
-import React, { useState } from 'react'
-import { DynamicForm } from './DynamicForm'
-import { FORMATS } from './FORMATS'
-import { TYPES } from './TYPES'
-
-const DynamicFormTest = (props) => {
-
-    const config = {
-        host: "http://localhost:3000",
-        url: "/references",
-    }
-
-    const style = {
-        display: "flex",
-        flexDirection: "row",
-    }
-
-    const schema = [
-        { id: "id", type: "string", label: "ID", editable: false },
-        { id: "name", type: "string", label: "Name", filter: true, like: true },
-        {
-            id: "gender", type: "string", label: "Gender", filter: true, editable: true, options: [
-                { label: "Masculine", value: 1 },
-                { label: "Feminine", value: 0 }
-            ]
-        },
-        { id: "initDate", type: TYPES.STRING, label: "Init Date", format: FORMATS.DATE },
-        { id: "hour", type: TYPES.STRING, label: "Hour", format: FORMATS.TIME },
-        { id: "range", type: TYPES.STRING, label: "Range", format: FORMATS.DATERANGE },
-        { id: "email", type: TYPES.STRING, label: "Email", format: FORMATS.EMAIL },
-        { id: "color", type: TYPES.STRING, label: "Color", format: FORMATS.COLOR },
-        { id: "active", type: TYPES.BOOLEAN , label: "Active", format: FORMATS.CHECKBOX },
-    ]
-
-    const [values, setValues] = useState({})
-
-    function onChange(id, value) {
-        setValues({ ...values, [id]: value })
-    }
-
-    return (
-        <div style={style}>
-            <DynamicForm schema={schema} values={values} onChange={onChange} />
-        </div>
-
-    )
-}

package/src/html/accordion.test.js

@@ -1,37 +0,0 @@
-import React, { useState } from 'react'
-import { Accordion } from './accordion'
-import { Icon } from './icon'
-
-const AccordionTest = (prop) => {
-
-    const info = <div>50 Unidades</div>
-
-    const toolbar = [<Icon icon="edit" size="small" clickable />, <Icon icon="delete" size="small" clickable />]
-
-    const sections = [
-        { id: 1 , checked: false, icon: 'star', title: 'Section 1' , subtitle: 'Subtitle 1' , info, toolbar, open: true ,  children: <div>Section 1 content</div>  },
-        { id: 2 , checked: false, icon: 'star', title: 'Section 2' , subtitle: 'Subtitle 2' , info, toolbar, open: true ,  children: <div>Section 2 content</div>  },
-        { id: 3 , checked: false, icon: 'star', title: 'Section 3' , subtitle: 'Subtitle 3' , info, toolbar, open: false,  children: <div>Section 3 content</div>  },
-        { id: 4 , checked: false, icon: 'star', title: 'Section 4' , subtitle: 'Subtitle 4' , info, toolbar, open: false,  children: <div>Section 4 content</div>  },
-        { id: 5 , checked: false, icon: 'star', title: 'Section 5' , subtitle: 'Subtitle 5' , info, toolbar, open: false,  children: <div>Section 5 content</div>  },
-        { id: 6 , checked: false, icon: 'star', title: 'Section 6' , subtitle: 'Subtitle 6' , info, toolbar, open: false,  children: <div>Section 6 content</div>  },
-        { id: 7 , checked: false, icon: 'star', title: 'Section 7' , subtitle: 'Subtitle 7' , info, toolbar, open: false,  children: <div>Section 7 content</div>  },
-        { id: 8 , checked: false, icon: 'star', title: 'Section 8' , subtitle: 'Subtitle 8' , info, toolbar, open: false,  children: <div>Section 8 content</div>  },
-        { id: 9 , checked: false, icon: 'star', title: 'Section 9' , subtitle: 'Subtitle 9' , info, toolbar, open: false,  children: <div>Section 9 content</div>  },
-        { id: 10, checked: false, icon: 'star', title: 'Section 10', subtitle: 'Subtitle 10', info, toolbar, open: false,  children: <div>Section 10 content</div> },
-        { id: 11, checked: false, icon: 'star', title: 'Section 11', subtitle: 'Subtitle 11', info, toolbar, open: false,  children: <div>Section 11 content</div> },
-        { id: 12, checked: false, icon: 'star', title: 'Section 12', subtitle: 'Subtitle 12', info, toolbar, open: false,  children: <div>Section 12 content</div> },
-        { id: 13, checked: false, icon: 'star', title: 'Section 13', subtitle: 'Subtitle 13', info, toolbar, open: false,  children: <div>Section 13 content</div> },
-        { id: 14, checked: false, icon: 'star', title: 'Section 14', subtitle: 'Subtitle 14', info, toolbar, open: false,  children: <div>Section 14 content</div> },
-        { id: 15, checked: false, icon: 'star', title: 'Section 15', subtitle: 'Subtitle 15', info, toolbar, open: false,  children: <div>Section 15 content</div> },
-        { id: 16, checked: false, icon: 'star', title: 'Section 16', subtitle: 'Subtitle 16', info, toolbar, open: false,  children: <div>Section 16 content</div> },
-        { id: 17, checked: false, icon: 'star', title: 'Section 17', subtitle: 'Subtitle 17', info, toolbar, open: false,  children: <div>Section 17 content</div> },
-    ]
-
-
-    return (
-        <>
-           <Accordion sections={sections} onCheck={console.log} />
-        </>
-    )
-}

package/src/html/accordion.unit.test.js

@@ -1,334 +0,0 @@
-import React from 'react'
-import { Accordion } from './accordion'
-
-// Pruebas unitarias para el componente Accordion mejorado
-describe('Accordion Component', () => {
-    // Mock de los componentes dependientes
-    const mockIcon = jest.fn()
-
-    beforeEach(() => {
-        jest.clearAllMocks()
-        
-        // Mock del componente Icon
-        jest.doMock('./icon', () => ({
-            Icon: mockIcon
-        }))
-        
-        // Mock de console.warn para las pruebas
-        jest.spyOn(console, 'warn').mockImplementation(() => {})
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-    })
-
-    test('component exports correctly', () => {
-        expect(Accordion).toBeDefined()
-        expect(typeof Accordion).toBe('function')
-    })
-
-    test('component has correct PropTypes', () => {
-        expect(Accordion.propTypes).toBeDefined()
-        expect(Accordion.propTypes.sections).toBeDefined()
-        expect(Accordion.propTypes.className).toBeDefined()
-        expect(Accordion.propTypes.disabled).toBeDefined()
-        expect(Accordion.propTypes.allowMultiple).toBeDefined()
-        expect(Accordion.propTypes.animated).toBeDefined()
-        expect(Accordion.propTypes.ariaLabel).toBeDefined()
-        expect(Accordion.propTypes.onCheck).toBeDefined()
-        expect(Accordion.propTypes.onToggle).toBeDefined()
-        expect(Accordion.propTypes.onSectionChange).toBeDefined()
-    })
-
-    test('component has correct defaultProps', () => {
-        expect(Accordion.defaultProps).toBeDefined()
-        expect(Accordion.defaultProps.className).toBe('')
-        expect(Accordion.defaultProps.disabled).toBe(false)
-        expect(Accordion.defaultProps.allowMultiple).toBe(true)
-        expect(Accordion.defaultProps.animated).toBe(true)
-    })
-
-    test('warns when sections is not an array', () => {
-        const validateSections = (sections) => {
-            if (!Array.isArray(sections)) {
-                console.warn('Accordion component: sections prop must be an array')
-            }
-        }
-        
-        validateSections('not an array')
-        expect(console.warn).toHaveBeenCalledWith('Accordion component: sections prop must be an array')
-
-        console.warn.mockClear()
-        validateSections([])
-        expect(console.warn).not.toHaveBeenCalled()
-    })
-
-    test('sections state initialization works correctly', () => {
-        const sections = [
-            { id: 1, open: true, checked: false },
-            { id: 2, open: false, checked: true },
-            { id: 3, open: true, checked: true }
-        ]
-
-        const initializeState = (sections) => {
-            const openSections = sections.map(section => section.open || false)
-            const checkedSections = sections.map(section => section.checked || false)
-            return { openSections, checkedSections }
-        }
-
-        const result = initializeState(sections)
-        expect(result.openSections).toEqual([true, false, true])
-        expect(result.checkedSections).toEqual([false, true, true])
-    })
-
-    test('toggle logic works correctly with allowMultiple=true', () => {
-        const openSections = [true, false, true]
-        const allowMultiple = true
-        const index = 1
-
-        const toggle = (openSections, index, allowMultiple) => {
-            return allowMultiple 
-                ? openSections.map((open, i) => i === index ? !open : open)
-                : openSections.map((open, i) => i === index ? !open : false)
-        }
-
-        const result = toggle(openSections, index, allowMultiple)
-        expect(result).toEqual([true, true, true])
-    })
-
-    test('toggle logic works correctly with allowMultiple=false', () => {
-        const openSections = [true, false, true]
-        const allowMultiple = false
-        const index = 1
-
-        const toggle = (openSections, index, allowMultiple) => {
-            return allowMultiple 
-                ? openSections.map((open, i) => i === index ? !open : open)
-                : openSections.map((open, i) => i === index ? !open : false)
-        }
-
-        const result = toggle(openSections, index, allowMultiple)
-        expect(result).toEqual([false, true, false])
-    })
-
-    test('check logic works correctly', () => {
-        const checkedSections = [false, true, false]
-        const index = 0
-
-        const check = (checkedSections, index) => {
-            return checkedSections.map((checked, i) => i === index ? !checked : checked)
-        }
-
-        const result = check(checkedSections, index)
-        expect(result).toEqual([true, true, false])
-    })
-
-    test('CSS classes generation works correctly', () => {
-        const generateClasses = (disabled, animated, className) => {
-            return [
-                'accordion',
-                disabled && 'disabled',
-                animated && 'animated',
-                className || ''
-            ].filter(Boolean).join(' ')
-        }
-
-        expect(generateClasses(false, false, '')).toBe('accordion')
-        expect(generateClasses(true, false, '')).toBe('accordion disabled')
-        expect(generateClasses(false, true, '')).toBe('accordion animated')
-        expect(generateClasses(true, true, 'custom')).toBe('accordion disabled animated custom')
-    })
-
-    test('accessibility attributes generation works correctly', () => {
-        const generateAriaAttributes = (ariaLabel, disabled) => {
-            return {
-                'aria-label': ariaLabel || 'Accordion',
-                'aria-disabled': disabled,
-                role: 'region'
-            }
-        }
-
-        const result1 = generateAriaAttributes(null, false)
-        expect(result1['aria-label']).toBe('Accordion')
-        expect(result1['aria-disabled']).toBe(false)
-        expect(result1.role).toBe('region')
-
-        const result2 = generateAriaAttributes('Custom Accordion', true)
-        expect(result2['aria-label']).toBe('Custom Accordion')
-        expect(result2['aria-disabled']).toBe(true)
-    })
-
-    test('section ID generation works correctly', () => {
-        const generateSectionId = (section, index) => {
-            return section.id || `accordion-section-${index}`
-        }
-
-        expect(generateSectionId({ id: 'custom-id' }, 0)).toBe('custom-id')
-        expect(generateSectionId({}, 0)).toBe('accordion-section-0')
-        expect(generateSectionId({ id: null }, 1)).toBe('accordion-section-1')
-    })
-
-    test('callback handling works correctly', () => {
-        const mockOnCheck = jest.fn()
-        const mockOnToggle = jest.fn()
-        const mockOnSectionChange = jest.fn()
-
-        const simulateCheck = (index, newValue, section, onCheck, onSectionChange) => {
-            if (onCheck) {
-                onCheck(index, newValue, section?.id, section)
-            }
-            
-            if (onSectionChange) {
-                onSectionChange('check', index, newValue, section)
-            }
-        }
-
-        const simulateToggle = (index, newValue, section, onToggle, onSectionChange) => {
-            if (onToggle) {
-                onToggle(index, newValue, section)
-            }
-            
-            if (onSectionChange) {
-                onSectionChange('toggle', index, newValue, section)
-            }
-        }
-
-        const section = { id: 'test-section', title: 'Test' }
-
-        simulateCheck(0, true, section, mockOnCheck, mockOnSectionChange)
-        expect(mockOnCheck).toHaveBeenCalledWith(0, true, 'test-section', section)
-        expect(mockOnSectionChange).toHaveBeenCalledWith('check', 0, true, section)
-
-        simulateToggle(0, true, section, mockOnToggle, mockOnSectionChange)
-        expect(mockOnToggle).toHaveBeenCalledWith(0, true, section)
-        expect(mockOnSectionChange).toHaveBeenCalledWith('toggle', 0, true, section)
-    })
-
-    test('disabled state prevents interactions', () => {
-        const simulateInteraction = (disabled) => {
-            if (disabled) return false
-            return true
-        }
-
-        expect(simulateInteraction(true)).toBe(false)
-        expect(simulateInteraction(false)).toBe(true)
-    })
-})
-
-// AccordionSection tests
-describe('AccordionSection Component', () => {
-    test('keyboard navigation logic works correctly', () => {
-        const mockOnToggle = jest.fn()
-
-        const handleKeyDown = (event, disabled, onToggle) => {
-            if (disabled) return false
-            
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    if (onToggle) onToggle()
-                    return true
-                default:
-                    return false
-            }
-        }
-
-        // Test Enter key
-        expect(handleKeyDown({ key: 'Enter' }, false, mockOnToggle)).toBe(true)
-        expect(mockOnToggle).toHaveBeenCalled()
-
-        mockOnToggle.mockClear()
-
-        // Test Space key
-        expect(handleKeyDown({ key: ' ' }, false, mockOnToggle)).toBe(true)
-        expect(mockOnToggle).toHaveBeenCalled()
-
-        mockOnToggle.mockClear()
-
-        // Test disabled state
-        expect(handleKeyDown({ key: 'Enter' }, true, mockOnToggle)).toBe(false)
-        expect(mockOnToggle).not.toHaveBeenCalled()
-
-        // Test other keys
-        expect(handleKeyDown({ key: 'Tab' }, false, mockOnToggle)).toBe(false)
-    })
-
-    test('header click logic works correctly', () => {
-        const mockOnToggle = jest.fn()
-
-        const handleHeaderClick = (event, disabled, onToggle) => {
-            if (disabled) return false
-            
-            // Don't toggle if clicking on interactive elements
-            if (event.target.closest('.accordion-section-checker') || 
-                event.target.closest('.accordion-section--toolbar')) {
-                return false
-            }
-            
-            if (onToggle) onToggle()
-            return true
-        }
-
-        // Normal click
-        const normalEvent = { target: { closest: () => null } }
-        expect(handleHeaderClick(normalEvent, false, mockOnToggle)).toBe(true)
-        expect(mockOnToggle).toHaveBeenCalled()
-
-        mockOnToggle.mockClear()
-
-        // Click on checker
-        const checkerEvent = { target: { closest: (selector) => selector === '.accordion-section-checker' ? true : null } }
-        expect(handleHeaderClick(checkerEvent, false, mockOnToggle)).toBe(false)
-        expect(mockOnToggle).not.toHaveBeenCalled()
-
-        // Click on toolbar
-        const toolbarEvent = { target: { closest: (selector) => selector === '.accordion-section--toolbar' ? true : null } }
-        expect(handleHeaderClick(toolbarEvent, false, mockOnToggle)).toBe(false)
-        expect(mockOnToggle).not.toHaveBeenCalled()
-
-        // Disabled state
-        expect(handleHeaderClick(normalEvent, true, mockOnToggle)).toBe(false)
-        expect(mockOnToggle).not.toHaveBeenCalled()
-    })
-
-    test('section CSS classes generation works correctly', () => {
-        const generateSectionClasses = (open, disabled, animated, checked) => {
-            return [
-                'accordion-section',
-                open && 'open',
-                disabled && 'disabled',
-                animated && 'animated',
-                checked && 'checked'
-            ].filter(Boolean).join(' ')
-        }
-
-        expect(generateSectionClasses(false, false, false, false)).toBe('accordion-section')
-        expect(generateSectionClasses(true, false, false, false)).toBe('accordion-section open')
-        expect(generateSectionClasses(false, true, false, false)).toBe('accordion-section disabled')
-        expect(generateSectionClasses(false, false, true, false)).toBe('accordion-section animated')
-        expect(generateSectionClasses(false, false, false, true)).toBe('accordion-section checked')
-        expect(generateSectionClasses(true, true, true, true)).toBe('accordion-section open disabled animated checked')
-    })
-
-    test('checked icon logic works correctly', () => {
-        const getCheckedIcon = (checked) => {
-            return checked === undefined || checked === null ? 
-                null : 
-                checked === false ? "check_box_outline_blank" : "check_box"
-        }
-
-        expect(getCheckedIcon(undefined)).toBeNull()
-        expect(getCheckedIcon(null)).toBeNull()
-        expect(getCheckedIcon(false)).toBe("check_box_outline_blank")
-        expect(getCheckedIcon(true)).toBe("check_box")
-    })
-
-    test('toggler icon logic works correctly', () => {
-        const getTogglerIcon = (open) => {
-            return open ? "expand_less" : "expand_more"
-        }
-
-        expect(getTogglerIcon(true)).toBe("expand_less")
-        expect(getTogglerIcon(false)).toBe("expand_more")
-    })
-})