anima-ds-nucleus 1.0.0

package/src/components/Layout/Modal/Modal.jsx

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Button } from '../../Atoms/Button/Button';
+
+export const Modal = ({
+  isOpen = false,
+  onClose,
+  title,
+  children,
+  footer,
+  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 sizeClasses = {
+    small: 'max-w-md',
+    medium: 'max-w-lg',
+    large: 'max-w-2xl',
+    xl: 'max-w-4xl',
+    full: 'max-w-full mx-4',
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 overflow-y-auto"
+      onClick={onClose}
+      {...props}
+    >
+      <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
+        <div
+          className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+          onClick={onClose}
+        />
+        <div
+          className={`inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full ${sizeClasses[size]} ${className}`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {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="px-6 py-4">{children}</div>
+          {footer && (
+            <div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
+              {footer}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
+

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

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Modal } from './Modal';
+import { Button } from '../../Atoms/Button/Button';
+
+export default {
+  title: 'Layout/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'xl', 'full'],
+    },
+  },
+};
+
+export const Default = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Abrir Modal</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Título del Modal"
+        >
+          <p>Este es el contenido del modal. Puedes agregar cualquier contenido aquí.</p>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const WithFooter = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Abrir Modal con Footer</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Modal con Footer"
+          footer={
+            <div className="flex justify-end space-x-2">
+              <Button variant="outline" onClick={() => setIsOpen(false)}>
+                Cancelar
+              </Button>
+              <Button variant="primary" onClick={() => setIsOpen(false)}>
+                Guardar
+              </Button>
+            </div>
+          }
+        >
+          <p>Este modal tiene un footer con botones de acción.</p>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const Large = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Abrir Modal Grande</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Modal Grande"
+          size="large"
+        >
+          <p>Este es un modal de tamaño grande con más espacio para contenido.</p>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const WithoutTitle = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Abrir Modal sin Título</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          <p>Este modal no tiene título.</p>
+        </Modal>
+      </>
+    );
+  },
+};
+

package/src/components/Layout/Pagination/Pagination.jsx

@@ -0,0 +1,109 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Button } from '../../Atoms/Button/Button';
+
+export const Pagination = ({
+  currentPage = 1,
+  totalPages = 1,
+  onPageChange,
+  showFirstLast = true,
+  className = '',
+  ...props
+}) => {
+  const handlePageChange = (page) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      if (onPageChange) {
+        onPageChange(page);
+      }
+    }
+  };
+
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisible = 5;
+    
+    if (totalPages <= maxVisible) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 5; i++) {
+          pages.push(i);
+        }
+      } else if (currentPage >= totalPages - 2) {
+        for (let i = totalPages - 4; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        for (let i = currentPage - 2; i <= currentPage + 2; i++) {
+          pages.push(i);
+        }
+      }
+    }
+    return pages;
+  };
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <nav className={className} aria-label="Pagination" {...props}>
+      <div className="flex items-center justify-center space-x-1">
+        {showFirstLast && (
+          <Button
+            variant="outline"
+            size="small"
+            onClick={() => handlePageChange(1)}
+            disabled={currentPage === 1}
+          >
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
+            </svg>
+          </Button>
+        )}
+        <Button
+          variant="outline"
+          size="small"
+          onClick={() => handlePageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+        >
+          <Icon name="ChevronLeftIcon" className="h-4 w-4" />
+        </Button>
+        
+        {getPageNumbers().map((page) => (
+          <Button
+            key={page}
+            variant={currentPage === page ? 'primary' : 'outline'}
+            size="small"
+            onClick={() => handlePageChange(page)}
+          >
+            {page}
+          </Button>
+        ))}
+        
+        <Button
+          variant="outline"
+          size="small"
+          onClick={() => handlePageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+        >
+          <Icon name="ChevronRightIcon" className="h-4 w-4" />
+        </Button>
+        {showFirstLast && (
+          <Button
+            variant="outline"
+            size="small"
+            onClick={() => handlePageChange(totalPages)}
+            disabled={currentPage === totalPages}
+          >
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.25 4.5l7.5 7.5-7.5 7.5m6-15l7.5 7.5-7.5 7.5" />
+            </svg>
+          </Button>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Pagination;
+

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

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { Pagination } from './Pagination';
+
+export default {
+  title: 'Layout/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const WithoutFirstLast = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+        showFirstLast={false}
+      />
+    );
+  },
+};
+
+export const FewPages = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={3}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const ManyPages = {
+  render: () => {
+    const [page, setPage] = useState(5);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={20}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+

package/src/components/Layout/Sidebar/Sidebar.jsx

@@ -0,0 +1,57 @@
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const Sidebar = ({
+  items = [],
+  activeItem,
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  const defaultItems = [
+    { id: 'home', label: t('nav.home'), icon: 'HomeIcon' },
+    { id: 'dashboard', label: t('nav.dashboard'), icon: 'ChartBarIcon' },
+    { id: 'profile', label: t('nav.profile'), icon: 'UserIcon' },
+    { id: 'settings', label: t('nav.settings'), icon: 'Cog6ToothIcon' },
+  ];
+
+  const menuItems = items.length > 0 ? items : defaultItems;
+
+  return (
+    <aside className={`bg-white shadow-sm border-r border-gray-200 ${className}`} {...props}>
+      <nav className="p-4">
+        <ul className="space-y-2">
+          {menuItems.map((item) => (
+            <li key={item.id}>
+              <button
+                onClick={() => onItemClick && onItemClick(item.id)}
+                className={`
+                  w-full flex items-center px-4 py-2 rounded-lg
+                  transition-colors
+                  ${
+                    activeItem === item.id
+                      ? 'bg-blue-100 text-blue-700 font-medium'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }
+                `}
+              >
+                {item.icon && (
+                  <Icon
+                    name={item.icon}
+                    className="mr-3 h-5 w-5"
+                  />
+                )}
+                <span>{item.label}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+};
+
+export default Sidebar;
+

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

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Sidebar } from './Sidebar';
+import { I18nProvider } from '../../../providers/I18nProvider';
+
+export default {
+  title: 'Layout/Sidebar',
+  component: Sidebar,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+
+export const Default = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('home');
+    return (
+      <div className="w-64">
+        <Sidebar
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithCustomItems = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('item1');
+    const customItems = [
+      { id: 'item1', label: 'Custom Item 1', icon: 'HomeIcon' },
+      { id: 'item2', label: 'Custom Item 2', icon: 'UserIcon' },
+      { id: 'item3', label: 'Custom Item 3', icon: 'SettingsIcon' },
+    ];
+    return (
+      <div className="w-64">
+        <Sidebar
+          items={customItems}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+        />
+      </div>
+    );
+  },
+};
+

package/src/components/Layout/Stepper/Stepper.jsx

@@ -0,0 +1,132 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const Stepper = ({
+  steps = [],
+  currentStep = 0,
+  orientation = 'horizontal',
+  className = '',
+  ...props
+}) => {
+  if (steps.length === 0) return null;
+
+  if (orientation === 'vertical') {
+    return (
+      <div className={className} {...props}>
+        <ol className="space-y-4">
+          {steps.map((step, index) => {
+            const isActive = index === currentStep;
+            const isCompleted = index < currentStep;
+            const isUpcoming = index > currentStep;
+
+            return (
+              <li key={index} className="flex items-start">
+                <div className="flex items-center">
+                  <div
+                    className={`
+                      flex items-center justify-center w-10 h-10 rounded-full border-2
+                      ${
+                        isCompleted
+                          ? 'bg-blue-600 border-blue-600 text-white'
+                          : isActive
+                          ? 'bg-blue-100 border-blue-600 text-blue-600'
+                          : 'bg-white border-gray-300 text-gray-400'
+                      }
+                    `}
+                  >
+                    {isCompleted ? (
+                      <Icon name="CheckCircleIcon" className="h-6 w-6" />
+                    ) : (
+                      <span className="font-medium">{index + 1}</span>
+                    )}
+                  </div>
+                  {index < steps.length - 1 && (
+                    <div
+                      className={`
+                        w-0.5 h-12 ml-5
+                        ${isCompleted ? 'bg-blue-600' : 'bg-gray-300'}
+                      `}
+                    />
+                  )}
+                </div>
+                <div className="ml-4 pb-8">
+                  <h3
+                    className={`
+                      text-sm font-medium
+                      ${isActive || isCompleted ? 'text-gray-900' : 'text-gray-400'}
+                    `}
+                  >
+                    {step.label}
+                  </h3>
+                  {step.description && (
+                    <p className="text-sm text-gray-500 mt-1">{step.description}</p>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} {...props}>
+      <ol className="flex items-center w-full">
+        {steps.map((step, index) => {
+          const isActive = index === currentStep;
+          const isCompleted = index < currentStep;
+          const isUpcoming = index > currentStep;
+          const isLast = index === steps.length - 1;
+
+          return (
+            <li key={index} className="flex items-center w-full">
+              <div className="flex items-center">
+                <div
+                  className={`
+                    flex items-center justify-center w-10 h-10 rounded-full border-2
+                    ${
+                      isCompleted
+                        ? 'bg-blue-600 border-blue-600 text-white'
+                        : isActive
+                        ? 'bg-blue-100 border-blue-600 text-blue-600'
+                        : 'bg-white border-gray-300 text-gray-400'
+                    }
+                  `}
+                >
+                  {isCompleted ? (
+                    <Icon name="CheckIcon" className="h-6 w-6" />
+                  ) : (
+                    <span className="font-medium">{index + 1}</span>
+                  )}
+                </div>
+                {!isLast && (
+                  <div
+                    className={`
+                      w-full h-0.5 mx-2
+                      ${isCompleted ? 'bg-blue-600' : 'bg-gray-300'}
+                    `}
+                  />
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+      {steps[currentStep] && (
+        <div className="mt-6">
+          <h3 className="text-lg font-semibold text-gray-900">
+            {steps[currentStep].label}
+          </h3>
+          {steps[currentStep].description && (
+            <p className="text-sm text-gray-500 mt-1">
+              {steps[currentStep].description}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Stepper;
+

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

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { Stepper } from './Stepper';
+import { Button } from '../../Atoms/Button/Button';
+
+const steps = [
+  { label: 'Información Personal', description: 'Completa tus datos básicos' },
+  { label: 'Verificación', description: 'Verifica tu identidad' },
+  { label: 'Configuración', description: 'Configura tus preferencias' },
+  { label: 'Confirmación', description: 'Revisa y confirma' },
+];
+
+export default {
+  title: 'Layout/Stepper',
+  component: Stepper,
+  tags: ['autodocs'],
+};
+
+export const Horizontal = {
+  render: () => {
+    const [currentStep, setCurrentStep] = useState(0);
+    return (
+      <div>
+        <Stepper steps={steps} currentStep={currentStep} />
+        <div className="mt-6 flex space-x-2">
+          <Button
+            variant="outline"
+            onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
+            disabled={currentStep === 0}
+          >
+            Anterior
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => setCurrentStep(Math.min(steps.length - 1, currentStep + 1))}
+            disabled={currentStep === steps.length - 1}
+          >
+            Siguiente
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Vertical = {
+  render: () => {
+    const [currentStep, setCurrentStep] = useState(0);
+    return (
+      <div>
+        <Stepper steps={steps} currentStep={currentStep} orientation="vertical" />
+        <div className="mt-6 flex space-x-2">
+          <Button
+            variant="outline"
+            onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
+            disabled={currentStep === 0}
+          >
+            Anterior
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => setCurrentStep(Math.min(steps.length - 1, currentStep + 1))}
+            disabled={currentStep === steps.length - 1}
+          >
+            Siguiente
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Completed = {
+  args: {
+    steps: steps,
+    currentStep: 3,
+  },
+};
+