Sanitas UI - Design System

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

Instalación

bash

pnpm add sanitas-ui-design-system

Uso

tsx

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

import 'sanitas-ui-design-system/styles'



export const App = () => {

  return (

    

  )

}





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:



$3

- Variables y funciones con nombres que revelan intención

- Constantes en SCREAMING_SNAKE_CASE

- Tipos exportados con nombres claros

tsx

// ✅ Bien

const DEFAULT_VARIANT = 'primary'

export type ButtonVariant = 'primary' | 'secondary' | ...



// ❌ Mal

const d = 'primary'

type BV = 'primary' | 'secondary' | ...





$3

- Una función = una responsabilidad

- Funciones especializadas en lugar de condicionales complejos

tsx

// ✅ Bien

const isRouterLinkButton = (props: ButtonProps): props is ButtonAsRouterLink => {

  return 'to' in props && Boolean(props.to)

}



// ❌ Mal

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





$3

- Constantes extraídas y reutilizables

- Maps para evitar if-else repetitivos

tsx

// ✅ Bien

const VARIANT_CLASS_MAP: Record = {

  primary: 'isPrimary',

  secondary: 'isSecondary',

  // ...

}



// ❌ Mal

if (variant === 'primary') return 'isPrimary'

if (variant === 'secondary') return 'isSecondary'

// ...





$3

- Eliminar comentarios redundantes

- El código debe explicarse por sí mismo

tsx

// ✅ Bien

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



// ❌ Mal

// Construye los nombres de clase

const getClasses = (v, s, fw, l, cn) => { ... }





$3

- TypeScript con tipos estrictos

- Type guards para discriminated unions

- Exports de tipos reutilizables

tsx

export type ButtonProps = ButtonAsButton | ButtonAsLink | ButtonAsRouterLink

export type ButtonVariant = 'primary' | 'secondary' | ...

export type ButtonSize = 'small' | 'medium' | 'large'





$3

- Cada módulo tiene una sola razón para cambiar

- Separación de concerns (UI, tokens, theme)



$3

- Barrel exports para mejor tree-shaking

- Subpaths optimizados

tsx

// ✅ 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:

tsx

// 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

bash

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

Sanitas UI - Design System

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

Instalación

bash

pnpm add sanitas-ui-design-system

Uso

tsx

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

import 'sanitas-ui-design-system/styles'



export const App = () => {

  return (

    

  )

}





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:



$3

- Variables y funciones con nombres que revelan intención

- Constantes en SCREAMING_SNAKE_CASE

- Tipos exportados con nombres claros

tsx

// ✅ Bien

const DEFAULT_VARIANT = 'primary'

export type ButtonVariant = 'primary' | 'secondary' | ...



// ❌ Mal

const d = 'primary'

type BV = 'primary' | 'secondary' | ...





$3

- Una función = una responsabilidad

- Funciones especializadas en lugar de condicionales complejos

tsx

// ✅ Bien

const isRouterLinkButton = (props: ButtonProps): props is ButtonAsRouterLink => {

  return 'to' in props && Boolean(props.to)

}



// ❌ Mal

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





$3

- Constantes extraídas y reutilizables

- Maps para evitar if-else repetitivos

tsx

// ✅ Bien

const VARIANT_CLASS_MAP: Record = {

  primary: 'isPrimary',

  secondary: 'isSecondary',

  // ...

}



// ❌ Mal

if (variant === 'primary') return 'isPrimary'

if (variant === 'secondary') return 'isSecondary'

// ...





$3

- Eliminar comentarios redundantes

- El código debe explicarse por sí mismo

tsx

// ✅ Bien

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



// ❌ Mal

// Construye los nombres de clase

const getClasses = (v, s, fw, l, cn) => { ... }





$3

- TypeScript con tipos estrictos

- Type guards para discriminated unions

- Exports de tipos reutilizables

tsx

export type ButtonProps = ButtonAsButton | ButtonAsLink | ButtonAsRouterLink

export type ButtonVariant = 'primary' | 'secondary' | ...

export type ButtonSize = 'small' | 'medium' | 'large'





$3

- Cada módulo tiene una sola razón para cambiar

- Separación de concerns (UI, tokens, theme)



$3

- Barrel exports para mejor tree-shaking

- Subpaths optimizados

tsx

// ✅ 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:

tsx

// 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

bash

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