mirror of https://github.com/verdaccio/verdaccio.git synced 2025-03-25 02:32:52 -05:00

chore: update readme badges and license files (#5145 )

* chore: update readme badges and license files

* stargazers

2025-03-17 19:53:25 +01:00

9.5 KiB

Raw Blame History

@verdaccio/ui-components - Verdaccio 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>
  );
};
``

Donations

Verdaccio is run by volunteers; nobody is working full-time on it. If you find this project to be useful and would like to support its development, consider making a donation - your logo might end up in this readme. 😉

Donate 💵👍🏻 starting from $1/month or just one single contribution.

Report a vulnerability

If you want to report a security vulnerability, please follow the steps which we have defined for you in our security policy.

Open Collective Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Open Collective Backers

Thank you to all our backers! 🙏 [Become a backer]

Special Thanks

Thanks to the following companies to help us to achieve our goals providing free open source licenses.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

FAQ / Contact / Troubleshoot

If you have any issue you can try the following options. Do not hesitate to ask or check our issues database. Perhaps someone has asked already what you are looking for.

License

Verdaccio is MIT licensed

The Verdaccio documentation and logos (excluding /thanks, e.g., .md, .png, .sketch files within the /assets folder) are Creative Commons licensed.

9.5 KiB Raw Blame History