# @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`](https://www.npmjs.com/package/@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](https://reactjs.org/),
[React router DOM](https://reactrouter.com/) y [MUI](https://mui.com/).

```json
{
  "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](https://firebase.google.com/)
  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](./src/googleAnalyticsTag/index.js)
  en el proyecto correspondiente.
* `SENTRY_DSN`: Identificador de [Sentry](https://sentry.io/) 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](https://github.com/Laboratoria/bootcamp.laboratoria.la/blob/7c04c76f6e2dcb4a450057626d449dd8f14845ab/vite.config.js#L29).
* `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`](./src/app/)

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`](./src/BooleanPicker)
* [`Challenge`](./src/Challenge)
* [`Challenges`](./src/Challenges)
* [`Content`](./src/Content)
* [`CurrencyTextField`](./src/CurrencyTextField)
* [`CustomTextField`](./src/CustomTextField)
* [`DistinctFilter`](./src/DistinctFilter)
* [`EnumPicker`](./src/EnumPicker)
* [`Flag`](./src/Flag)
* [`Loading`](./src/Loading)
* [`MainBackground`](./src/MainBackground)
* [`ModelAutocomplete`](./src/ModelAutocomplete)
* [`ModelForm`](./src/ModelForm)
* [`PhoneTextField`](./src/PhoneTextField)
* [`ScrollRestoration`](./src/ScrollRestoration)
* [`StudentProjectResults`](./src/StudentProjectResults)
* [`UserAvatar`](./src/UserAvatar)

## MUI

* [`themeConfig`](./theme/index.js)
* [Base CSS](./theme/index.css)

## Example

Agregamos fuentes via hoja de estilos en HTML.

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

```jsx
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):

```sh
# 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
```