Componenti UI

Se necessiti di un'interfaccia utente più avanzata, l'opzione potrebbe essere di utilizzare i componenti UI che forniscono una serie di componenti riutilizzabili di React pronti all'uso. I componenti dell'UI sono compatibili con la v5.x e superiori.

Per installare la dipendenza in un progetto locale.

attenzione

I componenti dell'UI sono in modalità sperimentale, utilizzati correntemente per creare l'interfaccia utente principale @verdaccio/ui-theme. Se vorresti utilizzarla, i feedback sono i benvenuti.

npm i -D @verdaccio/ui-components@6-next

Tutti i componenti disponibili del browser si trovano a https://ui-components.verdaccio.org/

Come utilizzarla

Esiste una serie di strumenti utilizzabili per poter creare la propria interfaccia utente:

• components: Componenti indipendenti da utilizzare per creare layout differenti, tutti basati sulla MUI (UI dei Materiali).
• providers: I fornitori sono utili componenti che utilizzano il Contesto di React, ad esempio, VersionProvider connette l'archiviazione di Redux ai componenti indipendenti. AppConfigurationProvider è capace di leggere
• store: L'archiviazione di Redux, sviluppata da Rematch potrebbe essere utilizzata con l'oggetto globale __VERDACCIO_BASENAME_UI_OPTIONS, utilizzato da Verdaccio per fornire la configurazione dell'UI.
• theme: ThemeProvider è un'astrazione del fornitore di temi material-ui.
• sections: Un gruppo di componenti per configurare rapidamente le sezioni dell'applicazione, come la barra laterale, l'intestazione o il piè di pagina.
• layouts: Sono la combinazione di una o più sezioni pronte all'uso.
• hooks: Una raccolta di utili hook di React.

La loro combinazione dipende dai tuoi bisogni, potrebbe essere utilizzata per iniettare dei componenti personalizzati, percorsi o per aggiungere nuove pagine o componenti.

Requisiti

L'elenco di librerie obbligatorie necessarie da utilizzare con i componenti dell'UI.

• React >17
• UI Materiale >5.x
• Redux >4.x
• Emotion >11
• i18next >20.x
• TypeScript è facoltativo

Esempi

import React from 'react';
import { Route, Router, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import {
  Home,
  store,
  Loading,
  NotFound,
  Route as Routes,
  TranslatorProvider,
  VersionProvider,
  loadable,
} from '@verdaccio/ui-components';

// to enable webpack code splitting
const VersionPage = loadable(() => import('../pages/Version'));

const App: React.FC = () => {
  // configuration from config.yaml
  const { configOptions } = useConfig();
  const listLanguages = [{lng: 'en-US', icon: <someSVGIcon>, menuKey: 'lng.english'}];
  return (
      <Provider store={store}>
        <AppConfigurationProvider>
          <ThemeProvider>
            <TranslatorProvider i18n={i18n} listLanguages={listLanguages} onMount={() => {}}>
              <Suspense fallback={<Loading />}>
                <Router history={history}>
                  <Header HeaderInfoDialog={CustomInfoDialog} />
                    <Switch>
                      <Route exact={true} path={Routes.ROOT}>
                        <Home />
                      </Route>
                      <Route exact={true} path={Routes.SCOPE_PACKAGE}>
                        <VersionProvider>
                          <VersionPage />
                        </VersionProvider>
                      </Route>
                    </Switch>
                </Router>
                {configOptions.showFooter && <Footer />}
              </Suspense>
            </TranslatorProvider>
          </ThemeProvider>
        </AppConfigurationProvider>
      </Provider>
  );
};