siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Divider/Divider.stories.tsx

@@ -1,263 +1,263 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Divider } from './Divider';
-
-/**
- * Divider - Componente de divisor del sistema de diseño Siesa
- *
- * Sistema completo de divisores con soporte para:
- * - **Tipos**: Default (más visible) y Soft (más sutil)
- * - **Ancho completo**: Se adapta al contenedor
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Divider',
-  component: Divider,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Líneas horizontales para separar contenido con diferentes niveles de visibilidad. 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: {
-    type: {
-      control: 'select',
-      options: ['default', 'soft'],
-      description: 'Tipo de divider',
-      table: {
-        type: { summary: "'default' | 'soft'" },
-        defaultValue: { summary: "'default'" },
-        category: 'Apariencia',
-      },
-    },
-  },
-} satisfies Meta<typeof Divider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con todas las props del Divider en tiempo real.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    type: 'default',
-  },
-  render: (args) => (
-    <div className="w-80">
-      <Divider {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. TIPOS
-// ============================================
-
-/**
- * Tipos de Divider
- *
- * Vista de los dos tipos disponibles: Default (más visible) y Soft (más sutil).
- */
-export const Tipos: Story = {
-  name: 'Tipos',
-  render: () => (
-    <div className="space-y-6">
-      {/* Default */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Default</h3>
-        <div className="w-80">
-          <Divider type="default" />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Línea más visible para separaciones claras</p>
-      </div>
-
-      {/* Soft */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Soft</h3>
-        <div className="w-80">
-          <Divider type="soft" />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Línea más sutil para separaciones suaves</p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar los dividers en situaciones reales:
- * listas, formularios, secciones, etc.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => (
-    <div className="space-y-6">
-      {/* Lista de elementos */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Lista de Elementos</h3>
-        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
-          <div className="space-y-3">
-            <div>
-              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 1</p>
-              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 1</p>
-            </div>
-            <Divider type="default" />
-            <div>
-              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 2</p>
-              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 2</p>
-            </div>
-            <Divider type="default" />
-            <div>
-              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 3</p>
-              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 3</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Formulario con secciones */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario con Secciones</h3>
-        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
-          <div className="space-y-4">
-            <div>
-              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Información Personal</h4>
-              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
-                <p>Nombre: Juan Pérez</p>
-                <p>Email: juan.perez@ejemplo.com</p>
-              </div>
-            </div>
-
-            <Divider type="soft" />
-
-            <div>
-              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Detalles de Contacto</h4>
-              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
-                <p>Teléfono: +1 234 567 890</p>
-                <p>Dirección: Calle Principal 123</p>
-              </div>
-            </div>
-
-            <Divider type="soft" />
-
-            <div>
-              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Preferencias</h4>
-              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
-                <p>Idioma: Español</p>
-                <p>Zona Horaria: UTC-5</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Menú */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Menú Dropdown</h3>
-        <div className="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-64 shadow-md">
-          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
-            Perfil
-          </button>
-          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
-            Configuración
-          </button>
-          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
-            Facturación
-          </button>
-
-          <div className="my-1">
-            <Divider type="default" />
-          </div>
-
-          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-red-600 dark:text-red-400">
-            Cerrar Sesión
-          </button>
-        </div>
-      </div>
-
-      {/* Tarjeta de contenido */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Tarjeta de Contenido</h3>
-        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96 overflow-hidden">
-          <div className="p-6">
-            <h4 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">Título del Artículo</h4>
-            <p className="text-sm text-gray-500 dark:text-gray-300 mb-4">
-              Esta es una breve introducción al artículo que brinda a los lectores una visión general
-              de qué esperar.
-            </p>
-          </div>
-
-          <Divider type="soft" />
-
-          <div className="p-6">
-            <p className="text-sm text-gray-800 dark:text-gray-300 leading-relaxed">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
-              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-              veniam, quis nostrud exercitation ullamco laboris.
-            </p>
-          </div>
-
-          <Divider type="soft" />
-
-          <div className="p-6 bg-gray-50 dark:bg-gray-900">
-            <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-              <span>Publicado: 15 de Enero, 2024</span>
-              <span>Tiempo de lectura: 5 min</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Timeline */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Timeline</h3>
-        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
-          <div className="space-y-4">
-            <div>
-              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Hoy, 9:00 AM</p>
-              <p className="text-sm font-medium text-gray-900 dark:text-white">Reunión de inicio del proyecto</p>
-            </div>
-
-            <Divider type="soft" />
-
-            <div>
-              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Hoy, 2:00 PM</p>
-              <p className="text-sm font-medium text-gray-900 dark:text-white">Sesión de revisión de diseño</p>
-            </div>
-
-            <Divider type="soft" />
-
-            <div>
-              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Mañana, 10:00 AM</p>
-              <p className="text-sm font-medium text-gray-900 dark:text-white">Planificación del sprint de desarrollo</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Divider } from './Divider';
+
+/**
+ * Divider - Componente de divisor del sistema de diseño Siesa
+ *
+ * Sistema completo de divisores con soporte para:
+ * - **Tipos**: Default (más visible) y Soft (más sutil)
+ * - **Ancho completo**: Se adapta al contenedor
+ * - **Dark mode**: Adaptación completa al tema oscuro
+ */
+const meta = {
+  title: 'Siesa UI Kit/Divider',
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Líneas horizontales para separar contenido con diferentes niveles de visibilidad. 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: {
+    type: {
+      control: 'select',
+      options: ['default', 'soft'],
+      description: 'Tipo de divider',
+      table: {
+        type: { summary: "'default' | 'soft'" },
+        defaultValue: { summary: "'default'" },
+        category: 'Apariencia',
+      },
+    },
+  },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+
+/**
+ * Playground Interactivo
+ *
+ * Usa los controles para experimentar con todas las props del Divider en tiempo real.
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    type: 'default',
+  },
+  render: (args) => (
+    <div className="w-80">
+      <Divider {...args} />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. TIPOS
+// ============================================
+
+/**
+ * Tipos de Divider
+ *
+ * Vista de los dos tipos disponibles: Default (más visible) y Soft (más sutil).
+ */
+export const Tipos: Story = {
+  name: 'Tipos',
+  render: () => (
+    <div className="space-y-6">
+      {/* Default */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Default</h3>
+        <div className="w-80">
+          <Divider type="default" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Línea más visible para separaciones claras</p>
+      </div>
+
+      {/* Soft */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Soft</h3>
+        <div className="w-80">
+          <Divider type="soft" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">Línea más sutil para separaciones suaves</p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CASOS DE USO REALES
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los dividers en situaciones reales:
+ * listas, formularios, secciones, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => (
+    <div className="space-y-6">
+      {/* Lista de elementos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Lista de Elementos</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
+          <div className="space-y-3">
+            <div>
+              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 1</p>
+              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 1</p>
+            </div>
+            <Divider type="default" />
+            <div>
+              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 2</p>
+              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 2</p>
+            </div>
+            <Divider type="default" />
+            <div>
+              <p className="font-bold text-sm text-gray-900 dark:text-white">Elemento 3</p>
+              <p className="text-xs text-gray-500 dark:text-gray-300">Descripción del elemento 3</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Formulario con secciones */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario con Secciones</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
+          <div className="space-y-4">
+            <div>
+              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Información Personal</h4>
+              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
+                <p>Nombre: Juan Pérez</p>
+                <p>Email: juan.perez@ejemplo.com</p>
+              </div>
+            </div>
+
+            <Divider type="soft" />
+
+            <div>
+              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Detalles de Contacto</h4>
+              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
+                <p>Teléfono: +1 234 567 890</p>
+                <p>Dirección: Calle Principal 123</p>
+              </div>
+            </div>
+
+            <Divider type="soft" />
+
+            <div>
+              <h4 className="font-bold text-base mb-3 text-gray-900 dark:text-white">Preferencias</h4>
+              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
+                <p>Idioma: Español</p>
+                <p>Zona Horaria: UTC-5</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Menú */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Menú Dropdown</h3>
+        <div className="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-64 shadow-md">
+          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
+            Perfil
+          </button>
+          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
+            Configuración
+          </button>
+          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-gray-900 dark:text-white">
+            Facturación
+          </button>
+
+          <div className="my-1">
+            <Divider type="default" />
+          </div>
+
+          <button className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm text-red-600 dark:text-red-400">
+            Cerrar Sesión
+          </button>
+        </div>
+      </div>
+
+      {/* Tarjeta de contenido */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Tarjeta de Contenido</h3>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96 overflow-hidden">
+          <div className="p-6">
+            <h4 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">Título del Artículo</h4>
+            <p className="text-sm text-gray-500 dark:text-gray-300 mb-4">
+              Esta es una breve introducción al artículo que brinda a los lectores una visión general
+              de qué esperar.
+            </p>
+          </div>
+
+          <Divider type="soft" />
+
+          <div className="p-6">
+            <p className="text-sm text-gray-800 dark:text-gray-300 leading-relaxed">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+              veniam, quis nostrud exercitation ullamco laboris.
+            </p>
+          </div>
+
+          <Divider type="soft" />
+
+          <div className="p-6 bg-gray-50 dark:bg-gray-900">
+            <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+              <span>Publicado: 15 de Enero, 2024</span>
+              <span>Tiempo de lectura: 5 min</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Timeline */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Timeline</h3>
+        <div className="p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-96">
+          <div className="space-y-4">
+            <div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Hoy, 9:00 AM</p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">Reunión de inicio del proyecto</p>
+            </div>
+
+            <Divider type="soft" />
+
+            <div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Hoy, 2:00 PM</p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">Sesión de revisión de diseño</p>
+            </div>
+
+            <Divider type="soft" />
+
+            <div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Mañana, 10:00 AM</p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">Planificación del sprint de desarrollo</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};