@conatel-sa/react-ui 0.1.1 → 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.
- package/README.md +74 -45
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,62 +1,91 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @conatel-sa/react-ui
|
|
2
2
|
|
|
3
|
-
|
|
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
|
-
|
|
5
|
+
## Instalacion
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```bash
|
|
8
|
+
npm install @conatel-sa/react-ui
|
|
9
|
+
```
|
|
8
10
|
|
|
9
|
-
|
|
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
|
-
|
|
13
|
+
Importa el CSS de tokens **una sola vez** en el entry point de tu aplicacion:
|
|
19
14
|
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
|
|
15
|
+
```tsx
|
|
16
|
+
// main.tsx
|
|
17
|
+
import '@conatel-sa/react-ui/dist/index.css';
|
|
23
18
|
```
|
|
24
19
|
|
|
25
|
-
|
|
20
|
+
Luego usa los componentes envueltos en un `ThemeProvider`:
|
|
26
21
|
|
|
27
|
-
|
|
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
|
-
|
|
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
|
-
##
|
|
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
|
-
##
|
|
52
|
+
## Componentes disponibles
|
|
53
|
+
|
|
54
|
+
### Tipografia
|
|
55
|
+
`Heading` - `Text`
|
|
52
56
|
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@conatel-sa/react-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
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",
|