@prolibu-suite/cobalt-react 0.1.0 → 0.1.1
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 +78 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# @prolibu-suite/cobalt-react
|
|
2
|
+
|
|
3
|
+
Wrappers React (17 / 18 / 19) para los Web Components `co-*` del **Cobalt Design System**. Tipado completo, eventos como props React, mejor DX que el custom element crudo.
|
|
4
|
+
|
|
5
|
+
> Recomendado si trabajás en React. Si preferís el WC directo, mirá [`@prolibu-suite/cobalt-core`](https://www.npmjs.com/package/@prolibu-suite/cobalt-core).
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @prolibu-suite/cobalt-react @prolibu-suite/cobalt-tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
/* CSS global */
|
|
17
|
+
@import '@prolibu-suite/cobalt-tokens/css';
|
|
18
|
+
@import '@prolibu-suite/cobalt-tokens/css/dark';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
// main.jsx — registra los custom elements
|
|
23
|
+
import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
|
|
24
|
+
defineCustomElements(window);
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Uso
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import { useState } from 'react';
|
|
31
|
+
import { CoButton, CoInput, CoSelect } from '@prolibu-suite/cobalt-react';
|
|
32
|
+
|
|
33
|
+
export function MyForm() {
|
|
34
|
+
const [email, setEmail] = useState('');
|
|
35
|
+
const [country, setCountry] = useState('');
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<>
|
|
39
|
+
<CoInput
|
|
40
|
+
label="Email"
|
|
41
|
+
iconLeft="envelope"
|
|
42
|
+
value={email}
|
|
43
|
+
onCoInput={(e) => setEmail(e.detail)}
|
|
44
|
+
/>
|
|
45
|
+
<CoSelect
|
|
46
|
+
label="País"
|
|
47
|
+
value={country}
|
|
48
|
+
options={[
|
|
49
|
+
{ value: 'co', label: 'Colombia' },
|
|
50
|
+
{ value: 'mx', label: 'México' },
|
|
51
|
+
]}
|
|
52
|
+
onCoChange={(e) => setCountry(e.detail)}
|
|
53
|
+
/>
|
|
54
|
+
<CoButton label="Guardar" variant="primary" onCoClick={save} />
|
|
55
|
+
</>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Eventos custom
|
|
61
|
+
|
|
62
|
+
Los Web Components emiten eventos con prefijo `co`. En React, los consumís como handlers `onCo*`:
|
|
63
|
+
|
|
64
|
+
```jsx
|
|
65
|
+
<CoInput
|
|
66
|
+
onCoInput={(e) => /* e.detail = nuevo valor */}
|
|
67
|
+
onCoChange={(e) => /* dispara en blur */}
|
|
68
|
+
onCoBlur={(e) => /* foco perdido */}
|
|
69
|
+
/>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Documentación
|
|
73
|
+
|
|
74
|
+
→ [cobalt-docs](https://dev10.prolibu.com/ui/static/cobalt-docs/) — referencia completa de componentes y theming.
|
|
75
|
+
|
|
76
|
+
## License
|
|
77
|
+
|
|
78
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prolibu-suite/cobalt-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Cobalt Design System — React component wrappers",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@stencil/react-output-target": "^1.5.0",
|
|
32
|
-
"@prolibu-suite/cobalt-core": "0.1.
|
|
32
|
+
"@prolibu-suite/cobalt-core": "0.1.1"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/react": "^19.2.14",
|