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

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { clone, merge } from 'lodash';
+import React from 'react';
+
+import { default as ActionBar } from '.';
+
+const meta: Meta<typeof ActionBar> = {
+  title: 'Components/Sidebar/ActionBar',
+  component: ActionBar,
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionBar>;
+
+const packageMeta = {
+  _uplinks: {},
+  latest: {
+    name: 'verdaccio-ui/local-storage',
+    version: '8.0.1-next.1',
+    dist: {
+      fileCount: 0,
+      unpackedSize: 0,
+      tarball: 'https://registry.verdaccio.org/storybook/-/storybook-0.2.0.tgz',
+    },
+    homepage: 'https://verdaccio.org',
+    bugs: {
+      url: 'https://github.com/verdaccio/monorepo/issues',
+    },
+  },
+};
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => <ActionBar packageMeta={packageMeta} />,
+};
+
+export const Raw: Story = {
+  name: 'Raw viewer',
+  render: () => <ActionBar packageMeta={packageMeta} showRaw={true} />,
+};
+
+export const NoLatest: Story = {
+  name: 'No latest (empty)',
+  render: () => <ActionBar packageMeta={{}} showRaw={true} />,
+};
+
+export const Download: Story = {
+  name: 'No show download',
+  render: () => <ActionBar packageMeta={{ ...clone(packageMeta) }} showDownloadTarball={false} />,
+};
+
+export const Home: Story = {
+  name: 'No home',
+  render: () => (
+    <ActionBar packageMeta={{ ...merge(clone(packageMeta), { latest: { homepage: null } }) }} />
+  ),
+};
+
+export const Bugs: Story = {
+  name: 'No bugs',
+  render: () => (
+    <ActionBar packageMeta={{ ...merge(clone(packageMeta), { latest: { bugs: null } }) }} />
+  ),
+};

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

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { store } from '../../store/store';
+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',
+    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', () => {
+    const { container } = renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('when there is no action bar data', () => {
+    const packageMeta = {
+      ...defaultPackageMeta,
+      latest: {
+        ...defaultPackageMeta.latest,
+        homepage: undefined,
+        bugs: undefined,
+        dist: {
+          ...defaultPackageMeta.latest.dist,
+          tarball: undefined,
+        },
+      },
+    };
+
+    const { container } = renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  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 viewver', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
+    // TODO: fix this part
+    // expect(screen.getByTestId('raw-viewver-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);
+    // TODO: should be visible by text
+    // expect(screen.getByLabelText('action-bar-action.open-an-issue')).toBeTruthy();
+    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+  });
+});

package/src/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,59 @@
+import Box from '@mui/material/Box';
+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">
+      {actions.map((action) => (
+        <ActionBarAction key={action.type} {...action} />
+      ))}
+      {isRawViewerOpen && (
+        <RawViewer
+          isOpen={isRawViewerOpen}
+          onClose={() => {
+            setIsRawViewerOpen(false);
+          }}
+          packageMeta={packageMeta}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ActionBar;

package/src/components/ActionBar/ActionBarAction.tsx

@@ -0,0 +1,84 @@
+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 FabMUI from '@mui/material/Fab';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import { Theme } from '../../Theme';
+import { Dispatch } 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,
+  marginRight: 10,
+  ':hover': {
+    color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    background: 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 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}>
+          <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,59 @@
+import Avatar from '@mui/material/Avatar';
+import List from '@mui/material/List';
+import i18next from 'i18next';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { url } from '../../utils';
+import { AuthorListItem, AuthorListItemText, 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();
+
+  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} />;
+
+  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 && <AuthorListItemText primary={getAuthorName(name)} />}
+      </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,22 @@
+import styled from '@emotion/styled';
+import { Typography } from '@mui/material';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+
+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',
+  },
+});
+
+export const AuthorListItemText = styled(ListItemText)({
+  padding: '0 10px',
+  margin: 0,
+});

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,50 @@
+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 { 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')({
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  height: 'auto',
+  whiteSpace: 'break-spaces',
+  fontSize: '1rem',
+});
+
+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);
+    }
+  };