@bitux/review-layer-react 0.1.3 → 0.1.5
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 +116 -116
- package/dist/review-layer-react.js +915 -896
- package/dist/review-layer-react.js.map +1 -1
- package/dist/review-layer-react.umd.cjs +338 -338
- package/dist/review-layer-react.umd.cjs.map +1 -1
- package/package.json +59 -59
package/README.md
CHANGED
|
@@ -1,116 +1,116 @@
|
|
|
1
|
-
# @bitux/review-layer-react
|
|
2
|
-
|
|
3
|
-
SDK de React para dejar comentarios de revisión (QA, UX, PM) directamente sobre la UI en entornos de staging. Se conecta a un backend de API (review-layer-api).
|
|
4
|
-
|
|
5
|
-
## Instalación
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @bitux/review-layer-react
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Requiere React 18+ y la API backend desplegada.
|
|
12
|
-
|
|
13
|
-
## Uso
|
|
14
|
-
|
|
15
|
-
Envuelve tu aplicación con `ReviewProvider` y configura la URL de la API y el API key del proyecto:
|
|
16
|
-
|
|
17
|
-
```tsx
|
|
18
|
-
import { ReviewProvider } from "@bitux/review-layer-react";
|
|
19
|
-
|
|
20
|
-
<ReviewProvider
|
|
21
|
-
enabled={true}
|
|
22
|
-
apiUrl="http://localhost:8000/api"
|
|
23
|
-
apiKey="dev_test_key_123"
|
|
24
|
-
>
|
|
25
|
-
<App />
|
|
26
|
-
</ReviewProvider>
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
- **enabled**: activa o desactiva el SDK (p. ej. `import.meta.env.DEV` o `import.meta.env.VITE_REVIEW_ENABLED`).
|
|
30
|
-
- **apiUrl**: base URL de la API (opcional). Si no la pasas, en producción se usa la API en Render (`https://review-layer-api.onrender.com/api`). En desarrollo local puedes pasar `http://localhost:8000/api`.
|
|
31
|
-
- **apiKey**: API key del proyecto (generado en el backend por equipo/proyecto).
|
|
32
|
-
|
|
33
|
-
## Atajos
|
|
34
|
-
|
|
35
|
-
- **Shift + R**: activar/desactivar modo revisión.
|
|
36
|
-
|
|
37
|
-
En modo revisión:
|
|
38
|
-
|
|
39
|
-
- El cursor pasa a cruz.
|
|
40
|
-
- Al pasar el ratón sobre un elemento se resalta con un borde.
|
|
41
|
-
- Al hacer clic en un elemento se abre el modal para escribir un comentario y asignar revisor.
|
|
42
|
-
- Los comentarios existentes se muestran como pins en la página; al hacer clic en un pin se ve el texto.
|
|
43
|
-
|
|
44
|
-
## Variables de entorno (ejemplo)
|
|
45
|
-
|
|
46
|
-
En desarrollo local puedes apuntar a tu API:
|
|
47
|
-
|
|
48
|
-
```env
|
|
49
|
-
VITE_REVIEW_API_URL=http://localhost:8000/api
|
|
50
|
-
VITE_REVIEW_API_KEY=rl_xxx
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
<ReviewProvider
|
|
55
|
-
enabled={true}
|
|
56
|
-
apiUrl={import.meta.env.VITE_REVIEW_API_URL}
|
|
57
|
-
apiKey={import.meta.env.VITE_REVIEW_API_KEY ?? ""}
|
|
58
|
-
>
|
|
59
|
-
<App />
|
|
60
|
-
</ReviewProvider>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
Si no pasas `apiUrl` (o la dejas `undefined`), el SDK usa por defecto la API en Render (`https://review-layer-api.onrender.com/api`), así que en producción no hace falta configurar nada más.
|
|
64
|
-
|
|
65
|
-
## Navegación SPA (React Router, etc.)
|
|
66
|
-
|
|
67
|
-
Si usas rutas del lado cliente, al cambiar de ruta conviene volver a cargar los comentarios de la página actual. Usa el hook `useReview` y llama a `loadComments()` cuando cambie la ruta:
|
|
68
|
-
|
|
69
|
-
```tsx
|
|
70
|
-
import { useReview } from "@bitux/review-layer-react";
|
|
71
|
-
import { useLocation } from "react-router-dom";
|
|
72
|
-
|
|
73
|
-
function AppWithReview() {
|
|
74
|
-
const { loadComments } = useReview();
|
|
75
|
-
const location = useLocation();
|
|
76
|
-
|
|
77
|
-
useEffect(() => {
|
|
78
|
-
loadComments();
|
|
79
|
-
}, [location.pathname, loadComments]);
|
|
80
|
-
|
|
81
|
-
return <Outlet />;
|
|
82
|
-
}
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
## Probar antes de publicar
|
|
86
|
-
|
|
87
|
-
### Tests unitarios
|
|
88
|
-
|
|
89
|
-
```bash
|
|
90
|
-
npm run test
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
Se ejecutan pruebas de `selector` y de la capa `api` (con `fetch` mockeado).
|
|
94
|
-
|
|
95
|
-
### Demo local contra la API
|
|
96
|
-
|
|
97
|
-
1. Arranca la API (en el repo `review-layer-api`):
|
|
98
|
-
|
|
99
|
-
```bash
|
|
100
|
-
php artisan serve
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
2. En este repo, levanta la demo (usa el código fuente del SDK, sin publicar):
|
|
104
|
-
|
|
105
|
-
```bash
|
|
106
|
-
npm run demo
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
Se abre http://localhost:5174 con una miniapp envuelta en `ReviewProvider`. Por defecto usa `apiUrl=http://127.0.0.1:8000/api` y `apiKey=dev_test_key_123`. Puedes sobreescribirlos con un `.env` en la raíz o en `demo/`:
|
|
110
|
-
|
|
111
|
-
```env
|
|
112
|
-
VITE_REVIEW_API_URL=http://127.0.0.1:8000/api
|
|
113
|
-
VITE_REVIEW_API_KEY=dev_test_key_123
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
3. En la demo: **Shift + R** para activar modo revisión, haz clic en un elemento y envía un comentario. Comprueba que los pins aparecen y que en la API se crean los comentarios.
|
|
1
|
+
# @bitux/review-layer-react
|
|
2
|
+
|
|
3
|
+
SDK de React para dejar comentarios de revisión (QA, UX, PM) directamente sobre la UI en entornos de staging. Se conecta a un backend de API (review-layer-api).
|
|
4
|
+
|
|
5
|
+
## Instalación
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @bitux/review-layer-react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Requiere React 18+ y la API backend desplegada.
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
Envuelve tu aplicación con `ReviewProvider` y configura la URL de la API y el API key del proyecto:
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { ReviewProvider } from "@bitux/review-layer-react";
|
|
19
|
+
|
|
20
|
+
<ReviewProvider
|
|
21
|
+
enabled={true}
|
|
22
|
+
apiUrl="http://localhost:8000/api"
|
|
23
|
+
apiKey="dev_test_key_123"
|
|
24
|
+
>
|
|
25
|
+
<App />
|
|
26
|
+
</ReviewProvider>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
- **enabled**: activa o desactiva el SDK (p. ej. `import.meta.env.DEV` o `import.meta.env.VITE_REVIEW_ENABLED`).
|
|
30
|
+
- **apiUrl**: base URL de la API (opcional). Si no la pasas, en producción se usa la API en Render (`https://review-layer-api.onrender.com/api`). En desarrollo local puedes pasar `http://localhost:8000/api`.
|
|
31
|
+
- **apiKey**: API key del proyecto (generado en el backend por equipo/proyecto).
|
|
32
|
+
|
|
33
|
+
## Atajos
|
|
34
|
+
|
|
35
|
+
- **Shift + R**: activar/desactivar modo revisión.
|
|
36
|
+
|
|
37
|
+
En modo revisión:
|
|
38
|
+
|
|
39
|
+
- El cursor pasa a cruz.
|
|
40
|
+
- Al pasar el ratón sobre un elemento se resalta con un borde.
|
|
41
|
+
- Al hacer clic en un elemento se abre el modal para escribir un comentario y asignar revisor.
|
|
42
|
+
- Los comentarios existentes se muestran como pins en la página; al hacer clic en un pin se ve el texto.
|
|
43
|
+
|
|
44
|
+
## Variables de entorno (ejemplo)
|
|
45
|
+
|
|
46
|
+
En desarrollo local puedes apuntar a tu API:
|
|
47
|
+
|
|
48
|
+
```env
|
|
49
|
+
VITE_REVIEW_API_URL=http://localhost:8000/api
|
|
50
|
+
VITE_REVIEW_API_KEY=rl_xxx
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
<ReviewProvider
|
|
55
|
+
enabled={true}
|
|
56
|
+
apiUrl={import.meta.env.VITE_REVIEW_API_URL}
|
|
57
|
+
apiKey={import.meta.env.VITE_REVIEW_API_KEY ?? ""}
|
|
58
|
+
>
|
|
59
|
+
<App />
|
|
60
|
+
</ReviewProvider>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Si no pasas `apiUrl` (o la dejas `undefined`), el SDK usa por defecto la API en Render (`https://review-layer-api.onrender.com/api`), así que en producción no hace falta configurar nada más.
|
|
64
|
+
|
|
65
|
+
## Navegación SPA (React Router, etc.)
|
|
66
|
+
|
|
67
|
+
Si usas rutas del lado cliente, al cambiar de ruta conviene volver a cargar los comentarios de la página actual. Usa el hook `useReview` y llama a `loadComments()` cuando cambie la ruta:
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { useReview } from "@bitux/review-layer-react";
|
|
71
|
+
import { useLocation } from "react-router-dom";
|
|
72
|
+
|
|
73
|
+
function AppWithReview() {
|
|
74
|
+
const { loadComments } = useReview();
|
|
75
|
+
const location = useLocation();
|
|
76
|
+
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
loadComments();
|
|
79
|
+
}, [location.pathname, loadComments]);
|
|
80
|
+
|
|
81
|
+
return <Outlet />;
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Probar antes de publicar
|
|
86
|
+
|
|
87
|
+
### Tests unitarios
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
npm run test
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Se ejecutan pruebas de `selector` y de la capa `api` (con `fetch` mockeado).
|
|
94
|
+
|
|
95
|
+
### Demo local contra la API
|
|
96
|
+
|
|
97
|
+
1. Arranca la API (en el repo `review-layer-api`):
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
php artisan serve
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
2. En este repo, levanta la demo (usa el código fuente del SDK, sin publicar):
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
npm run demo
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Se abre http://localhost:5174 con una miniapp envuelta en `ReviewProvider`. Por defecto usa `apiUrl=http://127.0.0.1:8000/api` y `apiKey=dev_test_key_123`. Puedes sobreescribirlos con un `.env` en la raíz o en `demo/`:
|
|
110
|
+
|
|
111
|
+
```env
|
|
112
|
+
VITE_REVIEW_API_URL=http://127.0.0.1:8000/api
|
|
113
|
+
VITE_REVIEW_API_KEY=dev_test_key_123
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
3. En la demo: **Shift + R** para activar modo revisión, haz clic en un elemento y envía un comentario. Comprueba que los pins aparecen y que en la API se crean los comentarios.
|