Bamboo Design System · React

Design System oficial del Tecnológico de Monterrey para React. Provee los componentes de UI de Bamboo listos para usarse en aplicaciones React, manteniendo consistencia visual con la versión Angular (tec-design-system-ng).

Instalación

npm install @ti-tecnologico-de-monterrey-oficial/tec-design-system-react

Este paquete declara react y react-dom como peer dependencies (^18.0.0 || ^19.0.0).

Uso

import { Button } from '@ti-tecnologico-de-monterrey-oficial/tec-design-system-react';
import '@ti-tecnologico-de-monterrey-oficial/tec-design-system-react/styles.css';

function App() {
  return (
    <Button variant="primary" size="md" onClick={() => console.log('click')}>
      Continuar
    </Button>
  );
}

El CSS se distribuye por separado (/styles.css) y solo necesitas importarlo una vez en la raíz de tu aplicación.

Componentes disponibles

| Componente | Descripción | | ---------- | ------------------------------------------------------------------------------------ | | Button | Botón base con variantes primary, secondary, ghost y tamaños sm, md, lg. |

Scripts de desarrollo

| Script | Descripción | | ---------------------- | ----------------------------------------- | | npm run dev | Compila en modo watch con tsup. | | npm run build | Genera dist/ (ESM + CJS + tipos + CSS). | | npm run lint | Corre ESLint. | | npm run format | Formatea el código con Prettier. | | npm run format:check | Verifica el formato sin escribir cambios. | | npm run typecheck | Verifica tipos con tsc --noEmit. | | npm test | Corre las pruebas con Vitest. | | npm run test:watch | Corre las pruebas en modo watch. |

Estructura del proyecto

src/
  components/
    Button/
      Button.tsx
      Button.css
      Button.test.tsx
      index.ts
  utils/
    cn.ts
  index.ts        # exporta la API pública del paquete
  styles.css       # agrega los estilos de todos los componentes

Para agregar un componente nuevo: crea una carpeta en src/components/<Nombre> con su .tsx, .css y index.ts, exporta el componente desde src/index.ts y agrega un @import de su CSS en src/styles.css.

Recursos

• Figma: Bamboo Design System
• Versión Angular: tec-design-system-ng

Licencia

MIT © TI del Tecnológico de Monterrey