legal-talent-design-system

Sistema de diseño encapsulado para aplicaciones Legal Talent.

📦 Instalación

npm install legal-talent-design-system

⚠️ Configuración de Tailwind CSS

Si algunos estilos no se aplican correctamente (como pl-1.5, bg-error/10, etc.), consulta las instrucciones detalladas en TAILWIND_SETUP.md.

Solución rápida: Usa el preset de Tailwind incluido en la librería:

// tailwind.config.js
const { tailwindPreset } = require('legal-talent-design-system');

module.exports = {
  presets: [tailwindPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // ¡IMPORTANTE! Incluir archivos de la librería
    './node_modules/legal-talent-design-system/**/*.{js,jsx,ts,tsx}',
  ],
}

🎬 Animaciones

El sistema incluye un conjunto completo de animaciones que mejoran la experiencia del usuario:

Documentación de Animaciones

• ANIMATIONS.md: Documentación completa de todas las animaciones disponibles (incluye tokens de motion: --duration-*, --ease-*, y mapeo a clases Tailwind)
• ANIMATION_EXAMPLES.md: Ejemplos prácticos de uso en componentes

Animaciones Incluidas

• Animaciones CSS personalizadas: fade-in, slide-in, scale-in, accordion
• Componente AnimatedTransition: Wrapper React para animaciones comunes
• Animaciones automáticas: Integradas en componentes Radix UI
• Respeto por accesibilidad: Soporte para prefers-reduced-motion

Uso Básico

import { AnimatedTransition } from 'legal-talent-design-system';

function MyComponent() {
  return (
    <AnimatedTransition transitionType="slide" delay={200}>
      <div>Contenido que aparece con animación</div>
    </AnimatedTransition>
  );
}

Storybook de Animaciones

Puedes ver todas las animaciones en acción en Storybook:

npm run storybook

Navega a UI/AnimatedTransition para ver demos interactivas de todas las opciones de animación.

🧪 Desarrollo y Pruebas Locales

Para desarrollar y probar los componentes sin tener que publicar el paquete, usa Storybook:

Ejecutar Storybook

# Ejecutar Storybook en modo desarrollo
npm run storybook

Esto abrirá Storybook en http://localhost:6006 donde podrás:

• Ver todos los componentes con sus diferentes variantes
• Probar interacciones en tiempo real
• Documentar componentes automáticamente con addons de docs
• Visualizar diferentes estados de los componentes
• Alternar entre modo claro y oscuro usando backgrounds

Construir Storybook para Producción

# Construir versión estática de Storybook
npm run build-storybook

Crear Nuevas Stories

Para agregar stories a nuevos componentes, crea un archivo .stories.tsx junto al componente:

// src/components/ui/component-name.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { ComponentName } from './component-name';

const meta: Meta<typeof ComponentName> = {
  title: 'UI/ComponentName',
  component: ComponentName,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    // Props por defecto
  },
};

🚀 Publicación de Nuevas Versiones

Prerrequisitos

1. Autenticación con npm público

   • Asegúrate de tener una cuenta en npmjs.com
   • Configura tu autenticación:

   npm login

2. Permisos de repositorio

   • Tener permisos de escritura en el repositorio legal-talent/design-system
   • Acceso para crear releases y tags

Proceso de Publicación

1. Preparación del Código

# Asegúrate de estar en la rama main y actualizada
git checkout main
git pull origin main

# Verifica que no hay cambios pendientes
git status

⚠️ IMPORTANTE: Si git status muestra archivos modificados, debes resolverlos antes de continuar:

# Opción A: Commitear los cambios
git add .
git commit -m "feat: update components before version bump"

# Opción B: Descartar cambios (¡CUIDADO! Esto elimina cambios no guardados)
git restore .

# Opción C: Stash cambios para aplicarlos después
git stash
# Después de la publicación: git stash pop

2. Actualización de Versión

Utiliza npm version para actualizar automáticamente la versión en package.json:

# Para un patch (0.1.3 → 0.1.4)
npm version patch

# Para un minor (0.1.3 → 0.2.0)
npm version minor

# Para un major (0.1.3 → 1.0.0)
npm version major

3. Build y Validación

# Limpia builds anteriores y genera nuevos archivos
npm run clean
npm run build

# Verifica que el build se completó correctamente
ls -la dist/

4. Publicación

# Publica la nueva versión
npm publish

# El script prepublishOnly se ejecutará automáticamente:
# - npm run clean (limpia dist/)
# - npm run build (copia src/ a dist/)

5. Git Push y Release

# Pushea el tag creado por npm version
git push origin main --tags

# Crea un release en GitHub (opcional pero recomendado)
gh release create v$(node -p "require('./package.json').version") \
  --title "Release v$(node -p "require('./package.json').version")" \
  --generate-notes

Tipos de Versiones

• Patch (0.1.3 → 0.1.4): Correcciones de bugs, pequeños ajustes
• Minor (0.1.3 → 0.2.0): Nuevas características compatibles hacia atrás
• Major (0.1.3 → 1.0.0): Cambios que rompen compatibilidad

Verificación Post-Publicación

1. Verifica en npm público:

   npm view legal-talent-design-system

2. Prueba la instalación:

   # En otro proyecto
   npm install legal-talent-design-system@latest

3. Verifica en la web:

   • Visita: https://www.npmjs.com/package/legal-talent-design-system

Troubleshooting

Error "Git working directory not clean"

# Este error ocurre cuando hay cambios no comprometidos
# Solución: Commitear o descartar cambios pendientes

# Ver qué archivos están modificados
git status

# Commitear cambios
git add .
git commit -m "chore: prepare for version bump"

# O descartar cambios (¡CUIDADO!)
git restore .

Errores de Storybook

# Si Storybook presenta errores de versiones incompatibles
npx storybook doctor

# Si hay problemas con Tailwind CSS en Storybook, verifica que existan:
# - tailwind.config.js en el directorio raíz
# - postcss.config.js configurado correctamente
# - Estilos CSS importados en .storybook/preview.ts

Error de autenticación

# Re-configura la autenticación
npm logout --scope=@legal-talent --registry=https://npm.pkg.github.com
npm login --scope=@legal-talent --registry=https://npm.pkg.github.com

Error en el build

# Limpia y reinstala dependencias
rm -rf node_modules package-lock.json
npm install
npm run build

Versión ya publicada

# Si necesitas republicar, incrementa la versión
npm version patch
npm publish

Scripts Disponibles

• npm run build: Construye el paquete para distribución
• npm run dev: Modo desarrollo con watch
• npm run clean: Limpia archivos de build
• npm run prepublishOnly: Se ejecuta automáticamente antes de publish
• npm run storybook: Ejecuta Storybook en modo desarrollo
• npm run build-storybook: Construye Storybook para producción

Checklist de Publicación

• [ ] Código actualizado en main
• [ ] Stories de Storybook actualizadas para nuevos componentes
• [ ] Storybook funcionando correctamente (npm run storybook)
• [ ] Documentación actualizada
• [ ] Versión incrementada con npm version
• [ ] Build exitoso
• [ ] Publicación con npm publish
• [ ] Tags pusheados a GitHub
• [ ] Release creado (opcional)
• [ ] Verificación post-publicación

Para más información sobre el uso de los componentes, consulta la documentación de cada componente en src/components/ui/.