anima-ds-nucleus 1.0.0

package/src/main.jsx

@@ -0,0 +1,510 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import './style.css';
+import { I18nProvider } from './providers/I18nProvider';
+import { Button } from './components/Atoms/Button/Button';
+import { StatCard } from './components/DataDisplay/StatCard/StatCard';
+import { Card } from './components/DataDisplay/Card/Card';
+import { AreaChart } from './components/DataDisplay/AreaChart/AreaChart';
+import { Typography } from './components/Atoms/Typography/Typography';
+import { Badge } from './components/Atoms/Badge/Badge';
+import { Icon } from './components/Atoms/Icon/Icon';
+import { Tooltip } from './components/Atoms/Tooltip/Tooltip';
+import { Input } from './components/Inputs/Input/Input';
+import { Tabs } from './components/Layout/Tabs/Tabs';
+import { Modal } from './components/Layout/Modal/Modal';
+import charlyImg from './assets/charly.png';
+
+function App() {
+  const [isBeeTraveling, setIsBeeTraveling] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleBeeClick = () => {
+    if (isBeeTraveling) return;
+    setIsBeeTraveling(true);
+
+    // Duración total de la animación CSS de viaje (debe coincidir con bee-travel)
+    setTimeout(() => {
+      setIsBeeTraveling(false);
+    }, 3600);
+  };
+
+  const handleExploreComponents = () => {
+    const componentsSection = document.getElementById('components-section');
+    if (componentsSection) {
+      componentsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  return (
+    <I18nProvider>
+      <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50">
+        {/* Bee viajera en capa superior */}
+        {isBeeTraveling && (
+          <div className="fixed inset-x-0 top-16 z-50 flex justify-center pointer-events-none">
+            <div className="bee-travel">
+              <div className="bee-travel-inner">
+                <img
+                  src={charlyImg}
+                  alt="Bee viajando por Anima DS"
+                  className="w-20 h-20 object-contain"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+        {/* Header Premium */}
+        <header className="bg-gradient-to-r from-[#003300] via-[#004d00] to-[#003300] shadow-2xl header-honeycomb">
+          <div className="max-w-7xl mx-auto px-6 py-16">
+            <div className="flex flex-col items-center text-center space-y-4">
+              <div className="flex items-center space-x-3">
+                <Tooltip
+                  content="Soy Bee, la IA de Nucleus Labs, y te presento el Anima Design System"
+                  position="right"
+                >
+                  <div
+                    className={`w-20 h-20 rounded-lg flex items-center justify-center overflow-hidden cursor-pointer transition-opacity duration-200 ${
+                      isBeeTraveling ? 'opacity-0' : 'opacity-100'
+                    }`}
+                    onClick={handleBeeClick}
+                  >
+                    <img
+                      src={charlyImg}
+                      alt="Bee, IA de Nucleus Labs"
+                      className="w-18 h-18 object-contain charly-float"
+                    />
+                  </div>
+                </Tooltip>
+                <Typography variant="h1" className="text-white font-bold tracking-tight">
+                  Anima Design System
+                </Typography>
+              </div>
+              <Typography variant="body1" className="text-green-100 max-w-2xl">
+                Sistema de diseño premium de Nucleus, con componentes modulares, documentación completa y 
+                herramientas de desarrollo integradas para todos los proyectos de la empresa.
+              </Typography>
+              <Badge variant="success" size="large" className="bg-white/20 text-white border-white/30 mt-2">
+                v1.0.0
+              </Badge>
+            </div>
+          </div>
+        </header>
+
+        {/* Main Content */}
+        <main className="max-w-7xl mx-auto px-6 py-12">
+          {/* Welcome Section */}
+          <section className="mb-16">
+            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+              <div className="p-8">
+                <div className="flex items-start justify-between mb-6">
+                  <div>
+                    <Typography variant="h2" className="text-gray-900 mb-3">
+                      Bienvenido a Anima DS
+                    </Typography>
+                    <Typography variant="body1" className="text-gray-600 max-w-3xl leading-relaxed">
+                      Tu librería de componentes está lista para usar. Explora más de 45 componentes 
+                      cuidadosamente diseñados, todos documentados en Storybook y listos para integrarse 
+                      en tus proyectos.
+                    </Typography>
+                  </div>
+                  <div className="hidden md:block">
+                    <div className="w-24 h-24 bg-gradient-to-br from-[#003300] to-[#006600] rounded-2xl flex items-center justify-center shadow-lg">
+                      <Icon name="ChartBarIcon" className="h-12 w-12 text-white" />
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap gap-3 mt-6">
+                  <Button 
+                    variant="primary" 
+                    className="bg-[#003300] hover:bg-[#004d00] border-[#003300]"
+                    onClick={() => window.open('http://localhost:6006', '_blank')}
+                  >
+                    Ver Documentación
+                  </Button>
+                  <Button 
+                    variant="outline" 
+                    className="border-[#003300] text-[#003300] hover:bg-[#003300] hover:text-white"
+                    onClick={handleExploreComponents}
+                  >
+                    Explorar Componentes
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          </section>
+
+          {/* Quick Install Section */}
+          <section className="mb-16">
+            <Card className="border-0 shadow-lg bg-gradient-to-br from-[#003300]/5 to-[#004d00]/5">
+              <div className="p-6">
+                <Typography variant="h3" className="text-gray-900 mb-4">
+                  Instalación Rápida
+                </Typography>
+                <div className="bg-gray-900 rounded-lg p-4 mb-4">
+                  <code className="text-green-400 text-sm">npm install anima-ds</code>
+                </div>
+                <div className="bg-gray-50 rounded-lg p-4">
+                  <Typography variant="body2" className="text-gray-700 mb-2 font-medium">
+                    Ejemplo de uso:
+                  </Typography>
+                  <pre className="text-xs text-gray-600 overflow-x-auto">
+{`import { Button, Card } from 'anima-ds';
+
+<Card title="Mi Card">
+  <Button variant="Primary">Click aquí</Button>
+</Card>`}
+                  </pre>
+                </div>
+              </div>
+            </Card>
+          </section>
+
+          {/* Stats Section */}
+          <section className="mb-16">
+            <Typography variant="h3" className="text-gray-900 mb-6">
+              Estadísticas del Sistema
+            </Typography>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <StatCard
+                title="Componentes"
+                value="45+"
+                change="Todos documentados"
+                changeType="positive"
+                icon="ChartBarIcon"
+                iconColor="green"
+                className="border-l-4 border-[#003300]"
+              />
+              <StatCard
+                title="Categorías"
+                value="5"
+                change="Organizados por tipo"
+                changeType="positive"
+                icon="Cog6ToothIcon"
+                iconColor="green"
+                className="border-l-4 border-[#003300]"
+              />
+              <StatCard
+                title="Idiomas"
+                value="2"
+                change="ES-AR y PT-BR"
+                changeType="positive"
+                icon="UserIcon"
+                iconColor="green"
+                className="border-l-4 border-[#003300]"
+              />
+              <StatCard
+                title="Gráficos"
+                value="6"
+                change="Con ApexCharts"
+                changeType="positive"
+                icon="ChartBarIcon"
+                iconColor="green"
+                className="border-l-4 border-[#003300]"
+              />
+            </div>
+          </section>
+
+          {/* Components Overview Section */}
+          <section id="components-section" className="mb-16">
+            <Typography variant="h3" className="text-gray-900 mb-6">
+              Componentes Principales
+            </Typography>
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+              {[
+                { name: 'Button', icon: 'ChartBarIcon', category: 'Atoms' },
+                { name: 'Input', icon: 'Cog6ToothIcon', category: 'Inputs' },
+                { name: 'Card', icon: 'ChartBarIcon', category: 'DataDisplay' },
+                { name: 'Modal', icon: 'UserIcon', category: 'Layout' },
+                { name: 'Tabs', icon: 'Cog6ToothIcon', category: 'Layout' },
+                { name: 'Badge', icon: 'ChartBarIcon', category: 'Atoms' },
+                { name: 'Select', icon: 'Cog6ToothIcon', category: 'Inputs' },
+                { name: 'DBGrid', icon: 'ChartBarIcon', category: 'DataDisplay' },
+                { name: 'AreaChart', icon: 'ChartBarIcon', category: 'DataDisplay' },
+                { name: 'LoginForm', icon: 'UserIcon', category: 'Views' },
+              ].map((comp, idx) => (
+                <Card key={idx} className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow text-center p-4">
+                  <div className="w-10 h-10 bg-gradient-to-br from-[#003300] to-[#006600] rounded-lg flex items-center justify-center mx-auto mb-2">
+                    <Icon name={comp.icon} className="h-5 w-5 text-white" />
+                  </div>
+                  <Typography variant="body2" className="text-gray-900 font-medium mb-1">
+                    {comp.name}
+                  </Typography>
+                  <Typography variant="body2" className="text-gray-500 text-xs">
+                    {comp.category}
+                  </Typography>
+                </Card>
+              ))}
+            </div>
+          </section>
+
+          {/* Requirements Section */}
+          <section className="mb-16">
+            <Card className="border-l-4 border-[#003300] shadow-md">
+              <div className="p-6">
+                <Typography variant="h4" className="text-gray-900 mb-4">
+                  Requisitos Técnicos
+                </Typography>
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Badge variant="primary" className="bg-[#003300] text-white">React 18+</Badge>
+                    <Typography variant="body2" className="text-gray-600">
+                      Versión mínima requerida
+                    </Typography>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant="success">Tailwind CSS</Badge>
+                    <Typography variant="body2" className="text-gray-600">
+                      Sistema de estilos recomendado
+                    </Typography>
+                  </div>
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <Badge variant="warning">Opcional</Badge>
+                    <Typography variant="body2" className="text-gray-600">
+                      i18next, MUI, ApexCharts (según componentes usados)
+                    </Typography>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </section>
+
+          {/* Button Variants Section - Para probar todas las variantes */}
+          <section className="mb-16">
+            <Typography variant="h3" className="text-gray-900 mb-6">
+              Variantes del Botón
+            </Typography>
+            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+              <div className="p-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
+                  {/* Columna izquierda: Variantes de botón */}
+                  <div>
+                    {/* Primary Row */}
+                    <div className="mb-8">
+                      <Typography variant="h4" className="text-gray-700 mb-4">Primary</Typography>
+                      <div className="flex items-center gap-6 flex-wrap">
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Small</span>
+                          <Button texto="Button" tipo="Primary" tamaño="Small" onClick={() => alert('Primary Small clicked!')} />
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Default</span>
+                          <Button texto="Button" tipo="Primary" tamaño="Default" onClick={() => alert('Primary Default clicked!')} />
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Large</span>
+                          <Button texto="Button" tipo="Primary" tamaño="Large" onClick={() => alert('Primary Large clicked!')} />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Secondary Row */}
+                    <div className="mb-8">
+                      <Typography variant="h4" className="text-gray-700 mb-4">Secondary</Typography>
+                      <div className="flex items-center gap-6 flex-wrap">
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Small</span>
+                          <Button texto="Button" tipo="Secondary" tamaño="Small" onClick={() => alert('Secondary Small clicked!')} />
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Default</span>
+                          <Button texto="Button" tipo="Secondary" tamaño="Default" onClick={() => alert('Secondary Default clicked!')} />
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Large</span>
+                          <Button texto="Button" tipo="Secondary" tamaño="Large" onClick={() => alert('Secondary Large clicked!')} />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Ghost Row */}
+                    <div className="mb-8">
+                      <Typography variant="h4" className="text-gray-700 mb-4">Ghost</Typography>
+                      <div className="flex items-center gap-6 flex-wrap">
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Small</span>
+                          <Button texto="Button" tipo="Ghost" tamaño="Small" onClick={() => alert('Ghost Small clicked!')} />
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Default</span>
+                          <Button texto="Button" tipo="Ghost" tamaño="Default" onClick={() => alert('Ghost Default clicked!')} />
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Large</span>
+                          <Button texto="Button" tipo="Ghost" tamaño="Large" onClick={() => alert('Ghost Large clicked!')} />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Disabled Row */}
+                    <div>
+                      <Typography variant="h4" className="text-gray-700 mb-4">Disabled</Typography>
+                      <div className="flex items-center gap-6 flex-wrap">
+                        <div className="flex flex-col items-center gap-2">
+                          <span className="text-xs text-gray-500">Small</span>
+                          <Button texto="Button" tipo="Disabled" 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="Disabled" 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="Disabled" tamaño="Large" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Columna derecha: otros componentes de ejemplo */}
+                  <div className="space-y-6">
+                    <Typography variant="h4" className="text-gray-700 mb-2">
+                      Otros componentes en acción
+                    </Typography>
+                    <Card className="border border-gray-100 shadow-md">
+                      <div className="p-5 space-y-3">
+                        <Typography variant="body1" className="text-gray-800 font-medium">
+                          Card + StatCard
+                        </Typography>
+                        <StatCard
+                          title="Sesiones activas"
+                          value="128"
+                          change="+12% esta semana"
+                          changeType="positive"
+                          icon="UserIcon"
+                          iconColor="green"
+                        />
+                        <Button 
+                          variant="outline" 
+                          tamaño="Small"
+                          onClick={() => setIsModalOpen(true)}
+                          className="w-full mt-2"
+                        >
+                          Ver Modal
+                        </Button>
+                      </div>
+                    </Card>
+
+                    <Card className="border border-gray-100 shadow-md">
+                      <div className="p-5 space-y-3">
+                        <Typography variant="body1" className="text-gray-800 font-medium">
+                          Input y Tabs
+                        </Typography>
+                        <Input
+                          label="Email"
+                          type="email"
+                          placeholder="tu@email.com"
+                          helperText="Campo de ejemplo"
+                        />
+                        <div className="mt-4">
+                          <Tabs
+                            items={[
+                              { label: 'Tab 1', content: <div className="p-2 text-sm text-gray-600">Contenido Tab 1</div> },
+                              { label: 'Tab 2', content: <div className="p-2 text-sm text-gray-600">Contenido Tab 2</div> },
+                              { label: 'Tab 3', content: <div className="p-2 text-sm text-gray-600">Contenido Tab 3</div> },
+                            ]}
+                          />
+                        </div>
+                      </div>
+                    </Card>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </section>
+
+          {/* Features Section */}
+          <section>
+            <Typography variant="h3" className="text-gray-900 mb-6">
+              Características Principales
+            </Typography>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-white to-gray-50">
+                <div className="p-6">
+                  <div className="w-14 h-14 bg-gradient-to-br from-[#003300] to-[#006600] rounded-xl flex items-center justify-center mb-4 shadow-md">
+                    <Icon name="Cog6ToothIcon" className="h-7 w-7 text-white" />
+                  </div>
+                  <Typography variant="h4" className="text-gray-900 mb-2">
+                    Componentes Modulares
+                  </Typography>
+                  <Typography variant="body2" className="text-gray-600">
+                    Estructura organizada por tipo: Atoms, Inputs, Layout, DataDisplay y Views.
+                  </Typography>
+                </div>
+              </Card>
+
+              <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-white to-gray-50">
+                <div className="p-6">
+                  <div className="w-14 h-14 bg-gradient-to-br from-[#003300] to-[#006600] rounded-xl flex items-center justify-center mb-4 shadow-md">
+                    <Icon name="ChartBarIcon" className="h-7 w-7 text-white" />
+                  </div>
+                  <Typography variant="h4" className="text-gray-900 mb-2">
+                    Storybook Integrado
+                  </Typography>
+                  <Typography variant="body2" className="text-gray-600">
+                    Cada componente incluye historias interactivas para visualización y pruebas.
+                  </Typography>
+                </div>
+              </Card>
+
+              <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-white to-gray-50">
+                <div className="p-6">
+                  <div className="w-14 h-14 bg-gradient-to-br from-[#003300] to-[#006600] rounded-xl flex items-center justify-center mb-4 shadow-md">
+                    <Icon name="UserIcon" className="h-7 w-7 text-white" />
+                  </div>
+                  <Typography variant="h4" className="text-gray-900 mb-2">
+                    Internacionalización
+                  </Typography>
+                  <Typography variant="body2" className="text-gray-600">
+                    Soporte completo para español (AR) y portugués (BR) con i18n.
+                  </Typography>
+                </div>
+              </Card>
+            </div>
+          </section>
+
+          {/* Footer */}
+          <footer className="mt-16 bg-gradient-to-r from-[#003300] via-[#004d00] to-[#003300]">
+            <div className="max-w-7xl mx-auto px-6 py-8 border-t border-white/10">
+              <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+                <Typography variant="body2" className="text-green-100 text-center md:text-left">
+                  © 2025 Anima Design System. Creado por Equipo Nucleus Labs. Todos los derechos reservados.
+                </Typography>
+                <div className="flex items-center gap-4">
+                  <a
+                    href="https://github.com/NucleusNova/anima-ds"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-green-100 hover:text-white transition-colors text-sm underline"
+                  >
+                    GitHub
+                  </a>
+                </div>
+              </div>
+            </div>
+          </footer>
+
+          {/* Modal Example */}
+          <Modal
+            isOpen={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+            title="Ejemplo de Modal"
+          >
+            <Typography variant="body1" className="text-gray-600 mb-4">
+              Este es un ejemplo del componente Modal de Anima DS.
+            </Typography>
+            <Button variant="primary" onClick={() => setIsModalOpen(false)}>
+              Cerrar
+            </Button>
+          </Modal>
+        </main>
+      </div>
+    </I18nProvider>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('app')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/providers/I18nProvider.jsx

@@ -0,0 +1,13 @@
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../i18n/config';
+
+export const I18nProvider = ({ children, language = 'es-AR' }) => {
+  if (i18n.language !== language) {
+    i18n.changeLanguage(language);
+  }
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};
+
+export default I18nProvider;
+