@bitux/review-layer-react

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).

Instalación

npm install @bitux/review-layer-react

Requiere React 18+ y la API backend desplegada.

Uso

Envuelve tu aplicación con ReviewProvider y configura la URL de la API y el API key del proyecto:

import { ReviewProvider } from "@bitux/review-layer-react";

<ReviewProvider
  enabled={true}
  apiUrl="http://localhost:8000/api"
  apiKey="dev_test_key_123"
>
  <App />
</ReviewProvider>

• enabled: activa o desactiva el SDK (p. ej. import.meta.env.DEV o import.meta.env.VITE_REVIEW_ENABLED).
• 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.
• apiKey: API key del proyecto (generado en el backend por equipo/proyecto).

Atajos

• Shift + R: activar/desactivar modo revisión.

En modo revisión:

• El cursor pasa a cruz.
• Al pasar el ratón sobre un elemento se resalta con un borde.
• Al hacer clic en un elemento se abre el modal para escribir un comentario y asignar revisor.
• Los comentarios existentes se muestran como pins en la página; al hacer clic en un pin se ve el texto.

Variables de entorno (ejemplo)

En desarrollo local puedes apuntar a tu API:

VITE_REVIEW_API_URL=http://localhost:8000/api
VITE_REVIEW_API_KEY=rl_xxx

<ReviewProvider
  enabled={true}
  apiUrl={import.meta.env.VITE_REVIEW_API_URL}
  apiKey={import.meta.env.VITE_REVIEW_API_KEY ?? ""}
>
  <App />
</ReviewProvider>

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.

Navegación SPA (React Router, etc.)

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:

import { useReview } from "@bitux/review-layer-react";
import { useLocation } from "react-router-dom";

function AppWithReview() {
  const { loadComments } = useReview();
  const location = useLocation();

  useEffect(() => {
    loadComments();
  }, [location.pathname, loadComments]);

  return <Outlet />;
}

Probar antes de publicar

Tests unitarios

npm run test

Se ejecutan pruebas de selector y de la capa api (con fetch mockeado).

Demo local contra la API

1. Arranca la API (en el repo review-layer-api):

   php artisan serve

2. En este repo, levanta la demo (usa el código fuente del SDK, sin publicar):

   npm run demo

   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/:

   VITE_REVIEW_API_URL=http://127.0.0.1:8000/api
   VITE_REVIEW_API_KEY=dev_test_key_123

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.