ywana-core8 0.1.102 → 0.2.1

package/src/html/Button.stories.jsx

@@ -0,0 +1,175 @@
+import React, { useState } from 'react'
+import { Button, ActionButton } from './button.js'
+
+/**
+ * Botón básico
+ */
+export const BasicButton = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Botones Básicos</h3>
+    <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+      <Button
+        label="Botón Normal"
+        action={() => alert('¡Hola!')}
+      />
+      <Button
+        label="Botón Outlined"
+        outlined={true}
+        action={() => alert('¡Outlined!')}
+      />
+      <Button
+        label="Botón Raised"
+        raised={true}
+        action={() => alert('¡Raised!')}
+      />
+      <Button
+        label="Botón con Icono"
+        icon="favorite"
+        action={() => alert('¡Con icono!')}
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Botones con estados
+ */
+export const ButtonStates = () => {
+  const [loading, setLoading] = useState(false)
+
+  const handleAsyncAction = async () => {
+    setLoading(true)
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    setLoading(false)
+    alert('¡Completado!')
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Estados de Botones</h3>
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <Button
+          label="Deshabilitado"
+          disabled={true}
+        />
+        <Button
+          label={loading ? 'Cargando...' : 'Acción Async'}
+          loading={loading}
+          action={handleAsyncAction}
+        />
+        <Button
+          label="Pequeño"
+          size="small"
+          action={() => alert('¡Pequeño!')}
+        />
+        <Button
+          label="Grande"
+          size="large"
+          action={() => alert('¡Grande!')}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Action Buttons
+ */
+export const ActionButtons = () => {
+  const [uploadState, setUploadState] = useState('normal')
+
+  const uploadStates = {
+    normal: {
+      icon: "cloud_upload",
+      label: "Subir Archivo",
+      action: async () => {
+        setUploadState('uploading')
+        // Simular subida
+        await new Promise(resolve => setTimeout(resolve, 2000))
+        setUploadState('success')
+        setTimeout(() => setUploadState('normal'), 2000)
+      }
+    },
+    uploading: {
+      icon: "hourglass_empty",
+      label: "Subiendo...",
+      disabled: true
+    },
+    success: {
+      icon: "check_circle",
+      label: "Subida Completa",
+      action: () => setUploadState('normal')
+    }
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Action Buttons</h3>
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <ActionButton
+          states={uploadStates}
+          state={uploadState}
+          onStateChange={setUploadState}
+        />
+
+        <Button
+          label="Eliminar"
+          icon="delete"
+          action={() => confirm('¿Estás seguro?') && alert('¡Eliminado!')}
+        />
+
+        <Button
+          label="Descargar"
+          icon="download"
+          outlined={true}
+          action={() => alert('Descargando...')}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Botones con iconos
+ */
+export const IconButtons = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Botones con Iconos</h3>
+    <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+      <Button
+        label="Inicio"
+        icon="home"
+        action={() => alert('Home')}
+      />
+      <Button
+        label="Configuración"
+        icon="settings"
+        outlined={true}
+        action={() => alert('Configuración')}
+      />
+      <Button
+        label="Añadir"
+        icon="add"
+        raised={true}
+        action={() => alert('Añadir')}
+      />
+      <Button
+        icon="search"
+        ariaLabel="Buscar"
+        action={() => alert('Buscar')}
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Todos los ejemplos juntos
+ */
+export const AllExamples = () => (
+  <div style={{ padding: '20px' }}>
+    <BasicButton />
+    <ButtonStates />
+    <ActionButtons />
+    <IconButtons />
+  </div>
+)

package/src/html/Checkbox.stories.jsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import { CheckBox } from './checkbox.js'
+
+/**
+ * Checkbox básico
+ */
+export const BasicCheckbox = () => {
+  const [formData, setFormData] = useState({})
+
+  const handleChange = (id, value) => {
+    setFormData(prev => ({ ...prev, [id]: value }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Checkbox Básico</h3>
+      <CheckBox
+        id="basic1"
+        label="Acepto los términos y condiciones"
+        value={formData.basic1 || false}
+        onChange={handleChange}
+      />
+      <p>Estado: {formData.basic1 ? 'Marcado' : 'No marcado'}</p>
+    </div>
+  )
+}
+
+/**
+ * Checkbox con diferentes estados
+ */
+export const CheckboxStates = () => {
+  const [formData, setFormData] = useState({
+    normal: false,
+    disabled: false,
+    readonly: true,
+    indeterminate: false
+  })
+
+  const handleChange = (id, value) => {
+    setFormData(prev => ({ ...prev, [id]: value }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Estados de Checkbox</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <CheckBox
+          id="normal"
+          label="Checkbox normal"
+          value={formData.normal}
+          onChange={handleChange}
+        />
+
+        <CheckBox
+          id="disabled"
+          label="Checkbox deshabilitado"
+          value={formData.disabled}
+          disabled={true}
+          onChange={handleChange}
+        />
+
+        <CheckBox
+          id="readonly"
+          label="Checkbox solo lectura (marcado)"
+          value={formData.readonly}
+          readOnly={true}
+          onChange={handleChange}
+        />
+
+        <CheckBox
+          id="indeterminate"
+          label="Checkbox indeterminado"
+          value={formData.indeterminate}
+          indeterminate={true}
+          onChange={handleChange}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Lista de checkboxes
+ */
+export const CheckboxList = () => {
+  const [formData, setFormData] = useState({
+    item2: true // Elemento 2 marcado por defecto
+  })
+
+  const items = [
+    { id: 'item1', label: 'Elemento 1' },
+    { id: 'item2', label: 'Elemento 2' },
+    { id: 'item3', label: 'Elemento 3' },
+    { id: 'item4', label: 'Elemento 4' }
+  ]
+
+  const handleChange = (id, value) => {
+    setFormData(prev => ({ ...prev, [id]: value }))
+  }
+
+  const selectedItems = Object.keys(formData).filter(key => formData[key])
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Lista de Checkboxes</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {items.map(item => (
+          <CheckBox
+            key={item.id}
+            id={item.id}
+            label={item.label}
+            value={formData[item.id] || false}
+            onChange={handleChange}
+          />
+        ))}
+      </div>
+      <p>Seleccionados: {selectedItems.join(', ')}</p>
+    </div>
+  )
+}
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicCheckbox />
+    <CheckboxStates />
+    <CheckboxList />
+  </div>
+)

package/src/html/Chip.stories.jsx

@@ -0,0 +1,189 @@
+import React, { useState } from 'react'
+import { Chip, Chips } from './chip.js'
+
+/**
+ * Chips básicos
+ */
+export const BasicChips = () => {
+  const handleChipDelete = (chip) => {
+    console.log('Chip deleted:', chip)
+    alert(`Chip "${chip.label}" eliminado`)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Chips Básicos</h3>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+        <Chip label="Normal" />
+        <Chip label="Outlined" outlined={true} />
+        <Chip label="Selected" selected={true} />
+        <Chip label="Con Icono" icon="star" />
+        <Chip icon="favorite" ariaLabel="Favorito" />
+        <Chip label="Deletable" deletable={true} onDelete={handleChipDelete} />
+        <Chip label="Disabled" disabled={true} />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Tamaños y variantes
+ */
+export const ChipSizesAndVariants = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Tamaños</h3>
+    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '2rem' }}>
+      <Chip label="Pequeño" size="small" />
+      <Chip label="Normal" size="normal" />
+      <Chip label="Grande" size="large" />
+    </div>
+
+    <h3>Variantes de Color</h3>
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+      <Chip label="Default" variant="default" />
+      <Chip label="Primary" variant="primary" />
+      <Chip label="Secondary" variant="secondary" />
+      <Chip label="Success" variant="success" />
+      <Chip label="Warning" variant="warning" />
+      <Chip label="Error" variant="error" />
+    </div>
+  </div>
+)
+
+/**
+ * Chips con selección múltiple
+ */
+export const ChipsMultiSelect = () => {
+  const [selectedTags, setSelectedTags] = useState(['react', 'javascript'])
+
+  const tagItems = [
+    { id: 'react', label: 'React', icon: 'code' },
+    { id: 'javascript', label: 'JavaScript', icon: 'code' },
+    { id: 'css', label: 'CSS', icon: 'palette' },
+    { id: 'html', label: 'HTML', icon: 'web' },
+    { id: 'nodejs', label: 'Node.js', icon: 'storage' }
+  ]
+
+  const handleTagChange = (selected) => {
+    setSelectedTags(selected)
+    console.log('Selected tags:', selected)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Selección Múltiple</h3>
+      <p>Seleccionados: {selectedTags.join(', ')}</p>
+      <Chips
+        items={tagItems}
+        selected={selectedTags}
+        multiSelect={true}
+        onChange={handleTagChange}
+        size="normal"
+        variant="primary"
+      />
+    </div>
+  )
+}
+
+/**
+ * Chips con selección única
+ */
+export const ChipsSingleSelect = () => {
+  const [selectedCategory, setSelectedCategory] = useState(['frontend'])
+
+  const categoryItems = [
+    { id: 'frontend', label: 'Frontend', icon: 'web' },
+    { id: 'backend', label: 'Backend', icon: 'storage' },
+    { id: 'mobile', label: 'Mobile', icon: 'phone_android' },
+    { id: 'desktop', label: 'Desktop', icon: 'desktop_windows' }
+  ]
+
+  const handleCategoryChange = (selected) => {
+    setSelectedCategory(selected)
+    console.log('Selected category:', selected)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Selección Única</h3>
+      <p>Seleccionado: {selectedCategory.join(', ')}</p>
+      <Chips
+        items={categoryItems}
+        selected={selectedCategory}
+        multiSelect={false}
+        onChange={handleCategoryChange}
+        size="normal"
+        variant="secondary"
+      />
+    </div>
+  )
+}
+
+/**
+ * Chips avanzados
+ */
+export const AdvancedChips = () => {
+  const handleChipDelete = (chip) => {
+    console.log('Chip deleted:', chip)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Características Avanzadas</h3>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
+        <div>
+          <h4>Con Tooltip</h4>
+          <Chip 
+            label="Hover me" 
+            tooltip={{ content: 'Este es un tooltip informativo' }}
+          />
+        </div>
+        <div>
+          <h4>Con Badge</h4>
+          <Chip 
+            label="Con Badge" 
+            action={<span style={{ 
+              background: '#dc3545', 
+              color: 'white', 
+              borderRadius: '50%', 
+              padding: '2px 6px',
+              fontSize: '0.75rem'
+            }}>5</span>}
+          />
+        </div>
+        <div>
+          <h4>Outlined + Selected</h4>
+          <Chip 
+            label="Outlined Selected" 
+            outlined={true}
+            selected={true}
+            icon="check_circle"
+          />
+        </div>
+        <div>
+          <h4>Large + Deletable</h4>
+          <Chip 
+            label="Large Deletable" 
+            size="large"
+            deletable={true}
+            variant="primary"
+            onDelete={handleChipDelete}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicChips />
+    <ChipSizesAndVariants />
+    <ChipsMultiSelect />
+    <ChipsSingleSelect />
+    <AdvancedChips />
+  </div>
+)