siesa-ui-kit 1.0.2 → 1.0.3

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

@@ -1,332 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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;
-}