UI 组件

如果您需要更高级的用户界面，可以选择使用 UI 组件，它提供了一组可重用的 React 组件，以便即插即用。 UI 组件与 v5.x 及更高版本兼容。

要安装，请在本地项目中安装依赖项。

:::警告

UI 组件处于实验模式，目前用于构建主用户界面 @verdaccio/ui-theme，如果您愿意使用欢迎提供反馈。

:::

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

在 https://ui-components.verdaccio.org/ 浏览所有可用组件

如何使用

您可以使用一系列工具来创建自己的用户界面：

• components：用于构建不同布局的独立组件，所有组件均基于MUI（Material UI）。
• providers：Providers 是使用 React Context 的组件，例如，VersionProvider 将 Redux 存储与独立组件连接起来。 AppConfigurationProvider 能够读取
• store：由 Rematch 提供支持的 Redux 存储可与全局对象 __VERDACCIO_BASENAME_UI_OPTIONS 一起使用，verdaccio 使用该对象提供用户界面配置。
• theme：ThemeProvider 是 material-ui 主题提供程序的抽象。
• sections：一组组件，用于快速设置应用程序的各个部分，例如侧边栏、页眉或页脚。
• layouts：是一个或多个可供使用的部分的组合。
• hooks：有用的 React hook 集合。

它们的组合取决于你的需求，可以用来注入自定义组件、路由或添加新的页面或组件。

依赖

在使用 ui 组件时必须使用的库列表。

• React >17
• Material UI >5.x
• Redux >4.x
• Emotion >11
• i18next >20.x
• TypeScript 是可选的

示例

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