@verdaccio/ui-components 2.0.0-6-next.1 → 2.0.0-6-next.3

package/README.md

@@ -0,0 +1,103 @@
+# 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)](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.
+
+```bash
+npm i -D @verdaccio/ui-components@6-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.
+
+```jsx
+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
+
+```jsx
+import { useDispatch, useSelector } from 'react-redux';
+
+const packages = useSelector((state: RootState) => state.packages.response);
+useEffect(() => {
+  dispatch.packages.getPackages();
+}, [dispatch]);
+```
+
+## How to use it
+
+```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} 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>
+  );
+};
+``
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "2.0.0-6-next.1",
+  "version": "2.0.0-6-next.3",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@rematch/persist": "2.1.2",
-    "@verdaccio/types": "11.0.0-6-next.18",
+    "@verdaccio/types": "11.0.0-6-next.20",
     "dayjs": "1.11.7",
     "dompurify": "2.4.1",
     "github-markdown-css": "5.1.0",
@@ -71,6 +71,7 @@
   },
   "scripts": {
     "test": "cross-env TZ=UTC jest --config jest/jest.config.js",
+    "test:html": "cross-env TZ=UTC jest --config jest/jest.config.js --coverage-reporters=html",
     "clean": "rimraf ./build",
     "type-check": "tsc --noEmit -p tsconfig.build.json",
     "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
@@ -78,5 +79,6 @@
     "build": "pnpm run build:js && pnpm run build:types",
     "storybook": "start-storybook -p 6006 -s ./public",
     "build-storybook": "build-storybook"
-  }
+  },
+  "readme": "# UI Components\n\nA collection of components ready to use for building complex user interfaces.\n\n- `components`: Independent components to use to build different layouts, all components are based on [MUI (Material UI)](https://mui.com/).\n- `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\n- `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.\n- `theme`: The `ThemeProvider` is an abstraction of the _material-ui_ theme provider.\n- `sections`: A group of components to setup quickly sections of the application, like the sidebar, header of footer.\n- `layouts`: Are the combination of one or more sections ready to use.\n- `hooks`: A collection of useful React hooks.\n\n```bash\nnpm i -D @verdaccio/ui-components@6-next\n```\n\n## Requirements\n\nThe set of components requires libraries available in a project:\n\n- React >17\n- Material UI >5.x\n- Redux >4.x\n- Emotion >11\n- i18next >20.x\n- TypeScript is optional but recommended.\n\n### The store\n\nAll components assume there is a Redux storage, thus a `<Provider/>` wrap is the required that wrap the application.\n\n```jsx\nimport { store } from '@verdaccio/ui-components';\n\n<Provider store={store}>....APP</Provider>;\n```\n\nThe default storage is powered by Rematch and contains the required `dispatch` to fetch data from the registry.\n\n- Fetch all private packages\n\n```jsx\nimport { useDispatch, useSelector } from 'react-redux';\n\nconst packages = useSelector((state: RootState) => state.packages.response);\nuseEffect(() => {\n  dispatch.packages.getPackages();\n}, [dispatch]);\n```\n\n## How to use it\n\n```jsx\nimport React from 'react';\nimport { Route, Router, Switch } from 'react-router-dom';\nimport { Provider } from 'react-redux';\nimport {\n  Home,\n  store,\n  Loading,\n  NotFound,\n  Route as Routes,\n  TranslatorProvider,\n  VersionProvider,\n  loadable,\n} from '@verdaccio/ui-components';\n\n// to enable webpack code splitting\nconst VersionPage = loadable(() => import('../pages/Version'));\n\nconst App: React.FC = () => {\n  // configuration from config.yaml\n  const { configOptions } = useConfig();\n  const listLanguages = [{lng: 'en-US', icon: <someSVGIcon>, menuKey: 'lng.english'}];\n  return (\n      <Provider store={store}>\n        <AppConfigurationProvider>\n          <ThemeProvider>\n            <TranslatorProvider i18n={i18n} listLanguages={listLanguages} onMount={() => {}}>\n              <Suspense fallback={<Loading />}>\n                <Router history={history}>\n                  <Header HeaderInfoDialog={CustomInfoDialog} />\n                    <Switch>\n                      <Route exact={true} path={Routes.ROOT}>\n                        <Home />\n                      </Route>\n                      <Route exact={true} path={Routes.SCOPE_PACKAGE}>\n                        <VersionProvider>\n                          <VersionPage />\n                        </VersionProvider>\n                      </Route>\n                    </Switch>\n                </Router>\n                {configOptions.showFooter && <Footer />}\n              </Suspense>\n            </TranslatorProvider>\n          </ThemeProvider>\n        </AppConfigurationProvider>\n      </Provider>\n  );\n};\n``\n```\n"
 }