anima-ds-nucleus 1.0.0

package/src/components/Atoms/Button/Button.stories.jsx

@@ -0,0 +1,365 @@
+import { Button } from './Button';
+
+export default {
+  title: 'Atoms/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    texto: {
+      control: 'text',
+      description: 'Texto a mostrar en el botón',
+    },
+    tipo: {
+      control: 'select',
+      options: ['Primary', 'Secondary', 'Ghost'],
+      description: 'Tipo del botón',
+    },
+    color: {
+      control: 'select',
+      options: ['Teal', 'Grape', 'Honey'],
+      description: 'Color del botón',
+    },
+    tamaño: {
+      control: 'select',
+      options: ['Small', 'Default', 'Large'],
+      description: 'Tamaño del botón',
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Función a ejecutar cuando se hace click',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Estado deshabilitado',
+    },
+  },
+};
+
+// Grid de todas las variantes según el diseño
+export const AllVariants = {
+  render: () => (
+    <div className="space-y-12">
+      {/* Teal Theme */}
+      <div>
+        <h2 className="text-lg font-bold text-gray-900 mb-6">Teal</h2>
+        <div className="space-y-6">
+          {/* Primary */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Primary</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+
+          {/* Secondary */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Secondary</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+
+          {/* Ghost */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Ghost</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Grape Theme */}
+      <div>
+        <h2 className="text-lg font-bold text-gray-900 mb-6">Grape</h2>
+        <div className="space-y-6">
+          {/* Primary */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Primary</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Primary" color="Grape" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Primary" color="Grape" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Primary" color="Grape" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+
+          {/* Secondary */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Secondary</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Secondary" color="Grape" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Secondary" color="Grape" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Secondary" color="Grape" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+
+          {/* Ghost */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Ghost</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Ghost" color="Grape" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Ghost" color="Grape" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Ghost" color="Grape" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Honey Theme */}
+      <div>
+        <h2 className="text-lg font-bold text-gray-900 mb-6">Honey</h2>
+        <div className="space-y-6">
+          {/* Primary */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Primary</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Primary" color="Honey" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Primary" color="Honey" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Primary" color="Honey" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+
+          {/* Secondary */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Secondary</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Secondary" color="Honey" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Secondary" color="Honey" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Secondary" color="Honey" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+
+          {/* Ghost */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Ghost</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Ghost" color="Honey" tamaño="Small" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Ghost" color="Honey" tamaño="Default" />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Ghost" color="Honey" tamaño="Large" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Disabled States */}
+      <div>
+        <h2 className="text-lg font-bold text-gray-900 mb-6">Disabled</h2>
+        <div className="space-y-6">
+          {/* Primary Disabled */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Primary</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Small" disabled />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Default" disabled />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Large" disabled />
+              </div>
+            </div>
+          </div>
+
+          {/* Outline Disabled (Secondary disabled) */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Outline</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Small" disabled />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Default" disabled />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Large" disabled />
+              </div>
+            </div>
+          </div>
+
+          {/* Ghost Disabled */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-4">Ghost</h3>
+            <div className="flex items-center gap-6">
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Small</span>
+                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Small" disabled />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Default</span>
+                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Default" disabled />
+              </div>
+              <div className="flex flex-col items-center gap-2">
+                <span className="text-xs text-gray-500">Large</span>
+                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Large" disabled />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Ejemplos individuales
+export const Primary = {
+  args: {
+    texto: 'Button',
+    tipo: 'Primary',
+    tamaño: 'Default',
+  },
+};
+
+export const Secondary = {
+  args: {
+    texto: 'Button',
+    tipo: 'Secondary',
+    tamaño: 'Default',
+  },
+};
+
+export const Ghost = {
+  args: {
+    texto: 'Button',
+    tipo: 'Ghost',
+    tamaño: 'Default',
+  },
+};
+
+export const Disabled = {
+  args: {
+    texto: 'Button',
+    tipo: 'Primary',
+    color: 'Teal',
+    tamaño: 'Default',
+    disabled: true,
+  },
+};
+
+export const Small = {
+  args: {
+    texto: 'Button',
+    tipo: 'Primary',
+    tamaño: 'Small',
+  },
+};
+
+export const Default = {
+  args: {
+    texto: 'Button',
+    tipo: 'Primary',
+    tamaño: 'Default',
+  },
+};
+
+export const Large = {
+  args: {
+    texto: 'Button',
+    tipo: 'Primary',
+    tamaño: 'Large',
+  },
+};
+
+// Ejemplo con onClick
+export const WithClickHandler = {
+  args: {
+    texto: 'Click me!',
+    tipo: 'Primary',
+    tamaño: 'Default',
+    onClick: () => alert('Button clicked!'),
+  },
+};
+

package/src/components/Atoms/Divider/Divider.jsx

@@ -0,0 +1,49 @@
+export const Divider = ({
+  orientation = 'horizontal',
+  variant = 'solid',
+  spacing = 'medium',
+  label,
+  className = '',
+  ...props
+}) => {
+  const variantClasses = {
+    solid: 'border-solid',
+    dashed: 'border-dashed',
+    dotted: 'border-dotted',
+  };
+
+  const spacingClasses = {
+    small: orientation === 'horizontal' ? 'my-2' : 'mx-2',
+    medium: orientation === 'horizontal' ? 'my-4' : 'mx-4',
+    large: orientation === 'horizontal' ? 'my-6' : 'mx-6',
+  };
+
+  if (orientation === 'vertical') {
+    return (
+      <div
+        className={`border-l border-gray-300 ${variantClasses[variant]} ${spacingClasses[spacing]} ${className}`}
+        {...props}
+      />
+    );
+  }
+
+  if (label) {
+    return (
+      <div className={`flex items-center ${spacingClasses[spacing]} ${className}`} {...props}>
+        <div className={`flex-1 border-t border-gray-300 ${variantClasses[variant]}`} />
+        <span className="px-4 text-sm text-gray-500">{label}</span>
+        <div className={`flex-1 border-t border-gray-300 ${variantClasses[variant]}`} />
+      </div>
+    );
+  }
+
+  return (
+    <hr
+      className={`border-0 border-t border-gray-300 ${variantClasses[variant]} ${spacingClasses[spacing]} ${className}`}
+      {...props}
+    />
+  );
+};
+
+export default Divider;
+

package/src/components/Atoms/Divider/Divider.stories.jsx

@@ -0,0 +1,62 @@
+import { Divider } from './Divider';
+
+export default {
+  title: 'Atoms/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    variant: {
+      control: 'select',
+      options: ['solid', 'dashed', 'dotted'],
+    },
+  },
+};
+
+export const Default = {
+  args: {},
+};
+
+export const WithLabel = {
+  args: {
+    label: 'O',
+  },
+};
+
+export const Dashed = {
+  args: {
+    variant: 'dashed',
+  },
+};
+
+export const Dotted = {
+  args: {
+    variant: 'dotted',
+  },
+};
+
+export const Vertical = {
+  render: () => (
+    <div className="flex items-center h-20">
+      <span>Izquierda</span>
+      <Divider orientation="vertical" />
+      <span>Derecha</span>
+    </div>
+  ),
+};
+
+export const SmallSpacing = {
+  args: {
+    spacing: 'small',
+  },
+};
+
+export const LargeSpacing = {
+  args: {
+    spacing: 'large',
+  },
+};
+