ywana-core8 0.1.75 → 0.1.76

package/src/html/selector.js

@@ -1,57 +1,403 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useCallback, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { Icon } from './icon'
 import './selector.css'
 
 /**
- * Multi Selector
+ * Enhanced Multi Selector component with improved functionality while maintaining 100% compatibility
  */
 export const MultiSelector = (props) => {
+  const {
+    // Original props (100% compatible)
+    options = [],
+    className,
+    onChange,
+    // New enhanced props (all optional for compatibility)
+    disabled = false,
+    maxSelections,
+    minSelections = 0,
+    searchable = false,
+    searchPlaceholder = "Search options...",
+    variant = 'default',
+    size = 'medium',
+    allowClear = false,
+    onClear,
+    loading = false,
+    empty = false,
+    emptyMessage = "No options available",
+    ariaLabel,
+    style,
+    ...restProps
+  } = props
 
-  const { options = [], className } = props
   const [selections, setSelections] = useState([])
+  const [searchTerm, setSearchTerm] = useState('')
+  const selectorRef = useRef(null)
 
+  // Initialize selections (maintaining original logic)
   useEffect(() => {
     const initialSelections = options.filter(option => option.selected === true).map(option => option.value)
     setSelections(initialSelections)
+  }, [options])
+
+  // Validate props
+  useEffect(() => {
+    if (!Array.isArray(options)) {
+      console.warn('MultiSelector: options prop must be an array')
+    }
+  }, [options])
+
+  // Enhanced toggle function (maintaining original behavior)
+  const toggleSelection = useCallback((value) => {
+    if (disabled) return
+
+    setSelections(prev => {
+      const isSelected = prev.includes(value)
+      let next
+
+      if (isSelected) {
+        // Removing selection
+        if (prev.length <= minSelections) {
+          console.warn(`MultiSelector: Cannot remove selection. Minimum ${minSelections} selections required.`)
+          return prev
+        }
+        next = prev.filter(item => item !== value)
+      } else {
+        // Adding selection
+        if (maxSelections && prev.length >= maxSelections) {
+          console.warn(`MultiSelector: Cannot add selection. Maximum ${maxSelections} selections allowed.`)
+          return prev
+        }
+        next = prev.concat([value])
+      }
+
+      if (onChange) onChange(next)
+      return next
+    })
+  }, [disabled, onChange, maxSelections, minSelections])
+
+  // Handle clear all
+  const handleClear = useCallback(() => {
+    if (disabled || minSelections > 0) return
+
+    setSelections([])
+    if (onChange) onChange([])
+    if (onClear) onClear()
+  }, [disabled, minSelections, onChange, onClear])
+
+  // Handle search
+  const handleSearch = useCallback((event) => {
+    setSearchTerm(event.target.value)
   }, [])
 
-  function toggleSelection(value) {
-    const { onChange } = props
-    const next = selections.includes(value)
-      ? selections.filter(item => item != value)
-      : selections.concat([value])
-    setSelections(next)
-    if (onChange) onChange(next)
-  }
+  // Filter options based on search
+  const filteredOptions = searchable && searchTerm
+    ? options.filter(option =>
+        option.label?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        option.value?.toString().toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : options
 
-  const items = options.map(option => ({
+  // Generate items (maintaining original logic)
+  const items = filteredOptions.map(option => ({
     ...option,
     selected: selections.includes(option.value),
-    onToggle: toggleSelection
+    onToggle: toggleSelection,
+    disabled: disabled || option.disabled,
+    variant,
+    size
   }))
 
+  // Generate CSS classes
+  const cssClasses = [
+    'multiselector',
+    `multiselector--${variant}`,
+    `multiselector--${size}`,
+    disabled && 'multiselector--disabled',
+    loading && 'multiselector--loading',
+    searchable && 'multiselector--searchable',
+    className
+  ].filter(Boolean).join(' ')
+
+  // Accessibility attributes
+  const ariaAttributes = {
+    'aria-label': ariaLabel || 'Multi selector',
+    'aria-disabled': disabled,
+    'aria-busy': loading,
+    role: 'group'
+  }
+
+  // Show loading state
+  if (loading) {
+    return (
+      <div className={cssClasses} style={style} {...ariaAttributes} {...restProps}>
+        <div className="multiselector__loading">
+          <Icon icon="hourglass_empty" size="medium" />
+          <span>Loading options...</span>
+        </div>
+      </div>
+    )
+  }
+
+  // Show empty state
+  if (empty || options.length === 0) {
+    return (
+      <div className={cssClasses} style={style} {...ariaAttributes} {...restProps}>
+        <div className="multiselector__empty">
+          <Icon icon="inbox" size="medium" />
+          <span>{emptyMessage}</span>
+        </div>
+      </div>
+    )
+  }
+
   return (
-    <ul className={`multiselector ${className}`}>
-      {items.map(option => <ToggleButton {...option} />)}
-    </ul>
+    <div className={cssClasses} style={style} ref={selectorRef} {...ariaAttributes} {...restProps}>
+      {/* Search input */}
+      {searchable && (
+        <div className="multiselector__search">
+          <input
+            type="text"
+            placeholder={searchPlaceholder}
+            value={searchTerm}
+            onChange={handleSearch}
+            className="multiselector__search-input"
+            disabled={disabled}
+          />
+          <Icon icon="search" size="small" className="multiselector__search-icon" />
+        </div>
+      )}
+
+      {/* Clear button */}
+      {allowClear && selections.length > 0 && minSelections === 0 && (
+        <div className="multiselector__controls">
+          <button
+            type="button"
+            onClick={handleClear}
+            disabled={disabled}
+            className="multiselector__clear-button"
+            aria-label="Clear all selections"
+          >
+            <Icon icon="clear" size="small" />
+            Clear All ({selections.length})
+          </button>
+        </div>
+      )}
+
+      {/* Options list (maintaining original structure) */}
+      <ul className="multiselector__options">
+        {items.map((option, index) => (
+          <ToggleButton key={option.value || index} {...option} />
+        ))}
+      </ul>
+
+      {/* Selection summary */}
+      {(maxSelections || minSelections > 0) && (
+        <div className="multiselector__summary">
+          <span className="multiselector__count">
+            {selections.length}
+            {maxSelections && ` / ${maxSelections}`}
+            {maxSelections ? ' selected' : ` of ${options.length} selected`}
+          </span>
+          {minSelections > 0 && selections.length < minSelections && (
+            <span className="multiselector__warning">
+              Minimum {minSelections} required
+            </span>
+          )}
+        </div>
+      )}
+    </div>
   )
 }
 
 /**
- * Toggle Button
+ * Enhanced Toggle Button component with improved functionality while maintaining 100% compatibility
  */
 export const ToggleButton = (props) => {
+  const {
+    // Original props (100% compatible)
+    label,
+    value,
+    selected = false,
+    onToggle,
+    // New enhanced props (all optional for compatibility)
+    disabled = false,
+    icon,
+    variant = 'default',
+    size = 'medium',
+    tooltip,
+    className,
+    style,
+    ...restProps
+  } = props
 
-  const { label, value, selected = false, onToggle } = props
-
-  function toggle() {
+  // Handle toggle (maintaining original behavior)
+  const handleToggle = useCallback(() => {
+    if (disabled) return
     if (onToggle) onToggle(value)
+  }, [disabled, onToggle, value])
+
+  // Handle keyboard interaction
+  const handleKeyDown = useCallback((event) => {
+    if (disabled) return
+
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (onToggle) onToggle(value)
+        break
+      default:
+        break
+    }
+  }, [disabled, onToggle, value])
+
+  // Generate CSS classes (maintaining original logic)
+  const cssClasses = [
+    'toggle-button',
+    selected && 'selected',
+    `toggle-button--${variant}`,
+    `toggle-button--${size}`,
+    disabled && 'toggle-button--disabled',
+    value && `toggle-button--${value}`,
+    className
+  ].filter(Boolean).join(' ')
+
+  // Accessibility attributes
+  const ariaAttributes = {
+    'aria-pressed': selected,
+    'aria-disabled': disabled,
+    'aria-label': tooltip || (typeof label === 'string' ? label : `Toggle ${value}`),
+    role: 'button',
+    tabIndex: disabled ? -1 : 0
   }
 
-  const selectedStyle = selected ? 'selected' : ''
   return (
-    <li className={`${selectedStyle} ${value}`} onClick={toggle}>
-      {label}
+    <li
+      className={cssClasses}
+      onClick={handleToggle}
+      onKeyDown={handleKeyDown}
+      title={tooltip}
+      style={style}
+      {...ariaAttributes}
+      {...restProps}
+    >
+      {/* Icon */}
+      {icon && (
+        <Icon
+          icon={icon}
+          size={size === 'small' ? 'small' : 'medium'}
+          className="toggle-button__icon"
+          disabled={disabled}
+        />
+      )}
+
+      {/* Label */}
+      <span className="toggle-button__label">
+        {label}
+      </span>
+
+      {/* Selected indicator */}
+      {selected && (
+        <Icon
+          icon="check"
+          size="small"
+          className="toggle-button__check"
+        />
+      )}
     </li>
   )
+}
+
+// PropTypes for MultiSelector
+MultiSelector.propTypes = {
+  /** Array of option objects */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
+    icon: PropTypes.string
+  })),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Change callback */
+  onChange: PropTypes.func,
+  /** Disabled state */
+  disabled: PropTypes.bool,
+  /** Maximum selections allowed */
+  maxSelections: PropTypes.number,
+  /** Minimum selections required */
+  minSelections: PropTypes.number,
+  /** Enable search functionality */
+  searchable: PropTypes.bool,
+  /** Search input placeholder */
+  searchPlaceholder: PropTypes.string,
+  /** Visual variant */
+  variant: PropTypes.oneOf(['default', 'outlined', 'filled']),
+  /** Size variant */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Allow clear all button */
+  allowClear: PropTypes.bool,
+  /** Clear callback */
+  onClear: PropTypes.func,
+  /** Loading state */
+  loading: PropTypes.bool,
+  /** Empty state */
+  empty: PropTypes.bool,
+  /** Empty state message */
+  emptyMessage: PropTypes.string,
+  /** ARIA label */
+  ariaLabel: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object
+}
+
+MultiSelector.defaultProps = {
+  options: [],
+  disabled: false,
+  minSelections: 0,
+  searchable: false,
+  searchPlaceholder: "Search options...",
+  variant: 'default',
+  size: 'medium',
+  allowClear: false,
+  loading: false,
+  empty: false,
+  emptyMessage: "No options available"
+}
+
+// PropTypes for ToggleButton
+ToggleButton.propTypes = {
+  /** Button label */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /** Button value */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  /** Selected state */
+  selected: PropTypes.bool,
+  /** Toggle callback */
+  onToggle: PropTypes.func,
+  /** Disabled state */
+  disabled: PropTypes.bool,
+  /** Icon name */
+  icon: PropTypes.string,
+  /** Visual variant */
+  variant: PropTypes.oneOf(['default', 'outlined', 'filled']),
+  /** Size variant */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Tooltip text */
+  tooltip: PropTypes.string,
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object
+}
 
+ToggleButton.defaultProps = {
+  selected: false,
+  disabled: false,
+  variant: 'default',
+  size: 'medium'
 }
+
+export default MultiSelector

package/src/html/switch-debug.js

@@ -0,0 +1,197 @@
+import React, { useState } from 'react'
+import RSwitch from 'react-switch'
+import { Switch, Switch2 } from './switch'
+
+/**
+ * Componente de debug para verificar que los switches se ven correctamente
+ */
+export const SwitchDebug = () => {
+    const [checked, setChecked] = useState(false)
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '600px' }}>
+            <h1>🔍 Debug de Switches</h1>
+            
+            {/* React Switch directo */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>React Switch Directo (sin wrapper)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
+                        <span>Estado: {checked ? 'ON' : 'OFF'}</span>
+                        <RSwitch
+                            checked={checked}
+                            onChange={setChecked}
+                            onColor="#2693e6"
+                            offColor="#ccc"
+                            onHandleColor="#ffffff"
+                            offHandleColor="#ffffff"
+                            handleDiameter={18}
+                            uncheckedIcon={false}
+                            checkedIcon={false}
+                            boxShadow="0px 2px 4px rgba(0, 0, 0, 0.2)"
+                            activeBoxShadow="0px 0px 0px 3px rgba(38, 147, 230, 0.2)"
+                            height={20}
+                            width={48}
+                        />
+                    </div>
+                    <p style={{ fontSize: '0.9rem', color: '#666' }}>
+                        Este es react-switch sin ningún wrapper. Si no se ve bien, el problema es con la librería o CSS global.
+                    </p>
+                </div>
+            </section>
+
+            {/* Nuestro Switch wrapper */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Nuestro Switch (wrapper)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <Switch 
+                        id="debug-switch"
+                        label="Switch con wrapper"
+                        checked={checked}
+                        onChange={(id, value) => setChecked(value)}
+                    />
+                    <p style={{ fontSize: '0.9rem', color: '#666', marginTop: '1rem' }}>
+                        Este usa nuestro wrapper. Debería verse igual que el de arriba.
+                    </p>
+                </div>
+            </section>
+
+            {/* Switch2 para comparación */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Switch2 (Material Icons)</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <Switch2 
+                        id="debug-switch2"
+                        label="Switch2 con iconos"
+                        checked={checked}
+                        onChange={(id, value) => setChecked(value)}
+                    />
+                    <p style={{ fontSize: '0.9rem', color: '#666', marginTop: '1rem' }}>
+                        Este usa iconos Material. Debería mostrar toggle_on/toggle_off.
+                    </p>
+                </div>
+            </section>
+
+            {/* Diferentes estados */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Diferentes Estados</h3>
+                <div style={{ 
+                    background: '#fff', 
+                    padding: '1.5rem', 
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }}>
+                        <div>
+                            <h4>Normal OFF</h4>
+                            <RSwitch
+                                checked={false}
+                                onChange={() => {}}
+                                onColor="#2693e6"
+                                offColor="#ccc"
+                                height={20}
+                                width={48}
+                                handleDiameter={18}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                            />
+                        </div>
+                        <div>
+                            <h4>Normal ON</h4>
+                            <RSwitch
+                                checked={true}
+                                onChange={() => {}}
+                                onColor="#2693e6"
+                                offColor="#ccc"
+                                height={20}
+                                width={48}
+                                handleDiameter={18}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                            />
+                        </div>
+                        <div>
+                            <h4>Disabled OFF</h4>
+                            <RSwitch
+                                checked={false}
+                                onChange={() => {}}
+                                disabled={true}
+                                onColor="#2693e6"
+                                offColor="#ccc"
+                                height={20}
+                                width={48}
+                                handleDiameter={18}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                            />
+                        </div>
+                        <div>
+                            <h4>Disabled ON</h4>
+                            <RSwitch
+                                checked={true}
+                                onChange={() => {}}
+                                disabled={true}
+                                onColor="#2693e6"
+                                offColor="#ccc"
+                                height={20}
+                                width={48}
+                                handleDiameter={18}
+                                uncheckedIcon={false}
+                                checkedIcon={false}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Información de debug */}
+            <section>
+                <h3>Información de Debug</h3>
+                <div style={{ 
+                    background: '#f8f9fa', 
+                    padding: '1rem', 
+                    borderRadius: '4px',
+                    border: '1px solid #dee2e6'
+                }}>
+                    <h4>¿Qué deberías ver?</h4>
+                    <ul>
+                        <li><strong>Switch OFF:</strong> Fondo gris (#ccc), handle blanco a la izquierda</li>
+                        <li><strong>Switch ON:</strong> Fondo azul (#2693e6), handle blanco a la derecha</li>
+                        <li><strong>Handle:</strong> Círculo blanco con sombra sutil</li>
+                        <li><strong>Transición:</strong> Animación suave al cambiar estado</li>
+                    </ul>
+                    
+                    <h4>Si solo ves un círculo gris:</h4>
+                    <ul>
+                        <li>Verifica que react-switch esté instalado: <code>npm list react-switch</code></li>
+                        <li>Revisa la consola del navegador por errores</li>
+                        <li>Verifica que no hay CSS conflictivo</li>
+                        <li>Asegúrate de que las props de color se están aplicando</li>
+                    </ul>
+
+                    <h4>Estado actual:</h4>
+                    <pre style={{ background: '#fff', padding: '0.5rem', borderRadius: '4px' }}>
+                        {JSON.stringify({ checked }, null, 2)}
+                    </pre>
+                </div>
+            </section>
+        </div>
+    )
+}
+
+export default SwitchDebug