@laboratoria/react

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

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 en el proyecto correspondiente
• VERSION
• SENTRY_DSN

Componentes

• Loading
• ModelForm
• ModelAutocomplete
• DistinctFilter

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 {
  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):

# 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