anima-ds-nucleus 1.0.0

package/src/components/Layout/Breakpoint/Breakpoint.stories.jsx

@@ -0,0 +1,348 @@
+import React from 'react';
+import { Breakpoint } from './Breakpoint';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+const BREAKPOINTS = [
+  {
+    name: 'Mobile',
+    key: 'breakpoint-sm',
+    range: '0 - 480px',
+    example: '412px',
+    selected: true,
+  },
+  {
+    name: 'Tablet',
+    key: 'breakpoint-md',
+    range: '481 - 768px',
+    example: '768px',
+    selected: false,
+  },
+  {
+    name: 'Small/Medium Desktop',
+    key: 'breakpoint-base',
+    range: '769 - 1440px',
+    example: '1440px',
+    selected: true,
+  },
+  {
+    name: 'Large Desktop',
+    key: 'breakpoint-lg',
+    range: '1441px +',
+    example: '1920px',
+    selected: false,
+  },
+];
+
+export default {
+  title: 'Layout/Breakpoint',
+  component: Breakpoint,
+  tags: ['autodocs'],
+  parameters: {
+    viewport: {
+      viewports: {
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '412px',
+            height: '915px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        desktop: {
+          name: 'Small/Medium Desktop',
+          styles: {
+            width: '1440px',
+            height: '900px',
+          },
+        },
+        desktopLarge: {
+          name: 'Large Desktop',
+          styles: {
+            width: '1920px',
+            height: '1080px',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const BreakpointsOverview = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <Typography variant="h3" className="color-gray-900 mb-4">
+          Breakpoints del Sistema
+        </Typography>
+        <Typography variant="body-md" className="color-gray-600 mb-6">
+          Variables CSS disponibles para usar en media queries y componentes responsivos.
+        </Typography>
+      </div>
+
+      <div className="flex flex-wrap gap-6">
+        {BREAKPOINTS.map((bp) => (
+          <div
+            key={bp.key}
+            className={`flex flex-col border-2 rounded-lg p-6 bg-white shadow ${
+              bp.selected ? 'border-green-600' : 'border-gray-200'
+            }`}
+            style={{ minWidth: '280px' }}
+          >
+            <div className="mb-4">
+              <Typography variant="h5" className="color-gray-900 mb-2">
+                {bp.name}
+              </Typography>
+              <Typography variant="body-sm" className="color-gray-600 mb-1">
+                Rango: {bp.range}
+              </Typography>
+              <Typography variant="body-sm" className="color-gray-600 mb-3">
+                Ejemplo: {bp.example}
+              </Typography>
+              <code className="text-body-sm bg-gray-100 px-2 py-1 rounded color-gray-900">
+                {bp.key}
+              </code>
+            </div>
+            {bp.selected && (
+              <div className="mt-2">
+                <span className="text-body-sm color-green-600 font-medium">
+                  ✓ Pantalla seleccionada para trabajar
+                </span>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const CSSVariables = {
+  render: () => (
+    <div className="space-y-6 p-6">
+      <div>
+        <Typography variant="h4" className="color-gray-900 mb-4">
+          Variables CSS Disponibles
+        </Typography>
+        <Typography variant="body-md" className="color-gray-600 mb-6">
+          Usa estas variables en tus media queries o componentes:
+        </Typography>
+      </div>
+
+      <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+        <div>
+          <Typography variant="h6" className="color-gray-900 mb-2">
+            Mobile (breakpoint-sm)
+          </Typography>
+          <code className="block bg-white p-3 rounded border border-gray-200 text-body-sm">
+            --breakpoint-sm: 0px<br />
+            --breakpoint-sm-max: 480px
+          </code>
+        </div>
+
+        <div>
+          <Typography variant="h6" className="color-gray-900 mb-2">
+            Tablet (breakpoint-md)
+          </Typography>
+          <code className="block bg-white p-3 rounded border border-gray-200 text-body-sm">
+            --breakpoint-md: 481px<br />
+            --breakpoint-md-max: 768px
+          </code>
+        </div>
+
+        <div>
+          <Typography variant="h6" className="color-gray-900 mb-2">
+            Small/Medium Desktop (breakpoint-base)
+          </Typography>
+          <code className="block bg-white p-3 rounded border border-gray-200 text-body-sm">
+            --breakpoint-base: 769px<br />
+            --breakpoint-base-max: 1440px
+          </code>
+        </div>
+
+        <div>
+          <Typography variant="h6" className="color-gray-900 mb-2">
+            Large Desktop (breakpoint-lg)
+          </Typography>
+          <code className="block bg-white p-3 rounded border border-gray-200 text-body-sm">
+            --breakpoint-lg: 1441px
+          </code>
+        </div>
+      </div>
+
+      <div className="bg-blue-50 rounded-lg p-6">
+        <Typography variant="h6" className="color-blue-900 mb-2">
+          Ejemplo de uso en CSS:
+        </Typography>
+        <code className="block bg-white p-4 rounded border border-blue-200 text-body-sm color-gray-900 whitespace-pre">
+{`@media (min-width: var(--breakpoint-md)) {
+  .my-component {
+    padding: var(--space-24);
+  }
+}`}
+        </code>
+      </div>
+    </div>
+  ),
+};
+
+export const VisualBreakpoints = {
+  render: () => (
+    <div className="space-y-6 p-6">
+      <div>
+        <Typography variant="h4" className="color-gray-900 mb-4">
+          Visualización de Breakpoints
+        </Typography>
+        <Typography variant="body-md" className="color-gray-600 mb-6">
+          Ajusta el tamaño de la ventana para ver cómo cambian los breakpoints.
+        </Typography>
+      </div>
+
+      <div className="flex flex-wrap gap-4">
+        {BREAKPOINTS.map((bp) => {
+          const widthMap = {
+            'breakpoint-sm': 'w-20',
+            'breakpoint-md': 'w-32',
+            'breakpoint-base': 'w-48',
+            'breakpoint-lg': 'w-64',
+          };
+
+          return (
+            <div
+              key={bp.key}
+              className={`${widthMap[bp.key] || 'w-32'} h-32 border-2 rounded-lg p-4 bg-white shadow ${
+                bp.selected ? 'border-green-600' : 'border-gray-200'
+              }`}
+            >
+              <Typography variant="body-sm" className="color-gray-900 font-medium mb-1">
+                {bp.name}
+              </Typography>
+              <Typography variant="caption" className="color-gray-600">
+                {bp.range}
+              </Typography>
+              <div className="mt-2">
+                <code className="text-[10px] bg-gray-100 px-1.5 py-0.5 rounded color-gray-700">
+                  {bp.key}
+                </code>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  ),
+};
+
+export const InteractiveBreakpoint = {
+  render: () => {
+    const getActiveBreakpoint = () => {
+      if (typeof window === 'undefined') return 'breakpoint-base';
+      const width = window.innerWidth;
+      if (width <= 480) return 'breakpoint-sm';
+      if (width <= 768) return 'breakpoint-md';
+      if (width <= 1440) return 'breakpoint-base';
+      return 'breakpoint-lg';
+    };
+
+    const [activeBreakpoint, setActiveBreakpoint] = React.useState(getActiveBreakpoint());
+
+    React.useEffect(() => {
+      const handleResize = () => {
+        setActiveBreakpoint(getActiveBreakpoint());
+      };
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const activeBP = BREAKPOINTS.find((bp) => bp.key === activeBreakpoint);
+
+    return (
+      <div className="space-y-6 p-6">
+        <div>
+          <Typography variant="h4" className="color-gray-900 mb-2">
+            Breakpoint Activo
+          </Typography>
+          <Typography variant="body-md" className="color-gray-600 mb-4">
+            Cambia el tamaño del viewport desde el panel de controles de Storybook (icono de dispositivo móvil en la barra superior) o redimensiona la ventana del navegador.
+          </Typography>
+        </div>
+
+        <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg p-6 border-2 border-green-200">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="w-16 h-16 bg-green-600 rounded-lg flex items-center justify-center">
+              <Typography variant="h5" className="color-white font-bold">
+                {activeBP?.name.charAt(0)}
+              </Typography>
+            </div>
+            <div>
+              <Typography variant="h5" className="color-gray-900 mb-1">
+                {activeBP?.name}
+              </Typography>
+              <Typography variant="body-sm" className="color-gray-600">
+                Ancho actual: <strong>{typeof window !== 'undefined' ? window.innerWidth : 0}px</strong>
+              </Typography>
+            </div>
+          </div>
+          <div className="bg-white rounded p-4 border border-gray-200">
+            <Typography variant="body-sm" className="color-gray-700 mb-2">
+              <strong>Variable CSS:</strong>
+            </Typography>
+            <code className="text-body-sm bg-gray-100 px-3 py-2 rounded block color-gray-900">
+              {activeBP?.key}
+            </code>
+            <Typography variant="body-sm" className="color-gray-700 mt-3 mb-2">
+              <strong>Rango:</strong> {activeBP?.range}
+            </Typography>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {BREAKPOINTS.map((bp) => (
+            <div
+              key={bp.key}
+              className={`p-4 rounded-lg border-2 ${
+                bp.key === activeBreakpoint
+                  ? 'border-green-600 bg-green-50'
+                  : 'border-gray-200 bg-white'
+              }`}
+            >
+              <Typography
+                variant="body-sm"
+                className={`font-medium mb-1 ${
+                  bp.key === activeBreakpoint ? 'color-green-900' : 'color-gray-900'
+                }`}
+              >
+                {bp.name}
+              </Typography>
+              <Typography variant="caption" className="color-gray-600">
+                {bp.range}
+              </Typography>
+              {bp.key === activeBreakpoint && (
+                <div className="mt-2">
+                  <span className="text-body-sm color-green-600 font-semibold">✓ Activo</span>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="bg-blue-50 rounded-lg p-6 border border-blue-200">
+          <Typography variant="h6" className="color-blue-900 mb-3">
+            💡 Cómo probar:
+          </Typography>
+          <ul className="space-y-2 text-body-sm color-gray-700">
+            <li>1. Usa el selector de viewport en la barra superior de Storybook</li>
+            <li>2. O redimensiona manualmente la ventana del navegador</li>
+            <li>3. Observa cómo cambia el breakpoint activo arriba</li>
+          </ul>
+        </div>
+      </div>
+    );
+  },
+};
+

package/src/components/Layout/Drawer/Drawer.jsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Button } from '../../Atoms/Button/Button';
+
+export const Drawer = ({
+  isOpen = false,
+  onClose,
+  title,
+  children,
+  position = 'right',
+  size = 'medium',
+  showCloseButton = true,
+  className = '',
+  ...props
+}) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const positionClasses = {
+    left: 'left-0',
+    right: 'right-0',
+    top: 'top-0 left-0 right-0',
+    bottom: 'bottom-0 left-0 right-0',
+  };
+
+  const sizeClasses = {
+    small: position === 'left' || position === 'right' ? 'w-80' : 'h-64',
+    medium: position === 'left' || position === 'right' ? 'w-96' : 'h-96',
+    large: position === 'left' || position === 'right' ? 'w-[32rem]' : 'h-[32rem]',
+    full: position === 'left' || position === 'right' ? 'w-screen' : 'h-screen',
+  };
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity"
+        onClick={onClose}
+      />
+      <div
+        className={`fixed z-50 bg-white shadow-xl ${positionClasses[position]} ${sizeClasses[size]} ${className}`}
+        {...props}
+      >
+        {title && (
+          <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+            {showCloseButton && (
+              <button
+                onClick={onClose}
+                className="text-gray-400 hover:text-gray-500"
+              >
+                <Icon name="XMarkIcon" className="h-6 w-6" />
+              </button>
+            )}
+          </div>
+        )}
+        <div className="p-6 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 80px)' }}>
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Drawer;
+

package/src/components/Layout/Drawer/Drawer.stories.jsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { Drawer } from './Drawer';
+import { Button } from '../../Atoms/Button/Button';
+
+export default {
+  title: 'Layout/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['left', 'right', 'top', 'bottom'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'full'],
+    },
+  },
+};
+
+export const Right = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Abrir Drawer Derecha</Button>
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Drawer desde la Derecha"
+          position="right"
+        >
+          <p>Este es el contenido del drawer que se abre desde la derecha.</p>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export const Left = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Abrir Drawer Izquierda</Button>
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Drawer desde la Izquierda"
+          position="left"
+        >
+          <p>Este es el contenido del drawer que se abre desde la izquierda.</p>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export const Large = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Abrir Drawer Grande</Button>
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Drawer Grande"
+          size="large"
+        >
+          <p>Este es un drawer de tamaño grande con más espacio.</p>
+        </Drawer>
+      </>
+    );
+  },
+};
+

package/src/components/Layout/Dropdown/Dropdown.jsx

@@ -0,0 +1,83 @@
+import { useState, useRef, useEffect } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const Dropdown = ({
+  trigger,
+  items = [],
+  position = 'bottom-left',
+  className = '',
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const positionClasses = {
+    'bottom-left': 'top-full left-0 mt-1',
+    'bottom-right': 'top-full right-0 mt-1',
+    'top-left': 'bottom-full left-0 mb-1',
+    'top-right': 'bottom-full right-0 mb-1',
+  };
+
+  return (
+    <div className={`relative inline-block ${className}`} ref={dropdownRef} {...props}>
+      <div onClick={() => setIsOpen(!isOpen)}>
+        {trigger || (
+          <button className="p-2 rounded-lg hover:bg-gray-100">
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
+            </svg>
+          </button>
+        )}
+      </div>
+      {isOpen && (
+        <div
+          className={`absolute z-50 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 ${positionClasses[position]}`}
+        >
+          {items.map((item, index) => (
+            <button
+              key={index}
+              onClick={() => {
+                if (item.onClick) {
+                  item.onClick();
+                }
+                setIsOpen(false);
+              }}
+              className={`
+                w-full text-left px-4 py-2 text-sm
+                ${item.danger ? 'text-red-600 hover:bg-red-50' : 'text-gray-700 hover:bg-gray-100'}
+                ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''}
+              `}
+              disabled={item.disabled}
+            >
+              <div className="flex items-center">
+                {item.icon && (
+                  <Icon name={item.icon} className="mr-3 h-5 w-5" />
+                )}
+                {item.label}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;
+

package/src/components/Layout/Dropdown/Dropdown.stories.jsx

@@ -0,0 +1,53 @@
+import { Dropdown } from './Dropdown';
+import { Button } from '../../Atoms/Button/Button';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+const dropdownItems = [
+  { label: 'Editar', icon: 'Cog6ToothIcon', onClick: () => alert('Editar') },
+  { label: 'Duplicar', icon: 'DocumentIcon', onClick: () => alert('Duplicar') },
+  { label: 'Compartir', icon: 'UserIcon', onClick: () => alert('Compartir') },
+  { label: 'Eliminar', icon: 'XMarkIcon', danger: true, onClick: () => alert('Eliminar') },
+];
+
+export default {
+  title: 'Layout/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    items: dropdownItems,
+  },
+};
+
+export const WithCustomTrigger = {
+  args: {
+    trigger: (
+      <Button variant="outline">
+        Opciones <Icon name="ChevronDownIcon" className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    items: dropdownItems,
+  },
+};
+
+export const WithDisabledItem = {
+  args: {
+    items: [
+      ...dropdownItems,
+      { label: 'Deshabilitado', disabled: true },
+    ],
+  },
+};
+
+export const Simple = {
+  args: {
+    items: [
+      { label: 'Opción 1', onClick: () => alert('Opción 1') },
+      { label: 'Opción 2', onClick: () => alert('Opción 2') },
+      { label: 'Opción 3', onClick: () => alert('Opción 3') },
+    ],
+  },
+};
+

package/src/components/Layout/Grid/Grid.jsx

@@ -0,0 +1,39 @@
+export const Grid = ({
+  columns = 2,
+  variant = 'mobile',
+  children,
+  className = '',
+  ...props
+}) => {
+  const gridClasses = {
+    mobile: {
+      2: 'grid-mobile-2',
+      3: 'grid-mobile-3',
+      4: 'grid-mobile-4',
+      8: 'grid-mobile-8',
+    },
+    desktop: {
+      2: 'grid-desktop-2',
+      3: 'grid-desktop-3',
+      4: 'grid-desktop-4',
+      8: 'grid-desktop-8',
+    },
+    'desktop-lg': {
+      12: 'grid-desktop-lg-12',
+      16: 'grid-desktop-lg-16',
+    },
+  };
+
+  const variantClasses = gridClasses[variant] || gridClasses.mobile;
+  const gridClass = variantClasses[columns] || variantClasses[2] || variantClasses[12];
+  const classes = `${gridClass} ${className}`.trim();
+
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default Grid;
+