anima-ds-nucleus 1.0.0

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

@@ -0,0 +1,546 @@
+import { Grid } from './Grid';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+const MOBILE_GRID_CONFIGS = [
+  {
+    columns: 2,
+    margin: '20px / 1.25rem',
+    gutter: '20px / 1.25rem',
+  },
+  {
+    columns: 3,
+    margin: '20px / 1.25rem',
+    gutter: '20px / 1.25rem',
+  },
+  {
+    columns: 4,
+    margin: '20px / 1.25rem',
+    gutter: '16px / 1rem',
+  },
+  {
+    columns: 8,
+    margin: '20px / 1.25rem',
+    gutter: '12px / 0.75rem',
+  },
+];
+
+const DESKTOP_GRID_CONFIGS = [
+  {
+    columns: 2,
+    margin: '64px / 4rem',
+    gutter: '32px / 2rem',
+  },
+  {
+    columns: 3,
+    margin: '64px / 4rem',
+    gutter: '32px / 2rem',
+  },
+  {
+    columns: 4,
+    margin: '64px / 4rem', // Estandarizado: margin uniforme para layouts amplios
+    gutter: '32px / 2rem',
+  },
+  {
+    columns: 8,
+    margin: '32px / 2rem',
+    gutter: '24px / 1.5rem',
+  },
+];
+
+const DESKTOP_LG_GRID_CONFIGS = [
+  {
+    columns: 12,
+    margin: '32px / 2rem',
+    gutter: '20px / 1.25rem',
+  },
+  {
+    columns: 16,
+    margin: '32px / 2rem',
+    gutter: '20px / 1.25rem',
+  },
+];
+
+const GridItem = ({ children, index }) => (
+  <div className="bg-gray-100 rounded-lg p-4 border border-gray-200 flex items-center justify-center min-h-[80px]">
+    <Typography variant="body-sm" className="color-gray-700 text-center">
+      {children || `Item ${index + 1}`}
+    </Typography>
+  </div>
+);
+
+export default {
+  title: 'Layout/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  argTypes: {
+    columns: {
+      control: 'select',
+      options: [2, 3, 4, 8, 12, 16],
+      description: 'Número de columnas de la grilla',
+    },
+    variant: {
+      control: 'select',
+      options: ['mobile', 'desktop', 'desktop-lg'],
+      description: 'Variante de breakpoint para la grilla',
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    columns: 2,
+    children: (
+      <>
+        <GridItem>Item 1</GridItem>
+        <GridItem>Item 2</GridItem>
+        <GridItem>Item 3</GridItem>
+        <GridItem>Item 4</GridItem>
+      </>
+    ),
+  },
+};
+
+export const MobileGrids = {
+  render: () => (
+    <div className="space-y-12 p-6">
+      <div>
+        <Typography variant="h3" className="color-gray-900 mb-4">
+          Sistema de Grillas - Mobile
+        </Typography>
+        <Typography variant="body-md" className="color-gray-600 mb-6">
+          Configuraciones de grilla disponibles para dispositivos móviles (0-480px).
+        </Typography>
+      </div>
+
+      {MOBILE_GRID_CONFIGS.map((config) => (
+        <div key={config.columns} className="space-y-4">
+          <div className="bg-white rounded-lg border-2 border-gray-200 p-6 shadow-sm">
+            <div className="mb-4">
+              <Typography variant="h5" className="color-gray-900 mb-2">
+                {config.columns} Columnas
+              </Typography>
+              <div className="space-y-1 text-body-sm color-gray-600">
+                <div>
+                  <strong>Margins:</strong> {config.margin}
+                </div>
+                <div>
+                  <strong>Gutter:</strong> {config.gutter}
+                </div>
+                <div className="mt-3">
+                  <code className="bg-gray-100 px-2 py-1 rounded color-gray-900">
+                    .grid-mobile-{config.columns}
+                  </code>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+              <div className="mb-2 text-body-sm color-gray-600">
+                <strong>Nota:</strong> Esta grilla solo se aplica en viewports de 0px - 480px. 
+                Ajusta el tamaño de la ventana o usa el selector de viewport de Storybook.
+              </div>
+              <Grid columns={config.columns} variant="mobile">
+                {Array.from({ length: config.columns }).map((_, i) => (
+                  <GridItem key={i} index={i}>
+                    Columna {i + 1}
+                  </GridItem>
+                ))}
+              </Grid>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const DesktopGrids = {
+  render: () => (
+    <div className="space-y-12 p-6">
+      <div>
+        <Typography variant="h3" className="color-gray-900 mb-4">
+          Sistema de Grillas - Desktop (Small/Medium)
+        </Typography>
+        <Typography variant="body-md" className="color-gray-600 mb-6">
+          Configuraciones de grilla disponibles para desktop pequeño/mediano (769px - 1440px).
+        </Typography>
+      </div>
+
+      {DESKTOP_GRID_CONFIGS.map((config) => (
+        <div key={config.columns} className="space-y-4">
+          <div className="bg-white rounded-lg border-2 border-gray-200 p-6 shadow-sm">
+            <div className="mb-4">
+              <Typography variant="h5" className="color-gray-900 mb-2">
+                {config.columns} Columnas
+              </Typography>
+              <div className="space-y-1 text-body-sm color-gray-600">
+                <div>
+                  <strong>Margins:</strong> {config.margin}
+                </div>
+                <div>
+                  <strong>Gutter:</strong> {config.gutter}
+                </div>
+                <div className="mt-3">
+                  <code className="bg-gray-100 px-2 py-1 rounded color-gray-900">
+                    .grid-desktop-{config.columns}
+                  </code>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+              <div className="mb-2 text-body-sm color-gray-600">
+                <strong>Nota:</strong> Esta grilla solo se aplica en viewports de 769px - 1440px. 
+                Ajusta el tamaño de la ventana o usa el selector de viewport de Storybook.
+              </div>
+              <Grid columns={config.columns} variant="desktop">
+                {Array.from({ length: config.columns }).map((_, i) => (
+                  <GridItem key={i} index={i}>
+                    Columna {i + 1}
+                  </GridItem>
+                ))}
+              </Grid>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const DesktopLargeGrids = {
+  render: () => (
+    <div className="space-y-12 p-6">
+      <div>
+        <Typography variant="h3" className="color-gray-900 mb-4">
+          Sistema de Grillas - Desktop (Large)
+        </Typography>
+        <Typography variant="body-md" className="color-gray-600 mb-6">
+          Configuraciones de grilla disponibles para desktop grande (1441px+).
+        </Typography>
+      </div>
+
+      {DESKTOP_LG_GRID_CONFIGS.map((config) => (
+        <div key={config.columns} className="space-y-4">
+          <div className="bg-white rounded-lg border-2 border-gray-200 p-6 shadow-sm">
+            <div className="mb-4">
+              <Typography variant="h5" className="color-gray-900 mb-2">
+                {config.columns} Columnas
+              </Typography>
+              <div className="space-y-1 text-body-sm color-gray-600">
+                <div>
+                  <strong>Margins:</strong> {config.margin}
+                </div>
+                <div>
+                  <strong>Gutter:</strong> {config.gutter}
+                </div>
+                <div className="mt-3">
+                  <code className="bg-gray-100 px-2 py-1 rounded color-gray-900">
+                    .grid-desktop-lg-{config.columns}
+                  </code>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+              <div className="mb-2 text-body-sm color-gray-600">
+                <strong>Nota:</strong> Esta grilla solo se aplica en viewports de 1441px+. 
+                Ajusta el tamaño de la ventana o usa el selector de viewport de Storybook.
+              </div>
+              <Grid columns={config.columns} variant="desktop-lg">
+                {Array.from({ length: config.columns }).map((_, i) => (
+                  <GridItem key={i} index={i}>
+                    Columna {i + 1}
+                  </GridItem>
+                ))}
+              </Grid>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const GridSpecifications = {
+  render: () => (
+    <div className="space-y-6 p-6">
+      <div>
+        <Typography variant="h4" className="color-gray-900 mb-4">
+          Especificaciones de Grillas
+        </Typography>
+        <Typography variant="body-md" className="color-gray-600 mb-6">
+          Detalles técnicos de cada configuración de grilla por breakpoint.
+        </Typography>
+      </div>
+
+      <div className="space-y-8">
+        <div>
+          <Typography variant="h5" className="color-gray-900 mb-4">
+            Mobile (0-480px)
+          </Typography>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {MOBILE_GRID_CONFIGS.map((config) => (
+              <div
+                key={config.columns}
+                className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm"
+              >
+                <Typography variant="h6" className="color-gray-900 mb-4">
+                  {config.columns} Columnas
+                </Typography>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Columnas:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.columns}
+                    </Typography>
+                  </div>
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Margins:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.margin}
+                    </Typography>
+                  </div>
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Gutter:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.gutter}
+                    </Typography>
+                  </div>
+                  <div className="mt-4 pt-3 border-t border-gray-200">
+                    <Typography variant="body-sm" className="color-gray-600 mb-2">
+                      Clase CSS:
+                    </Typography>
+                    <code className="block bg-gray-100 p-3 rounded text-body-sm color-gray-900">
+                      .grid-mobile-{config.columns}
+                    </code>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <Typography variant="h5" className="color-gray-900 mb-4">
+            Desktop Small/Medium (769px - 1440px)
+          </Typography>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {DESKTOP_GRID_CONFIGS.map((config) => (
+              <div
+                key={config.columns}
+                className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm"
+              >
+                <Typography variant="h6" className="color-gray-900 mb-4">
+                  {config.columns} Columnas
+                </Typography>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Columnas:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.columns}
+                    </Typography>
+                  </div>
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Margins:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.margin}
+                    </Typography>
+                  </div>
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Gutter:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.gutter}
+                    </Typography>
+                  </div>
+                  <div className="mt-4 pt-3 border-t border-gray-200">
+                    <Typography variant="body-sm" className="color-gray-600 mb-2">
+                      Clase CSS:
+                    </Typography>
+                    <code className="block bg-gray-100 p-3 rounded text-body-sm color-gray-900">
+                      .grid-desktop-{config.columns}
+                    </code>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <Typography variant="h5" className="color-gray-900 mb-4">
+            Desktop Large (1441px+)
+          </Typography>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {DESKTOP_LG_GRID_CONFIGS.map((config) => (
+              <div
+                key={config.columns}
+                className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm"
+              >
+                <Typography variant="h6" className="color-gray-900 mb-4">
+                  {config.columns} Columnas
+                </Typography>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Columnas:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.columns}
+                    </Typography>
+                  </div>
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Margins:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.margin}
+                    </Typography>
+                  </div>
+                  <div className="flex justify-between items-center border-b border-gray-100 pb-2">
+                    <Typography variant="body-sm" className="color-gray-600">
+                      Gutter:
+                    </Typography>
+                    <Typography variant="body-sm" className="color-gray-900 font-medium">
+                      {config.gutter}
+                    </Typography>
+                  </div>
+                  <div className="mt-4 pt-3 border-t border-gray-200">
+                    <Typography variant="body-sm" className="color-gray-600 mb-2">
+                      Clase CSS:
+                    </Typography>
+                    <code className="block bg-gray-100 p-3 rounded text-body-sm color-gray-900">
+                      .grid-desktop-lg-{config.columns}
+                    </code>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </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">
+          Variables CSS que puedes usar para personalizar las grillas.
+        </Typography>
+      </div>
+
+      <div className="space-y-6">
+        <div>
+          <Typography variant="h5" className="color-gray-900 mb-4">
+            Mobile
+          </Typography>
+          <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+            {MOBILE_GRID_CONFIGS.map((config) => (
+              <div key={config.columns} className="bg-white rounded p-4 border border-gray-200">
+                <Typography variant="h6" className="color-gray-900 mb-3">
+                  Grid Mobile {config.columns} Columnas
+                </Typography>
+                <code className="block text-body-sm color-gray-900 whitespace-pre">
+{`--grid-mobile-${config.columns}-columns: ${config.columns};
+--grid-mobile-${config.columns}-margin: ${config.margin.split(' / ')[1]};
+--grid-mobile-${config.columns}-gutter: ${config.gutter.split(' / ')[1]};`}
+                </code>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <Typography variant="h5" className="color-gray-900 mb-4">
+            Desktop (Small/Medium)
+          </Typography>
+          <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+            {DESKTOP_GRID_CONFIGS.map((config) => (
+              <div key={config.columns} className="bg-white rounded p-4 border border-gray-200">
+                <Typography variant="h6" className="color-gray-900 mb-3">
+                  Grid Desktop {config.columns} Columnas
+                </Typography>
+                <code className="block text-body-sm color-gray-900 whitespace-pre">
+{`--grid-desktop-${config.columns}-columns: ${config.columns};
+--grid-desktop-${config.columns}-margin: ${config.margin.split(' / ')[1]};
+--grid-desktop-${config.columns}-gutter: ${config.gutter.split(' / ')[1]};`}
+                </code>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <Typography variant="h5" className="color-gray-900 mb-4">
+            Desktop Large
+          </Typography>
+          <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+            {DESKTOP_LG_GRID_CONFIGS.map((config) => (
+              <div key={config.columns} className="bg-white rounded p-4 border border-gray-200">
+                <Typography variant="h6" className="color-gray-900 mb-3">
+                  Grid Desktop Large {config.columns} Columnas
+                </Typography>
+                <code className="block text-body-sm color-gray-900 whitespace-pre">
+{`--grid-desktop-lg-${config.columns}-columns: ${config.columns};
+--grid-desktop-lg-${config.columns}-margin: ${config.margin.split(' / ')[1]};
+--grid-desktop-lg-${config.columns}-gutter: ${config.gutter.split(' / ')[1]};`}
+                </code>
+              </div>
+            ))}
+          </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">
+          Ejemplo de uso:
+        </Typography>
+        <code className="block bg-white p-4 rounded border border-blue-200 text-body-sm color-gray-900 whitespace-pre">
+{`<Grid columns={2} variant="mobile">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</Grid>
+
+<Grid columns={4} variant="desktop">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+  <div>Item 4</div>
+</Grid>
+
+/* O usando las clases directamente */
+<div className="grid-mobile-2">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</div>
+
+<div className="grid-desktop-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+  <div>Item 4</div>
+</div>`}
+        </code>
+      </div>
+    </div>
+  ),
+};
+

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,36 @@
+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/Layout/Layout.jsx

@@ -0,0 +1,14 @@
+export const Layout = ({ children, className = '' }) => {
+  return (
+    <div className={`min-h-screen bg-gray-50 ${className}`}>
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;
+

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

@@ -0,0 +1,34 @@
+import { Layout } from './Layout';
+
+export default {
+  title: 'Layout/Layout',
+  component: Layout,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    children: (
+      <div className="col-span-12 bg-white p-6 rounded-lg shadow">
+        <h2 className="text-2xl font-bold mb-4">Layout Content</h2>
+        <p>This is a responsive layout container with breakpoint classes.</p>
+      </div>
+    ),
+  },
+};
+
+export const WithGrid = {
+  render: () => (
+    <Layout>
+      <div className="col-span-12 md:col-span-8 bg-blue-100 p-6 rounded-lg">
+        <h3 className="font-bold mb-2">Main Content (8 cols on md+)</h3>
+        <p>This section takes 8 columns on medium screens and above.</p>
+      </div>
+      <div className="col-span-12 md:col-span-4 bg-green-100 p-6 rounded-lg">
+        <h3 className="font-bold mb-2">Sidebar (4 cols on md+)</h3>
+        <p>This section takes 4 columns on medium screens and above.</p>
+      </div>
+    </Layout>
+  ),
+};
+