anima-ds-nucleus 1.0.3 → 1.0.5

package/src/components/Layout/Header/Header.jsx

@@ -1,50 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Select } from '../../Inputs/Select/Select';
-
-export const Header = ({ 
-  title = 'Anima DS',
-  onLanguageChange,
-  currentLanguage = 'es-AR',
-  className = '',
-  ...props 
-}) => {
-  const { t, i18n } = useTranslation();
-
-  const languageOptions = [
-    { value: 'es-AR', label: 'Español (AR)' },
-    { value: 'pt-BR', label: 'Português (BR)' },
-  ];
-
-  const handleLanguageChange = (e) => {
-    const lang = e.target.value;
-    i18n.changeLanguage(lang);
-    if (onLanguageChange) {
-      onLanguageChange(lang);
-    }
-  };
-
-  return (
-    <header className={`bg-white shadow-sm border-b border-gray-200 ${className}`} {...props}>
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex items-center">
-            <h1 className="text-xl font-bold text-gray-900">{title}</h1>
-          </div>
-          <div className="flex items-center space-x-4">
-            <div className="w-48">
-              <Select
-                value={currentLanguage}
-                options={languageOptions}
-                onChange={handleLanguageChange}
-                className="w-full"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-};
-
-export default Header;
-

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

@@ -1,36 +0,0 @@
-import { useState } from 'react';
-import { Header } from './Header';
-import { I18nProvider } from '../../../providers/I18nProvider';
-
-export default {
-  title: 'Layout/Header',
-  component: Header,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <I18nProvider>
-        <Story />
-      </I18nProvider>
-    ),
-  ],
-};
-
-export const Default = {
-  render: () => {
-    const [language, setLanguage] = useState('es-AR');
-    return (
-      <Header
-        title="Anima Design System"
-        currentLanguage={language}
-        onLanguageChange={setLanguage}
-      />
-    );
-  },
-};
-
-export const WithCustomTitle = {
-  args: {
-    title: 'My Application',
-  },
-};
-

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

@@ -1,230 +0,0 @@
-import { useState } from 'react';
-import { Icon } from '../../Atoms/Icon/Icon';
-import { Typography } from '../../Atoms/Typography/Typography';
-
-// Mock data con 2 títulos y 2 secciones
-const MOCK_SECTIONS = [
-  {
-    title: 'PERSONAS',
-    items: [
-      { id: 'empleados', label: 'Empleados', icon: 'UserGroupIcon' },
-      { id: 'organizacion', label: 'Organización', icon: 'BuildingOfficeIcon' },
-    ],
-  },
-  {
-    title: 'TALENTO',
-    items: [
-      { id: 'reclutamiento', label: 'Reclutamiento', icon: 'UserPlusIcon' },
-      { id: 'desarrollo', label: 'Desarrollo', icon: 'AcademicCapIcon' },
-    ],
-  },
-];
-
-export const Sidebar = ({
-  sections = MOCK_SECTIONS,
-  activeItem,
-  onItemClick,
-  defaultCollapsed = false,
-  companyName = 'Nucleus AR',
-  companyLogo,
-  onCompanyClick,
-  className = '',
-  ...props
-}) => {
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-
-  const toggleCollapse = () => {
-    setIsCollapsed(!isCollapsed);
-  };
-
-  return (
-    <aside
-      className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out ${
-        isCollapsed ? 'w-20' : 'w-64'
-      } ${className}`}
-      {...props}
-    >
-      <nav className="h-full flex flex-col">
-        {/* Barra superior con Nucleus AR */}
-        {!isCollapsed && (
-          <div className="p-4 border-b border-gray-200">
-            <button
-              onClick={onCompanyClick}
-              className="w-full bg-white rounded-lg border px-3 py-2.5 
-                       flex items-center justify-between hover:bg-gray-50 transition-colors"
-              style={{ borderColor: '#2D5C63' }}
-            >
-              <div className="flex items-center space-x-3">
-                {/* Icono cuadrado oscuro con N */}
-                {companyLogo ? (
-                  <img
-                    src={companyLogo}
-                    alt={companyName}
-                    className="w-8 h-8 rounded"
-                  />
-                ) : (
-                  <div className="w-8 h-8 bg-gray-700 rounded flex items-center justify-center">
-                    <Typography
-                      variant="body-md"
-                      className="color-white font-bold"
-                    >
-                      N
-                    </Typography>
-                  </div>
-                )}
-                {/* Nombre de la empresa */}
-                <Typography
-                  variant="body-md"
-                  className="color-gray-900 font-medium"
-                >
-                  {companyName}
-                </Typography>
-              </div>
-              {/* Chevron hacia abajo */}
-              <Icon
-                name="ChevronDownIcon"
-                variant="24-outline"
-                size={16}
-                className="color-gray-500"
-              />
-            </button>
-          </div>
-        )}
-        {/* Botón de colapsar/expandir - Solo visible cuando está expandido */}
-        {!isCollapsed && (
-          <div className="px-4 pb-2 flex justify-end">
-            <button
-              onClick={toggleCollapse}
-              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
-              aria-label="Colapsar sidebar"
-            >
-              <Icon
-                name="XMarkIcon"
-                variant="24-outline"
-                size={20}
-                className="color-gray-400"
-              />
-            </button>
-          </div>
-        )}
-
-        {/* Botón para expandir - Solo visible cuando está colapsado */}
-        {isCollapsed && (
-          <div className="p-4 border-b border-gray-200 flex justify-center">
-            <button
-              onClick={toggleCollapse}
-              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
-              aria-label="Expandir sidebar"
-            >
-              <Icon
-                name="Bars3Icon"
-                variant="24-outline"
-                size={20}
-                className="color-gray-400"
-              />
-            </button>
-          </div>
-        )}
-
-        {/* Contenido del sidebar */}
-        <div className="flex-1 overflow-y-auto py-4">
-          {/* Item "Inicio" destacado */}
-          <div className="px-4 mb-4">
-            <button
-              onClick={() => onItemClick && onItemClick('inicio')}
-              className={`w-full flex items-center ${
-                isCollapsed ? 'justify-center px-2' : 'px-4'
-              } py-2.5 rounded-lg transition-all duration-200 ${
-                activeItem === 'inicio'
-                  ? ''
-                  : 'color-gray-700 hover:bg-gray-100'
-              }`}
-              style={
-                activeItem === 'inicio'
-                  ? { backgroundColor: '#2D5C63' }
-                  : {}
-              }
-            >
-              <Icon
-                name="HomeIcon"
-                variant="24-outline"
-                size={20}
-                className={isCollapsed ? '' : 'mr-3'}
-              />
-              {!isCollapsed && (
-                <Typography
-                  variant="body-md"
-                  className={`font-medium ${
-                    activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
-                  }`}
-                >
-                  Inicio
-                </Typography>
-              )}
-            </button>
-          </div>
-
-          {/* Secciones */}
-          {sections.map((section, sectionIndex) => (
-            <div key={sectionIndex} className="mb-6">
-              {/* Título de la sección */}
-              {!isCollapsed && (
-                <div className="px-4 mb-2">
-                  <Typography
-                    variant="body-sm"
-                    className="color-gray-500 uppercase font-medium tracking-wider"
-                  >
-                    {section.title}
-                  </Typography>
-                </div>
-              )}
-
-              {/* Items de la sección */}
-              <div className="space-y-1">
-                {section.items.map((item) => (
-                  <div key={item.id} className="px-4">
-                    <button
-                      onClick={() => onItemClick && onItemClick(item.id)}
-                      className={`w-full flex items-center ${
-                        isCollapsed ? 'justify-center px-2' : 'px-4'
-                      } py-2.5 rounded-lg transition-all duration-200 ${
-                        activeItem === item.id
-                          ? ''
-                          : 'color-gray-700 hover:bg-gray-100'
-                      }`}
-                      style={
-                        activeItem === item.id
-                          ? { backgroundColor: '#2D5C63' }
-                          : {}
-                      }
-                      title={isCollapsed ? item.label : ''}
-                    >
-                      <Icon
-                        name={item.icon}
-                        variant="24-outline"
-                        size={20}
-                        className={isCollapsed ? '' : 'mr-3'}
-                      />
-                      {!isCollapsed && (
-                        <Typography
-                          variant="body-md"
-                          className={`font-medium ${
-                            activeItem === item.id ? 'color-white' : 'color-gray-700'
-                          }`}
-                        >
-                          {item.label}
-                        </Typography>
-                      )}
-                    </button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </nav>
-    </aside>
-  );
-};
-
-export default Sidebar;

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

@@ -1,90 +0,0 @@
-import { useState } from 'react';
-import { Sidebar } from './Sidebar';
-
-export default {
-  title: 'Layout/Sidebar',
-  component: Sidebar,
-  tags: ['autodocs'],
-};
-
-// Mock data con 2 títulos y 2 secciones
-const mockSections = [
-  {
-    title: 'PERSONAS',
-    items: [
-      { id: 'empleados', label: 'Empleados', icon: 'UserGroupIcon' },
-      { id: 'organizacion', label: 'Organización', icon: 'BuildingOfficeIcon' },
-    ],
-  },
-  {
-    title: 'TALENTO',
-    items: [
-      { id: 'reclutamiento', label: 'Reclutamiento', icon: 'UserPlusIcon' },
-      { id: 'desarrollo', label: 'Desarrollo', icon: 'AcademicCapIcon' },
-    ],
-  },
-];
-
-export const Default = {
-  render: () => {
-    const [activeItem, setActiveItem] = useState('inicio');
-    return (
-      <div className="h-screen bg-gray-100">
-        <Sidebar
-          sections={mockSections}
-          activeItem={activeItem}
-          onItemClick={setActiveItem}
-          companyName="Nucleus AR"
-          onCompanyClick={() => console.log('Company clicked')}
-        />
-      </div>
-    );
-  },
-};
-
-export const Colapsado = {
-  render: () => {
-    const [activeItem, setActiveItem] = useState('inicio');
-    return (
-      <div className="h-screen bg-gray-100">
-        <Sidebar
-          sections={mockSections}
-          activeItem={activeItem}
-          onItemClick={setActiveItem}
-          defaultCollapsed={true}
-        />
-      </div>
-    );
-  },
-};
-
-export const ConSeccionesPersonalizadas = {
-  render: () => {
-    const [activeItem, setActiveItem] = useState('item1');
-    const customSections = [
-      {
-        title: 'ADMINISTRACIÓN',
-        items: [
-          { id: 'item1', label: 'Usuarios', icon: 'UserIcon' },
-          { id: 'item2', label: 'Roles', icon: 'ShieldCheckIcon' },
-        ],
-      },
-      {
-        title: 'REPORTES',
-        items: [
-          { id: 'item3', label: 'Analíticas', icon: 'ChartBarIcon' },
-          { id: 'item4', label: 'Exportar', icon: 'ArrowDownTrayIcon' },
-        ],
-      },
-    ];
-    return (
-      <div className="h-screen bg-gray-100">
-        <Sidebar
-          sections={customSections}
-          activeItem={activeItem}
-          onItemClick={setActiveItem}
-        />
-      </div>
-    );
-  },
-};