ywana-core8 0.1.103 → 0.2.2

package/src/html/table2.test.js

@@ -1,582 +0,0 @@
-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
-        global.document = {
-            createElement: jest.fn().mockReturnValue({
-                href: '',
-                download: '',
-                click: jest.fn()
-            })
-        }
-    })
-
-    afterEach(() => {
-        console.warn.mockRestore()
-        if (global.document && global.document.createElement.mockRestore) {
-            global.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())
-
-            // Reset mocks before checkbox test
-            mockOnRowSelection.mockClear()
-            mockOnRowClick.mockClear()
-            mockSetSelectedRows.mockClear()
-
-            // Checkbox click (should not trigger selection)
-            const checkboxEvent = { target: { id: 'checked' } }
-            select(mockRow, checkboxEvent, new Set(), 'single', mockSetSelectedRows, mockOnRowSelection, mockOnRowClick)
-            expect(mockOnRowSelection).not.toHaveBeenCalled()
-            expect(mockOnRowClick).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(global.document.createElement).toHaveBeenCalledWith('a')
-        })
-
-        test('handles virtual scrolling pagination', () => {
-            const paginateRows = (filteredRows, virtualScrolling, currentPage, pageSize) => {
-                if (!virtualScrolling) return filteredRows
-
-                const start = currentPage * pageSize
-                const end = start + pageSize
-                return filteredRows.slice(start, end)
-            }
-
-            const largeDataset = Array.from({ length: 100 }, (_, i) => ({
-                id: i + 1,
-                name: `User ${i + 1}`,
-                age: 20 + (i % 50),
-                email: `user${i + 1}@example.com`
-            }))
-
-            // Virtual scrolling disabled
-            expect(paginateRows(largeDataset, false, 0, 10)).toEqual(largeDataset)
-
-            // First page
-            const firstPage = paginateRows(largeDataset, true, 0, 10)
-            expect(firstPage).toHaveLength(10)
-            expect(firstPage[0].id).toBe(1)
-            expect(firstPage[9].id).toBe(10)
-
-            // Second page
-            const secondPage = paginateRows(largeDataset, true, 1, 10)
-            expect(secondPage).toHaveLength(10)
-            expect(secondPage[0].id).toBe(11)
-            expect(secondPage[9].id).toBe(20)
-
-            // Last page (partial)
-            const lastPage = paginateRows(largeDataset, true, 9, 10)
-            expect(lastPage).toHaveLength(10)
-            expect(lastPage[0].id).toBe(91)
-            expect(lastPage[9].id).toBe(100)
-        })
-
-        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')
-        })
-
-        test('maintains 100% compatibility with original DataTable', () => {
-            // Test that all original props work exactly the same
-            const originalProps = {
-                columns: mockColumns,
-                rows: mockRows,
-                onRowSelection: jest.fn(),
-                onSort: jest.fn(),
-                onCheckAll: jest.fn(),
-                editable: true,
-                outlined: true,
-                expanded: false,
-                className: 'test-table',
-                emptyMessage: "Custom empty message",
-                emptyIcon: "custom_icon",
-                multisort: true,
-                filterable: true,
-                onClearFilters: jest.fn()
-            }
-
-            // These should all work without any changes
-            expect(() => {
-                // Simulate component creation with original props
-                const component = { props: originalProps }
-                expect(component.props.columns).toEqual(mockColumns)
-                expect(component.props.rows).toEqual(mockRows)
-                expect(component.props.editable).toBe(true)
-                expect(component.props.outlined).toBe(true)
-                expect(component.props.multisort).toBe(true)
-                expect(component.props.filterable).toBe(true)
-            }).not.toThrow()
-
-            // Verify callbacks maintain same signature
-            expect(typeof originalProps.onRowSelection).toBe('function')
-            expect(typeof originalProps.onSort).toBe('function')
-            expect(typeof originalProps.onCheckAll).toBe('function')
-            expect(typeof originalProps.onClearFilters).toBe('function')
-        })
-
-        test('new features are optional and do not break existing code', () => {
-            // Test that new props have sensible defaults
-            const newFeatures = {
-                loading: false,
-                skeleton: false,
-                striped: false,
-                hover: true,
-                compact: false,
-                bordered: false,
-                responsive: true,
-                stickyHeader: true,
-                virtualScrolling: false,
-                pageSize: 50,
-                selectionMode: 'single',
-                sortMode: 'single',
-                resizable: false,
-                reorderable: false,
-                exportable: false,
-                searchable: false,
-                accessibility: true,
-                showRowNumbers: false,
-                showSelectAll: true
-            }
-
-            // All new features should have safe defaults
-            Object.entries(newFeatures).forEach(([key, expectedDefault]) => {
-                expect(DataTable2.defaultProps[key]).toBe(expectedDefault)
-            })
-
-            // Test that omitting new props doesn't break anything
-            const minimalProps = {
-                columns: mockColumns,
-                rows: mockRows
-            }
-
-            expect(() => {
-                // Simulate component with minimal props
-                const component = { props: { ...DataTable2.defaultProps, ...minimalProps } }
-                expect(component.props.columns).toEqual(mockColumns)
-                expect(component.props.rows).toEqual(mockRows)
-            }).not.toThrow()
-        })
-    })
-})

package/src/html/text.test.js

@@ -1,15 +0,0 @@
-import React, { useState } from 'react'
-import { useEffect } from 'react/cjs/react.production.min'
-import { Text, TEXTFORMATS } from './text'
-
-const TextTest = (prop) => {
-
-
-    return (
-        <>
-           <Text format={TEXTFORMATS.NUMERIC}>846964.4199142859</Text>
-           <Text format={TEXTFORMATS.NUMERIC}>{"345356345.345"}</Text>
-           <Text format={TEXTFORMATS.STRING}>Lorem Ipsum dolro sit amet....</Text>
-        </>
-    )
-}

package/src/html/textfield.test.js

@@ -1,51 +0,0 @@
-import React, { useState } from 'react'
-import { DropDown, TextField, TextArea, TokenField } from '.'
-import { DateRange } from './textfield'
-
-const TextFieldTest = (prop) => {
-
-    const [form, setForm] = useState({
-        gender3: "3",
-        labelLeft: "xxxxx"
-    })
-
-    function change(id, value) {
-        console.log('2', id, value)
-        const next = Object.assign({}, form, { [id]: value })
-        setForm(next)
-    }
-
-    const options = [
-        { label: "", value: "" },
-        { label: "One", value: "1" },
-        { label: "Two", value: "2" },
-        { label: "Three", value: "3" },
-        { label: "Four", value: "4" },
-        { label: "Five", value: "5" },
-    ]
-
-    const options2 = [
-        { label: "YES", value: "true" },
-        { label: "NO", value: "false" },
-    ]
-
-    return (
-        <>
-            <TextField id="labelLeft" labelPosition="left" label="Label Left"  value={form.labelLeft} onChange={change}/>
-            <TextField id="name" label="Name" value={form.name} onChange={change} outlined/>
-            <br/>
-            <DropDown id="b1" label="Boolean1" labelPosition="left" onChange={change} options={options2} value={form.b1} />
-            <br/>
-            <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={false} position="top"/>
-            <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={true}/>
-            <DropDown id="gender3" label="Dropdown 3" value={form.gender3} onChange={change} options={options} predictive={false} editable={true}/>
-            <TokenField id="token1" label="Tokens" onChange={change} />
-            <TokenField id="token2" label="Tokens DropDown" onChange={change} options={options} tokens={form.token2}/>
-            <br/>
-            <br/>
-            <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} placeholder="loremitsum"/>
-            <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
-            <DateRange id="range1" value={form.range1} onChange={change}/>
-        </>
-    )
-}