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

package/src/components/NotFound/Notfound.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { fireEvent, render } from '../../test/test-react-testing-library';
+import NotFound from './NotFound';
+
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
+describe('<NotFound /> component', () => {
+  test('should load the component in default state', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <NotFound />
+      </MemoryRouter>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('go to Home Page button click', async () => {
+    const { getByTestId } = render(
+      <MemoryRouter>
+        <NotFound />
+      </MemoryRouter>
+    );
+
+    const node = getByTestId('not-found-go-to-home-button');
+    fireEvent.click(node);
+    expect(mockHistory).toHaveBeenCalled();
+  });
+});

package/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NotFound /> component should load the component in default state 1`] = `
+.emotion-0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.emotion-1 {
+  width: 150px;
+  margin: 0 auto;
+}
+
+.emotion-4 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 2.125rem;
+  line-height: 1.235;
+  color: #4b5e40;
+  margin-bottom: 16px;
+}
+
+.emotion-5 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 6px 16px;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: #fff;
+  background-color: #4b5e40;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
+}
+
+.emotion-5::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-5.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-5 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-5:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(52, 65, 44);
+  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
+}
+
+@media (hover: none) {
+  .emotion-5:hover {
+    background-color: #4b5e40;
+  }
+}
+
+.emotion-5:active {
+  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+}
+
+.emotion-5.Mui-focusVisible {
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
+}
+
+.emotion-5.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.emotion-6 {
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+}
+
+<div
+  class="MuiBox-root emotion-0"
+  data-testid="404"
+>
+  <img
+    alt="error.404.page-not-found"
+    class="emotion-1 emotion-2"
+    src="[object Object]"
+  />
+  <h4
+    class="MuiTypography-root MuiTypography-h4 not-found-text emotion-3 emotion-4"
+  >
+    error.404.sorry-we-could-not-find-it
+  </h4>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium emotion-5"
+    data-testid="not-found-go-to-home-button"
+    tabindex="0"
+    type="button"
+  >
+    button.go-to-the-home-page
+    <span
+      class="MuiTouchRipple-root emotion-6"
+    />
+  </button>
+</div>
+`;

package/src/components/NotFound/img/package.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495.2 495.2"><path fill="#d38c0d" d="M325.6 224.4L495.2 126 325.6 28.4l-168.8 99.2z"/><g fill="#efbb67"><path d="M170.4 224.4l168-97.6-168-98.4L0 126.8z"/><path d="M416 368.4l-168 98.4-168-98.4v-196L248 74l168 98.4z"/></g><path fill="#d38c0d" d="M248 74l168 98.4v196l-168 98.4"/><path fill="#efbb67" d="M326.4 314.8L495.2 218l-169.6-98.4L156 218z"/><path fill="#d38c0d" d="M170.4 316.4l168.8-99.2-168.8-97.6L0 218z"/><path fill="#704a0e" d="M248.8 270.8L416 172.4 248.8 74 78.4 172.4z"/><path fill="#513307" d="M248.8 270.8L416 172.4 248.8 74"/><path fill="#2d1c05" d="M248.8 270.8l36-21.6-36-20.8-36 20.8z"/><g fill="#0dd396"><path d="M368 379.6l40-23.2v-12.8l-40 23.2zM368 356.4l40-23.2v-12.8l-40 23.2zM368 333.2l40-23.2v-13.6l-40 24z"/></g></svg>

package/src/components/NotFound/index.ts

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

package/src/components/Package/Package.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { store } from '../../';
+import { cleanup, renderWithStore } from '../../test/test-react-testing-library';
+import Package from './Package';
+
+/**
+ * Generates one month back date from current time
+ * @return {object} date object
+ */
+const dateOneMonthAgo = (): Date => new Date(1544377770747);
+
+describe('<Package /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should load the component', () => {
+    const props = {
+      name: 'verdaccio',
+      version: '1.0.0',
+      time: String(dateOneMonthAgo()),
+      license: 'MIT',
+      description: 'Private NPM repository',
+      author: {
+        name: 'Sam',
+      },
+      keywords: ['verdaccio'],
+    };
+
+    const wrapper = renderWithStore(
+      <MemoryRouter>
+        <Package
+          author={props.author}
+          description={props.description}
+          license={props.license}
+          name={props.name}
+          time={props.time}
+          version={props.version}
+        />
+      </MemoryRouter>,
+      store
+    );
+
+    // FUTURE: improve this expectectations
+    expect(wrapper.getByText('verdaccio')).toBeInTheDocument();
+    expect(wrapper.getByText('Private NPM repository')).toBeInTheDocument();
+    expect(wrapper.getByText('package.version')).toBeInTheDocument();
+    expect(wrapper.getByText('MIT')).toBeInTheDocument();
+  });
+
+  test.todo('should load the component without author');
+});

package/src/components/Package/Package.tsx

@@ -0,0 +1,261 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import BugReport from '@mui/icons-material/BugReport';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import HomeIcon from '@mui/icons-material/Home';
+import { useTheme } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dispatch, Link, RootState, Theme } from '../../';
+import { FileBinary, Law, Time, Version } from '../../components/Icons';
+import { Author as PackageAuthor, PackageMetaInterface } from '../../types/packageMeta';
+import { url, utils } from '../../utils';
+import Tag from './Tag';
+import {
+  Author,
+  Avatar,
+  Description,
+  Details,
+  GridRightAligned,
+  IconButton,
+  OverviewItem,
+  PackageListItemText,
+  PackageTitle,
+  Published,
+  TagContainer,
+  Wrapper,
+  WrapperLink,
+} from './styles';
+
+interface Bugs {
+  url: string;
+}
+interface Dist {
+  unpackedSize: number;
+  tarball: string;
+}
+
+export interface PackageInterface {
+  name: string;
+  version: string;
+  time?: number | string;
+  author: PackageAuthor;
+  description?: string;
+  keywords?: string[];
+  license?: PackageMetaInterface['latest']['license'];
+  homepage?: string;
+  bugs?: Bugs;
+  dist?: Dist;
+  showDownload?: boolean;
+}
+
+const Package: React.FC<PackageInterface> = ({
+  author: { name: authorName, avatar: authorAvatar },
+  bugs,
+  description,
+  dist,
+  homepage,
+  keywords = [],
+  license,
+  name: packageName,
+  time,
+  showDownload = true,
+  version,
+}) => {
+  const config = useSelector((state: RootState) => state.configuration.config);
+  const dispatch = useDispatch<Dispatch>();
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const handleDownload = useCallback(
+    async (tarballDist: string) => {
+      // FIXME: check, the dist might be different thant npmjs
+      const link = tarballDist.replace(`https://registry.npmjs.org/`, config.base);
+      dispatch.download.getTarball({ link });
+    },
+    [dispatch, config]
+  );
+
+  const renderVersionInfo = (): React.ReactNode =>
+    version && (
+      <OverviewItem>
+        <StyledVersion />
+        {t('package.version', { version })}
+      </OverviewItem>
+    );
+
+  const renderAuthorInfo = (): React.ReactNode => {
+    const name = utils.getAuthorName(authorName);
+    return (
+      <Author>
+        <Avatar alt={name} src={authorAvatar} />
+        <Details>
+          <div
+            style={{
+              fontSize: '12px',
+              fontWeight: theme?.fontWeight.semiBold,
+              color:
+                theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+            }}
+          >
+            {name}
+          </div>
+        </Details>
+      </Author>
+    );
+  };
+
+  const renderFileSize = (): React.ReactNode =>
+    dist?.unpackedSize && (
+      <OverviewItem>
+        <StyledFileBinary />
+        {utils.fileSizeSI(dist.unpackedSize)}
+      </OverviewItem>
+    );
+
+  const renderLicenseInfo = (): React.ReactNode =>
+    license && (
+      <OverviewItem>
+        <StyledLaw />
+        {license}
+      </OverviewItem>
+    );
+
+  const renderPublishedInfo = (): React.ReactNode =>
+    time && (
+      <OverviewItem>
+        <StyledTime />
+        <Published>{t('package.published-on', { time: utils.formatDate(time) })}</Published>
+        {utils.formatDateDistance(time)}
+      </OverviewItem>
+    );
+
+  const renderHomePageLink = (): React.ReactNode =>
+    homepage &&
+    url.isURL(homepage) && (
+      <Link external={true} to={homepage}>
+        <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
+          <IconButton aria-label={t('package.homepage')} size="large">
+            <HomeIcon />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderBugsLink = (): React.ReactNode =>
+    bugs?.url &&
+    url.isURL(bugs.url) && (
+      <Link external={true} to={bugs.url}>
+        <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
+          <IconButton aria-label={t('package.bugs')} size="large">
+            <BugReport />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderDownloadLink = (): React.ReactNode =>
+    dist?.tarball &&
+    url.isURL(dist.tarball) && (
+      <Link
+        external={true}
+        onClick={() => {
+          handleDownload(dist.tarball);
+        }}
+        to="#"
+      >
+        <Tooltip
+          aria-label={t('package.download', { what: t('package.the-tar-file') })}
+          title={t('package.tarball')}
+        >
+          <IconButton aria-label={t('package.download')} size="large">
+            <DownloadIcon />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderPrimaryComponent = (): React.ReactNode => {
+    return (
+      <Grid container={true} item={true} xs={12}>
+        <Grid item={true} xs={11}>
+          <WrapperLink to={`/-/web/detail/${packageName}`}>
+            <PackageTitle className="package-title" data-testid="package-title">
+              {packageName}
+            </PackageTitle>
+          </WrapperLink>
+        </Grid>
+        <GridRightAligned
+          alignItems="center"
+          container={true}
+          item={true}
+          justify="flex-end"
+          xs={true}
+        >
+          {renderHomePageLink()}
+          {renderBugsLink()}
+          {showDownload && renderDownloadLink()}
+        </GridRightAligned>
+      </Grid>
+    );
+  };
+
+  const renderSecondaryComponent = (): React.ReactNode => {
+    const tags = keywords.sort().map((keyword, index) => <Tag key={index}>{keyword}</Tag>);
+    return (
+      <>
+        <Description>{description}</Description>
+        {tags.length > 0 && <TagContainer>{tags}</TagContainer>}
+      </>
+    );
+  };
+
+  const renderPackageListItemText = (): React.ReactNode => (
+    <PackageListItemText
+      className="package-link"
+      primary={renderPrimaryComponent()}
+      secondary={renderSecondaryComponent()}
+    />
+  );
+
+  return (
+    <Wrapper className={'package'} data-testid="package-item-list">
+      <ListItem alignItems={'flex-start'}>{renderPackageListItemText()}</ListItem>
+      <ListItem alignItems={'flex-start'}>
+        {renderAuthorInfo()}
+        {renderVersionInfo()}
+        {renderPublishedInfo()}
+        {renderFileSize()}
+        {renderLicenseInfo()}
+      </ListItem>
+    </Wrapper>
+  );
+};
+
+export default Package;
+
+const iconStyle = ({ theme }: { theme: Theme }) => css`
+  margin: 2px 10px 0 0;
+  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white};
+`;
+
+const StyledVersion = styled(Version)`
+  ${iconStyle};
+`;
+
+const StyledFileBinary = styled(FileBinary)`
+  ${iconStyle};
+`;
+
+const StyledLaw = styled(Law)`
+  ${iconStyle};
+`;
+
+const StyledTime = styled(Time)`
+  ${iconStyle};
+`;

package/src/components/Package/Tag/Tag.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render } from '../../../test/test-react-testing-library';
+import Tag from './Tag';
+
+describe('<Tag /> component', () => {
+  test('should load the component in default state', () => {
+    const { container } = render(
+      <Tag>
+        <span>{'I am a child'}</span>
+      </Tag>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Package/Tag/Tag.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+
+import { Wrapper } from './styles';
+
+interface Props {
+  children: ReactNode;
+}
+
+const Tag: React.FC<Props> = ({ children }) => <Wrapper>{children}</Wrapper>;
+
+export default Tag;

package/src/components/Package/Tag/__snapshots__/Tag.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tag /> component should load the component in default state 1`] = `
+.emotion-0 {
+  vertical-align: middle;
+  line-height: 22px;
+  border-radius: 2px;
+  color: #485a3e;
+  background-color: #f3f4f2;
+  padding: 0.22rem 0.4rem;
+  margin: 8px 8px 0 0;
+}
+
+<span
+  class="emotion-0 emotion-1"
+>
+  <span>
+    I am a child
+  </span>
+</span>
+`;

package/src/components/Package/Tag/index.ts

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

package/src/components/Package/Tag/styles.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled('span')({
+  verticalAlign: 'middle',
+  lineHeight: '22px',
+  borderRadius: '2px',
+  color: '#485a3e',
+  backgroundColor: '#f3f4f2',
+  padding: '0.22rem 0.4rem',
+  margin: '8px 8px 0 0',
+});

package/src/components/Package/index.ts

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