diff --git a/packages/ui-components/src/Text/Text.tsx b/packages/ui-components/src/Text/Text.tsx deleted file mode 100644 index 00a248ab6..000000000 --- a/packages/ui-components/src/Text/Text.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { default as MaterialUITypography } from '@mui/material/Typography'; - -export default MaterialUITypography; -export { TypographyProps } from '@mui/material/Typography'; diff --git a/packages/ui-components/src/Text/index.ts b/packages/ui-components/src/Text/index.ts deleted file mode 100644 index 90042309c..000000000 --- a/packages/ui-components/src/Text/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default, TypographyProps } from './Text'; diff --git a/website/docs/ui-components.md b/website/docs/ui-components.md new file mode 100644 index 000000000..227c1ebe6 --- /dev/null +++ b/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: , menuKey: 'lng.english'}]; + return ( + + + + {}}> + }> + +
+ + + + + + + + + + + + {configOptions.showFooter &&