@laboratoria/sdk-react

Este repo contiene componentes, hooks y otras cositas que queremos reusar entre varias interfaces de Laboratoria. Este módulo depende de @laboratoria/sdk-js y contiene un hook (useApp) que nos da acceso al objeto app del SDK. Con lo cual, si estás usando este módulo desde una app en React, no necesitas instalar directamente @laboratoria/sdk-js.

Se asume que las interfaces en cuestión todas usan React, React router DOM y MUI.

{
  "peerDependencies": {
    "@mui/icons-material": "^5.15.20",
    "@mui/material": "^5.15.20",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.23.1"
  }
}

Variables de entorno

• FIREBASE_PROJECT: Identificador del proyecto de Firebase a usar para auth.
• FIREBASE_API_KEY: Llave pública del proyecto de Firebase que usar para autenticación.
• LABORATORIA_CORE_API_URL: URL a API HTTP de core. Por defecto es https://us-central1-outpost-272720.cloudfunctions.net/core-api/.
• GA_ID: para registrar los eventos de Google Analytics en el proyecto correspondiente.
• SENTRY_DSN: Identificador de Sentry para ingestión de errores. Si no está presente, no se envían errores a Sentry.
• VERSION: Versión de la interfaz que hace uso de sdk-react. Este valor se usa al reportar errores a Sentry. Esta variable normalmente la seteamos desde vite.config.js de la app que usa sdk-react. Por ejemplo.
• PUBLIC_POSTHOG_KEY: Llave pública del proyecto en Posthog donde enviar datos. Si no está presente no se inicializa el SDK de Posthog.
• PUBLIC_POSTHOG_HOST: Host the Posthog. (ver configuración de Posthog)

Hooks

• useApp

El hook useApp nos da una referencia al objeto app de @laboratoria/sdk-js, el cual se puede configurar a través de variables de entorno.

Componentes

• BooleanPicker
• Challenge
• Challenges
• Content
• CurrencyTextField
• CustomTextField
• DistinctFilter
• EnumPicker
• Flag
• Loading
• MainBackground
• ModelAutocomplete
• ModelForm
• PhoneTextField
• ScrollRestoration
• StudentProjectResults
• UserAvatar

MUI

• themeConfig
• Base CSS

Example

Agregamos fuentes via hoja de estilos en HTML.

<link
  href="https://fonts.googleapis.com/css2?family=Bitter:wght@100;200;400;500;700&family=Open+Sans:wght@300;400;500;700&display=swap"
  rel="stylesheet">

En archivo main o index de nuestra aplicación:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppProvider } from '@laboratoria/sdk-react';
import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <AppProvider
      App={App}
      productionHostname="admin.laboratoria.la"
    />
  </React.StrictMode>,
  document.getElementById('root')
);

Workers

Este repo incluye unos Web Workers (src/workers/) que debes incluir en tu carpeta public o similar, para que estén disponibles el la raíz del servidor web.

Dev install

Para usar este repo linkeado localmente en otros repos que lo usen como dependencia (laboratoria.la, admin, etc):

# en @laboratoria/sdk-react
rm -rf node_modules
npm i --omit peer
npm run link-sdk-js

# en repo que usa @laboratoria/sdk-react
npm run link-sdk-react
rm -rf node_modules/.vite* && npm start