npm package: @laboratoria/react
Description: 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 
Latest version: 8.0.0

# @laboratoria/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/material": "^5.5.3",
    "@mui/styles": "^5.5.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0"
  }
}
```

## Hooks

* [`useApp`](./src/app/)

El _hook_ `useApp` nos da una referencia al objeto `app` de
`@laboratoria/sdk-js`, el cual se puede configurar con las siguientes variables de entorno:

* `FIREBASE_API_KEY`
* `FIREBASE_PROJECT`
* `LABORATORIA_CORE_API_URL`
* `GA_ID`: para registrar los _eventos_ de [Google Analytics](./src/googleAnalyticsTag/index.js)
  en el proyecto correspondiente
* `VERSION`
* `SENTRY_DSN`

## Componentes

* [`Loading`](./src/Loading)
* [`ModelForm`](./src/ModelForm)
* [`ModelAutocomplete`](./src/ModelAutocomplete)
* [`DistinctFilter`](./src/DistinctFilter)

## MUI

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

<!--
Icons?

* `logo.svg`
* `isotipo.svg`
-->

## 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 {
  createTheme,
  ThemeProvider,
  StyledEngineProvider,
} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
// Importamos `AppProvider` y `themeConfig`
import { AppProvider, themeConfig } from '@laboratoria/react';
// Importamos el CSS base...
import '@laboratoria/react/src/theme/index.css';
import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={createTheme(themeConfig)}>
        <AppProvider>
          <CssBaseline />
          <App />
        </AppProvider>
      </ThemeProvider>
    </StyledEngineProvider>
  </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/react
rm -rf node_modules
npm i --omit peer
npm run link-sdk

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