siesa-ui-kit 1.0.3 → 1.0.4

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,106 @@
+import { forwardRef } from 'react';
+import type { AlertProps } from './Alert.types';
+import { Button } from '../Button/Button';
+
+/**
+ * Alert - Componente de alerta/diálogo del sistema de diseño Siesa
+ *
+ * Componente modal para confirmaciones con soporte para:
+ * - Título y descripción
+ * - Contenido personalizado (children)
+ * - Botones de acción personalizados o por defecto
+ * - Dark mode
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   title="Are you sure you want to refund this payment?"
+ *   description="The refund will be reflected in 2 to 3 business days."
+ *   onCancel={() => console.log('Cancelled')}
+ *   onConfirm={() => console.log('Confirmed')}
+ *   confirmText="Refund"
+ * />
+ * ```
+ */
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      title,
+      description,
+      children,
+      actions,
+      onCancel,
+      onConfirm,
+      cancelText = 'Cancelar',
+      confirmText = 'Confirmar',
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    // Si se proveen actions personalizadas, usarlas. Si no, usar botones por defecto
+    const actionButtons = actions || (
+      <>
+        {onCancel && (
+          <Button type="plain" size="base" onClick={onCancel}>
+            {cancelText}
+          </Button>
+        )}
+        {onConfirm && (
+          <Button type="default" size="base" onClick={onConfirm}>
+            {confirmText}
+          </Button>
+        )}
+      </>
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          w-[512px]
+          bg-white
+          dark:bg-dark-bg-primary
+          border
+          border-border-primary
+          dark:border-dark-border-primary
+          rounded-xl
+          ${className}
+        `.trim().replace(/\s+/g, ' ')}
+        {...props}
+      >
+        {/* Content Container */}
+        <div className="p-6 flex flex-col gap-4">
+          {/* Text Section */}
+          <div className="flex flex-col gap-3">
+            {/* Title */}
+            <p className="text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary">
+              {title}
+            </p>
+
+            {/* Description (optional) */}
+            {description && (
+              <p className="text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary">
+                {description}
+              </p>
+            )}
+          </div>
+
+          {/* Body Content (optional) */}
+          {children && (
+            <div className="flex flex-col gap-3">
+              {children}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex flex-wrap gap-3 items-center justify-end">
+            {actionButtons}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,54 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Props del componente Alert
+ */
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Título del alert (texto principal en negrita)
+   */
+  title: string;
+
+  /**
+   * Descripción opcional (texto secundario)
+   */
+  description?: string;
+
+  /**
+   * Contenido opcional del body (por ejemplo, input, placeholder, etc.)
+   */
+  children?: ReactNode;
+
+  /**
+   * Botones de acción personalizados
+   * Si no se proveen, se mostrarán los botones por defecto (Cancel/Confirm)
+   */
+  actions?: ReactNode;
+
+  /**
+   * Callback cuando se hace click en Cancel
+   */
+  onCancel?: () => void;
+
+  /**
+   * Callback cuando se hace click en Confirm
+   */
+  onConfirm?: () => void;
+
+  /**
+   * Texto del botón de cancelar
+   * @default "Cancelar"
+   */
+  cancelText?: string;
+
+  /**
+   * Texto del botón de confirmar
+   * @default "Confirmar"
+   */
+  confirmText?: string;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+}

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,494 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from './Avatar';
+
+/**
+ * Avatar - Componente de avatar del sistema de diseño Siesa
+ *
+ * Sistema completo de avatares con soporte para:
+ * - **Tamaños**: 4 (20px), 6 (24px), 8 (32px), 10 (40px)
+ * - **Tipos**: Circular (completamente redondo) y Rounded (esquinas redondeadas)
+ * - **Imagen**: Muestra una imagen de usuario
+ * - **Iniciales**: Muestra iniciales cuando no hay imagen
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente para mostrar avatares de usuario con soporte para imágenes o iniciales. Diseñado para mantener consistencia visual en toda la aplicación.',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['4', '6', '8', '10'],
+      description: 'Tamaño del avatar',
+      table: {
+        type: { summary: "'4' | '6' | '8' | '10'" },
+        defaultValue: { summary: "'10'" },
+        category: 'Appearance',
+      },
+    },
+    type: {
+      control: 'select',
+      options: ['circular', 'rounded'],
+      description: 'Tipo de forma del avatar',
+      table: {
+        type: { summary: "'circular' | 'rounded'" },
+        defaultValue: { summary: "'circular'" },
+        category: 'Appearance',
+      },
+    },
+    src: {
+      control: 'text',
+      description: 'URL de la imagen del avatar',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    alt: {
+      control: 'text',
+      description: 'Texto alternativo para la imagen',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    initials: {
+      control: 'text',
+      description: 'Iniciales a mostrar cuando no hay imagen',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con todas las props del Avatar en tiempo real.
+ * Prueba diferentes tamaños, tipos e iniciales o imágenes.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    size: '10',
+    type: 'circular',
+    initials: 'JD',
+  },
+};
+
+// ============================================
+// 2. TODOS LOS TAMAÑOS
+// ============================================
+
+/**
+ * Todos los Tamaños
+ *
+ * Vista de todos los tamaños disponibles del Avatar.
+ * Muestra tanto circular como rounded en diferentes tamaños.
+ */
+export const AllSizes: Story = {
+  name: 'Todos los Tamaños',
+  render: () => (
+    <div className="space-y-6">
+      {/* Circular con Imagen */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Circular con Imagen</h3>
+        <div className="flex items-center gap-4">
+          <Avatar
+            size="4"
+            type="circular"
+            src="https://i.pravatar.cc/150?img=1"
+            alt="Usuario"
+          />
+          <Avatar
+            size="6"
+            type="circular"
+            src="https://i.pravatar.cc/150?img=1"
+            alt="Usuario"
+          />
+          <Avatar
+            size="8"
+            type="circular"
+            src="https://i.pravatar.cc/150?img=1"
+            alt="Usuario"
+          />
+          <Avatar
+            size="10"
+            type="circular"
+            src="https://i.pravatar.cc/150?img=1"
+            alt="Usuario"
+          />
+        </div>
+        <div className="flex items-center gap-4 mt-2 text-xs text-gray-500 dark:text-gray-300">
+          <span className="w-5 text-center">20px</span>
+          <span className="w-6 text-center">24px</span>
+          <span className="w-8 text-center">32px</span>
+          <span className="w-10 text-center">40px</span>
+        </div>
+      </div>
+
+      {/* Rounded con Imagen */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Rounded con Imagen</h3>
+        <div className="flex items-center gap-4">
+          <Avatar
+            size="4"
+            type="rounded"
+            src="https://i.pravatar.cc/150?img=2"
+            alt="Usuario"
+          />
+          <Avatar
+            size="6"
+            type="rounded"
+            src="https://i.pravatar.cc/150?img=2"
+            alt="Usuario"
+          />
+          <Avatar
+            size="8"
+            type="rounded"
+            src="https://i.pravatar.cc/150?img=2"
+            alt="Usuario"
+          />
+          <Avatar
+            size="10"
+            type="rounded"
+            src="https://i.pravatar.cc/150?img=2"
+            alt="Usuario"
+          />
+        </div>
+      </div>
+
+      {/* Circular con Iniciales */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Circular con Iniciales</h3>
+        <div className="flex items-center gap-4">
+          <Avatar size="4" type="circular" initials="JD" />
+          <Avatar size="6" type="circular" initials="JD" />
+          <Avatar size="8" type="circular" initials="JD" />
+          <Avatar size="10" type="circular" initials="JD" />
+        </div>
+      </div>
+
+      {/* Rounded con Iniciales */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Rounded con Iniciales</h3>
+        <div className="flex items-center gap-4">
+          <Avatar size="4" type="rounded" initials="TW" />
+          <Avatar size="6" type="rounded" initials="TW" />
+          <Avatar size="8" type="rounded" initials="TW" />
+          <Avatar size="10" type="rounded" initials="TW" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON IMÁGENES
+// ============================================
+
+/**
+ * Con Imágenes
+ *
+ * Ejemplos de avatares con imágenes de usuario.
+ */
+export const WithImages: Story = {
+  name: 'Con Imágenes',
+  render: () => (
+    <div className="space-y-6">
+      {/* Diferentes usuarios */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Diferentes Usuarios</h3>
+        <div className="flex items-center gap-4">
+          <Avatar
+            size="10"
+            type="circular"
+            src="https://i.pravatar.cc/150?img=3"
+            alt="Juan Pérez"
+          />
+          <Avatar
+            size="10"
+            type="circular"
+            src="https://i.pravatar.cc/150?img=5"
+            alt="María García"
+          />
+          <Avatar
+            size="10"
+            type="circular"
+            src="https://i.pravatar.cc/150?img=7"
+            alt="Carlos López"
+          />
+          <Avatar
+            size="10"
+            type="circular"
+            src="https://i.pravatar.cc/150?img=9"
+            alt="Ana Martínez"
+          />
+        </div>
+      </div>
+
+      {/* Rounded */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estilo Rounded</h3>
+        <div className="flex items-center gap-4">
+          <Avatar
+            size="10"
+            type="rounded"
+            src="https://i.pravatar.cc/150?img=11"
+            alt="Usuario 1"
+          />
+          <Avatar
+            size="10"
+            type="rounded"
+            src="https://i.pravatar.cc/150?img=12"
+            alt="Usuario 2"
+          />
+          <Avatar
+            size="10"
+            type="rounded"
+            src="https://i.pravatar.cc/150?img=13"
+            alt="Usuario 3"
+          />
+          <Avatar
+            size="10"
+            type="rounded"
+            src="https://i.pravatar.cc/150?img=14"
+            alt="Usuario 4"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. CON INICIALES
+// ============================================
+
+/**
+ * Con Iniciales
+ *
+ * Ejemplos de avatares con iniciales de usuario.
+ */
+export const WithInitials: Story = {
+  name: 'Con Iniciales',
+  render: () => (
+    <div className="space-y-6">
+      {/* Diferentes iniciales */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Diferentes Iniciales</h3>
+        <div className="flex items-center gap-4">
+          <Avatar size="10" type="circular" initials="JD" />
+          <Avatar size="10" type="circular" initials="AS" />
+          <Avatar size="10" type="circular" initials="MR" />
+          <Avatar size="10" type="circular" initials="KL" />
+        </div>
+      </div>
+
+      {/* Rounded */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Estilo Rounded</h3>
+        <div className="flex items-center gap-4">
+          <Avatar size="10" type="rounded" initials="TW" />
+          <Avatar size="10" type="rounded" initials="GH" />
+          <Avatar size="10" type="rounded" initials="PQ" />
+          <Avatar size="10" type="rounded" initials="XY" />
+        </div>
+      </div>
+
+      {/* Diferentes tamaños */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Diferentes Tamaños</h3>
+        <div className="flex items-center gap-4">
+          <Avatar size="4" type="circular" initials="AB" />
+          <Avatar size="6" type="circular" initials="CD" />
+          <Avatar size="8" type="circular" initials="EF" />
+          <Avatar size="10" type="circular" initials="GH" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los avatares en situaciones reales:
+ * listas de usuarios, comentarios, perfiles, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => (
+    <div className="space-y-6">
+      {/* Lista de usuarios */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Lista de Usuarios</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg max-w-md">
+          <div className="space-y-4">
+            <div className="flex items-center gap-3">
+              <Avatar
+                size="10"
+                type="circular"
+                src="https://i.pravatar.cc/150?img=15"
+                alt="Juan Pérez"
+              />
+              <div>
+                <p className="font-bold text-sm text-gray-900 dark:text-white">Juan Pérez</p>
+                <p className="text-xs text-gray-500 dark:text-gray-300">juan.perez@ejemplo.com</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Avatar
+                size="10"
+                type="circular"
+                src="https://i.pravatar.cc/150?img=16"
+                alt="María García"
+              />
+              <div>
+                <p className="font-bold text-sm text-gray-900 dark:text-white">María García</p>
+                <p className="text-xs text-gray-500 dark:text-gray-300">maria.garcia@ejemplo.com</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Avatar size="10" type="circular" initials="CL" />
+              <div>
+                <p className="font-bold text-sm text-gray-900 dark:text-white">Carlos López</p>
+                <p className="text-xs text-gray-500 dark:text-gray-300">carlos.lopez@ejemplo.com</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Comentarios */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sección de Comentarios</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg max-w-md">
+          <div className="space-y-4">
+            <div className="flex gap-3">
+              <Avatar
+                size="8"
+                type="circular"
+                src="https://i.pravatar.cc/150?img=17"
+                alt="Ana Martínez"
+              />
+              <div className="flex-1">
+                <p className="font-bold text-sm text-gray-900 dark:text-white">Ana Martínez</p>
+                <p className="text-xs text-gray-500 dark:text-gray-300 mb-1">hace 2 horas</p>
+                <p className="text-sm text-gray-800 dark:text-gray-200">
+                  ¡Esta es una gran funcionalidad! Espero poder usarla pronto.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <Avatar size="8" type="circular" initials="DG" />
+              <div className="flex-1">
+                <p className="font-bold text-sm text-gray-900 dark:text-white">Diego González</p>
+                <p className="text-xs text-gray-500 dark:text-gray-300 mb-1">hace 5 horas</p>
+                <p className="text-sm text-gray-800 dark:text-gray-200">
+                  ¡Excelente trabajo en este componente!
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Grupo de avatares */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Grupo de Colaboradores</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg max-w-md">
+          <p className="text-sm font-bold mb-3 text-gray-900 dark:text-white">Miembros del Equipo</p>
+          <div className="flex items-center -space-x-2">
+            <Avatar
+              size="8"
+              type="circular"
+              src="https://i.pravatar.cc/150?img=20"
+              alt="Miembro 1"
+              className="ring-2 ring-white dark:ring-gray-800"
+            />
+            <Avatar
+              size="8"
+              type="circular"
+              src="https://i.pravatar.cc/150?img=21"
+              alt="Miembro 2"
+              className="ring-2 ring-white dark:ring-gray-800"
+            />
+            <Avatar
+              size="8"
+              type="circular"
+              src="https://i.pravatar.cc/150?img=22"
+              alt="Miembro 3"
+              className="ring-2 ring-white dark:ring-gray-800"
+            />
+            <Avatar
+              size="8"
+              type="circular"
+              initials="AM"
+              className="ring-2 ring-white dark:ring-gray-800"
+            />
+            <Avatar
+              size="8"
+              type="circular"
+              initials="+5"
+              className="ring-2 ring-white dark:ring-gray-800"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Perfil de usuario */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Perfil de Usuario</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg max-w-md">
+          <div className="flex items-center gap-4 mb-4">
+            <Avatar
+              size="10"
+              type="circular"
+              src="https://i.pravatar.cc/150?img=25"
+              alt="Laura Fernández"
+            />
+            <div>
+              <p className="font-bold text-lg text-gray-900 dark:text-white">Laura Fernández</p>
+              <p className="text-sm text-gray-500 dark:text-gray-300">Diseñadora de Producto</p>
+            </div>
+          </div>
+          <p className="text-sm text-gray-700 dark:text-gray-200">
+            Apasionada por crear interfaces de usuario hermosas y funcionales.
+            Me encanta colaborar con equipos y resolver desafíos de diseño.
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+};