ywana-core8 0.1.103 → 0.2.2

package/src/html/Icon.stories.jsx

@@ -0,0 +1,233 @@
+import React, { useState } from 'react'
+import { Icon } from './icon.js'
+
+/**
+ * Iconos básicos
+ */
+export const BasicIcons = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Iconos Básicos</h3>
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <Icon icon="home" />
+      <Icon icon="settings" />
+      <Icon icon="favorite" />
+      <Icon icon="info" />
+      <Icon icon="star" />
+      <Icon icon="search" />
+    </div>
+    <p><em>Iconos simples sin interacción</em></p>
+  </div>
+)
+
+/**
+ * Diferentes tamaños
+ */
+export const IconSizes = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Diferentes Tamaños</h3>
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <Icon icon="star" size="small" />
+      <Icon icon="star" size="normal" />
+      <Icon icon="star" size="large" />
+    </div>
+    <p><em>Tamaños: small, normal, large</em></p>
+  </div>
+)
+
+/**
+ * Iconos clickables
+ */
+export const ClickableIcons = () => {
+  const [clickCount, setClickCount] = useState(0)
+
+  const handleClick = () => {
+    setClickCount(prev => prev + 1)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Iconos Clickables</h3>
+      <p>Clicks: {clickCount}</p>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        <Icon 
+          icon="thumb_up" 
+          clickable 
+          action={handleClick}
+          tooltip={{
+            text: 'Hacer clic para incrementar',
+            top: '-3rem',
+            left: '-2rem'
+          }}
+        />
+        <Icon 
+          icon="refresh" 
+          clickable 
+          action={() => setClickCount(0)}
+          tooltip={{
+            text: 'Resetear contador',
+            top: '-3rem',
+            left: '-2rem'
+          }}
+        />
+        <Icon 
+          icon="add" 
+          clickable 
+          action={() => alert('¡Añadido!')}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Estados disabled
+ */
+export const DisabledIcons = () => {
+  const [isDisabled, setIsDisabled] = useState(false)
+
+  const toggleDisabled = () => {
+    setIsDisabled(prev => !prev)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Estados Disabled</h3>
+      <p>Estado disabled: {isDisabled ? 'Activado' : 'Desactivado'}</p>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        <Icon 
+          icon="toggle_on" 
+          clickable 
+          action={toggleDisabled}
+          tooltip={{
+            text: 'Alternar estado disabled',
+            top: '-3rem',
+            left: '-3rem'
+          }}
+        />
+        <Icon 
+          icon="delete" 
+          clickable 
+          disabled={isDisabled}
+          action={() => alert('¡Eliminado!')}
+          tooltip={{
+            text: isDisabled ? 'Icono deshabilitado' : 'Eliminar elemento',
+            top: '-3rem',
+            left: '-2rem'
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Iconos con tooltips
+ */
+export const IconsWithTooltips = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Iconos con Tooltips</h3>
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <Icon 
+        icon="help" 
+        clickable
+        tooltip={{
+          text: 'Ayuda y soporte',
+          top: '-3rem',
+          left: '-2rem'
+        }}
+        action={() => alert('¡Ayuda!')}
+      />
+      <Icon 
+        icon="download" 
+        clickable
+        tooltip={{
+          text: 'Descargar archivo',
+          top: '-3rem',
+          left: '-2rem'
+        }}
+        action={() => alert('¡Descargando!')}
+      />
+      <Icon 
+        icon="share" 
+        clickable
+        tooltip={{
+          text: 'Compartir contenido',
+          top: '-3rem',
+          left: '-2rem'
+        }}
+        action={() => alert('¡Compartido!')}
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Accesibilidad
+ */
+export const AccessibleIcons = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Accesibilidad Mejorada</h3>
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <Icon 
+        icon="accessibility" 
+        clickable
+        ariaLabel="Configuración de accesibilidad"
+        action={() => alert('Configuración de accesibilidad')}
+      />
+      <Icon 
+        icon="visibility" 
+        clickable
+        ariaLabel="Alternar visibilidad"
+        action={() => alert('Visibilidad alternada')}
+      />
+      <Icon 
+        icon="hearing" 
+        clickable
+        ariaLabel="Configuración de audio"
+        action={() => alert('Configuración de audio')}
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Estilos personalizados
+ */
+export const CustomStyledIcons = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Estilos Personalizados</h3>
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <Icon 
+        icon="palette" 
+        style={{ color: '#e91e63', fontSize: '2rem' }}
+      />
+      <Icon 
+        icon="brush" 
+        style={{ color: '#2196f3', fontSize: '2rem' }}
+      />
+      <Icon 
+        icon="color_lens" 
+        style={{ color: '#4caf50', fontSize: '2rem' }}
+      />
+      <Icon 
+        icon="format_paint" 
+        style={{ color: '#ff9800', fontSize: '2rem' }}
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicIcons />
+    <IconSizes />
+    <ClickableIcons />
+    <DisabledIcons />
+    <IconsWithTooltips />
+    <AccessibleIcons />
+    <CustomStyledIcons />
+  </div>
+)

package/src/html/Progress.stories.jsx

@@ -0,0 +1,247 @@
+import React, { useState, useEffect } from 'react'
+import { CircularProgress, LinearProgress } from './progress.js'
+import { Button } from './button.js'
+
+/**
+ * Progress circular
+ */
+export const CircularProgressExamples = () => {
+  const [progress, setProgress] = useState(45)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress(prev => (prev >= 100 ? 0 : prev + 1))
+    }, 100)
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>CircularProgress - Indicadores Circulares</h3>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '2rem', textAlign: 'center' }}>
+        <div>
+          <h4>Indeterminate</h4>
+          <CircularProgress 
+            variant="indeterminate"
+            size="large"
+            color="primary"
+          />
+        </div>
+        
+        <div>
+          <h4>With Value</h4>
+          <CircularProgress 
+            variant="determinate"
+            value={progress}
+            size="large"
+            color="success"
+            showValue={true}
+          />
+        </div>
+        
+        <div>
+          <h4>With Icon</h4>
+          <CircularProgress 
+            variant="determinate"
+            value={75}
+            size="xlarge"
+            color="warning"
+            icon="download"
+          />
+        </div>
+        
+        <div>
+          <h4>Custom Format</h4>
+          <CircularProgress 
+            variant="determinate"
+            value={progress}
+            size="large"
+            color="error"
+            showValue={true}
+            valueFormat={(value) => `${Math.round(value)}%`}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Progress lineal
+ */
+export const LinearProgressExamples = () => {
+  const [progress, setProgress] = useState(45)
+  const [isRunning, setIsRunning] = useState(true)
+
+  useEffect(() => {
+    if (!isRunning) return
+    
+    const timer = setInterval(() => {
+      setProgress(prev => (prev >= 100 ? 0 : prev + 1))
+    }, 100)
+    return () => clearInterval(timer)
+  }, [isRunning])
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>LinearProgress - Barras de Progreso</h3>
+      
+      <div style={{ marginBottom: '1rem' }}>
+        <Button 
+          label={isRunning ? 'Pausar' : 'Reanudar'}
+          action={() => setIsRunning(!isRunning)}
+          icon={isRunning ? 'pause' : 'play_arrow'}
+        />
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+        <div>
+          <h4>Basic Progress</h4>
+          <LinearProgress 
+            value={progress}
+            showValue={true}
+            showLabel={true}
+            label="File Upload"
+            color="primary"
+          />
+        </div>
+        
+        <div>
+          <h4>With Buffer</h4>
+          <LinearProgress 
+            value={progress * 0.7}
+            buffer={progress}
+            showValue={true}
+            showLabel={true}
+            label="Video Streaming"
+            color="secondary"
+          />
+        </div>
+        
+        <div>
+          <h4>Striped Animation</h4>
+          <LinearProgress 
+            value={85}
+            showValue={true}
+            showLabel={true}
+            label="Processing"
+            color="success"
+            striped={true}
+            animated={true}
+          />
+        </div>
+        
+        <div>
+          <h4>Indeterminate</h4>
+          <LinearProgress 
+            variant="indeterminate"
+            showLabel={true}
+            label="Loading..."
+            color="warning"
+            size="medium"
+          />
+        </div>
+        
+        <div>
+          <h4>With Time Estimation</h4>
+          <LinearProgress 
+            value={progress}
+            showValue={true}
+            showLabel={true}
+            label="Large File Download"
+            color="error"
+            size="large"
+            showTimeEstimation={true}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Tamaños y colores
+ */
+export const ProgressSizesAndColors = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Tamaños</h3>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '2rem' }}>
+      <LinearProgress value={60} size="small" label="Small" showValue={true} />
+      <LinearProgress value={70} size="medium" label="Medium" showValue={true} />
+      <LinearProgress value={80} size="large" label="Large" showValue={true} />
+    </div>
+
+    <h3>Colores</h3>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <LinearProgress value={50} color="primary" label="Primary" showValue={true} />
+      <LinearProgress value={60} color="secondary" label="Secondary" showValue={true} />
+      <LinearProgress value={70} color="success" label="Success" showValue={true} />
+      <LinearProgress value={80} color="warning" label="Warning" showValue={true} />
+      <LinearProgress value={90} color="error" label="Error" showValue={true} />
+    </div>
+  </div>
+)
+
+/**
+ * Estados interactivos
+ */
+export const InteractiveProgress = () => {
+  const [value, setValue] = useState(50)
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Control Interactivo</h3>
+      
+      <div style={{ marginBottom: '2rem' }}>
+        <label>
+          Valor: {value}%
+          <input 
+            type="range" 
+            min="0" 
+            max="100" 
+            value={value}
+            onChange={(e) => setValue(Number(e.target.value))}
+            style={{ width: '100%', margin: '0.5rem 0' }}
+          />
+        </label>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div style={{ textAlign: 'center' }}>
+          <h4>Circular</h4>
+          <CircularProgress 
+            variant="determinate"
+            value={value}
+            size="xlarge"
+            color="primary"
+            showValue={true}
+          />
+        </div>
+        
+        <div>
+          <h4>Linear</h4>
+          <LinearProgress 
+            value={value}
+            showValue={true}
+            showLabel={true}
+            label="Interactive Progress"
+            color="primary"
+            size="large"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <CircularProgressExamples />
+    <LinearProgressExamples />
+    <ProgressSizesAndColors />
+    <InteractiveProgress />
+  </div>
+)