anima-ds-nucleus 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anima-ds-nucleus",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Anima Design System - A comprehensive React component library",
   "author": "Nucleus Labs <ipvasallo@nucleus.com.ar>",
   "license": "UNLICENSED",
@@ -8,6 +8,10 @@
     "type": "git",
     "url": "git+https://github.com/NucleusNova/anima-ds.git"
   },
+  "homepage": "https://github.com/NucleusNova/anima-ds#readme",
+  "bugs": {
+    "url": "https://github.com/NucleusNova/anima-ds/issues"
+  },
   "keywords": [
     "react",
     "design system",
@@ -36,7 +40,11 @@
     "build:app": "vite build --config vite.app.config.js",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run build",
+    "publish:patch": "npm version patch && npm publish",
+    "publish:minor": "npm version minor && npm publish",
+    "publish:major": "npm version major && npm publish"
   },
   "devDependencies": {
     "react": "^18.3.1",

package/src/assets/nucleus-logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="80" viewBox="0 0 200 80">
+  <text x="50%" y="50%" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="48" font-weight="bold" fill="#5a9c5e" text-anchor="middle" dominant-baseline="middle">Nucleus</text>
+</svg>

package/src/components/Atoms/LogoHexa/LogoHexa.jsx

@@ -0,0 +1,34 @@
+export const LogoHexa = ({
+  width = 36,
+  height = 40,
+  backgroundColor = '#2D5C63',
+  textColor = '#ffffff',
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`relative flex items-center justify-center ${className}`}
+      style={{ 
+        width: `${width}px`,
+        height: `${height}px`,
+        backgroundColor: backgroundColor,
+        borderRadius: '16px',
+        clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)'
+      }}
+      {...props}
+    >
+      <span 
+        className="text-white font-bold text-lg"
+        style={{ 
+          color: textColor
+        }}
+      >
+        H
+      </span>
+    </div>
+  );
+};
+
+export default LogoHexa;
+

package/src/components/Atoms/LogoHexa/LogoHexa.stories.jsx

@@ -0,0 +1,36 @@
+import { LogoHexa } from './LogoHexa';
+
+export default {
+  title: 'Atoms/LogoHexa',
+  component: LogoHexa,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <LogoHexa width={36} height={40} />
+  ),
+};
+
+export const TamañoGrande = {
+  render: () => (
+    <LogoHexa width={36} height={40} />
+  ),
+};
+
+export const TamañoPequeño = {
+  render: () => (
+    <LogoHexa width={36} height={40} />
+  ),
+};
+
+export const ConColoresPersonalizados = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <LogoHexa width={36} height={40} backgroundColor="#2D5C63" textColor="#ffffff" />
+      <LogoHexa width={36} height={40} backgroundColor="#56B676" textColor="#ffffff" />
+      <LogoHexa width={36} height={40} backgroundColor="#6D3856" textColor="#ffffff" />
+    </div>
+  ),
+};
+

package/src/components/Atoms/Typography/Typography.jsx

@@ -50,6 +50,10 @@ export const Typography = ({
     body2: 'text-body-md', // Alias de body-md
     caption: 'text-body-sm color-gray-600', // Body small con color gris por defecto
     overline: 'text-body-sm uppercase tracking-wide',
+    'mono-lg': 'text-mono-lg',
+    'mono-md': 'text-mono-md',
+    'mono-sm': 'text-mono-sm',
+    mono: 'text-mono-md', // Alias por defecto de mono-md
   };
 
   const Component = component || (variant.startsWith('h') ? variant : 'p');

package/src/components/Atoms/Typography/Typography.stories.jsx

@@ -7,7 +7,7 @@ export default {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body-lg', 'body-md', 'body-sm', 'body1', 'body2', 'caption', 'overline'],
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body-lg', 'body-md', 'body-sm', 'body1', 'body2', 'caption', 'overline', 'mono', 'mono-lg', 'mono-md', 'mono-sm'],
     },
     weight: {
       control: 'select',
@@ -113,6 +113,34 @@ export const Overline = {
   },
 };
 
+export const MonoLarge = {
+  args: {
+    variant: 'mono-lg',
+    children: 'Mono Large - IBM Plex Mono 16/24 Regular. Código: const x = 42;',
+  },
+};
+
+export const MonoMedium = {
+  args: {
+    variant: 'mono-md',
+    children: 'Mono Medium - IBM Plex Mono 14/21 Regular. Código: function test() {}',
+  },
+};
+
+export const MonoSmall = {
+  args: {
+    variant: 'mono-sm',
+    children: 'Mono Small - IBM Plex Mono 12/18 Regular. Código: let y = 10;',
+  },
+};
+
+export const Mono = {
+  args: {
+    variant: 'mono',
+    children: 'Mono (default, alias de mono-md) - IBM Plex Mono 14/21 Regular',
+  },
+};
+
 // Ejemplos con clases genéricas directamente (sin componente)
 export const ClasesGenericasHeadings = () => (
   <div className="space-y-4">
@@ -133,6 +161,14 @@ export const ClasesGenericasBody = () => (
   </div>
 );
 
+export const ClasesGenericasMono = () => (
+  <div className="space-y-4">
+    <p className="text-mono-lg">Clase text-mono-lg - IBM Plex Mono 16/24 Regular</p>
+    <p className="text-mono-md">Clase text-mono-md - IBM Plex Mono 14/21 Regular</p>
+    <p className="text-mono-sm">Clase text-mono-sm - IBM Plex Mono 12/18 Regular</p>
+  </div>
+);
+
 export const ClasesDeColores = () => (
   <div className="space-y-3 bg-gray-50 p-6 rounded-lg">
     <p className="text-body-lg color-black">Color black - color-black</p>

package/src/components/DataDisplay/Card/Card.jsx

@@ -1,31 +1,124 @@
+import { CardSkeleton } from './CardSkeleton';
+import { CardVacia } from './CardVacia';
+import { CardError } from './CardError';
+import { CardTituloCorto } from './CardTituloCorto';
+import { CardTituloLargo } from './CardTituloLargo';
+import { CardTituloCortoMasEstado } from './CardTituloCortoMasEstado';
+import { CardTituloLargoMasEstado } from './CardTituloLargoMasEstado';
+
+/**
+ * Componente Card inteligente que maneja automáticamente los estados:
+ * - loading: muestra CardSkeleton
+ * - error: muestra CardError
+ * - sin datos: muestra CardVacia
+ * - con datos: muestra la variante especificada
+ * 
+ * @param {boolean} loading - Si está cargando, muestra el skeleton
+ * @param {string|null} error - Si hay error, muestra CardError con este mensaje
+ * @param {boolean} hasData - Si tiene datos para mostrar
+ * @param {any} data - Los datos a mostrar (opcional, se usa para detectar si hay datos)
+ * @param {string} variant - Variante de card: 'corto' | 'largo' | 'cortoMasEstado' | 'largoMasEstado'
+ * @param {string} title - Título de la card
+ * @param {string} status - Badge de estado (solo para variantes con estado)
+ * @param {string} errorMessage - Mensaje personalizado para el error
+ * @param {ReactNode} children - Contenido de la card
+ */
 export const Card = ({
-  title,
-  children,
-  footer,
+  loading = false,
+  error = null,
+  hasData = null,
+  data = null,
+  variant = 'corto',
+  title = 'Notificaciones',
+  status = null,
+  errorMessage = null,
+  children = null,
   className = '',
-  headerClassName = '',
-  bodyClassName = '',
-  footerClassName = '',
   ...props
 }) => {
-  return (
-    <div className={`bg-white rounded-lg shadow-md border border-gray-200 ${className}`} {...props}>
-      {title && (
-        <div className={`px-6 py-4 border-b border-gray-200 ${headerClassName}`}>
-          <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
-        </div>
-      )}
-      <div className={`px-6 py-4 ${bodyClassName}`}>
-        {children}
-      </div>
-      {footer && (
-        <div className={`px-6 py-4 border-t border-gray-200 bg-gray-50 ${footerClassName}`}>
-          {footer}
-        </div>
-      )}
-    </div>
-  );
+  // 1. Prioridad: Si está cargando, muestra skeleton
+  if (loading) {
+    return <CardSkeleton className={className} {...props} />;
+  }
+
+  // 2. Prioridad: Si hay error, muestra error
+  if (error) {
+    return (
+      <CardError 
+        title={title}
+        errorMessage={errorMessage || error}
+        className={className}
+        {...props}
+      />
+    );
+  }
+
+  // 3. Determinar si tiene datos
+  // Si hasData es explícitamente false, o si data es null/undefined/empty
+  const hasDataToShow = hasData !== null 
+    ? hasData 
+    : data !== null && data !== undefined && data !== '';
+
+  // 4. Si no tiene datos, muestra vacía
+  if (!hasDataToShow) {
+    return (
+      <CardVacia 
+        title={title}
+        className={className}
+        {...props}
+      />
+    );
+  }
+
+  // 5. Si tiene datos, muestra la variante correspondiente
+  switch (variant) {
+    case 'largo':
+      return (
+        <CardTituloLargo 
+          title={title}
+          className={className}
+          {...props}
+        >
+          {children}
+        </CardTituloLargo>
+      );
+    
+    case 'cortoMasEstado':
+      return (
+        <CardTituloCortoMasEstado 
+          title={title}
+          status={status}
+          className={className}
+          {...props}
+        >
+          {children}
+        </CardTituloCortoMasEstado>
+      );
+    
+    case 'largoMasEstado':
+      return (
+        <CardTituloLargoMasEstado 
+          title={title}
+          status={status}
+          className={className}
+          {...props}
+        >
+          {children}
+        </CardTituloLargoMasEstado>
+      );
+    
+    case 'corto':
+    default:
+      return (
+        <CardTituloCorto 
+          title={title}
+          className={className}
+          {...props}
+        >
+          {children}
+        </CardTituloCorto>
+      );
+  }
 };
 
 export default Card;
-

package/src/components/DataDisplay/Card/Card.stories.jsx

@@ -1,50 +1,134 @@
 import { Card } from './Card';
-import { Button } from '../../Atoms/Button/Button';
+import { CardTituloCorto } from './CardTituloCorto';
+import { CardTituloLargo } from './CardTituloLargo';
+import { CardTituloCortoMasEstado } from './CardTituloCortoMasEstado';
+import { CardTituloLargoMasEstado } from './CardTituloLargoMasEstado';
+import { CardSkeleton } from './CardSkeleton';
+import { CardVacia } from './CardVacia';
+import { CardError } from './CardError';
 
 export default {
   title: 'DataDisplay/Card',
-  component: Card,
   tags: ['autodocs'],
 };
 
-export const Default = {
-  args: {
-    title: 'Card Title',
-    children: 'This is the card content. It can contain any React elements.',
-  },
+// Ejemplos del componente Card inteligente
+export const CardInteligenteCargando = {
+  render: () => (
+    <div className="p-4">
+      <Card loading={true} title="Notificaciones" />
+    </div>
+  ),
 };
 
-export const WithFooter = {
-  args: {
-    title: 'Card with Footer',
-    children: 'This card has a footer section.',
-    footer: (
-      <div className="flex justify-end">
-        <Button size="small">Action</Button>
-      </div>
-    ),
-  },
+export const CardInteligenteConDatos = {
+  render: () => (
+    <div className="p-4">
+      <Card 
+        loading={false}
+        hasData={true}
+        variant="corto"
+        title="Notificaciones"
+      >
+        <p>Contenido de la card con datos</p>
+      </Card>
+    </div>
+  ),
 };
 
-export const WithoutTitle = {
-  args: {
-    children: 'This card does not have a title.',
-  },
+export const CardInteligenteSinDatos = {
+  render: () => (
+    <div className="p-4">
+      <Card 
+        loading={false}
+        hasData={false}
+        title="Notificaciones"
+      />
+    </div>
+  ),
 };
 
-export const ComplexContent = {
-  args: {
-    title: 'Complex Card',
-    children: (
-      <div>
-        <p className="mb-4">This card contains more complex content.</p>
-        <ul className="list-disc list-inside space-y-2">
-          <li>Item 1</li>
-          <li>Item 2</li>
-          <li>Item 3</li>
-        </ul>
-      </div>
-    ),
-  },
+export const CardInteligenteConError = {
+  render: () => (
+    <div className="p-4">
+      <Card 
+        loading={false}
+        error="Error al cargar los datos"
+        title="Notificaciones"
+      />
+    </div>
+  ),
 };
 
+export const CardInteligenteConEstado = {
+  render: () => (
+    <div className="p-4">
+      <Card 
+        loading={false}
+        hasData={true}
+        variant="cortoMasEstado"
+        title="Notificaciones"
+        status="3 nuevas"
+      >
+        <p>Contenido de la card</p>
+      </Card>
+    </div>
+  ),
+};
+
+// Componentes individuales (para casos específicos)
+export const TituloCorto = {
+  render: () => (
+    <div className="p-4">
+      <CardTituloCorto />
+    </div>
+  ),
+};
+
+export const TituloLargo = {
+  render: () => (
+    <div className="p-4">
+      <CardTituloLargo />
+    </div>
+  ),
+};
+
+export const TituloCortoMasEstado = {
+  render: () => (
+    <div className="p-4">
+      <CardTituloCortoMasEstado />
+    </div>
+  ),
+};
+
+export const TituloLargoMasEstado = {
+  render: () => (
+    <div className="p-4">
+      <CardTituloLargoMasEstado />
+    </div>
+  ),
+};
+
+export const Skeleton = {
+  render: () => (
+    <div className="p-4">
+      <CardSkeleton />
+    </div>
+  ),
+};
+
+export const Vacia = {
+  render: () => (
+    <div className="p-4">
+      <CardVacia />
+    </div>
+  ),
+};
+
+export const Error = {
+  render: () => (
+    <div className="p-4">
+      <CardError />
+    </div>
+  ),
+};

package/src/components/DataDisplay/Card/CardError.jsx

@@ -0,0 +1,142 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const CardError = ({
+  title = "Notificaciones",
+  errorMessage = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta elementum neque, vel vehicula nulla pharetra id.",
+  className = '',
+  ...props
+}) => {
+  return (
+    <div 
+      className={`bg-white ${className}`} 
+      style={{ 
+        width: '379.5px',
+        height: '476px',
+        borderRadius: '14px',
+        border: '1px solid #0000001A',
+        boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
+        opacity: 1
+      }}
+      {...props}
+    >
+      <div 
+        style={{
+          width: '379.5px',
+          height: '60px',
+          paddingTop: '24px',
+          paddingRight: '24px',
+          paddingBottom: '6px',
+          paddingLeft: '24px',
+          opacity: 1
+        }}
+        className="flex items-start justify-between"
+      >
+        <div
+          style={{
+            width: '331.5px',
+            height: '30px',
+            opacity: 1
+          }}
+        >
+          <Typography
+            variant="body-md"
+            className="color-gray-700"
+          >
+            {title}
+          </Typography>
+        </div>
+      </div>
+      <div 
+        className="flex flex-col items-center justify-center"
+        style={{
+          paddingTop: '80px',
+          paddingBottom: '24px',
+          minHeight: 'calc(476px - 60px)',
+          display: 'flex',
+          justifyContent: 'flex-start'
+        }}
+      >
+        <div 
+          className="mb-4 flex items-center justify-center border-2 rounded-full"
+          style={{ 
+            borderColor: '#374151',
+            width: '48px',
+            height: '48px',
+            opacity: 1
+          }}
+        >
+          <Icon
+            name="XMarkIcon"
+            variant="24-outline"
+            size={32}
+            className="color-gray-900"
+          />
+        </div>
+        <div
+          style={{
+            width: '331.5px',
+            height: '48px',
+            opacity: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: '16px'
+          }}
+        >
+          <Typography
+            variant="h3"
+            style={{ 
+              fontFamily: 'IBM Plex Sans',
+              fontWeight: 600,
+              fontStyle: 'normal',
+              fontSize: '32px',
+              lineHeight: '48px',
+              letterSpacing: '0px',
+              textAlign: 'center',
+              color: '#2D5C63'
+            }}
+          >
+            ERROR
+          </Typography>
+        </div>
+        <div 
+          className="border flex items-center justify-center"
+          style={{
+            width: '331.5px',
+            height: '128px',
+            borderRadius: '10px',
+            borderWidth: '1px',
+            borderColor: '#EF4444',
+            backgroundColor: '#FEE2E2',
+            paddingTop: '16px',
+            paddingRight: '16px',
+            paddingBottom: '8px',
+            paddingLeft: '16px',
+            opacity: 1
+          }}
+        >
+          <div
+            style={{
+              width: '298px',
+              height: '96px',
+              opacity: 1
+            }}
+          >
+            <Typography
+              variant="mono-md"
+              style={{ 
+                color: '#991B1B'
+              }}
+            >
+              {errorMessage}
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardError;
+