ywana-core8 0.1.103 → 0.2.2

package/src/html/TextField2.stories.jsx

@@ -0,0 +1,337 @@
+import React, { useState } from 'react'
+import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from './textfield2'
+
+export default {
+  title: 'HTML/TextField2',
+  component: TextField2,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Enhanced TextField components with improved validation, accessibility, and features.'
+      }
+    }
+  }
+}
+
+/**
+ * Basic TextField2 examples
+ */
+export const BasicTextFields = () => {
+  const [formData, setFormData] = useState({})
+
+  const handleFieldChange = (id, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [id]: value
+    }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>📝 TextField2 Básicos</h3>
+      
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem' }}>
+        <div>
+          <h4>Estilo Normal</h4>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <TextField2
+              id="normalBasic"
+              label="Campo Básico"
+              placeholder="Placeholder text"
+              value={formData.normalBasic || ''}
+              onChange={handleFieldChange}
+              helperText="Campo normal básico"
+            />
+            
+            <TextField2
+              id="normalRequired"
+              label="Campo Requerido"
+              placeholder="Campo obligatorio"
+              value={formData.normalRequired || ''}
+              required={true}
+              onChange={handleFieldChange}
+              helperText="Campo requerido"
+            />
+          </div>
+        </div>
+
+        <div>
+          <h4>Estilo Outlined</h4>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <TextField2
+              id="outlinedBasic"
+              label="Campo Outlined"
+              placeholder="Placeholder text"
+              value={formData.outlinedBasic || ''}
+              outlined={true}
+              onChange={handleFieldChange}
+              helperText="Campo outlined con borde"
+            />
+            
+            <TextField2
+              id="outlinedRequired"
+              label="Campo Requerido"
+              placeholder="Campo obligatorio"
+              value={formData.outlinedRequired || ''}
+              required={true}
+              outlined={true}
+              onChange={handleFieldChange}
+              helperText="Campo requerido outlined"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Different input types
+ */
+export const InputTypes = () => {
+  const [formData, setFormData] = useState({})
+  const [validationErrors, setValidationErrors] = useState({})
+
+  const handleFieldChange = (id, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [id]: value
+    }))
+  }
+
+  const handleValidation = (id, isValid, message) => {
+    setValidationErrors(prev => ({
+      ...prev,
+      [id]: isValid ? null : message
+    }))
+  }
+
+  const validateEmail = (value) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    return {
+      valid: emailRegex.test(value),
+      message: emailRegex.test(value) ? '' : 'Please enter a valid email address'
+    }
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>🔤 Tipos de Input</h3>
+      
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem' }}>
+        <TextField2
+          id="textField"
+          type="text"
+          label="Texto"
+          placeholder="Ingresa texto"
+          value={formData.textField || ''}
+          onChange={handleFieldChange}
+          helperText="Tipo: text"
+        />
+
+        <TextField2
+          id="emailField"
+          type="email"
+          label="Email"
+          placeholder="usuario@ejemplo.com"
+          value={formData.emailField || ''}
+          validation={validateEmail}
+          onChange={handleFieldChange}
+          onValidation={handleValidation}
+          helperText="Tipo: email con validación"
+        />
+
+        <TextField2
+          id="numberField"
+          type="number"
+          label="Número"
+          placeholder="123"
+          value={formData.numberField || ''}
+          onChange={handleFieldChange}
+          helperText="Tipo: number"
+        />
+
+        <TextField2
+          id="telField"
+          type="tel"
+          label="Teléfono"
+          placeholder="+1 (555) 123-4567"
+          value={formData.telField || ''}
+          onChange={handleFieldChange}
+          helperText="Tipo: tel"
+        />
+
+        <TextField2
+          id="urlField"
+          type="url"
+          label="URL"
+          placeholder="https://ejemplo.com"
+          value={formData.urlField || ''}
+          onChange={handleFieldChange}
+          helperText="Tipo: url"
+        />
+
+        <TextField2
+          id="dateField"
+          type="date"
+          label="Fecha"
+          value={formData.dateField || ''}
+          onChange={handleFieldChange}
+          helperText="Tipo: date"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Specialized components
+ */
+export const SpecializedComponents = () => {
+  const [formData, setFormData] = useState({})
+
+  const handleFieldChange = (id, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [id]: value
+    }))
+  }
+
+  const dropdownOptions = [
+    { value: 'option1', label: 'Opción 1' },
+    { value: 'option2', label: 'Opción 2' },
+    { value: 'option3', label: 'Opción 3' },
+    { value: 'option4', label: 'Opción 4' }
+  ]
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>🎯 Componentes Especializados</h3>
+      
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div>
+          <h4>TextArea2</h4>
+          <TextArea2
+            id="textArea"
+            label="Descripción"
+            placeholder="Escribe una descripción detallada..."
+            value={formData.textArea || ''}
+            rows={4}
+            onChange={handleFieldChange}
+            helperText="Área de texto multilínea"
+          />
+        </div>
+
+        <div>
+          <h4>PasswordField2</h4>
+          <PasswordField2
+            id="password"
+            label="Contraseña"
+            placeholder="Ingresa tu contraseña"
+            value={formData.password || ''}
+            onChange={handleFieldChange}
+            helperText="Campo de contraseña con toggle de visibilidad"
+          />
+        </div>
+
+        <div>
+          <h4>DropDown2</h4>
+          <DropDown2
+            id="dropdown"
+            label="Selecciona una opción"
+            options={dropdownOptions}
+            value={formData.dropdown || ''}
+            onChange={handleFieldChange}
+            helperText="Dropdown con opciones"
+          />
+        </div>
+
+        <div>
+          <h4>DateRange2</h4>
+          <DateRange2
+            id="dateRange"
+            label="Rango de fechas"
+            value={formData.dateRange || { start: '', end: '' }}
+            onChange={handleFieldChange}
+            helperText="Selector de rango de fechas"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Field states
+ */
+export const FieldStates = () => {
+  const [formData, setFormData] = useState({
+    errorField: 'invalid-email',
+    disabledField: 'Campo deshabilitado',
+    readOnlyField: 'Campo de solo lectura'
+  })
+
+  const handleFieldChange = (id, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [id]: value
+    }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>🎭 Estados de Campos</h3>
+      
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem' }}>
+        <TextField2
+          id="normalField"
+          label="Campo Normal"
+          placeholder="Estado normal"
+          value={formData.normalField || ''}
+          onChange={handleFieldChange}
+          helperText="Estado normal"
+        />
+
+        <TextField2
+          id="errorField"
+          label="Campo con Error"
+          placeholder="Campo con error"
+          value={formData.errorField || ''}
+          error="Este campo contiene un error"
+          onChange={handleFieldChange}
+          helperText="Campo con estado de error"
+        />
+
+        <TextField2
+          id="disabledField"
+          label="Campo Deshabilitado"
+          value={formData.disabledField}
+          disabled={true}
+          onChange={handleFieldChange}
+          helperText="Campo deshabilitado"
+        />
+
+        <TextField2
+          id="readOnlyField"
+          label="Campo de Solo Lectura"
+          value={formData.readOnlyField}
+          readOnly={true}
+          onChange={handleFieldChange}
+          helperText="Campo de solo lectura"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * All examples combined
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicTextFields />
+    <InputTypes />
+    <SpecializedComponents />
+    <FieldStates />
+  </div>
+)

package/src/html/Tree.stories.jsx

@@ -0,0 +1,285 @@
+import React, { useState } from 'react'
+import { Tree, TreeNode, TreeItem } from './tree'
+
+export default {
+  title: 'HTML/Tree',
+  component: Tree,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Tree components for hierarchical data display with support for selection, search, and drag & drop.'
+      }
+    }
+  }
+}
+
+/**
+ * Basic Tree example
+ */
+export const BasicTree = () => {
+  const [selectedItem, setSelectedItem] = useState(null)
+
+  const handleSelect = (id) => {
+    setSelectedItem(id)
+    console.log('Selected:', id)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>🌳 Tree Básico</h3>
+      <div style={{ 
+        background: '#fff', 
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        maxHeight: '400px'
+      }}>
+        <Tree>
+          <TreeNode id="root" label="Root Folder" icon="folder" open={true}>
+            <TreeNode id="documents" label="Documents" icon="folder">
+              <TreeItem 
+                id="doc1" 
+                label="Document 1.pdf" 
+                icon="picture_as_pdf" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'doc1'} 
+              />
+              <TreeItem 
+                id="doc2" 
+                label="Document 2.docx" 
+                icon="description" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'doc2'} 
+              />
+            </TreeNode>
+            <TreeNode id="images" label="Images" icon="folder" open={true}>
+              <TreeItem 
+                id="img1" 
+                label="Photo 1.jpg" 
+                icon="image" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'img1'} 
+              />
+              <TreeItem 
+                id="img2" 
+                label="Photo 2.png" 
+                icon="image" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'img2'} 
+              />
+            </TreeNode>
+            <TreeItem 
+              id="readme" 
+              label="README.md" 
+              icon="description" 
+              onSelect={handleSelect} 
+              selected={selectedItem === 'readme'} 
+            />
+          </TreeNode>
+        </Tree>
+      </div>
+      {selectedItem && (
+        <div style={{ 
+          marginTop: '16px', 
+          padding: '12px', 
+          background: '#e3f2fd', 
+          borderRadius: '4px',
+          border: '1px solid #1976d2'
+        }}>
+          <strong>Elemento seleccionado:</strong> {selectedItem}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Tree with search
+ */
+export const SearchableTree = () => {
+  const [selectedItem, setSelectedItem] = useState(null)
+
+  const handleSelect = (id) => {
+    setSelectedItem(id)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>🔍 Tree con Búsqueda</h3>
+      <div style={{ 
+        background: '#fff', 
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        maxHeight: '400px'
+      }}>
+        <Tree 
+          searchable={true}
+          searchPlaceholder="Buscar archivos y carpetas..."
+          searchBy={['label']}
+          ariaLabel="Árbol de archivos con búsqueda"
+        >
+          <TreeNode id="projects" label="Projects" icon="work" open={true}>
+            <TreeNode id="project1" label="Website Project" icon="web" open={false}>
+              <TreeItem 
+                id="index" 
+                label="index.html" 
+                icon="code" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'index'} 
+              />
+              <TreeItem 
+                id="styles" 
+                label="styles.css" 
+                icon="palette" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'styles'} 
+              />
+              <TreeItem 
+                id="script" 
+                label="script.js" 
+                icon="code" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'script'} 
+              />
+            </TreeNode>
+            <TreeNode id="project2" label="Mobile App" icon="phone_android" open={false}>
+              <TreeItem 
+                id="main" 
+                label="MainActivity.java" 
+                icon="code" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'main'} 
+              />
+              <TreeItem 
+                id="layout" 
+                label="activity_main.xml" 
+                icon="view_quilt" 
+                onSelect={handleSelect} 
+                selected={selectedItem === 'layout'} 
+              />
+            </TreeNode>
+          </TreeNode>
+        </Tree>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Tree with checkboxes
+ */
+export const CheckableTree = () => {
+  const [checkedItems, setCheckedItems] = useState(['file1', 'file3'])
+
+  const handleCheck = (id, checked) => {
+    setCheckedItems(prev => 
+      checked 
+        ? [...prev, id]
+        : prev.filter(item => item !== id)
+    )
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>☑️ Tree con Checkboxes</h3>
+      <div style={{ 
+        background: '#fff', 
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        maxHeight: '400px'
+      }}>
+        <Tree>
+          <TreeNode id="backup" label="Backup Files" icon="backup" open={true}>
+            <TreeItem 
+              id="file1" 
+              label="config.json" 
+              icon="settings" 
+              checked={checkedItems.includes('file1')}
+              onCheck={handleCheck}
+            />
+            <TreeItem 
+              id="file2" 
+              label="database.sql" 
+              icon="storage" 
+              checked={checkedItems.includes('file2')}
+              onCheck={handleCheck}
+            />
+            <TreeItem 
+              id="file3" 
+              label="logs.txt" 
+              icon="description" 
+              checked={checkedItems.includes('file3')}
+              onCheck={handleCheck}
+            />
+          </TreeNode>
+        </Tree>
+      </div>
+      {checkedItems.length > 0 && (
+        <div style={{ 
+          marginTop: '16px', 
+          padding: '12px', 
+          background: '#e8f5e8', 
+          borderRadius: '4px',
+          border: '1px solid #4caf50'
+        }}>
+          <strong>Elementos seleccionados:</strong> {checkedItems.join(', ')}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Empty tree
+ */
+export const EmptyTree = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>📭 Tree Vacío</h3>
+    <div style={{ 
+      background: '#fff', 
+      border: '1px solid #ddd',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      minHeight: '200px'
+    }}>
+      <Tree 
+        empty={true}
+        emptyMessage="No hay elementos para mostrar"
+        emptyIcon="folder_open"
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Loading tree
+ */
+export const LoadingTree = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>⏳ Tree Cargando</h3>
+    <div style={{ 
+      background: '#fff', 
+      border: '1px solid #ddd',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      minHeight: '200px'
+    }}>
+      <Tree loading={true} />
+    </div>
+  </div>
+)
+
+/**
+ * All examples combined
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicTree />
+    <SearchableTree />
+    <CheckableTree />
+    <EmptyTree />
+    <LoadingTree />
+  </div>
+)