0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-16 21:56:25 -05:00
verdaccio/packages/ui-components
renovate[bot] d4ab275799
fix(deps): update dependency marked-highlight to v2.0.9 (#4225)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-12-04 18:46:15 +01:00
..
.storybook feat: ui set global package on sidebar setting (#3826) 2023-06-03 00:52:24 +02:00
jest update deps (#4183) 2023-12-02 18:52:27 +01:00
msw feats: components UI for custom user interfaces (#3548) 2023-01-02 20:13:45 +01:00
public fix: missing logo on header (#3636) 2023-02-19 11:43:28 +01:00
src update deps (#4183) 2023-12-02 18:52:27 +01:00
.babelrc feat: ui set global package on sidebar setting (#3826) 2023-06-03 00:52:24 +02:00
.eslintrc feats: components UI for custom user interfaces (#3548) 2023-01-02 20:13:45 +01:00
.npmignore Update .npmignore 2023-03-07 22:08:43 +01:00
CHANGELOG.md chore: update versions (next) (#4056) 2023-10-14 22:53:21 +02:00
package.json fix(deps): update dependency marked-highlight to v2.0.9 (#4225) 2023-12-04 18:46:15 +01:00
README.md feat!: bump to v7 2023-08-21 17:38:13 +02:00
tsconfig.build.json fix: undefined field on missing count (#3743) 2023-04-18 00:52:45 +02:00
tsconfig.json fix: ui and docker nightly image (#3739) 2023-04-17 07:14:00 +02:00

UI Components

A collection of components ready to use for building complex user interfaces.

  • components: Independent components to use to build different layouts, all components are based on MUI (Material UI).
  • providers: Providers are useful components that uses the React Context, for instance, the VersionProvider connects the Redux store with independent components. The AppConfigurationProvider is able to read the
  • store: The Redux store powered by Rematch, could be used with the global object __VERDACCIO_BASENAME_UI_OPTIONS that verdaccio uses to provide the UI configuration.
  • theme: The ThemeProvider is an abstraction of the material-ui theme provider.
  • sections: A group of components to setup quickly sections of the application, like the sidebar, header of footer.
  • layouts: Are the combination of one or more sections ready to use.
  • hooks: A collection of useful React hooks.
npm i -D @verdaccio/ui-components@7-next

Requirements

The set of components requires libraries available in a project:

  • React >17
  • Material UI >5.x
  • Redux >4.x
  • Emotion >11
  • i18next >20.x
  • TypeScript is optional but recommended.

The store

All components assume there is a Redux storage, thus a <Provider/> wrap is the required that wrap the application.

import { store } from '@verdaccio/ui-components';

<Provider store={store}>....APP</Provider>;

The default storage is powered by Rematch and contains the required dispatch to fetch data from the registry.

  • Fetch all private packages
import { useDispatch, useSelector } from 'react-redux';

const packages = useSelector((state: RootState) => state.packages.response);
useEffect(() => {
  dispatch.packages.getPackages();
}, [dispatch]);

How to use it

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>
  );
};
``