siesa-ui-kit 1.0.0 → 1.0.2

package/src/views/RecoverPasswordView/RecoverPasswordView.stories.tsx

@@ -1,131 +1,131 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { RecoverPasswordView } from './RecoverPasswordView';
-
-const meta = {
-  title: 'Siesa UI Kit/RecoverPasswordView',
-  component: RecoverPasswordView,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Vista de recuperación de contraseña con formulario de email y navegación al login.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    onSubmit: {
-      description: 'Función que se ejecuta al enviar el formulario',
-      action: 'onSubmit',
-    },
-    onBackToLogin: {
-      description: 'Función que se ejecuta al hacer clic en "Iniciar Sesión"',
-      action: 'onBackToLogin',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Si el formulario está en estado de carga',
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Mensaje de error general a mostrar',
-    },
-    successMessage: {
-      control: 'text',
-      description: 'Mensaje de éxito a mostrar',
-    },
-    showBackground: {
-      control: 'boolean',
-      description: 'Si se muestra el fondo decorativo',
-    },
-    variant: {
-      control: 'select',
-      options: ['responsive', 'mobile', 'desktop'],
-      description: 'Variante de visualización',
-    },
-  },
-} satisfies Meta<typeof RecoverPasswordView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. DESKTOP (DEFAULT)
-// ============================================
-export const Desktop: Story = {
-  args: {
-    onSubmit: (email: string) => {
-      console.log('Recover password for:', email);
-      alert(`Se enviarán instrucciones a: ${email}`);
-    },
-    onBackToLogin: () => {
-      console.log('Back to login');
-      alert('Regresar al login');
-    },
-    showBackground: true,
-  },
-  render: (args) => (
-    <div className="min-h-screen w-full">
-      <RecoverPasswordView {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. LOADING
-// ============================================
-export const Loading: Story = {
-  args: {
-    isLoading: true,
-    showBackground: true,
-  },
-  render: (args) => (
-    <div className="min-h-screen w-full">
-      <RecoverPasswordView {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. WITH ERROR
-// ============================================
-export const WithError: Story = {
-  args: {
-    errorMessage: 'No se pudo enviar el correo. Por favor, intenta nuevamente.',
-    showBackground: true,
-  },
-  render: (args) => (
-    <div className="min-h-screen w-full">
-      <RecoverPasswordView {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 4. WITH SUCCESS
-// ============================================
-export const WithSuccess: Story = {
-  args: {
-    successMessage: 'Se han enviado las instrucciones a tu correo electrónico.',
-    showBackground: true,
-  },
-  render: (args) => (
-    <div className="min-h-screen w-full">
-      <RecoverPasswordView {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 5. WITHOUT BACKGROUND
-// ============================================
-export const WithoutBackground: Story = {
-  args: {
-    showBackground: false,
-  },
-  render: (args) => (
-    <div className="min-h-screen w-full">
-      <RecoverPasswordView {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { RecoverPasswordView } from './RecoverPasswordView';
+
+const meta = {
+  title: 'Siesa UI Kit/Views/RecoverPasswordView',
+  component: RecoverPasswordView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Vista de recuperación de contraseña con formulario de email y navegación al login.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onSubmit: {
+      description: 'Función que se ejecuta al enviar el formulario',
+      action: 'onSubmit',
+    },
+    onBackToLogin: {
+      description: 'Función que se ejecuta al hacer clic en "Iniciar Sesión"',
+      action: 'onBackToLogin',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Si el formulario está en estado de carga',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Mensaje de error general a mostrar',
+    },
+    successMessage: {
+      control: 'text',
+      description: 'Mensaje de éxito a mostrar',
+    },
+    showBackground: {
+      control: 'boolean',
+      description: 'Si se muestra el fondo decorativo',
+    },
+    variant: {
+      control: 'select',
+      options: ['responsive', 'mobile', 'desktop'],
+      description: 'Variante de visualización',
+    },
+  },
+} satisfies Meta<typeof RecoverPasswordView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. DESKTOP (DEFAULT)
+// ============================================
+export const Desktop: Story = {
+  args: {
+    onSubmit: (email: string) => {
+      console.log('Recover password for:', email);
+      alert(`Se enviarán instrucciones a: ${email}`);
+    },
+    onBackToLogin: () => {
+      console.log('Back to login');
+      alert('Regresar al login');
+    },
+    showBackground: true,
+  },
+  render: (args) => (
+    <div className="min-h-screen w-full">
+      <RecoverPasswordView {...args} />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. LOADING
+// ============================================
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    showBackground: true,
+  },
+  render: (args) => (
+    <div className="min-h-screen w-full">
+      <RecoverPasswordView {...args} />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. WITH ERROR
+// ============================================
+export const WithError: Story = {
+  args: {
+    errorMessage: 'No se pudo enviar el correo. Por favor, intenta nuevamente.',
+    showBackground: true,
+  },
+  render: (args) => (
+    <div className="min-h-screen w-full">
+      <RecoverPasswordView {...args} />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. WITH SUCCESS
+// ============================================
+export const WithSuccess: Story = {
+  args: {
+    successMessage: 'Se han enviado las instrucciones a tu correo electrónico.',
+    showBackground: true,
+  },
+  render: (args) => (
+    <div className="min-h-screen w-full">
+      <RecoverPasswordView {...args} />
+    </div>
+  ),
+};
+
+// ============================================
+// 5. WITHOUT BACKGROUND
+// ============================================
+export const WithoutBackground: Story = {
+  args: {
+    showBackground: false,
+  },
+  render: (args) => (
+    <div className="min-h-screen w-full">
+      <RecoverPasswordView {...args} />
+    </div>
+  ),
+};

package/src/views/RecoverPasswordView/RecoverPasswordView.types.ts

@@ -1,56 +1,56 @@
-/**
- * Props del componente RecoverPasswordView
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- */
-export interface RecoverPasswordViewProps {
-  /**
-   * Función que se ejecuta al enviar el formulario
-   * @param email - Email ingresado por el usuario
-   */
-  onSubmit?: (email: string) => void;
-
-  /**
-   * Función que se ejecuta al hacer clic en "Iniciar Sesión"
-   */
-  onBackToLogin?: () => void;
-
-  /**
-   * Si el formulario está en estado de carga
-   * @default false
-   */
-  isLoading?: boolean;
-
-  /**
-   * Mensaje de error general a mostrar
-   */
-  errorMessage?: string;
-
-  /**
-   * Mensaje de éxito a mostrar (cuando el email fue enviado)
-   */
-  successMessage?: string;
-
-  /**
-   * Clases CSS adicionales para el contenedor principal
-   */
-  className?: string;
-
-  /**
-   * Si se muestra el fondo decorativo (imagen de fondo)
-   * @default true
-   */
-  showBackground?: boolean;
-
-  /**
-   * Variante de visualización
-   * - responsive: Adapta automáticamente según viewport (default)
-   * - mobile: Fuerza visualización móvil (full width, sin card)
-   * - desktop: Fuerza visualización desktop (card centrado)
-   * @default 'responsive'
-   */
-  variant?: 'responsive' | 'mobile' | 'desktop';
-}
+/**
+ * Props del componente RecoverPasswordView
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ */
+export interface RecoverPasswordViewProps {
+  /**
+   * Función que se ejecuta al enviar el formulario
+   * @param email - Email ingresado por el usuario
+   */
+  onSubmit?: (email: string) => void;
+
+  /**
+   * Función que se ejecuta al hacer clic en "Iniciar Sesión"
+   */
+  onBackToLogin?: () => void;
+
+  /**
+   * Si el formulario está en estado de carga
+   * @default false
+   */
+  isLoading?: boolean;
+
+  /**
+   * Mensaje de error general a mostrar
+   */
+  errorMessage?: string;
+
+  /**
+   * Mensaje de éxito a mostrar (cuando el email fue enviado)
+   */
+  successMessage?: string;
+
+  /**
+   * Clases CSS adicionales para el contenedor principal
+   */
+  className?: string;
+
+  /**
+   * Si se muestra el fondo decorativo (imagen de fondo)
+   * @default true
+   */
+  showBackground?: boolean;
+
+  /**
+   * Variante de visualización
+   * - responsive: Adapta automáticamente según viewport (default)
+   * - mobile: Fuerza visualización móvil (full width, sin card)
+   * - desktop: Fuerza visualización desktop (card centrado)
+   * @default 'responsive'
+   */
+  variant?: 'responsive' | 'mobile' | 'desktop';
+}

package/src/views/RecoverPasswordView/icons.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-
-/**
- * Icono de sobre (envelope) para el campo de email
- * @see https://heroicons.com/
- */
-export const EnvelopeIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
-    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
-  </svg>
-);
+import React from 'react';
+
+/**
+ * Icono de sobre (envelope) para el campo de email
+ * @see https://heroicons.com/
+ */
+export const EnvelopeIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    className={className}
+  >
+    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+  </svg>
+);

package/src/views/RecoverPasswordView/index.ts

@@ -1,2 +1,2 @@
-export { RecoverPasswordView } from './RecoverPasswordView';
-export type { RecoverPasswordViewProps } from './RecoverPasswordView.types';
+export { RecoverPasswordView } from './RecoverPasswordView';
+export type { RecoverPasswordViewProps } from './RecoverPasswordView.types';

package/src/views/SignUpView/SignUpView.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SignUpView } from './SignUpView';
+
+const meta = {
+  title: 'Siesa UI Kit/Views/SignUpView',
+  component: SignUpView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Vista completa de registro con formulario para crear una nueva cuenta. Incluye campos de nombre, email y contraseña, botón de registro, enlace para iniciar sesión, y aceptación de términos y condiciones.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onSubmit: {
+      action: 'submitted',
+      description: 'Handler para el submit del formulario de registro',
+    },
+    onSignIn: {
+      action: 'signInClicked',
+      description: 'Handler para el click en "Ya tengo una cuenta"',
+    },
+    onTermsClick: {
+      action: 'termsClicked',
+      description: 'Handler para el click en "Condiciones de Uso"',
+    },
+    onPrivacyClick: {
+      action: 'privacyClicked',
+      description: 'Handler para el click en "Políticas de Privacidad"',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Estado de carga del botón de submit',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Mensaje de error general para mostrar en el formulario',
+    },
+    showBackground: {
+      control: 'boolean',
+      description: 'Si se muestra el fondo decorativo con imagen',
+    },
+    variant: {
+      control: 'select',
+      options: ['responsive', 'mobile', 'desktop'],
+      description: 'Variante de visualización',
+    },
+  },
+} satisfies Meta<typeof SignUpView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. DESKTOP (DEFAULT)
+// ============================================
+export const Desktop: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <SignUpView
+        onSubmit={(name, email, password) => {
+          console.log('Sign up:', { name, email, password });
+        }}
+        onSignIn={() => console.log('Go to sign in')}
+        onTermsClick={() => console.log('View terms')}
+        onPrivacyClick={() => console.log('View privacy')}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. LOADING STATE
+// ============================================
+export const Loading: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <SignUpView
+        isLoading={true}
+        onSubmit={(name, email, password) => {
+          console.log('Sign up:', { name, email, password });
+        }}
+        onSignIn={() => console.log('Go to sign in')}
+        onTermsClick={() => console.log('View terms')}
+        onPrivacyClick={() => console.log('View privacy')}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. WITH ERROR
+// ============================================
+export const WithError: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <SignUpView
+        errorMessage="El email ya está registrado. Por favor usa otro email o inicia sesión."
+        onSubmit={(name, email, password) => {
+          console.log('Sign up:', { name, email, password });
+        }}
+        onSignIn={() => console.log('Go to sign in')}
+        onTermsClick={() => console.log('View terms')}
+        onPrivacyClick={() => console.log('View privacy')}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. WITHOUT BACKGROUND
+// ============================================
+export const WithoutBackground: Story = {
+  render: () => (
+    <div className="min-h-screen w-full bg-gray-100 dark:bg-gray-900">
+      <SignUpView
+        showBackground={false}
+        onSubmit={(name, email, password) => {
+          console.log('Sign up:', { name, email, password });
+        }}
+        onSignIn={() => console.log('Go to sign in')}
+        onTermsClick={() => console.log('View terms')}
+        onPrivacyClick={() => console.log('View privacy')}
+      />
+    </div>
+  ),
+};