docs: add ui components docs (#3553)

* docs: add ui components docs

* Update ui-components.md

* Update package.json

packages/ui-components/src/Text/Text.tsx

@@ -1,4 +0,0 @@
-import { default as MaterialUITypography } from '@mui/material/Typography';
-
-export default MaterialUITypography;
-export { TypographyProps } from '@mui/material/Typography';

packages/ui-components/src/Text/index.ts

@@ -1 +0,0 @@
-export { default, TypographyProps } from './Text';

website/docs/ui-components.md

@@ -0,0 +1,98 @@
+---
+id: ui-components
+title: 'UI Components'
+---
+
+If you need a more advanced user interface, the option might be use the UI components that provides a set of reusable React components just to plug and play. **The UI components are compatible with v5.x and ahead**.
+
+To install install the dependency in a local project.
+
+:::caution
+
+The UI components are in _experimental_ mode, currently used to build the main user interface [`@verdaccio/ui-theme`](https://github.com/verdaccio/verdaccio/tree/master/packages/plugins/ui-theme), If you are willing to use it **feedback is welcome**.
+
+:::
+
+```bash
+npm i -D @verdaccio/ui-components@6-next
+```
+
+Browser all available components at [https://ui-components.verdaccio.org/](https://ui-components.verdaccio.org/)
+
+## How to use it {#how-to-useit}
+
+There are a set of tools can be used in order to build your own user interface:
+
+- `components`: Independent components to use to build different layouts, all components are based on [MUI (Material UI)](https://mui.com/).
+- `providers`: Providers are useful components that uses the React [`Context`](https://reactjs.org/docs/context.html), 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`](https://rematchjs.org), 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.
+
+The combination of them depend of your needs, it could be used to inject custom components, routes or addition of new pages or components.
+
+## Requirements {#requirements}
+
+The list of mandatory libraries need it to using with ui components.
+
+- React >17
+- Material UI >5.x
+- Redux >4.x
+- Emotion >11
+- i18next >20.x
+- TypeScript is optional
+
+## Examples {#examples}
+
+```jsx
+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} loadDayJSLocale={() => {}}>
+              <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>
+  );
+};
+```

website/docs/web.md

@@ -1,6 +1,6 @@
 ---
 id: webui
-title: 'Web User Interface'
+title: 'Web Configuration'
 ---
 
 ![Uplinks](https://user-images.githubusercontent.com/558752/52916111-fa4ba980-32db-11e9-8a64-f4e06eb920b3.png)

website/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@verdaccio/website",
-  "version": "5.18.1-6-next.0",
+  "version": "5.19.0",
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start --no-open",

website/sidebars.js

@@ -41,7 +41,11 @@ module.exports = {
         'authentication',
         'notifications',
         'logger',
-        'webui',
+        {
+          type: 'category',
+          label: 'User Interface',
+          items: ['webui', 'ui-components'],
+        },
       ],
     },
     {

website/versioned_docs/version-5.x/web.md

@@ -3,6 +3,11 @@ id: webui
 title: 'Web User Interface'
 ---
 
+:::info
+
+For an advance mode, a new feature could be used instead, the new **UI Components**, read more [here](./next/ui-components).
+:::
+
 ![Uplinks](https://user-images.githubusercontent.com/558752/52916111-fa4ba980-32db-11e9-8a64-f4e06eb920b3.png)
 
 Verdaccio has a web user interface to display only the private packages and can be customised to your liking.