Sanitas UI - Design System

Sistema de diseño compartido para los microfrontends de Sanitas.

Instalación

pnpm add sanitas-ui-design-system

Uso

import { Button } from 'sanitas-ui-design-system/ui'
import 'sanitas-ui-design-system/styles'

export const App = () => {
  return (
    <Button variant="primary" size="large">
      Ingresar
    </Button>
  )
}

Componentes Disponibles

• Button - Botón con soporte para navegación SPA y enlaces externos

Principios de Clean Code

Este proyecto sigue estrictamente los principios de Clean Code:

1. Nombres Descriptivos

• Variables y funciones con nombres que revelan intención
• Constantes en SCREAMING_SNAKE_CASE
• Tipos exportados con nombres claros

// ✅ Bien
const DEFAULT_VARIANT = 'primary'
export type ButtonVariant = 'primary' | 'secondary' | ...

// ❌ Mal
const d = 'primary'
type BV = 'primary' | 'secondary' | ...

2. Funciones Pequeñas

• Una función = una responsabilidad
• Funciones especializadas en lugar de condicionales complejos

// ✅ Bien
const isRouterLinkButton = (props: ButtonProps): props is ButtonAsRouterLink => {
  return 'to' in props && Boolean(props.to)
}

// ❌ Mal
if ('to' in props && props.to && RouterLink) { ... }

3. DRY (Don't Repeat Yourself)

• Constantes extraídas y reutilizables
• Maps para evitar if-else repetitivos

// ✅ Bien
const VARIANT_CLASS_MAP: Record<ButtonVariant, string> = {
  primary: 'isPrimary',
  secondary: 'isSecondary',
  // ...
}

// ❌ Mal
if (variant === 'primary') return 'isPrimary'
if (variant === 'secondary') return 'isSecondary'
// ...

4. Código Auto-documentado

• Eliminar comentarios redundantes
• El código debe explicarse por sí mismo

// ✅ Bien
const buildClassNames = (variant, size, fullWidth, loading, className) => { ... }

// ❌ Mal
// Construye los nombres de clase
const getClasses = (v, s, fw, l, cn) => { ... }

5. Type Safety

• TypeScript con tipos estrictos
• Type guards para discriminated unions
• Exports de tipos reutilizables

export type ButtonProps = ButtonAsButton | ButtonAsLink | ButtonAsRouterLink
export type ButtonVariant = 'primary' | 'secondary' | ...
export type ButtonSize = 'small' | 'medium' | 'large'

6. Single Responsibility

• Cada módulo tiene una sola razón para cambiar
• Separación de concerns (UI, tokens, theme)

7. Imports Explícitos

• Barrel exports para mejor tree-shaking
• Subpaths optimizados

// ✅ Recomendado
import { Button } from 'sanitas-ui-design-system/ui'
import { tokens } from 'sanitas-ui-design-system/tokens'

// ✅ También válido
import { Button, tokens } from 'sanitas-ui-design-system'

Exports Disponibles

El paquete ofrece diferentes puntos de entrada para optimizar tree-shaking:

// Componentes UI
import { Button } from 'sanitas-ui-design-system/ui'

// Design Tokens
import { tokens } from 'sanitas-ui-design-system/tokens'

// Iconos
import { icons } from 'sanitas-ui-design-system/icons'

// Estilos CSS
import 'sanitas-ui-design-system/styles'       // Estilos principales
import 'sanitas-ui-design-system/tokens.css'   // Solo tokens CSS
import 'sanitas-ui-design-system/theme.css'    // Solo tema CSS

// Export principal (incluye todo)
import { Button, tokens } from 'sanitas-ui-design-system'

Estructura del Proyecto

src/
├── ui/               # Componentes de UI
│   └── components/   # Componentes React
│       └── Button/
├── tokens/           # Design tokens
├── theme/            # Tema visual
├── icons/            # Iconos
└── styles/           # Estilos globales

Desarrollo

# Instalar dependencias
pnpm install

# Modo desarrollo
pnpm dev

# Build
pnpm build

# Storybook
pnpm storybook

Contribuir

Al agregar nuevos componentes:

1. Seguir los principios de Clean Code
2. Crear tests unitarios
3. Documentar en Storybook
4. Exportar tipos TypeScript
5. Usar tokens del design system