ywana-core8 0.1.75 → 0.1.76

package/src/html/section.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
 import { Icon } from './icon';
 import { Header } from './header';
 import './section.css'
@@ -20,12 +21,48 @@ export const Section = (props) => {
     }
 
     return (
-        <section className={`section ${className}`}>
-            <Header icon={icon}  title={title}>
+        <section className={`section ${className || ''}`} role="region" aria-expanded={isOpen}>
+            <Header icon={icon} title={title}>
+                {canCollapse ? (
+                    <Icon
+                    icon={isOpen ? "expand_less" : "expand_more"}
+                    clickable
+                    action={toggle}
+                    tooltip={{
+                        text: isOpen ? 'Contraer sección' : 'Expandir sección',
+                        top: '-3rem',
+                        left: '-2rem'
+                    }}
+                    />
+                ) : ''}
                 {actions}
-                {canCollapse ? <Icon icon="expand_more" onIcon="expand_less" clickable action={toggle} /> : ''}
             </Header>
             {isOpen ? (<main>{children}</main>) : ''}
         </section>
     )
+}
+
+// PropTypes para validación y documentación
+Section.propTypes = {
+    /** Icono a mostrar en el header */
+    icon: PropTypes.string,
+    /** Título de la sección */
+    title: PropTypes.string,
+    /** Si la sección puede colapsarse */
+    canCollapse: PropTypes.bool,
+    /** Estado inicial de apertura */
+    open: PropTypes.bool,
+    /** Acciones adicionales para el header */
+    actions: PropTypes.node,
+    /** Contenido de la sección */
+    children: PropTypes.node,
+    /** Clases CSS adicionales */
+    className: PropTypes.string
+}
+
+Section.defaultProps = {
+    title: '',
+    canCollapse: true,
+    open: false,
+    className: ''
 }

package/src/html/section.test.js

@@ -0,0 +1,131 @@
+import React from 'react'
+import { Section } from './section'
+
+// Pruebas unitarias simples para el componente Section
+describe('Section Component', () => {
+    // Mock de los componentes dependientes
+    const mockIcon = jest.fn()
+    const mockHeader = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+
+        // Mock del componente Icon
+        jest.doMock('./icon', () => ({
+            Icon: mockIcon
+        }))
+
+        // Mock del componente Header
+        jest.doMock('./header', () => ({
+            Header: mockHeader
+        }))
+    })
+
+    test('component exports correctly', () => {
+        expect(Section).toBeDefined()
+        expect(typeof Section).toBe('function')
+    })
+
+    test('component has correct PropTypes', () => {
+        expect(Section.propTypes).toBeDefined()
+        expect(Section.propTypes.title).toBeDefined()
+        expect(Section.propTypes.canCollapse).toBeDefined()
+        expect(Section.propTypes.open).toBeDefined()
+        expect(Section.propTypes.icon).toBeDefined()
+        expect(Section.propTypes.actions).toBeDefined()
+        expect(Section.propTypes.children).toBeDefined()
+        expect(Section.propTypes.className).toBeDefined()
+    })
+
+    test('component has correct defaultProps', () => {
+        expect(Section.defaultProps).toBeDefined()
+        expect(Section.defaultProps.title).toBe('')
+        expect(Section.defaultProps.canCollapse).toBe(true)
+        expect(Section.defaultProps.open).toBe(false)
+        expect(Section.defaultProps.className).toBe('')
+    })
+
+    test('component structure is correct', () => {
+        // Verificar que el componente es una función
+        expect(typeof Section).toBe('function')
+
+        // Verificar que el componente tiene las propiedades esperadas
+        expect(Section.propTypes).toBeDefined()
+        expect(Section.defaultProps).toBeDefined()
+
+        // Verificar que el componente puede ser instanciado como elemento React
+        const element = React.createElement(Section, {
+            title: 'Test Title',
+            icon: 'test-icon',
+            canCollapse: true,
+            open: false,
+            className: 'test-class'
+        })
+
+        expect(element).toBeDefined()
+        expect(element.type).toBe(Section)
+    })
+
+    test('toggle function works correctly', () => {
+        const props = {
+            title: 'Test Title',
+            open: false
+        }
+
+        // Simular el comportamiento del toggle
+        let isOpen = props.open
+        const toggle = () => {
+            isOpen = !isOpen
+        }
+
+        expect(isOpen).toBe(false)
+        toggle()
+        expect(isOpen).toBe(true)
+        toggle()
+        expect(isOpen).toBe(false)
+    })
+
+    test('className handling works correctly', () => {
+        // Simular el manejo de className
+        const testClassName = (className) => {
+            return `section ${className || ''}`
+        }
+
+        expect(testClassName('custom-class')).toBe('section custom-class')
+        expect(testClassName(undefined)).toBe('section ')
+        expect(testClassName('')).toBe('section ')
+    })
+
+    test('icon logic works correctly', () => {
+        // Simular la lógica del icono
+        const getIconName = (isOpen) => {
+            return isOpen ? "expand_less" : "expand_more"
+        }
+
+        expect(getIconName(false)).toBe('expand_more')
+        expect(getIconName(true)).toBe('expand_less')
+    })
+
+    test('tooltip text and positioning logic works correctly', () => {
+        // Simular la lógica del tooltip
+        const getTooltipConfig = (isOpen) => {
+            return {
+                text: isOpen ? 'Contraer sección' : 'Expandir sección',
+                top: '-3rem',
+                left: '-2rem'
+            }
+        }
+
+        const closedTooltip = getTooltipConfig(false)
+        const openTooltip = getTooltipConfig(true)
+
+        expect(closedTooltip.text).toBe('Expandir sección')
+        expect(openTooltip.text).toBe('Contraer sección')
+
+        // Verificar que el posicionamiento evita superposición
+        expect(closedTooltip.top).toBe('-3rem')
+        expect(closedTooltip.left).toBe('-2rem')
+        expect(openTooltip.top).toBe('-3rem')
+        expect(openTooltip.left).toBe('-2rem')
+    })
+})

package/src/html/selector.css

@@ -1,10 +1,21 @@
 .multiselector {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.multiselector__options {
   display: flex;
   flex-flow: wrap;
-  padding: 1rem
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.multiselector>li {
+.multiselector>li,
+.toggle-button {
   color: var(--primary-color, blue);
   border: solid 1px var(--primary-color, blue);
   cursor: pointer;
@@ -12,9 +23,324 @@
   justify-content: center;
   align-items: center;
   padding: .3rem .9rem;
+  gap: 0.5rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  outline: none;
+  position: relative;
+  background-color: transparent;
 }
 
-li.selected {
+li.selected,
+.toggle-button.selected {
   color: var(--paper-color);
   background-color: var(--primary-color);
 }
+
+/* Enhanced Selector Styles - New functionality while maintaining compatibility */
+
+/* MultiSelector variants */
+.multiselector--outlined .toggle-button {
+  border: 2px solid var(--primary-color, #2196f3);
+  background-color: transparent;
+}
+
+.multiselector--filled .toggle-button {
+  border: none;
+  background-color: var(--background-color-light, #f5f5f5);
+  color: var(--text-color, #333);
+}
+
+.multiselector--filled .toggle-button.selected {
+  background-color: var(--primary-color, #2196f3);
+  color: white;
+}
+
+/* Size variants */
+.multiselector--small .toggle-button {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+}
+
+.multiselector--medium .toggle-button {
+  padding: 0.3rem 0.9rem;
+  font-size: 0.9rem;
+}
+
+.multiselector--large .toggle-button {
+  padding: 0.5rem 1.2rem;
+  font-size: 1rem;
+}
+
+/* States */
+.multiselector--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.toggle-button--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.toggle-button:hover:not(.toggle-button--disabled) {
+  background-color: var(--primary-color-light, rgba(33, 150, 243, 0.1));
+  transform: translateY(-1px);
+}
+
+.toggle-button:focus {
+  outline: 2px solid var(--primary-color, #2196f3);
+  outline-offset: 2px;
+}
+
+.toggle-button:active:not(.toggle-button--disabled) {
+  transform: translateY(0);
+}
+
+/* Toggle button elements */
+.toggle-button__icon {
+  flex-shrink: 0;
+}
+
+.toggle-button__label {
+  flex: 1;
+  text-align: center;
+}
+
+.toggle-button__check {
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+}
+
+/* Search */
+.multiselector__search {
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+
+.multiselector__search-input {
+  width: 100%;
+  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+  border: 1px solid var(--divider-color, #e0e0e0);
+  border-radius: 4px;
+  font-size: 0.9rem;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.multiselector__search-input:focus {
+  border-color: var(--primary-color, #2196f3);
+}
+
+.multiselector__search-icon {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-color-light, #666);
+  pointer-events: none;
+}
+
+/* Controls */
+.multiselector__controls {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.5rem;
+}
+
+.multiselector__clear-button {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: 1px solid var(--divider-color, #e0e0e0);
+  color: var(--text-color-light, #666);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: all 0.2s ease;
+}
+
+.multiselector__clear-button:hover:not(:disabled) {
+  background-color: var(--error-color-light, #ffebee);
+  border-color: var(--error-color, #f44336);
+  color: var(--error-color, #f44336);
+}
+
+.multiselector__clear-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Summary */
+.multiselector__summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  background-color: var(--background-color-light, #f5f5f5);
+  border-radius: 4px;
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+}
+
+.multiselector__count {
+  color: var(--text-color-light, #666);
+}
+
+.multiselector__warning {
+  color: var(--warning-color, #ff9800);
+  font-weight: 500;
+}
+
+/* Loading and empty states */
+.multiselector__loading,
+.multiselector__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  gap: 0.5rem;
+  color: var(--text-color-light, #666);
+  text-align: center;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .multiselector {
+    padding: 0.75rem;
+  }
+
+  .multiselector__options {
+    gap: 0.25rem;
+  }
+
+  .toggle-button {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .multiselector--large .toggle-button {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9rem;
+  }
+
+  .multiselector__search-input {
+    padding: 0.4rem 2rem 0.4rem 0.6rem;
+    font-size: 0.8rem;
+  }
+
+  .multiselector__summary {
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: flex-start;
+  }
+}
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+  .toggle-button {
+    border-color: var(--primary-color-dark, #64b5f6);
+    color: var(--primary-color-dark, #64b5f6);
+  }
+
+  .toggle-button.selected {
+    background-color: var(--primary-color-dark, #64b5f6);
+    color: var(--text-color-dark, #000);
+  }
+
+  .multiselector--filled .toggle-button {
+    background-color: var(--background-color-light-dark, #424242);
+    color: var(--text-color-dark, #ffffff);
+  }
+
+  .toggle-button:hover:not(.toggle-button--disabled) {
+    background-color: var(--primary-color-dark-light, rgba(100, 181, 246, 0.1));
+  }
+
+  .multiselector__search-input {
+    background-color: var(--background-color-dark, #303030);
+    border-color: var(--divider-color-dark, #616161);
+    color: var(--text-color-dark, #ffffff);
+  }
+
+  .multiselector__search-input:focus {
+    border-color: var(--primary-color-dark, #64b5f6);
+  }
+
+  .multiselector__clear-button {
+    border-color: var(--divider-color-dark, #616161);
+    color: var(--text-color-light-dark, #cccccc);
+  }
+
+  .multiselector__summary {
+    background-color: var(--background-color-light-dark, #424242);
+  }
+
+  .multiselector__loading,
+  .multiselector__empty {
+    color: var(--text-color-light-dark, #cccccc);
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .toggle-button {
+    border-width: 2px;
+  }
+
+  .toggle-button:focus {
+    outline-width: 3px;
+  }
+
+  .toggle-button.selected {
+    border-color: currentColor;
+  }
+
+  .multiselector__search-input:focus {
+    outline: 2px solid currentColor;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .toggle-button,
+  .multiselector__search-input,
+  .multiselector__clear-button {
+    transition: none;
+  }
+
+  .toggle-button:hover:not(.toggle-button--disabled) {
+    transform: none;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .multiselector {
+    break-inside: avoid;
+  }
+
+  .toggle-button {
+    border: 1px solid black !important;
+    background: white !important;
+    color: black !important;
+  }
+
+  .toggle-button.selected {
+    background: #f0f0f0 !important;
+    font-weight: bold !important;
+  }
+
+  .multiselector__search,
+  .multiselector__controls {
+    display: none !important;
+  }
+
+  .toggle-button__check {
+    display: none !important;
+  }
+}