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

package/src/App/Header/styles.ts

@@ -0,0 +1,89 @@
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+import AppBar from 'verdaccio-ui/components/AppBar';
+import IconButton from 'verdaccio-ui/components/IconButton';
+import Link from 'verdaccio-ui/components/Link';
+import Toolbar from 'verdaccio-ui/components/Toolbar';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const InnerNavBar = styled(Toolbar)({
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0 15px',
+});
+
+export const Greetings = styled('span')({
+  margin: '0 5px 0 0',
+});
+
+export const RightSide = styled(Toolbar)({
+  display: 'flex',
+  padding: 0,
+});
+
+export const LeftSide = styled(RightSide)({
+  flex: 1,
+});
+
+export const MobileNavBar = styled('div')<{ theme?: Theme }>((props) => ({
+  alignItems: 'center',
+  display: 'flex',
+  borderBottom: `1px solid ${props.theme?.palette.greyLight}`,
+  padding: '8px',
+  position: 'relative',
+}));
+
+export const InnerMobileNavBar = styled('div')<{ theme?: Theme }>((props) => ({
+  borderRadius: '4px',
+  backgroundColor: props.theme?.palette.greyLight,
+  color: props.theme?.palette.white,
+  width: '100%',
+  padding: '0 5px',
+  margin: '0 10px 0 0',
+}));
+
+export const IconSearchButton = styled(IconButton)({
+  display: 'block',
+});
+
+export const SearchWrapper = styled('div')({
+  display: 'none',
+  width: '100%',
+});
+
+export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor:
+    theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+  minHeight: 60,
+  display: 'flex',
+  justifyContent: 'center',
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: css`
+    ${SearchWrapper} {
+      display: flex;
+    }
+    ${IconSearchButton} {
+      display: none;
+    }
+    ${MobileNavBar} {
+      display: none;
+    }
+  `,
+  [`@media (min-width: ${theme?.breakPoints.large}px)`]: css`
+    ${InnerNavBar} {
+      padding: 0 20px;
+    }
+  `,
+  [`@media (min-width: ${theme?.breakPoints.xlarge}px)`]: css`
+    ${InnerNavBar} {
+      max-width: 1240px;
+      width: 100%;
+      margin: 0 auto;
+    }
+  `,
+}));
+
+export const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.white,
+}));

package/src/App/index.ts

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

package/src/App/utils/loadable.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable verdaccio/jsx-spread */
+import React, { lazy, Suspense } from 'react';
+export default (importCallback: any) => {
+  const TargetComponent = lazy(importCallback);
+  return (props: any) => (
+    <Suspense fallback={null}>
+      <TargetComponent {...props} />
+    </Suspense>
+  );
+};

package/src/components/.eslintrc

@@ -0,0 +1,7 @@
+{
+    "rules": {
+      "verdaccio/jsx-spread": 0,
+      "react/jsx-sort-props": 0
+    }
+  }
+  

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

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import { renderWithStore, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContext, DetailContextProps } from '../../pages/Version';
+import { store } from '../../store/store';
+
+import ActionBar from './ActionBar';
+
+const detailContextValue: DetailContextProps = {
+  packageName: 'foo',
+  readMe: 'test',
+  enableLoading: () => {},
+  isLoading: false,
+  hasNotBeenFound: false,
+  packageMeta: {
+    _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',
+      },
+    },
+  },
+};
+
+const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({
+  contextValue,
+}) => (
+  <DetailContext.Provider value={contextValue}>
+    <ActionBar />
+  </DetailContext.Provider>
+);
+
+describe('<ActionBar /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should render the component in default state', () => {
+    const { container } = renderWithStore(
+      <ComponentToBeRendered contextValue={detailContextValue} />,
+      store
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('when there is no action bar data', () => {
+    const packageMeta = {
+      ...detailContextValue.packageMeta,
+      latest: {
+        ...detailContextValue.packageMeta.latest,
+        homepage: undefined,
+        bugs: undefined,
+        dist: {
+          ...detailContextValue.packageMeta.latest.dist,
+          tarball: undefined,
+        },
+      },
+    };
+
+    const { container } = renderWithStore(
+      <ComponentToBeRendered contextValue={{ ...detailContextValue, packageMeta }} />,
+      store
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('when there is a button to download a tarball', () => {
+    const { getByTitle } = renderWithStore(
+      <ComponentToBeRendered contextValue={{ ...detailContextValue }} />,
+      store
+    );
+    expect(getByTitle('Download tarball')).toBeTruthy();
+  });
+
+  test('when there is a button to open an issue', () => {
+    const { getByTitle } = renderWithStore(
+      <ComponentToBeRendered contextValue={{ ...detailContextValue }} />,
+      store
+    );
+    expect(getByTitle('Open an issue')).toBeTruthy();
+  });
+});

package/src/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { isURL } from 'verdaccio-ui/utils/url';
+
+import { DetailContext } from '../../pages/Version';
+import Box from '../Box';
+
+import ActionBarAction, { ActionBarActionProps } from './ActionBarAction';
+
+/* eslint-disable verdaccio/jsx-spread */
+const ActionBar: React.FC = () => {
+  const detailContext = React.useContext(DetailContext);
+
+  const { packageMeta } = detailContext;
+
+  if (!packageMeta?.latest) {
+    return null;
+  }
+
+  const { homepage, bugs, dist } = packageMeta.latest;
+
+  const actions: ActionBarActionProps[] = [];
+
+  if (homepage && isURL(homepage)) {
+    actions.push({ type: 'VISIT_HOMEPAGE', link: homepage });
+  }
+
+  if (bugs?.url && isURL(bugs.url)) {
+    actions.push({ type: 'OPEN_AN_ISSUE', link: bugs.url });
+  }
+
+  if (dist?.tarball && isURL(dist.tarball)) {
+    actions.push({ type: 'DOWNLOAD_TARBALL', link: dist.tarball });
+  }
+
+  return (
+    <Box alignItems="center" display="flex" marginBottom="14px">
+      {actions.map((action) => (
+        <ActionBarAction key={action.link} {...action} />
+      ))}
+    </Box>
+  );
+};
+
+export default ActionBar;

package/src/components/ActionBar/ActionBarAction.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+import BugReportIcon 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 } from 'react-redux';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+import { Dispatch } from '../../store/store';
+import FloatingActionButton from '../FloatingActionButton';
+import Link from '../Link';
+import Tooltip from '../Tooltip';
+
+export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor:
+    theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+  marginRight: 10,
+  ':hover': {
+    color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    background: theme?.palette.white,
+  },
+}));
+
+type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL';
+
+export interface ActionBarActionProps {
+  type: ActionType;
+  link: string;
+}
+
+/* eslint-disable react/jsx-no-bind */
+const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
+  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')}>
+          <Link external={true} to={link}>
+            <Fab size="small">
+              <HomeIcon />
+            </Fab>
+          </Link>
+        </Tooltip>
+      );
+    case 'OPEN_AN_ISSUE':
+      return (
+        <Tooltip title={t('action-bar-action.open-an-issue')}>
+          <Link external={true} to={link}>
+            <Fab size="small">
+              <BugReportIcon />
+            </Fab>
+          </Link>
+        </Tooltip>
+      );
+    case 'DOWNLOAD_TARBALL':
+      return (
+        <Tooltip title={t('action-bar-action.download-tarball')}>
+          <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+            <DownloadIcon />
+          </Fab>
+        </Tooltip>
+      );
+  }
+};
+
+export default ActionBarAction;

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

@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ActionBar /> component should render the component in default state 1`] = `
+.emotion-0 {
+  background-color: #4b5e40;
+  color: #fff;
+  margin-right: 10px;
+}
+
+.emotion-0:hover {
+  color: #4b5e40;
+  background: #fff;
+}
+
+<div
+  class="MuiBox-root MuiBox-root-1"
+>
+  <a
+    class=""
+    href="https://verdaccio.org"
+    rel="noopener noreferrer"
+    target="_blank"
+    title="Visit homepage"
+  >
+    <span
+      class="MuiTypography-root MuiTypography-subtitle1"
+    >
+      <button
+        class="MuiButtonBase-root MuiFab-root emotion-0 emotion-1 MuiFab-sizeSmall"
+        data-testid="fab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiFab-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </span>
+  </a>
+  <a
+    class=""
+    href="https://github.com/verdaccio/monorepo/issues"
+    rel="noopener noreferrer"
+    target="_blank"
+    title="Open an issue"
+  >
+    <span
+      class="MuiTypography-root MuiTypography-subtitle1"
+    >
+      <button
+        class="MuiButtonBase-root MuiFab-root emotion-0 emotion-1 MuiFab-sizeSmall"
+        data-testid="fab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiFab-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </span>
+  </a>
+  <button
+    class="MuiButtonBase-root MuiFab-root  emotion-0 emotion-1 MuiFab-sizeSmall"
+    data-testid="fab"
+    tabindex="0"
+    title="Download tarball"
+    type="button"
+  >
+    <span
+      class="MuiFab-label"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
+        />
+      </svg>
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`<ActionBar /> component when there is no action bar data 1`] = `
+<div
+  class="MuiBox-root MuiBox-root-2"
+/>
+`;

package/src/components/ActionBar/index.ts

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

package/src/components/AppBar.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIAppBar, AppBarProps } from '@material-ui/core/AppBar';
+import React, { forwardRef } from 'react';
+
+type AppBarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const AppBar = forwardRef<AppBarRef, AppBarProps>(function AppBar(props, ref) {
+  return <MaterialUIAppBar {...props} ref={ref} />;
+});
+
+export default AppBar;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContext } from '../../pages/Version';
+
+import Authors from './Author';
+
+const withAuthorComponent = (
+  packageMeta: React.ContextType<typeof DetailContext>['packageMeta']
+): JSX.Element => (
+  <DetailContext.Provider value={{ packageMeta }}>
+    <Authors />
+  </DetailContext.Provider>
+);
+
+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,47 @@
+import Avatar from '@material-ui/core/Avatar';
+import React, { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { getAuthorName } from 'verdaccio-ui/utils/package';
+import { isEmail } from 'verdaccio-ui/utils/url';
+
+import { DetailContext } from '../../pages/Version';
+import List from '../List';
+
+import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
+
+const Author: FC = () => {
+  const { packageMeta } = useContext(DetailContext);
+  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 button={true}>
+        {!email || !isEmail(email) ? (
+          avatarComponent
+        ) : (
+          <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
+            {avatarComponent}
+          </a>
+        )}
+        {name && <AuthorListItemText primary={getAuthorName(name)} />}
+      </AuthorListItem>
+    </List>
+  );
+};
+
+export default Author;