@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next-7.3

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

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { store } from '../../store/store';
+import {
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} 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',
+    dist: {
+      fileCount: 0,
+      unpackedSize: 0,
+      tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+    },
+    homepage: 'https://verdaccio.org',
+    bugs: {
+      url: 'https://github.com/verdaccio/monorepo/issues',
+    },
+  },
+};
+
+describe('<ActionBar /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should render the component in default state', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(screen.getByTestId('download-tarball-btn')).toBeInTheDocument();
+    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('HomeIcon')).toBeInTheDocument();
+  });
+
+  test('when there is no action bar data', () => {
+    const packageMeta = {
+      ...defaultPackageMeta,
+      latest: {
+        ...defaultPackageMeta.latest,
+        homepage: undefined,
+        bugs: undefined,
+        dist: {
+          ...defaultPackageMeta.latest.dist,
+          tarball: undefined,
+        },
+      },
+    };
+
+    renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
+    expect(screen.queryByTestId('download-tarball-btn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('BugReportIcon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('HomeIcon')).not.toBeInTheDocument();
+  });
+
+  test('when there is a button to download a tarball', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(screen.getByLabelText('action-bar-action.download-tarball')).toBeTruthy();
+  });
+
+  test('when there is a button to raw manifest', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
+  });
+
+  test('when click button to raw manifest open a dialog with viewer', async () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
+    await waitFor(() => expect(screen.getByTestId('rawViewer--dialog')).toBeInTheDocument());
+  });
+
+  test('should not display download tarball button', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    expect(screen.queryByLabelText('Download tarball')).toBeFalsy();
+  });
+
+  test('should not display show raw button', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
+    expect(screen.queryByLabelText('action-bar-action.raw')).toBeFalsy();
+  });
+
+  test('when there is a button to open an issue', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+  });
+});

package/src/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable verdaccio/jsx-spread */
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import React, { useState } from 'react';
+
+import { url } from '../../utils';
+import RawViewer from '../RawViewer';
+import ActionBarAction, { ActionBarActionProps } from './ActionBarAction';
+
+export type Props = {
+  showRaw?: boolean;
+  showDownloadTarball?: boolean;
+  packageMeta: any;
+};
+
+const ActionBar: React.FC<Props> = ({ showRaw, showDownloadTarball = true, packageMeta }) => {
+  const [isRawViewerOpen, setIsRawViewerOpen] = useState(false);
+
+  if (!packageMeta?.latest) {
+    return null;
+  }
+
+  const { homepage, bugs, dist } = packageMeta.latest;
+
+  const actions: ActionBarActionProps[] = [];
+
+  if (homepage && url.isURL(homepage)) {
+    actions.push({ type: 'VISIT_HOMEPAGE', link: homepage });
+  }
+
+  if (bugs?.url && url.isURL(bugs.url)) {
+    actions.push({ type: 'OPEN_AN_ISSUE', link: bugs.url });
+  }
+
+  if (dist?.tarball && url.isURL(dist.tarball) && showDownloadTarball) {
+    actions.push({ type: 'DOWNLOAD_TARBALL', link: dist.tarball });
+  }
+
+  if (showRaw) {
+    actions.push({ type: 'RAW_DATA', action: () => setIsRawViewerOpen(true) });
+  }
+
+  return (
+    <Box alignItems="center" display="flex" marginBottom="14px">
+      <Stack direction="row" spacing={1}>
+        {actions.map((action) => (
+          <ActionBarAction key={action.type} {...action} />
+        ))}
+        {isRawViewerOpen && (
+          <RawViewer
+            isOpen={isRawViewerOpen}
+            onClose={() => {
+              setIsRawViewerOpen(false);
+            }}
+            packageMeta={packageMeta}
+          />
+        )}
+      </Stack>
+    </Box>
+  );
+};
+
+export default ActionBar;

package/src/components/ActionBar/ActionBarAction.tsx

@@ -0,0 +1,89 @@
+import styled from '@emotion/styled';
+import BugReportIcon from '@mui/icons-material/BugReport';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import HomeIcon from '@mui/icons-material/Home';
+import RawOnIcon from '@mui/icons-material/RawOn';
+import CircularProgress from '@mui/material/CircularProgress';
+import FabMUI from '@mui/material/Fab';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Theme } from '../../Theme';
+import { Dispatch, RootState } from '../../store/store';
+import { Link } from '../Link';
+
+export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor:
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+}));
+
+type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';
+
+export interface ActionBarActionProps {
+  type: ActionType;
+  link?: string;
+  action?: () => void;
+}
+
+/* eslint-disable react/jsx-no-bind */
+const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action }) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch<Dispatch>();
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.download);
+
+  const handleDownload = useCallback(async () => {
+    dispatch.download.getTarball({ link });
+  }, [dispatch, link]);
+
+  switch (type) {
+    case 'VISIT_HOMEPAGE':
+      return (
+        <Tooltip title={t('action-bar-action.visit-home-page') as string}>
+          <Link external={true} to={link} variant="button">
+            <Fab size="small">
+              <HomeIcon />
+            </Fab>
+          </Link>
+        </Tooltip>
+      );
+    case 'OPEN_AN_ISSUE':
+      return (
+        <Tooltip title={t('action-bar-action.open-an-issue') as string}>
+          <Link external={true} to={link} variant="button">
+            <Fab size="small">
+              <BugReportIcon />
+            </Fab>
+          </Link>
+        </Tooltip>
+      );
+    case 'DOWNLOAD_TARBALL':
+      return (
+        <Tooltip title={t('action-bar-action.download-tarball') as string}>
+          {isLoading ? (
+            <CircularProgress sx={{ marginX: 0 }}>
+              <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+                <DownloadIcon />
+              </Fab>
+            </CircularProgress>
+          ) : (
+            <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+              <DownloadIcon />
+            </Fab>
+          )}
+        </Tooltip>
+      );
+    case 'RAW_DATA':
+      return (
+        <Tooltip title={t('action-bar-action.raw') as string}>
+          <Fab data-testid="raw-btn" onClick={action} size="small">
+            <RawOnIcon />
+          </Fab>
+        </Tooltip>
+      );
+  }
+};
+
+export default ActionBarAction;

package/src/components/ActionBar/index.ts

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

package/src/components/Author/Author.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { default as Author } from '.';
+
+export default {
+  title: 'Components/Sidebar/Author',
+};
+
+export const AuthorAll: any = () => (
+  <Author
+    packageMeta={{
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        author: {
+          name: 'verdaccio user',
+          email: 'verdaccio.user@verdaccio.org',
+          url: '',
+          avatar: 'https://www.gravatar.com/avatar/000000',
+        },
+        dist: { fileCount: 0, unpackedSize: 0 },
+        dependencies: {
+          react: '16.9.0',
+          'react-dom': '16.9.0',
+        },
+        devDependencies: {
+          'babel-core': '7.0.0-beta6',
+        },
+        peerDependencies: {
+          'styled-components': '5.0.0',
+        },
+      },
+      _uplinks: {},
+    }}
+  />
+);
+
+export const NoDAuthor: any = () => (
+  <Author
+    packageMeta={{
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        author: {},
+        dist: { fileCount: 0, unpackedSize: 0 },
+        dependencies: {},
+        devDependencies: {},
+        peerDependencies: {},
+      },
+      _uplinks: {},
+    }}
+  />
+);

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

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { cleanup, render } from '../../test/test-react-testing-library';
+import { PackageMetaInterface } from '../../types/packageMeta';
+import Authors from './Author';
+
+const withAuthorComponent = (packageMeta: PackageMetaInterface): JSX.Element => (
+  <Authors packageMeta={packageMeta} />
+);
+
+describe('<Author /> component', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    cleanup();
+  });
+
+  test('should render the component in default state', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        author: {
+          name: 'verdaccio user',
+          email: 'verdaccio.user@verdaccio.org',
+          url: '',
+          avatar: 'https://www.gravatar.com/avatar/000000',
+        },
+        dist: { fileCount: 0, unpackedSize: 0 },
+      },
+      _uplinks: {},
+    };
+
+    const wrapper = render(withAuthorComponent(packageMeta));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component when there is no author information available', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        dist: { fileCount: 0, unpackedSize: 0 },
+      },
+      _uplinks: {},
+    };
+
+    const wrapper = render(withAuthorComponent(packageMeta));
+    expect(wrapper.queryAllByText('verdaccio')).toHaveLength(0);
+  });
+
+  test('should render the component when there is no author email', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        author: {
+          name: 'verdaccio user',
+          url: '',
+          avatar: 'https://www.gravatar.com/avatar/000000',
+        },
+        dist: { fileCount: 0, unpackedSize: 0 },
+      },
+      _uplinks: {},
+    };
+
+    const wrapper = render(withAuthorComponent(packageMeta));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/components/Author/Author.tsx

@@ -0,0 +1,68 @@
+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 { 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;
+  }
+
+  const { author, name: packageName, version } = packageMeta.latest;
+
+  if (!author) {
+    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>
+    </List>
+  );
+};
+
+export default Author;

package/src/components/Author/index.ts

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

package/src/components/Author/styles.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import { Typography } from '@mui/material';
+import ListItem from '@mui/material/ListItem';
+
+import { Theme } from '../../Theme';
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+}));
+
+export const AuthorListItem = styled(ListItem)({
+  padding: 0,
+  ':hover': {
+    backgroundColor: 'transparent',
+  },
+});

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import CopyToClipBoard from './CopyToClipBoard';
+
+export default {
+  title: 'Components/Sidebar/CopyToClipBoard',
+  component: CopyToClipBoard,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+const Template = (args: any) => <CopyToClipBoard {...args} />;
+
+export const WithDefaultArgs: any = Template.bind({});
+WithDefaultArgs.args = {
+  text: `npm i -g verdaccio`,
+  dataTestId: 'id',
+  title: 'Copy this',
+};

package/src/components/CopyClipboard/CopyToClipBoard.tsx

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+import FileCopy from '@mui/icons-material/FileCopy';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import React from 'react';
+
+import { Theme } from '../../Theme';
+import { copyToClipBoardUtility } from './utils';
+
+interface Props {
+  text: string;
+  title?: string;
+  dataTestId: string;
+  children?: React.ReactNode;
+}
+
+const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+const Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  height: 'auto',
+  whiteSpace: 'break-spaces',
+  fontSize: theme?.fontSize.sm,
+}));
+
+function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {
+  return (
+    <Wrapper {...props}>
+      <Content>{children ?? text}</Content>
+      {title ? (
+        <Tooltip disableFocusListener={true} title={title}>
+          <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="small">
+            <FileCopy fontSize="small" />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="small">
+          <FileCopy fontSize="small" />
+        </IconButton>
+      )}
+    </Wrapper>
+  );
+}
+
+export default CopyToClipBoard;

package/src/components/CopyClipboard/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CopyToClipBoard';
+export { copyToClipBoardUtility } from './utils';

package/src/components/CopyClipboard/utils.ts

@@ -0,0 +1,21 @@
+import { SyntheticEvent } from 'react';
+
+export const copyToClipBoardUtility =
+  (str: string): ((e: SyntheticEvent<HTMLElement>) => void) =>
+  (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);
+    }
+  };