@verdaccio/ui-components 3.0.0-next-7.6 → 3.0.0-next-7.8

package/build/utils/routes.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Route = void 0;
 let Route = exports.Route = /*#__PURE__*/function (Route) {
   Route["ROOT"] = "/";
+  Route["DETAIL"] = "/-/web/detail/";
   Route["SCOPE_PACKAGE"] = "/-/web/detail/@:scope/:package";
   Route["SCOPE_PACKAGE_VERSION"] = "/-/web/detail/@:scope/:package/v/:version";
   Route["PACKAGE"] = "/-/web/detail/:package";

package/build/utils/utils.js

@@ -12,6 +12,7 @@ exports.formatRepository = formatRepository;
 exports.getAuthorName = getAuthorName;
 exports.getLastUpdatedPackageTime = getLastUpdatedPackageTime;
 exports.getRecentReleases = getRecentReleases;
+exports.getUplink = getUplink;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
 var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
@@ -96,7 +97,25 @@ function getAuthorName(authorName) {
   }
   return authorName;
 }
+function getUplink(upLinkName, packageName) {
+  // TODO: make this a config like "uplinks: npmjs: web: https://www.npmjs.com/package/"
+  switch (upLinkName) {
+    case 'npmjs':
+      return `https://www.npmjs.com/package/${packageName}`;
+  }
+  return null;
+}
 function fileSizeSI(a, b, c, d, e) {
-  return (b = Math, c = b.log, d = 1e3, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2) + ' ' + (e ? 'kMGTPEZY'[--e] + 'B' : 'Bytes');
+  b = Math;
+  c = b.log;
+  d = 1e3;
+  e = c(a) / c(d) | 0;
+  let size = a / b.pow(d, e);
+  // no decimals for Bytes
+  if (e === 0) {
+    return Math.floor(size) + ' Bytes';
+  } else {
+    return size.toFixed(1) + ' ' + 'kMGTPEZY'[--e] + 'B';
+  }
 }
 //# sourceMappingURL=utils.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-components",
-  "version": "3.0.0-next-7.6",
+  "version": "3.0.0-next-7.8",
   "description": "theme ui component",
   "author": "Juan Picado <juanpicado19@gmail.com>",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "js-base64": "3.7.6",
     "localstorage-memory": "1.0.3",
     "lodash": "4.17.21",
-    "marked": "11.1.1",
+    "marked": "11.2.0",
     "marked-highlight": "2.1.0",
     "normalize.css": "8.0.1",
     "react": "18.2.0",
@@ -40,7 +40,7 @@
     "react-redux": "8.1.3",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
-    "semver": "7.6.0",
+    "semver": "7.6.2",
     "react-virtualized": "9.22.5",
     "redux": "4.2.1",
     "validator": "13.11.0"
@@ -63,7 +63,7 @@
     "@types/hast": "^2.0.0",
     "@types/react-router": "^5.1.20",
     "@types/unist": "^2.0.0",
-    "@verdaccio/types": "12.0.0-next.2",
+    "@verdaccio/types": "12.0.0-next-7.5",
     "babel-loader": "^8.3.0",
     "mockdate": "3.0.5",
     "msw": "0.49.3",

package/src/AppTest/AppRoute.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { store } from '../';
+import { act, renderWithStore, screen, waitFor } from '../test/test-react-testing-library';
+import AppRoute from './AppRoute';
+
+// force the windows to expand to display items
+// https://github.com/bvaughn/react-virtualized/issues/493#issuecomment-640084107
+jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600);
+jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
+
+function appTest(path: string) {
+  renderWithStore(
+    <MemoryRouter initialEntries={[path]}>
+      <AppRoute />
+    </MemoryRouter>,
+    store
+  );
+}
+
+// See jest/server-handlers.ts for test routes
+describe('AppRoute', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders Front component for ROOT path', async () => {
+    act(() => appTest('/'));
+    await waitFor(() => expect(screen.getByTestId('loading')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getAllByTestId('package-item-list')).toHaveLength(5));
+  });
+
+  test('renders VersionPage component for PACKAGE path', async () => {
+    act(() => appTest('/-/web/detail/jquery'));
+    await waitFor(() => screen.getByTestId('readme-tab'));
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+  });
+
+  test('renders VersionPage component for PACKAGE VERSION path', async () => {
+    act(() => appTest('/-/web/detail/jquery/v/3.6.3'));
+    await waitFor(() => screen.getByTestId('readme-tab'));
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+  });
+
+  test('renders Forbidden component for not allowed PACKAGE', async () => {
+    act(() => appTest('/-/web/detail/JSONstream'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for missing PACKAGE', async () => {
+    act(() => appTest('/-/web/detail/kleur'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for non-existing PACKAGE VERSION', async () => {
+    act(() => appTest('/-/web/detail/jquery/v/0.9.9'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+
+  test('renders NotFound component for non-matching path', async () => {
+    act(() => appTest('/oiccadrev'));
+    await waitFor(() => screen.getByTestId('not-found-go-to-home-button'));
+  });
+});

package/src/Theme/ThemeProvider.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import {
+  AppConfigurationProvider,
+  PersistenceSettingProvider,
+  StyleBaseline,
+  ThemeProvider,
+} from '../';
+
+const AppContainer = () => (
+  <AppConfigurationProvider>
+    <ThemeProvider>
+      <StyleBaseline />
+      <PersistenceSettingProvider>
+        <div>{'Theme'}</div>
+      </PersistenceSettingProvider>
+    </ThemeProvider>
+  </AppConfigurationProvider>
+);
+
+describe('ThemeProvider', () => {
+  test('should render with theme', async () => {
+    render(<AppContainer />);
+    await screen.findByText('Theme');
+  });
+});

package/src/Theme/theme.ts

@@ -6,11 +6,11 @@ const colors = {
   black: '#000',
   white: '#fff',
   red: '#d32f2f',
-  orange: '#CD4000',
+  orange: '#cd4000',
   greySuperLight: '#f5f5f5',
   greyLight: '#d3d3d3',
   greyLight2: '#908ba1',
-  greyLight3: '#f3f4f240',
+  greyLight3: '#f3f4f2',
   greyDark: '#a9a9a9',
   greyDark2: '#586069',
   greyChateau: '#95989a',
@@ -38,7 +38,7 @@ const themeModes = {
     ...colors,
     primary: '#ffffff',
     secondary: '#424242',
-    background: '#1A202C',
+    background: '#1a202c',
   },
 };
 

package/src/components/ActionBar/ActionBar.test.tsx

@@ -1,28 +1,22 @@
 import React from 'react';
 
 import { store } from '../../store/store';
-import {
-  cleanup,
-  fireEvent,
-  renderWithStore,
-  screen,
-  waitFor,
-} from '../../test/test-react-testing-library';
+import { cleanup, fireEvent, renderWithStore, screen } from '../../test/test-react-testing-library';
 import ActionBar from './ActionBar';
 
 const defaultPackageMeta = {
   _uplinks: {},
   latest: {
-    name: 'verdaccio-ui/local-storage',
-    version: '8.0.1-next.1',
+    name: 'verdaccio',
+    version: '1.0.0',
     dist: {
-      fileCount: 0,
-      unpackedSize: 0,
-      tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+      fileCount: 1,
+      unpackedSize: 171,
+      tarball: 'http://localhost:9000/verdaccio/-/verdaccio-1.0.0.tgz',
     },
     homepage: 'https://verdaccio.org',
     bugs: {
-      url: 'https://github.com/verdaccio/monorepo/issues',
+      url: 'https://github.com/verdaccio/verdaccio/issues',
     },
   },
 };
@@ -39,6 +33,12 @@ describe('<ActionBar /> component', () => {
     expect(screen.getByTestId('HomeIcon')).toBeInTheDocument();
   });
 
+  test('should not render if data is missing', () => {
+    // @ts-ignore - testing with missing data
+    renderWithStore(<ActionBar packageMeta={undefined} />, store);
+    expect(screen.queryByTestId('HomeIcon')).toBeNull();
+  });
+
   test('when there is no action bar data', () => {
     const packageMeta = {
       ...defaultPackageMeta,
@@ -64,6 +64,14 @@ describe('<ActionBar /> component', () => {
     expect(screen.getByLabelText('action-bar-action.download-tarball')).toBeTruthy();
   });
 
+  test('when button to download is disabled', () => {
+    renderWithStore(
+      <ActionBar packageMeta={defaultPackageMeta} showDownloadTarball={false} />,
+      store
+    );
+    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+  });
+
   test('when there is a button to raw manifest', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
     expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
@@ -71,15 +79,28 @@ describe('<ActionBar /> component', () => {
 
   test('when click button to raw manifest open a dialog with viewer', async () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
+
     fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
-    await waitFor(() => expect(screen.getByTestId('rawViewer--dialog')).toBeInTheDocument());
+    await screen.findByTestId('rawViewer--dialog');
+
+    fireEvent.click(screen.getByTestId('close-raw-viewer'));
+    await screen.getByLabelText('action-bar-action.raw');
+
+    expect(screen.queryByTestId('rawViewer--dialog')).toBeFalsy();
   });
 
   test('should not display download tarball button', () => {
-    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
     expect(screen.queryByLabelText('Download tarball')).toBeFalsy();
   });
 
+  test('when click button to download ', async () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
+    fireEvent.click(screen.getByTestId('download-tarball-btn'));
+    await store.getState().loading.models.download;
+  });
+
   test('should not display show raw button', () => {
     renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
     expect(screen.queryByLabelText('action-bar-action.raw')).toBeFalsy();

package/src/components/ActionBar/ActionBar.tsx

@@ -41,7 +41,7 @@ const ActionBar: React.FC<Props> = ({ showRaw, showDownloadTarball = true, packa
   }
 
   return (
-    <Box alignItems="center" display="flex" marginBottom="14px">
+    <Box alignItems="center" display="flex" sx={{ my: 2 }}>
       <Stack direction="row" spacing={1}>
         {actions.map((action) => (
           <ActionBarAction key={action.type} {...action} />

package/src/components/ActionBar/ActionBarAction.tsx

@@ -12,11 +12,14 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { Theme } from '../../Theme';
 import { Dispatch, RootState } from '../../store/store';
-import { Link } from '../Link';
+import LinkExternal from '../LinkExternal';
 
 export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
     theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  '&:hover': {
+    color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  },
   color: theme?.palette.white,
 }));
 
@@ -42,21 +45,21 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action })
     case 'VISIT_HOMEPAGE':
       return (
         <Tooltip title={t('action-bar-action.visit-home-page') as string}>
-          <Link external={true} to={link} variant="button">
+          <LinkExternal to={link} variant="button">
             <Fab size="small">
               <HomeIcon />
             </Fab>
-          </Link>
+          </LinkExternal>
         </Tooltip>
       );
     case 'OPEN_AN_ISSUE':
       return (
         <Tooltip title={t('action-bar-action.open-an-issue') as string}>
-          <Link external={true} to={link} variant="button">
+          <LinkExternal to={link} variant="button">
             <Fab size="small">
               <BugReportIcon />
             </Fab>
-          </Link>
+          </LinkExternal>
         </Tooltip>
       );
     case 'DOWNLOAD_TARBALL':

package/src/components/Author/Author.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { cleanup, render } from '../../test/test-react-testing-library';
+import { cleanup, render, screen } from '../../test/test-react-testing-library';
 import { PackageMetaInterface } from '../../types/packageMeta';
 import Authors from './Author';
 
@@ -66,4 +66,10 @@ describe('<Author /> component', () => {
     const wrapper = render(withAuthorComponent(packageMeta));
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('should not render if data is missing', () => {
+    // @ts-ignore - testing with missing data
+    render(withAuthorComponent(undefined));
+    expect(screen.queryByText('sidebar.author.title')).toBeNull();
+  });
 });

package/src/components/Author/Author.tsx

@@ -1,35 +1,13 @@
-import { Typography } from '@mui/material';
-import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
-import { useTheme } from '@mui/styles';
-import i18next from 'i18next';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { url } from '../../utils';
+import Person from '../Person';
 import { AuthorListItem, StyledText } from './styles';
 
-export function getAuthorName(authorName?: string): string {
-  if (!authorName) {
-    return i18next.t('author-unknown');
-  }
-
-  if (authorName.toLowerCase() === 'anonymous') {
-    return i18next.t('author-anonymous');
-  }
-
-  return authorName;
-}
-
-/**
- * @param param0
- * @returns
- */
 const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
-  const theme = useTheme();
-
   if (!packageMeta) {
     return null;
   }
@@ -40,26 +18,10 @@ const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
     return null;
   }
 
-  const { email, name } = author;
-  const avatarComponent = (
-    <Avatar
-      alt={author.name}
-      src={author.avatar}
-      sx={{ width: 40, height: 40, marginRight: theme.spacing(1) }}
-    />
-  );
-
   return (
     <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
-      <AuthorListItem>
-        {!email || !url.isEmail(email) ? (
-          avatarComponent
-        ) : (
-          <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
-            {avatarComponent}
-          </a>
-        )}
-        {name && <Typography variant="subtitle2">{getAuthorName(name)}</Typography>}
+      <AuthorListItem sx={{ my: 1 }}>
+        <Person packageName={packageName} person={author} version={version} withText={true} />
       </AuthorListItem>
     </List>
   );

package/src/components/CopyClipboard/CopyToClipBoard.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import CopyToClipBoard from './CopyToClipBoard';
+
+Object.assign(navigator, {
+  clipboard: { writeText: jest.fn().mockImplementation(() => Promise.resolve()) },
+});
+
+describe('CopyToClipBoard component', () => {
+  test('should copy text to clipboard', async () => {
+    const copyThis = 'copy this';
+    render(
+      <CopyToClipBoard dataTestId={'copy-component'} text={copyThis} title={`npm i verdaccio`} />
+    );
+    expect(screen.getByTestId('copy-component')).toBeInTheDocument();
+
+    const copyComponent = await screen.findByTestId('copy-component');
+    await fireEvent.click(copyComponent);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(copyThis);
+  });
+});

package/src/components/CopyClipboard/utils.ts

@@ -5,17 +5,6 @@ export const copyToClipBoardUtility =
   (event: SyntheticEvent<HTMLElement>): void => {
     event.preventDefault();
 
-    const node = document.createElement('div');
-    node.innerText = str;
-    if (document.body) {
-      document.body.appendChild(node);
-
-      const range = document.createRange();
-      const selection = window.getSelection() as Selection;
-      range.selectNodeContents(node);
-      selection.removeAllRanges();
-      selection.addRange(range);
-      document.execCommand('copy');
-      document.body.removeChild(node);
-    }
+    // document.execCommand is deprecated
+    navigator.clipboard.writeText(str);
   };

package/src/components/Dependencies/Dependencies.stories.tsx

@@ -71,17 +71,17 @@ const packageMeta = {
       shelljs: '^0.7.8',
       'update-notifier': '^2.1.0',
     },
-    bundleDependencies: {
-      'styled-components': '5.0.0',
-      'cross-spawn': '^5.0.1',
-      jscodeshift: '^0.3.30',
-      json5: '^0.5.1',
-      'latest-version': '^3.1.0',
-      'merge-dirs': '^0.2.1',
-      opencollective: '^1.0.3',
-      shelljs: '^0.7.8',
-      'update-notifier': '^2.1.0',
-    },
+    bundleDependencies: [
+      'styled-components',
+      'cross-spawn',
+      'jscodeshift',
+      'json5',
+      'latest-version',
+      'merge-dirs',
+      'opencollective',
+      'shelljs',
+      'update-notifier',
+    ],
   },
   _uplinks: {},
 };

package/src/components/Dependencies/Dependencies.tsx

@@ -1,18 +1,13 @@
-import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Theme } from '../../Theme';
 import NoItems from '../NoItems';
 import { DependencyBlock } from './DependencyBlock';
 import { hasKeys } from './utits';
 
-export const CardWrap = styled(Card)<{ theme?: Theme }>((props) => ({
-  marginBottom: props.theme.spacing(2),
-}));
-
 const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
@@ -31,8 +26,8 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
     dependencies,
     devDependencies,
     peerDependencies,
-    bundleDependencies,
     optionalDependencies,
+    bundleDependencies,
   };
   const hasDependencies =
     hasKeys(dependencies) ||
@@ -42,28 +37,36 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
     hasKeys(peerDependencies);
   if (hasDependencies) {
     return (
-      <CardWrap>
+      <Card sx={{ mb: 2 }}>
         <CardContent>
-          {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
-            if (!dependencies || Object.keys(dependencies).length === 0) {
-              return null;
-            }
-            return (
-              <>
-                <DependencyBlock
-                  dependencies={dependencies}
-                  key={dependencyType}
-                  title={dependencyType}
-                />
-              </>
-            );
-          })}
+          <Box data-testid="dependencies-box" sx={{ m: 2 }}>
+            {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
+              if (!dependencies || Object.keys(dependencies).length === 0) {
+                return null;
+              }
+              return (
+                <Fragment key={dependencyType}>
+                  <DependencyBlock
+                    dependencies={dependencies}
+                    key={dependencyType}
+                    title={dependencyType}
+                  />
+                </Fragment>
+              );
+            })}
+          </Box>
         </CardContent>
-      </CardWrap>
+      </Card>
     );
   }
 
-  return <NoItems text={t('dependencies.has-no-dependencies', { package: name })} />;
+  return (
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <NoItems text={t('dependencies.has-no-dependencies', { package: name })} />
+      </CardContent>
+    </Card>
+  );
 };
 
 export default Dependencies;

package/src/components/Dependencies/DependencyBlock.test.tsx

@@ -1,22 +1,33 @@
-import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';
 
-import { render, screen } from '../../test/test-react-testing-library';
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import { DependencyBlock } from './DependencyBlock';
 
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
 describe('<DependencyBlock /> component', () => {
   test('renders dependency block', () => {
     render(<DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />);
 
     expect(screen.getByText('foo (1)')).toBeInTheDocument();
     expect(screen.getByText('dependencies.dependency-block')).toBeInTheDocument();
+  });
 
-    userEvent.click(screen.getByText('dependencies.dependency-block'));
+  test('renders bundleDependencies block', () => {
+    render(<DependencyBlock dependencies={{ semver: '7.6.0' }} title="bundleDependencies" />);
+
+    expect(screen.getByText('bundleDependencies (1)')).toBeInTheDocument();
+    expect(screen.getByText('dependencies.dependency-block-bundle')).toBeInTheDocument();
   });
 
-  test.todo('test the click event');
-  test.skip('handle change route handler', () => {
+  test('handle change of route', async () => {
     render(
       <MemoryRouter
         initialEntries={[`/-/web/detail/some-dep`, `/-/web/detail/jquery`]}
@@ -28,6 +39,8 @@ describe('<DependencyBlock /> component', () => {
       </MemoryRouter>
     );
 
-    userEvent.click(screen.getByTestId('jquery'));
+    fireEvent.click(screen.getByTestId('jquery'));
+
+    await expect(mockHistory).toHaveBeenCalled();
   });
 });