@conatel-sa/react-ui 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +74 -45
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,62 +1,91 @@
1
- # React Component Library
1
+ # @conatel-sa/react-ui
2
2
 
3
- A React component library built with **Vite** (library mode) and **TypeScript**, ready to publish as an npm package.
3
+ 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.
4
4
 
5
- > **All commands run inside Docker containers — nothing needs to be installed on the host machine.**
5
+ ## Instalacion
6
6
 
7
- ## Stack
7
+ ```bash
8
+ npm install @conatel-sa/react-ui
9
+ ```
8
10
 
9
- | Tool | Purpose |
10
- |---|---|
11
- | React 18 | UI framework |
12
- | TypeScript | Type safety |
13
- | Vite | Bundler (library mode) |
14
- | vite-plugin-dts | Auto-generate `.d.ts` declarations |
15
- | CSS Modules | Scoped styles |
16
- | Docker | Containerised development |
11
+ ## Uso rapido
17
12
 
18
- ## Getting Started
13
+ Importa el CSS de tokens **una sola vez** en el entry point de tu aplicacion:
19
14
 
20
- ```bash
21
- # Build the Docker image and install dependencies
22
- docker compose build
15
+ ```tsx
16
+ // main.tsx
17
+ import '@conatel-sa/react-ui/dist/index.css';
23
18
  ```
24
19
 
25
- ## Workflow
20
+ Luego usa los componentes envueltos en un `ThemeProvider`:
26
21
 
27
- | Task | Command |
28
- |---|---|
29
- | Install deps | `docker compose run --rm app npm install` |
30
- | Build library | `docker compose run --rm app npm run build` |
31
- | Start dev server | `docker compose up` |
32
- | Lint | `docker compose run --rm app npm run lint` |
22
+ ```tsx
23
+ import { ThemeProvider, Button, Card, Badge } from '@conatel-sa/react-ui';
33
24
 
34
- The dev server is available at **http://localhost:5173**.
25
+ function App() {
26
+ return (
27
+ <ThemeProvider theme="conatel"> {/* o "vivion" */}
28
+ <Card>
29
+ <Badge variant="success">Activo</Badge>
30
+ <Button variant="primary">Confirmar</Button>
31
+ </Card>
32
+ </ThemeProvider>
33
+ );
34
+ }
35
+ ```
35
36
 
36
- ## Project Structure
37
+ ## Theming
37
38
 
39
+ La libreria soporta dos temas de marca que se aplican a todos los componentes:
40
+
41
+ | Tema | Color primario | Uso |
42
+ |---|---|---|
43
+ | `conatel` | `#CC032E` | Productos Conatel |
44
+ | `vivion` | `#009CDE` | Productos Vivion |
45
+
46
+ ```tsx
47
+ <ThemeProvider theme="vivion">
48
+ <Button variant="primary">Vivion</Button>
49
+ </ThemeProvider>
38
50
  ```
39
- src/
40
- ├── components/
41
- │ └── Button/
42
- │ ├── Button.tsx # Component implementation
43
- │ ├── Button.module.css # Scoped styles
44
- │ └── index.ts # Public export
45
- ├── dev/
46
- │ └── main.tsx # Dev playground (not included in build)
47
- ├── index.ts # Library entry point
48
- └── vite-env.d.ts
49
- ```
50
51
 
51
- ## Adding a New Component
52
+ ## Componentes disponibles
53
+
54
+ ### Tipografia
55
+ `Heading` - `Text`
52
56
 
53
- 1. Create `src/components/MyComponent/MyComponent.tsx`
54
- 2. Add styles in `src/components/MyComponent/MyComponent.module.css`
55
- 3. Export from `src/components/MyComponent/index.ts`
56
- 4. Re-export from `src/index.ts`
57
+ ### Formularios
58
+ `Input` - `Textarea` - `Select` - `Checkbox` - `Toggle` - `FormField`
57
59
 
58
- ## Publishing
60
+ ### Feedback
61
+ `Badge` - `Alert` - `Spinner` - `Progress`
62
+
63
+ ### Contenedores
64
+ `Card` - `CardHeader` - `CardBody` - `CardFooter` - `Modal`
65
+
66
+ ### Navegacion
67
+ `Navbar` - `NavItem` - `Tabs` - `TabList` - `Tab` - `TabPanel`
68
+
69
+ ### Datos
70
+ `Table` - `TableHead` - `TableBody` - `TableRow` - `TableCell` - `TableHeaderCell`
71
+
72
+ ### Miscelanea
73
+ `Avatar` - `Divider` - `EmptyState` - `Button`
74
+
75
+ ## TypeScript
76
+
77
+ La libreria incluye tipos completos. No se requiere instalacion adicional de `@types`.
78
+
79
+ ## Desarrollo
80
+
81
+ Todos los comandos corren dentro de contenedores Docker.
82
+
83
+ | Tarea | Comando |
84
+ |---|---|
85
+ | Build de la libreria | `docker compose run --rm app npm run build` |
86
+ | Storybook | `docker compose up storybook` |
87
+ | Dev server | `docker compose up` |
88
+ | Lint | `docker compose run --rm app npm run lint` |
89
+ | Tests | `docker compose run --rm app npm test` |
59
90
 
60
- 1. Update `name`, `version`, and `author` in `package.json`
61
- 2. Build: `docker compose run --rm app npm run build`
62
- 3. Publish: `docker compose run --rm app npm publish`
91
+ El Storybook incluye un switcher interactivo para previsualizar todos los componentes en tema Conatel y Vivion.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@conatel-sa/react-ui",
3
- "version": "0.1.0",
4
- "description": "Conatel & Vivion React component library",
3
+ "version": "0.1.2",
4
+ "description": "Biblioteca de componentes React para productos Conatel y Vivion. Incluye más de 20 componentes UI (botones, formularios, navegación, tablas, modales y más) con soporte de theming para ambas marcas.",
5
5
  "main": "dist/index.umd.js",
6
6
  "module": "dist/index.mjs",
7
7
  "types": "dist/index.d.ts",
@@ -62,4 +62,4 @@
62
62
  "vite-plugin-dts": "^4.3.0",
63
63
  "vitest": "^2.1.8"
64
64
  }
65
- }
65
+ }