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

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

@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ActionBar /> component should render 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;
+  margin-bottom: 14px;
+}
+
+.emotion-1 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+}
+
+.emotion-3 {
+  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-height: 36px;
+  -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;
+  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;
+  border-radius: 50%;
+  padding: 0;
+  min-width: 0;
+  width: 40px;
+  height: 40px;
+  z-index: 1050;
+  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);
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #e0e0e0;
+  background-color: #4b5e40;
+  color: #fff;
+  margin-right: 10px;
+}
+
+.emotion-3::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-3.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-3 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-3:active {
+  box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
+}
+
+.emotion-3:hover {
+  background-color: #f5f5f5;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+@media (hover: none) {
+  .emotion-3:hover {
+    background-color: #e0e0e0;
+  }
+}
+
+.emotion-3.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-3.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.emotion-3:hover {
+  color: #4b5e40;
+  background: #fff;
+}
+
+.emotion-4 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+}
+
+.emotion-5 {
+  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"
+>
+  <a
+    class=""
+    href="https://verdaccio.org"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <span
+      class="MuiTypography-root MuiTypography-button emotion-1"
+    >
+      <button
+        class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default emotion-2 emotion-3"
+        tabindex="0"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-4"
+          data-testid="HomeIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+          />
+        </svg>
+        <span
+          class="MuiTouchRipple-root emotion-5"
+        />
+      </button>
+    </span>
+  </a>
+  <a
+    class=""
+    href="https://github.com/verdaccio/monorepo/issues"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <span
+      class="MuiTypography-root MuiTypography-button emotion-1"
+    >
+      <button
+        class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default emotion-2 emotion-3"
+        tabindex="0"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-4"
+          data-testid="BugReportIcon"
+          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
+          class="MuiTouchRipple-root emotion-5"
+        />
+      </button>
+    </span>
+  </a>
+  <button
+    aria-label="action-bar-action.download-tarball"
+    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default  emotion-2 emotion-3"
+    data-mui-internal-clone-element="true"
+    data-testid="download-tarball-btn"
+    tabindex="0"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-4"
+      data-testid="CloudDownloadIcon"
+      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
+      class="MuiTouchRipple-root emotion-5"
+    />
+  </button>
+</div>
+`;
+
+exports[`<ActionBar /> component when there is no action bar data 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;
+  margin-bottom: 14px;
+}
+
+<div
+  class="MuiBox-root emotion-0"
+/>
+`;

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: '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;