@verdaccio/ui-components 2.0.0-6-next.7 → 2.0.0-6-next.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "2.0.0-6-next.7",
+  "version": "2.0.0-6-next.9",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -8,19 +8,23 @@
   "main": "./build/index.js",
   "types": "build/index.d.ts",
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "5.11.9",
-    "@mui/material": "5.11.9",
-    "@mui/styles": "5.11.9",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "5.11.16",
+    "@mui/material": "5.12.0",
+    "@mui/styles": "5.12.0",
+    "@mui/system": "5.12.0",
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@rematch/persist": "2.1.2",
-    "@verdaccio/types": "11.0.0-6-next.24",
+    "@fontsource/material-icons": "^4.5.4",
+    "@fontsource/roboto": "^4.5.8",
+    "country-flag-icons": "1.5.5",
     "dayjs": "1.11.7",
     "dompurify": "2.4.5",
     "github-markdown-css": "5.1.0",
     "highlight.js": "11.7.0",
+    "history": "4.10.1",
     "i18next": "20.6.1",
     "localstorage-memory": "1.0.3",
     "lodash": "4.17.21",
@@ -28,26 +32,23 @@
     "normalize.css": "8.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "7.41.1",
     "react-i18next": "12.1.1",
     "react-json-view": "1.21.3",
+    "react-markdown": "8.0.5",
     "react-redux": "7.2.9",
-    "react-hook-form": "7.41.1",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "react-virtualized": "9.22.3",
-    "country-flag-icons": "1.5.5",
-    "history": "4.10.1",
-    "react-markdown": "8.0.5",
-    "remark-gfm": "3.0.1",
     "redux": "4.2.1",
+    "remark-gfm": "3.0.1",
     "validator": "13.9.0"
   },
   "devDependencies": {
+    "@verdaccio/types": "11.0.0-6-next.25",
     "@babel/core": "^7.20.7",
-    "@emotion/babel-plugin": "11.10.5",
+    "@emotion/babel-plugin": "11.10.6",
     "@emotion/jest": "11.10.5",
-    "@fontsource/material-icons": "^4.5.4",
-    "@fontsource/roboto": "^4.5.8",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-interactions": "^6.5.15",
@@ -59,6 +60,9 @@
     "@testing-library/dom": "8.19.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
+    "@types/hast": "^2.0.0",
+    "@types/react-router": "^5.1.20",
+    "@types/unist": "^2.0.0",
     "babel-loader": "^8.3.0",
     "mockdate": "3.0.5",
     "msw": "0.49.2"
@@ -74,8 +78,7 @@
     "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
     "build:js": "babel src/ --out-dir build/ --copy-files --no-copy-ignored --extensions \".ts,.tsx\" --source-maps --ignore \"src/**/*.stories.tsx\" --ignore \"src/**/*.test.tsx\" --ignore \"src/**/*.test.ts\"",
     "build": "pnpm run build:js && pnpm run build:types",
-    "storybook": "start-storybook -p 6006 -s ./public",
+    "start": "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"
+  }
 }

package/src/Theme/ThemeProvider.tsx

@@ -30,7 +30,6 @@ const ThemeProvider: React.FC<{ children: any }> = ({ children }) => {
   const themeMode: ThemeMode = isDarkMode ? 'dark' : 'light';
 
   const currentTheme = getTheme(themeMode, configOptions.primaryColor);
-
   return (
     <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode }}>
       <StyledEngineProvider injectFirst={true}>

package/src/components/Deprecated/Deprecated.tsx

@@ -1,6 +1,6 @@
-import styled from '@emotion/styled';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
+import { styled } from '@mui/system';
 import React from 'react';
 
 import { Theme } from '../../Theme';

package/src/components/Distribution/Dist.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: 'Dist',
 };
 
-export const DistFileAll: any = () => (
+export const AllProperties: any = () => (
   <Dist
     packageMeta={{
       latest: {
@@ -16,7 +16,50 @@ export const DistFileAll: any = () => (
           fileCount: 7,
           unpackedSize: 10,
         },
-        license: '',
+        license: 'MIT',
+      },
+      _uplinks: {},
+    }}
+  />
+);
+
+export const NoFileSize: any = () => (
+  <Dist
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        dist: {
+          // @ts-ignore
+          fileCount: undefined,
+          unpackedSize: 10,
+        },
+        license: 'MIT',
+      },
+      _uplinks: {},
+    }}
+  />
+);
+
+export const OnlyLicense: any = () => (
+  <Dist
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        license: { type: 'MIT' },
+      },
+      _uplinks: {},
+    }}
+  />
+);
+
+export const NoRender: any = () => (
+  <Dist
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
       },
       _uplinks: {},
     }}

package/src/components/Distribution/Dist.test.tsx

@@ -14,7 +14,7 @@ describe('<Dist /> component', () => {
   });
 
   test('should render the component in default state', () => {
-    const wrapper = render(
+    const { getByText } = render(
       withDistComponent({
         latest: {
           name: 'verdaccio1',
@@ -28,11 +28,16 @@ describe('<Dist /> component', () => {
         _uplinks: {},
       })
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(getByText('sidebar.distribution.title')).toBeInTheDocument();
+    expect(getByText('sidebar.distribution.file-count')).toBeInTheDocument();
+    expect(getByText('sidebar.distribution.size')).toBeInTheDocument();
+    expect(getByText('sidebar.distribution.size')).toBeInTheDocument();
+    expect(getByText('7', { exact: false })).toBeInTheDocument();
+    expect(getByText('10.00 Bytes', { exact: false })).toBeInTheDocument();
   });
 
   test('should render the component with license as string', () => {
-    const wrapper = render(
+    const { getByText } = render(
       withDistComponent({
         latest: {
           name: 'verdaccio2',
@@ -46,11 +51,11 @@ describe('<Dist /> component', () => {
         _uplinks: {},
       })
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(getByText('MIT', { exact: false })).toBeInTheDocument();
   });
 
   test('should render the component with license as object', () => {
-    const wrapper = render(
+    const { getByText } = render(
       withDistComponent({
         latest: {
           name: 'verdaccio3',
@@ -67,6 +72,28 @@ describe('<Dist /> component', () => {
         _uplinks: {},
       })
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(getByText('MIT', { exact: false })).toBeInTheDocument();
+  });
+
+  test('should not render if latest is missing', () => {
+    const { queryAllByText } = render(
+      withDistComponent({
+        // @ts-ignore
+        latest: undefined,
+        _uplinks: {},
+      })
+    );
+    expect(queryAllByText('sidebar.distribution.title')).toHaveLength(0);
+  });
+
+  test('should not render if latest content is missing', () => {
+    const { queryAllByText } = render(
+      withDistComponent({
+        // @ts-expect-error
+        latest: { dist: undefined, license: undefined },
+        _uplinks: {},
+      })
+    );
+    expect(queryAllByText('sidebar.distribution.title')).toHaveLength(0);
   });
 });

package/src/components/Distribution/Dist.tsx

@@ -25,23 +25,31 @@ const DistChip: FC<{ name: string; children?: React.ReactElement | string }> = (
 const Dist: FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
-  if (!packageMeta) {
+  if (!packageMeta?.latest) {
     return null;
   }
 
-  const { dist, license } = packageMeta && packageMeta.latest;
+  const { dist, license } = packageMeta.latest;
+
+  if (!dist && !license) {
+    return null;
+  }
 
   return (
     <List
       subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}
     >
       <DistListItem>
-        <DistChip name={t('sidebar.distribution.file-count')}>{`${dist.fileCount}`}</DistChip>
-        {dist.unpackedSize ? (
+        {dist?.fileCount && (
+          <DistChip name={t('sidebar.distribution.file-count')}>{`${dist.fileCount}`}</DistChip>
+        )}
+        {dist?.unpackedSize ? (
           <DistChip name={t('sidebar.distribution.size')}>{fileSizeSI(dist.unpackedSize)}</DistChip>
         ) : null}
 
-        <DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
+        <DistChip name={t('sidebar.distribution.license')}>
+          {formatLicense(license as string)}
+        </DistChip>
       </DistListItem>
     </List>
   );

package/src/components/Distribution/utils.ts

@@ -1,10 +1,11 @@
+import { LicenseInterface } from '../../types/packageMeta';
+
 /**
  * Formats license field for webui.
  * @see https://docs.npmjs.com/files/package.json#license
  */
 // License should use type License defined above, but conflicts with the unit test that provide array or empty object
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export function formatLicense(license: any): string | undefined {
+export function formatLicense(license: string | LicenseInterface): string | undefined {
   if (typeof license === 'string') {
     return license;
   }

package/src/components/Distribution/utilts.spec.ts

@@ -0,0 +1,17 @@
+import { fileSizeSI, formatLicense } from './utils';
+
+test('formatLicense as  string', () => {
+  expect(formatLicense('MIT')).toEqual('MIT');
+});
+
+test('formatLicense as format object', () => {
+  expect(formatLicense({ type: 'MIT' })).toEqual('MIT');
+});
+
+test('fileSizeSI as number 1000', () => {
+  expect(fileSizeSI(1000)).toEqual('1.00 kB');
+});
+
+test('fileSizeSI as number 0', () => {
+  expect(fileSizeSI(0)).toEqual('0.00 Bytes');
+});

package/src/components/Package/Package.tsx

@@ -122,7 +122,7 @@ const Package: React.FC<PackageInterface> = ({
     license && (
       <OverviewItem>
         <StyledLaw />
-        {license}
+        {license as string}
       </OverviewItem>
     );
 

package/src/providers/TranslatorProvider/TranslatorProvider.spec.tsx

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/react';
+import i18n from 'i18next';
+import React from 'react';
+import { initReactI18next } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+
+import TranslatorProvider, { useLanguage } from './TranslatorProvider';
+
+i18n.use(initReactI18next).init({
+  lng: 'en-US',
+  fallbackLng: 'en-US',
+  whitelist: ['en-US'],
+  load: 'currentOnly',
+  react: {
+    useSuspense: false,
+  },
+  resources: {
+    'en-US': {
+      translation: {
+        'copy-to-clipboard': 'Copy to clipboard',
+        'author-anonymous': 'Anonymous',
+        'author-unknown': 'Unknown',
+      },
+    },
+  },
+  debug: false,
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+const RandomComponent = () => {
+  const { language } = useLanguage();
+  const { t } = useTranslation();
+  return (
+    <div>
+      <div>{language}</div>
+      <div>{t('copy-to-clipboard')}</div>
+    </div>
+  );
+};
+
+test('should provide translation', () => {
+  const mount = jest.fn();
+  const { getByText } = render(
+    <TranslatorProvider i18n={i18n} listLanguages={[]} onMount={mount}>
+      <RandomComponent />
+    </TranslatorProvider>
+  );
+  expect(getByText('en-US')).toBeInTheDocument();
+  expect(getByText('Copy to clipboard')).toBeInTheDocument();
+});

package/src/providers/TranslatorProvider/TranslatorProvider.tsx

@@ -1,3 +1,4 @@
+import { i18n } from 'i18next';
 import React, { FunctionComponent, createContext, useCallback, useContext, useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
 
@@ -24,7 +25,7 @@ const I18nTranslatorContext = createContext<TranslatorProviderProps>({
  */
 const TranslatorProvider: FunctionComponent<{
   children: React.ReactElement<any>;
-  i18n: any;
+  i18n: i18n;
   listLanguages: any;
   onMount: () => {};
 }> = ({ children, onMount, i18n, listLanguages }) => {

package/src/providers/VersionProvider/VersionProvider.test.tsx

@@ -16,7 +16,7 @@ function CustomComponent() {
   const { packageMeta, packageName, packageVersion } = useVersion();
   return (
     <div>
-      <div>{packageMeta?.latest?.license}</div>
+      <div>{packageMeta?.latest?.license as string}</div>
       <div>{packageName}</div>
       <div>{packageVersion}</div>
     </div>

package/src/types/index.d.ts

@@ -0,0 +1,2 @@
+declare module 'unist';
+declare module 'hast';

package/src/types/packageMeta.ts

@@ -4,7 +4,7 @@ export type Latest = {
   author?: Author;
   deprecated?: string;
   name: string;
-  dist: {
+  dist?: {
     fileCount: number;
     unpackedSize: number;
     tarball?: string;
@@ -15,7 +15,7 @@ export type Latest = {
     pnpm?: string;
     yarn?: string;
   };
-  license?: Partial<LicenseInterface> | string;
+  license?: undefined | LicenseInterface | string;
   version: string;
   homepage?: string;
   bugs?: {
@@ -50,12 +50,12 @@ export interface Developer {
 
 interface Funding {
   type?: string;
-  url: string;
+  url?: string;
 }
 
-interface LicenseInterface {
-  type: string;
-  url: string;
+export interface LicenseInterface {
+  type?: string;
+  url?: string;
 }
 
 export interface DistTags {

package/tsconfig.build.json

@@ -13,6 +13,7 @@
     "jsx": "react"
   },
   "include": ["src/**/*", "./src/types/index.d.ts"],
+  "types": ["node", "jest", "@testing-library/jest-dom"],
   "typedocOptions": {
     "categoryOrder": ["Model", "Component", "Provider", "*"],
     "defaultCategory": "Component",

package/tsconfig.json

@@ -13,7 +13,6 @@
     "allowJs": true
   },
   "types": ["node", "jest", "@testing-library/jest-dom"],
-  "include": ["src/**/*", "./src/types/index.d.ts"],
   "references": [
     {
       "path": "../core/types"