@conatel-sa/react-ui

Biblioteca de componentes React para productos Conatel y Vivion. Mas de 20 componentes UI listos para usar, con soporte de theming por marca mediante CSS custom properties.

Instalacion

npm install @conatel-sa/react-ui

Uso rapido

Importa el CSS de tokens una sola vez en el entry point de tu aplicacion:

// main.tsx
import '@conatel-sa/react-ui/dist/index.css';

Luego usa los componentes envueltos en un ThemeProvider:

import { ThemeProvider, Button, Card, Badge } from '@conatel-sa/react-ui';

function App() {
  return (
    <ThemeProvider theme="conatel"> {/* o "vivion" */}
      <Card>
        <Badge variant="success">Activo</Badge>
        <Button variant="primary">Confirmar</Button>
      </Card>
    </ThemeProvider>
  );
}

Theming

La libreria soporta dos temas de marca que se aplican a todos los componentes:

| Tema | Color primario | Uso | |---|---|---| | conatel | #CC032E | Productos Conatel | | vivion | #009CDE | Productos Vivion |

<ThemeProvider theme="vivion">
  <Button variant="primary">Vivion</Button>
</ThemeProvider>

Componentes disponibles

Tipografia

Heading - Text

Formularios

Input - Textarea - Select - Checkbox - Toggle - FormField

Feedback

Badge - Alert - Spinner - Progress

Contenedores

Card - CardHeader - CardBody - CardFooter - Modal

Navegacion

Navbar - NavItem - Tabs - TabList - Tab - TabPanel

Datos

Table - TableHead - TableBody - TableRow - TableCell - TableHeaderCell

Miscelanea

Avatar - Divider - EmptyState - Button

TypeScript

La libreria incluye tipos completos. No se requiere instalacion adicional de @types.

Desarrollo

Todos los comandos corren dentro de contenedores Docker.

| Tarea | Comando | |---|---| | Build de la libreria | docker compose run --rm app npm run build | | Storybook | docker compose up storybook | | Dev server | docker compose up | | Lint | docker compose run --rm app npm run lint | | Tests | docker compose run --rm app npm test |

El Storybook incluye un switcher interactivo para previsualizar todos los componentes en tema Conatel y Vivion.