siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,332 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Alert } from './Alert';
+import { Input } from '../Input/Input';
+import { useState } from 'react';
+
+/**
+ * Alert - Componente de alerta/diálogo del sistema de diseño Siesa
+ *
+ * Sistema completo para mostrar diálogos de confirmación con soporte para:
+ * - **Título y descripción**: Texto principal y secundario
+ * - **Contenido personalizado**: Children para inputs, placeholders, etc.
+ * - **Botones de acción**: Personalizables o por defecto
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente para mostrar diálogos de confirmación y alertas. Ideal para confirmaciones de acciones destructivas, advertencias, o cualquier acción que requiera confirmación del usuario.',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'gray', value: '#f3f4f6' },
+        { name: 'dark', value: '#1f2937' },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título del alert (texto principal)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    description: {
+      control: 'text',
+      description: 'Descripción opcional (texto secundario)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Content',
+      },
+    },
+    children: {
+      control: false,
+      description: 'Contenido opcional del body',
+      table: {
+        type: { summary: 'ReactNode' },
+        category: 'Content',
+      },
+    },
+    cancelText: {
+      control: 'text',
+      description: 'Texto del botón de cancelar',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Cancelar' },
+        category: 'Actions',
+      },
+    },
+    confirmText: {
+      control: 'text',
+      description: 'Texto del botón de confirmar',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Confirmar' },
+        category: 'Actions',
+      },
+    },
+    onCancel: {
+      action: 'cancelled',
+      description: 'Callback cuando se hace click en Cancel',
+      table: {
+        type: { summary: '() => void' },
+        category: 'Actions',
+      },
+    },
+    onConfirm: {
+      action: 'confirmed',
+      description: 'Callback cuando se hace click en Confirm',
+      table: {
+        type: { summary: '() => void' },
+        category: 'Actions',
+      },
+    },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con el Alert en tiempo real.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    title: '¿Está seguro de que desea reembolsar este pago?',
+    description:
+      'El reembolso se reflejará en la cuenta bancaria del cliente de 2 a 3 días hábiles después del procesamiento.',
+    cancelText: 'Cancelar',
+    confirmText: 'Reembolsar',
+  },
+};
+
+// ============================================
+// 2. TODAS LAS VARIANTES
+// ============================================
+
+/**
+ * Todas las Variantes
+ *
+ * Vista de todas las variantes del Alert según Figma.
+ */
+export const AllVariants: Story = {
+  name: 'Todas las Variantes',
+  args: {
+    title: '',
+    description: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* 1. Con descripción */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Descripción</h3>
+        <Alert
+          title="¿Está seguro de que desea reembolsar este pago?"
+          description="El reembolso se reflejará en la cuenta bancaria del cliente de 2 a 3 días hábiles después del procesamiento."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed')}
+          confirmText="Reembolsar"
+        />
+      </div>
+
+      {/* 2. Sin descripción */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Descripción</h3>
+        <Alert
+          title="¿Está seguro de que desea reembolsar este pago?"
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed')}
+          confirmText="Reembolsar"
+        />
+      </div>
+
+      {/* 3. Con placeholder */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Placeholder</h3>
+        <Alert
+          title="¿Está seguro de que desea reembolsar este pago?"
+          description="El reembolso se reflejará en la cuenta bancaria del cliente de 2 a 3 días hábiles después del procesamiento."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed')}
+          confirmText="Reembolsar"
+        >
+          <div className="bg-background-secondary dark:bg-gray-700 border border-border-primary dark:border-dark-border-primary border-dashed h-16 rounded flex items-center justify-center">
+            <p className="text-xs font-bold text-content-tertiary dark:text-content-tertiary">
+              Marcador de Posición
+            </p>
+          </div>
+        </Alert>
+      </div>
+
+      {/* 4. Con input */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Input</h3>
+        <Alert
+          title="¿Está seguro de que desea reembolsar este pago?"
+          description="El reembolso se reflejará en la cuenta bancaria del cliente de 2 a 3 días hábiles después del procesamiento."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed')}
+          confirmText="Reembolsar"
+        >
+          <Input placeholder="****" fullWidth />
+        </Alert>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON INPUT INTERACTIVO
+// ============================================
+
+/**
+ * Con Input Interactivo
+ *
+ * Ejemplo de Alert con un campo de input funcional.
+ */
+export const WithInput: Story = {
+  name: 'Con Input Interactivo',
+  args: {
+    title: '',
+    description: '',
+  },
+  render: () => {
+    const InteractiveAlert = () => {
+      const [value, setValue] = useState('');
+
+      return (
+        <Alert
+          title="Ingrese el código de confirmación"
+          description="Por favor ingrese el código de 4 dígitos enviado a su correo electrónico."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Confirmed with value:', value)}
+          confirmText="Verificar"
+        >
+          <Input
+            placeholder="Ingrese el código"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            fullWidth
+          />
+        </Alert>
+      );
+    };
+
+    return <InteractiveAlert />;
+  },
+};
+
+// ============================================
+// 4. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar Alert en situaciones reales.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  args: {
+    title: '',
+    description: '',
+  },
+  render: () => (
+    <div className="space-y-6">
+      {/* Delete Confirmation */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Confirmación de Eliminación</h3>
+        <Alert
+          title="¿Eliminar este elemento permanentemente?"
+          description="Esta acción no se puede deshacer. Todos los datos asociados con este elemento serán eliminados permanentemente."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Deleted')}
+          cancelText="Cancelar"
+          confirmText="Eliminar"
+        />
+      </div>
+
+      {/* Logout Confirmation */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Confirmación de Cierre de Sesión</h3>
+        <Alert
+          title="¿Está seguro de que desea cerrar sesión?"
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Logged out')}
+          cancelText="Permanecer"
+          confirmText="Cerrar Sesión"
+        />
+      </div>
+
+      {/* Save Changes */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Guardar Cambios</h3>
+        <Alert
+          title="¿Guardar cambios antes de salir?"
+          description="Tiene cambios sin guardar. ¿Desea guardarlos antes de salir de esta página?"
+          onCancel={() => console.log('Discarded')}
+          onConfirm={() => console.log('Saved')}
+          cancelText="Descartar"
+          confirmText="Guardar"
+        />
+      </div>
+
+      {/* Cancel Subscription */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Cancelar Suscripción</h3>
+        <Alert
+          title="¿Cancelar su suscripción?"
+          description="Su suscripción permanecerá activa hasta el final de su período de facturación actual."
+          onCancel={() => console.log('Keep subscription')}
+          onConfirm={() => console.log('Cancelled subscription')}
+          cancelText="Mantener Suscripción"
+          confirmText="Cancelar Suscripción"
+        />
+      </div>
+
+      {/* Reset Settings */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Restablecer Configuración</h3>
+        <Alert
+          title="¿Restablecer toda la configuración a los valores predeterminados?"
+          description="Esto restablecerá todas sus preferencias y configuraciones a sus valores predeterminados."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Reset')}
+          cancelText="Cancelar"
+          confirmText="Restablecer"
+        />
+      </div>
+
+      {/* Archive Item */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Archivar Elemento</h3>
+        <Alert
+          title="¿Archivar este proyecto?"
+          description="Los proyectos archivados pueden restaurarse más tarde desde la sección de archivos."
+          onCancel={() => console.log('Cancelled')}
+          onConfirm={() => console.log('Archived')}
+          cancelText="Cancelar"
+          confirmText="Archivar"
+        />
+      </div>
+    </div>
+  ),
+};

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;
+}