siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,535 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Textarea } from './Textarea';
-
-/**
- * Textarea - Componente de área de texto del sistema de diseño Siesa
- *
- * Sistema completo de textareas con soporte para:
- * - **Estados**: Default, Hover, Focus, Filled, Disabled
- * - **Validación**: Error states con mensajes
- * - **Label y Description**: Etiquetas con descripción opcional
- * - **Resize**: Control de redimensionamiento (vertical, horizontal, both, none)
- * - **Accesibilidad**: Labels, helper text, y ARIA attributes
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Textarea',
-  component: Textarea,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Campos de texto multi-línea con soporte para validación, descripción, y múltiples estados. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'gray', value: '#f3f4f6' },
-        { name: 'dark', value: '#1f2937' },
-      ],
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Etiqueta del campo de texto',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    description: {
-      control: 'text',
-      description: 'Descripción debajo del label (texto secundario)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Texto de ayuda dentro del textarea',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    helperText: {
-      control: 'text',
-      description: 'Texto de ayuda debajo del textarea',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    error: {
-      control: 'boolean',
-      description: 'Indica si hay un error de validación',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Mensaje de error a mostrar (reemplaza helperText cuando error=true)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el textarea',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Si el textarea ocupa todo el ancho disponible',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Layout',
-      },
-    },
-    resize: {
-      control: 'select',
-      options: ['none', 'vertical', 'horizontal', 'both'],
-      description: 'Control de redimensionamiento',
-      table: {
-        type: { summary: "'none' | 'vertical' | 'horizontal' | 'both'" },
-        defaultValue: { summary: 'vertical' },
-        category: 'Layout',
-      },
-    },
-    rows: {
-      control: 'number',
-      description: 'Número de filas visibles',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '4' },
-        category: 'Layout',
-      },
-    },
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con todas las props del Textarea en tiempo real.
- * Cambia el texto, estados, resize y más para ver cómo se comporta el componente.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Acerca de ti',
-    description: 'Cuéntanos sobre ti',
-    placeholder: 'Escribe algunas líneas...',
-    helperText: 'Escribe algunas líneas sobre ti.',
-    error: false,
-    disabled: false,
-    fullWidth: false,
-    resize: 'vertical',
-    rows: 4,
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-
-/**
- * Todos los Estados
- *
- * Vista rápida de todos los estados del Textarea: default, hover, focus, filled, disabled.
- * También muestra los estados con y sin error.
- */
-export const AllStates: Story = {
-  name: 'Todos los Estados',
-  render: () => (
-    <div className="space-y-6">
-      {/* Estados Normales */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados Normales (Error=False)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Textarea
-            label="Default"
-            placeholder="Escribe algo aquí"
-            helperText="Texto de ayuda"
-          />
-          <Textarea
-            label="Hover"
-            placeholder="Escribe algo aquí"
-            helperText="Hover sobre el textarea para ver el estado"
-          />
-          <Textarea
-            label="Focus"
-            placeholder="Escribe algo aquí"
-            helperText="Click en el textarea para ver focus"
-            autoFocus
-          />
-        </div>
-        <div className="flex flex-wrap gap-4 mt-4">
-          <Textarea
-            label="Filled"
-            defaultValue="Texto de ejemplo ingresado"
-            helperText="Textarea con valor"
-          />
-          <Textarea
-            label="Disabled"
-            placeholder="No se puede editar"
-            helperText="Textarea deshabilitado"
-            disabled
-          />
-        </div>
-      </div>
-
-      {/* Estados con Error */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estados con Error (Error=True)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Textarea
-            label="Error Default"
-            placeholder="Escribe algo aquí"
-            error
-            errorMessage="Este campo es requerido"
-          />
-          <Textarea
-            label="Error Hover"
-            placeholder="Escribe algo aquí"
-            error
-            errorMessage="Texto muy corto (mínimo 50 caracteres)"
-          />
-          <Textarea
-            label="Error Focus"
-            placeholder="Escribe algo aquí"
-            error
-            errorMessage="Contenido no permitido"
-          />
-        </div>
-        <div className="flex flex-wrap gap-4 mt-4">
-          <Textarea
-            label="Error Filled"
-            defaultValue="Texto con error"
-            error
-            errorMessage="Valor no válido"
-          />
-          <Textarea
-            label="Error Disabled"
-            placeholder="No se puede editar"
-            error
-            errorMessage="Campo deshabilitado"
-            disabled
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON DESCRIPCIONES
-// ============================================
-
-/**
- * Con Descripciones
- *
- * Ejemplos de textareas con diferentes combinaciones de label, description y helper text.
- */
-export const ConDescripciones: Story = {
-  name: 'Con Descripciones',
-  render: () => (
-    <div className="space-y-6">
-      {/* Sin Label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Label</h3>
-        <Textarea
-          placeholder="Escribe tus comentarios aquí..."
-          helperText="Tu opinión será revisada por nuestro equipo"
-        />
-      </div>
-
-      {/* Con Label, sin Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label, sin Description</h3>
-        <Textarea
-          label="Comentarios"
-          placeholder="Escribe tus comentarios aquí..."
-          helperText="Tu opinión será revisada por nuestro equipo"
-        />
-      </div>
-
-      {/* Con Label y Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label y Description</h3>
-        <Textarea
-          label="Acerca de ti"
-          description="Esto será visible para los clientes del proyecto."
-          placeholder="Cuéntanos sobre tu experiencia..."
-        />
-      </div>
-
-      {/* Con Label, Description y Helper Text */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Label, Description y Helper Text
-        </h3>
-        <Textarea
-          label="Descripción del Proyecto"
-          description="Esto será visible para todos los miembros del equipo."
-          placeholder="Describe tu proyecto..."
-          helperText="Se requieren mínimo 100 caracteres"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ESTADOS DE ERROR
-// ============================================
-
-/**
- * Estados de Error
- *
- * Ejemplos de textareas con diferentes tipos de errores de validación.
- * Útil para formularios y validación de datos.
- */
-export const ErrorStates: Story = {
-  name: 'ErrorStates',
-  render: () => (
-    <div className="space-y-6">
-      {/* Errores de Validación */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Errores de Validación</h3>
-        <div className="flex flex-wrap gap-4">
-          <Textarea
-            label="Biografía"
-            description="Cuéntanos sobre ti"
-            placeholder="Escribe tu biografía..."
-            error
-            errorMessage="Este campo es requerido"
-          />
-          <Textarea
-            label="Descripción"
-            description="Describe tu proyecto"
-            defaultValue="Muy corto"
-            error
-            errorMessage="Texto muy corto (mínimo 50 caracteres)"
-          />
-          <Textarea
-            label="Comentarios"
-            description="Deja tu opinión"
-            defaultValue="Esto contiene palabras inapropiadas"
-            error
-            errorMessage="El texto contiene palabras no permitidas"
-          />
-        </div>
-      </div>
-
-      {/* Con Helper Text */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Error (Para Comparación)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Textarea
-            label="Biografía"
-            description="Cuéntanos sobre ti"
-            defaultValue="Soy un desarrollador de software con 5 años de experiencia..."
-            helperText="¡La biografía se ve bien!"
-          />
-          <Textarea
-            label="Descripción"
-            description="Describe tu proyecto"
-            defaultValue="Esta es una aplicación web moderna construida con React y TypeScript que ayuda a los usuarios a gestionar sus tareas de manera eficiente."
-            helperText="Caracteres: 145/500"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. RESIZE OPTIONS
-// ============================================
-
-/**
- * Opciones de Resize
- *
- * Ejemplos de textareas con diferentes opciones de redimensionamiento.
- */
-export const ResizeOptions: Story = {
-  name: 'ResizeOptions',
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Vertical (default)</h3>
-        <Textarea
-          label="Comments"
-          placeholder="Puedes redimensionar verticalmente"
-          helperText="Arrastra la esquina inferior derecha"
-          resize="vertical"
-        />
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Horizontal</h3>
-        <Textarea
-          label="Comments"
-          placeholder="Puedes redimensionar horizontalmente"
-          helperText="Arrastra la esquina inferior derecha"
-          resize="horizontal"
-        />
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize Both</h3>
-        <Textarea
-          label="Comments"
-          placeholder="Puedes redimensionar en ambas direcciones"
-          helperText="Arrastra la esquina inferior derecha"
-          resize="both"
-        />
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Resize None</h3>
-        <Textarea
-          label="Comments"
-          placeholder="No se puede redimensionar"
-          helperText="Este textarea tiene tamaño fijo"
-          resize="none"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar los textareas en situaciones reales:
- * formularios, comentarios, descripciones, etc.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => (
-    <div className="space-y-6">
-      {/* Formulario de Perfil */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Perfil</h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <div className="space-y-4">
-            <Textarea
-              label="Biografía"
-              description="Cuéntanos sobre ti"
-              placeholder="Escribe una breve biografía..."
-              helperText="Esto será visible en tu perfil público"
-              fullWidth
-              rows={3}
-            />
-            <Textarea
-              label="Habilidades"
-              description="¿Cuáles son tus habilidades principales?"
-              placeholder="JavaScript, React, TypeScript..."
-              helperText="Separa las habilidades con comas"
-              fullWidth
-              rows={2}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Sistema de Comentarios */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sistema de Comentarios</h3>
-        <div className="max-w-md">
-          <Textarea
-            label="Deja un comentario"
-            placeholder="Comparte tu opinión..."
-            helperText="Sé respetuoso y constructivo"
-            fullWidth
-            rows={4}
-          />
-        </div>
-      </div>
-
-      {/* Formulario de Contacto */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Contacto</h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <Textarea
-            label="Mensaje"
-            description="¿Cómo podemos ayudarte?"
-            placeholder="Describe tu problema o pregunta..."
-            helperText="Te responderemos en 24 horas"
-            fullWidth
-            rows={6}
-          />
-        </div>
-      </div>
-
-      {/* Formulario con Validación */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Formulario con Validación de Errores
-        </h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <div className="space-y-4">
-            <Textarea
-              label="Descripción del Proyecto"
-              description="Describe tu proyecto en detalle"
-              defaultValue="Muy corto"
-              error
-              errorMessage="La descripción debe tener al menos 100 caracteres"
-              fullWidth
-              rows={5}
-            />
-            <Textarea
-              label="Notas Adicionales"
-              description="Cualquier otra información"
-              placeholder="Notas opcionales..."
-              helperText="Este campo es opcional"
-              fullWidth
-              rows={3}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Textarea Grande */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Textarea Grande (Artículo/Blog)</h3>
-        <Textarea
-          label="Contenido del Artículo"
-          description="Escribe tu artículo aquí"
-          placeholder="Comienza a escribir tu artículo..."
-          helperText="Soporta formato Markdown"
-          fullWidth
-          rows={10}
-        />
-      </div>
-    </div>
-  ),
-};