ywana-core8 0.1.103 → 0.2.1

package/src/html/Color.stories.jsx

@@ -0,0 +1,234 @@
+import React, { useState } from 'react'
+import { ColorField, ColorPicker } from './color.js'
+
+/**
+ * ColorField básico
+ */
+export const BasicColorField = () => {
+  const [colors, setColors] = useState({
+    basic1: '#3498db',
+    basic2: '#e74c3c'
+  })
+
+  const handleChange = (id, value) => {
+    setColors(prev => ({ ...prev, [id]: value }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>ColorField Básico</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <ColorField 
+          id="basic1" 
+          label="Color primario"
+          value={colors.basic1}
+          onChange={handleChange}
+        />
+        <ColorField 
+          id="basic2" 
+          label="Color secundario"
+          value={colors.basic2}
+          onChange={handleChange}
+        />
+      </div>
+      <div style={{ marginTop: '1rem', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+        <strong>Valores seleccionados:</strong>
+        <pre>{JSON.stringify(colors, null, 2)}</pre>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * ColorField con funciones avanzadas
+ */
+export const EnhancedColorField = () => {
+  const [colors, setColors] = useState({
+    enhanced1: '#9b59b6',
+    enhanced2: '#f39c12'
+  })
+
+  const handleChange = (id, value) => {
+    setColors(prev => ({ ...prev, [id]: value }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>ColorField Avanzado</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <ColorField 
+          id="enhanced1" 
+          label="Color con transparencia"
+          value={colors.enhanced1}
+          onChange={handleChange}
+          allowTransparency={true}
+          showPreview={true}
+          showHex={true}
+          showRgb={true}
+        />
+        <ColorField 
+          id="enhanced2" 
+          label="Color con paleta personalizada"
+          value={colors.enhanced2}
+          onChange={handleChange}
+          palette={['#e74c3c', '#f39c12', '#f1c40f', '#2ecc71', '#3498db', '#9b59b6']}
+          showPalette={true}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Diferentes tamaños
+ */
+export const ColorFieldSizes = () => {
+  const [colors, setColors] = useState({
+    small: '#e74c3c',
+    medium: '#f39c12',
+    large: '#2ecc71'
+  })
+
+  const handleChange = (id, value) => {
+    setColors(prev => ({ ...prev, [id]: value }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Diferentes Tamaños</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <ColorField 
+          id="small" 
+          label="Pequeño"
+          value={colors.small}
+          onChange={handleChange}
+          size="small"
+        />
+        <ColorField 
+          id="medium" 
+          label="Mediano"
+          value={colors.medium}
+          onChange={handleChange}
+          size="medium"
+        />
+        <ColorField 
+          id="large" 
+          label="Grande"
+          value={colors.large}
+          onChange={handleChange}
+          size="large"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Estados especiales
+ */
+export const SpecialStates = () => {
+  const [colors, setColors] = useState({
+    required: '',
+    error: '#invalid',
+    disabled: '#95a5a6',
+    transparent: 'transparent'
+  })
+
+  const handleChange = (id, value) => {
+    setColors(prev => ({ ...prev, [id]: value }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Estados Especiales</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <ColorField 
+          id="required" 
+          label="Campo requerido"
+          value={colors.required}
+          onChange={handleChange}
+          required={true}
+        />
+        <ColorField 
+          id="error" 
+          label="Campo con error"
+          value={colors.error}
+          onChange={handleChange}
+          error="Color inválido"
+        />
+        <ColorField 
+          id="disabled" 
+          label="Campo deshabilitado"
+          value={colors.disabled}
+          onChange={handleChange}
+          disabled={true}
+        />
+        <ColorField 
+          id="transparent" 
+          label="Con transparencia"
+          value={colors.transparent}
+          onChange={handleChange}
+          allowTransparency={true}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * ColorPicker avanzado
+ */
+export const ColorPickerExample = () => {
+  const [selectedColor, setSelectedColor] = useState('#3498db')
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>ColorPicker Avanzado</h3>
+      <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
+        <div>
+          <ColorPicker 
+            value={selectedColor}
+            onChange={setSelectedColor}
+            showPreview={true}
+            showHex={true}
+            showRgb={true}
+            showHsl={true}
+            allowTransparency={true}
+          />
+        </div>
+        <div style={{ 
+          width: '200px', 
+          height: '200px', 
+          backgroundColor: selectedColor,
+          border: '2px solid #ddd',
+          borderRadius: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: '#fff',
+          textShadow: '1px 1px 2px rgba(0,0,0,0.5)'
+        }}>
+          <div style={{ textAlign: 'center' }}>
+            <div>Vista previa</div>
+            <div style={{ fontSize: '0.8rem', marginTop: '0.5rem' }}>
+              {selectedColor}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicColorField />
+    <EnhancedColorField />
+    <ColorFieldSizes />
+    <SpecialStates />
+    <ColorPickerExample />
+  </div>
+)

package/src/html/Form.stories.jsx

@@ -0,0 +1,271 @@
+import React, { useState } from 'react'
+import { Form } from './form.js'
+import { TextField } from './textfield.js'
+import { CheckBox } from './checkbox.js'
+import { Button } from './button.js'
+
+/**
+ * Formulario básico
+ */
+export const BasicForm = () => {
+  const [formData, setFormData] = useState({})
+
+  const handleFormChange = (data) => {
+    setFormData(data)
+    console.log('Form data changed:', data)
+  }
+
+  const handleSubmit = (data) => {
+    console.log('Form submitted:', data)
+    alert('Formulario enviado: ' + JSON.stringify(data, null, 2))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Formulario Básico</h3>
+      <div style={{
+        background: '#fff', 
+        padding: '1.5rem', 
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <Form
+          title="Información Personal"
+          columns={2}
+          outlined={true}
+          onChange={handleFormChange}
+          onSubmit={handleSubmit}
+        >
+          <TextField 
+            id="firstName"
+            label="Nombre"
+            required={true}
+          />
+          <TextField 
+            id="lastName"
+            label="Apellidos"
+            required={true}
+          />
+          <TextField 
+            id="email"
+            label="Email"
+            type="email"
+            required={true}
+          />
+          <TextField 
+            id="phone"
+            label="Teléfono"
+            type="tel"
+          />
+          <CheckBox 
+            id="newsletter"
+            label="Suscribirse al newsletter"
+          />
+        </Form>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Formulario de registro
+ */
+export const RegistrationForm = () => {
+  const [formData, setFormData] = useState({})
+
+  const handleFormChange = (data) => {
+    setFormData(data)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Formulario de Registro</h3>
+      <div style={{
+        background: '#fff', 
+        padding: '1.5rem', 
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <Form
+          title="Registro de Usuario"
+          columns={1}
+          outlined={true}
+          onChange={handleFormChange}
+        >
+          <TextField 
+            id="username"
+            label="Nombre de usuario"
+            required={true}
+            placeholder="Ingresa tu nombre de usuario"
+          />
+          <TextField 
+            id="email"
+            label="Correo electrónico"
+            type="email"
+            required={true}
+            placeholder="tu@email.com"
+          />
+          <TextField 
+            id="password"
+            label="Contraseña"
+            type="password"
+            required={true}
+            placeholder="Mínimo 8 caracteres"
+          />
+          <TextField 
+            id="confirmPassword"
+            label="Confirmar contraseña"
+            type="password"
+            required={true}
+          />
+          <CheckBox 
+            id="terms"
+            label="Acepto los términos y condiciones"
+            required={true}
+          />
+          <CheckBox 
+            id="marketing"
+            label="Recibir comunicaciones de marketing"
+          />
+        </Form>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Formulario con múltiples columnas
+ */
+export const MultiColumnForm = () => {
+  const [formData, setFormData] = useState({})
+
+  const handleFormChange = (data) => {
+    setFormData(data)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Formulario Multi-columna</h3>
+      <div style={{
+        background: '#fff', 
+        padding: '1.5rem', 
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <Form
+          title="Dirección de Envío"
+          columns={3}
+          outlined={true}
+          onChange={handleFormChange}
+        >
+          <TextField 
+            id="street"
+            label="Calle"
+            required={true}
+            colSpan={2}
+          />
+          <TextField 
+            id="number"
+            label="Número"
+            required={true}
+          />
+          <TextField 
+            id="city"
+            label="Ciudad"
+            required={true}
+          />
+          <TextField 
+            id="state"
+            label="Estado/Provincia"
+            required={true}
+          />
+          <TextField 
+            id="zipCode"
+            label="Código Postal"
+            required={true}
+          />
+          <TextField 
+            id="country"
+            label="País"
+            required={true}
+            colSpan={3}
+          />
+        </Form>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Estados especiales
+ */
+export const SpecialStates = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Estados Especiales</h3>
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '2rem' }}>
+      <div style={{
+        background: '#fff', 
+        padding: '1.5rem', 
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <h4>Formulario Deshabilitado</h4>
+        <Form
+          title="Solo Lectura"
+          columns={1}
+          outlined={true}
+          disabled={true}
+        >
+          <TextField 
+            id="readOnlyField1"
+            label="Campo 1"
+            value="Valor fijo"
+          />
+          <TextField 
+            id="readOnlyField2"
+            label="Campo 2"
+            value="Otro valor"
+          />
+        </Form>
+      </div>
+
+      <div style={{
+        background: '#fff', 
+        padding: '1.5rem', 
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <h4>Formulario Cargando</h4>
+        <Form
+          title="Enviando..."
+          columns={1}
+          outlined={true}
+          loading={true}
+        >
+          <TextField 
+            id="loadingField1"
+            label="Campo en proceso"
+            value="Enviando datos..."
+          />
+          <TextField 
+            id="loadingField2"
+            label="Otro campo"
+            value="Procesando..."
+          />
+        </Form>
+      </div>
+    </div>
+  </div>
+)
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicForm />
+    <RegistrationForm />
+    <MultiColumnForm />
+    <SpecialStates />
+  </div>
+)