@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/pages/Version/context.ts

@@ -0,0 +1,10 @@
+import { createContext, Consumer, Provider } from 'react';
+
+import { DetailContextProps, VersionPageConsumerProps } from './version-config';
+
+export const DetailContext = createContext<Partial<DetailContextProps>>({});
+
+export const DetailContextProvider: Provider<Partial<VersionPageConsumerProps>> =
+  DetailContext.Provider;
+export const DetailContextConsumer: Consumer<Partial<VersionPageConsumerProps>> =
+  DetailContext.Consumer;

package/src/pages/Version/get-route-package-name.ts

@@ -0,0 +1,9 @@
+function getRouterPackageName(packageName: string, scope?: string): string {
+  if (scope) {
+    return `@${scope}/${packageName}`;
+  }
+
+  return packageName;
+}
+
+export default getRouterPackageName;

package/src/pages/Version/index.ts

@@ -0,0 +1,4 @@
+export { DetailContext, DetailContextConsumer, DetailContextProvider } from './context';
+export { VersionPageConsumerProps, DetailContextProps } from './version-config';
+
+export { default } from './Version';

package/src/pages/Version/version-config.ts

@@ -0,0 +1,19 @@
+import { PackageMetaInterface } from '../../../types/packageMeta';
+
+export interface DetailContextProps {
+  enableLoading: () => void;
+  hasNotBeenFound: boolean;
+  isLoading: boolean;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export interface VersionPageConsumerProps {
+  enableLoading: () => void;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}

package/src/pages/home/Home.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import Loading from 'verdaccio-ui/components/Loading';
+
+import { Dispatch, RootState } from '../../store/store';
+
+import { PackageList } from './PackageList';
+
+const Home: React.FC = () => {
+  const packages = useSelector((state: RootState) => state.packages.response);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.packages);
+  const dispatch = useDispatch<Dispatch>();
+  useEffect(() => {
+    dispatch.packages.getPackages();
+  }, [dispatch]);
+
+  return (
+    <div className="container content" data-testid="home-page-container">
+      {isLoading ? <Loading /> : <PackageList packages={packages} />}
+    </div>
+  );
+};
+
+export default Home;

package/src/pages/home/PackageList/Help/Help.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import Help from './Help';
+
+describe('<Help /> component', () => {
+  test('should load the component in default state', () => {
+    const { container } = render(<Help />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/pages/home/PackageList/Help/Help.tsx

@@ -0,0 +1,56 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Button from 'verdaccio-ui/components/Button';
+import CardActions from 'verdaccio-ui/components/CardActions';
+import CardContent from 'verdaccio-ui/components/CardContent';
+import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
+import { default as Typography } from 'verdaccio-ui/components/Heading';
+import Text from 'verdaccio-ui/components/Text';
+import { useConfig } from 'verdaccio-ui/providers/config';
+
+import { CardStyled as Card, HelpTitle } from './styles';
+
+function renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {
+  return (
+    <Fragment>
+      <Text variant={'body1'}>{title}</Text>
+      <CopyToClipBoard text={text} />
+    </Fragment>
+  );
+}
+
+const Help: React.FC = () => {
+  const { configOptions } = useConfig();
+  const registryUrl = configOptions.base;
+  const { t } = useTranslation();
+
+  return (
+    <Card id="help-card">
+      <CardContent>
+        <Typography gutterBottom={true} id="help-card__title" variant="h5">
+          {t('help.title')}
+        </Typography>
+        <HelpTitle color="textSecondary" gutterBottom={true}>
+          {t('help.sub-title')}
+        </HelpTitle>
+        {renderHeadingClipboardSegments(
+          t('help.first-step'),
+          t('help.first-step-command-line', { registryUrl })
+        )}
+        {renderHeadingClipboardSegments(
+          t('help.second-step'),
+          t('help.second-step-command-line', { registryUrl })
+        )}
+        <Text variant="body2">{t('help.third-step')}</Text>
+      </CardContent>
+      <CardActions>
+        <Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
+          {t('button.learn-more')}
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default Help;

package/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Help /> component should load the component in default state 1`] = `
+.emotion-0 {
+  width: 600px;
+  margin: auto;
+}
+
+.emotion-2 {
+  margin-bottom: 20px;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-6 {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 21px;
+  font-size: 1rem;
+}
+
+<div
+  class="MuiPaper-root MuiCard-root emotion-0 emotion-1 MuiPaper-elevation1 MuiPaper-rounded"
+  id="help-card"
+>
+  <div
+    class="MuiCardContent-root"
+  >
+    <h5
+      class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom"
+      id="help-card__title"
+    >
+      No Package Published Yet.
+    </h5>
+    <h6
+      class="MuiTypography-root emotion-2 emotion-3 MuiTypography-h6 MuiTypography-colorTextSecondary MuiTypography-gutterBottom"
+    >
+      To publish your first package just:
+    </h6>
+    <span
+      class="MuiTypography-root MuiTypography-body1"
+    >
+      1. Login
+    </span>
+    <div
+      class="emotion-4 emotion-5"
+    >
+      <span
+        class="emotion-6 emotion-7"
+      >
+        npm adduser --registry http://localhost:9000/
+      </span>
+      <button
+        class="MuiButtonBase-root MuiIconButton-root"
+        data-testid="copy-icon"
+        tabindex="0"
+        title="Copy to clipboard"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+    <span
+      class="MuiTypography-root MuiTypography-body1"
+    >
+      2. Publish
+    </span>
+    <div
+      class="emotion-4 emotion-5"
+    >
+      <span
+        class="emotion-6 emotion-7"
+      >
+        npm publish --registry http://localhost:9000/
+      </span>
+      <button
+        class="MuiButtonBase-root MuiIconButton-root"
+        data-testid="copy-icon"
+        tabindex="0"
+        title="Copy to clipboard"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+    <span
+      class="MuiTypography-root MuiTypography-body2"
+    >
+      3. Refresh this page
+    </span>
+  </div>
+  <div
+    class="MuiCardActions-root MuiCardActions-spacing"
+  >
+    <a
+      aria-disabled="false"
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall"
+      href="https://verdaccio.org/docs/en/installation"
+      tabindex="0"
+    >
+      <span
+        class="MuiButton-label"
+      >
+        Learn More
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </a>
+  </div>
+</div>
+`;

package/src/pages/home/PackageList/Help/index.ts

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

package/src/pages/home/PackageList/Help/styles.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+import Card from 'verdaccio-ui/components/Card';
+import { default as Typography } from 'verdaccio-ui/components/Heading';
+
+export const CardStyled = styled(Card)({
+  width: 600,
+  margin: 'auto',
+});
+
+export const HelpTitle = styled(Typography)({
+  marginBottom: 20,
+});

package/src/pages/home/PackageList/Package/Package.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { renderWithStore, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { store } from '../../../../store';
+
+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('v1.0.0')).toBeInTheDocument();
+    expect(wrapper.getByText('MIT')).toBeInTheDocument();
+  });
+
+  test.todo('should load the component without author');
+});

package/src/pages/home/PackageList/Package/Package.tsx

@@ -0,0 +1,253 @@
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import BugReport from '@material-ui/icons/BugReport';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import HomeIcon from '@material-ui/icons/Home';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import Grid from 'verdaccio-ui/components/Grid';
+import { Version, FileBinary, Time, Law } from 'verdaccio-ui/components/Icons';
+import Link from 'verdaccio-ui/components/Link';
+import ListItem from 'verdaccio-ui/components/ListItem';
+import Tooltip from 'verdaccio-ui/components/Tooltip';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import fileSizeSI from 'verdaccio-ui/utils/file-size';
+import { formatDate, formatDateDistance, getAuthorName } from 'verdaccio-ui/utils/package';
+import { isURL } from 'verdaccio-ui/utils/url';
+
+import { PackageMetaInterface, Author as PackageAuthor } from '../../../../../types/packageMeta';
+import { Dispatch, RootState } from '../../../../store/store';
+
+import {
+  Author,
+  Avatar,
+  Description,
+  Details,
+  GridRightAligned,
+  IconButton,
+  OverviewItem,
+  Wrapper,
+  PackageListItemText,
+  PackageTitle,
+  Published,
+  TagContainer,
+  Text,
+  WrapperLink,
+} from './styles';
+import Tag from './Tag';
+
+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;
+}
+
+const Package: React.FC<PackageInterface> = ({
+  author: { name: authorName, avatar: authorAvatar },
+  bugs,
+  description,
+  dist,
+  homepage,
+  keywords = [],
+  license,
+  name: packageName,
+  time,
+  version,
+}) => {
+  const config = useSelector((state: RootState) => state.configuration);
+  const dispatch = useDispatch<Dispatch>();
+  const { t } = useTranslation();
+
+  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 = getAuthorName(authorName);
+    return (
+      <Author>
+        <Avatar alt={name} src={authorAvatar} />
+        <Details>
+          <Text text={name} />
+        </Details>
+      </Author>
+    );
+  };
+
+  const renderFileSize = (): React.ReactNode =>
+    dist?.unpackedSize && (
+      <OverviewItem>
+        <StyledFileBinary />
+        {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: formatDate(time) })}</Published>
+        {formatDateDistance(time)}
+      </OverviewItem>
+    );
+
+  const renderHomePageLink = (): React.ReactNode =>
+    homepage &&
+    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')}>
+            <HomeIcon />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderBugsLink = (): React.ReactNode =>
+    bugs?.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')}>
+            <BugReport />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderDownloadLink = (): React.ReactNode =>
+    dist?.tarball &&
+    isURL(dist.tarball) && (
+      // eslint-disable-next-line
+      <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')}>
+            <DownloadIcon />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    );
+
+  const renderPrimaryComponent = (): React.ReactNode => {
+    return (
+      <Grid container={true} item={true} xs={12}>
+        <Grid item={true} xs={true}>
+          <WrapperLink to={`/-/web/detail/${packageName}`}>
+            <PackageTitle className="package-title">{packageName}</PackageTitle>
+          </WrapperLink>
+        </Grid>
+        <GridRightAligned
+          alignItems="center"
+          container={true}
+          item={true}
+          justify="flex-end"
+          xs={true}>
+          {renderHomePageLink()}
+          {renderBugsLink()}
+          {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"
+      // @ts-ignore
+      component="div"
+      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.type === '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/pages/home/PackageList/Package/Tag/Tag.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/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/pages/home/PackageList/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/pages/home/PackageList/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/pages/home/PackageList/Package/Tag/index.ts

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