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

package/src/pages/Version/DetailSidebar/Developers/Developers.tsx

@@ -0,0 +1,90 @@
+import styled from '@emotion/styled';
+import Avatar from '@material-ui/core/Avatar';
+import Add from '@material-ui/icons/Add';
+import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Box from 'verdaccio-ui/components/Box';
+import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
+import Tooltip from 'verdaccio-ui/components/Tooltip';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+import { DetailContext } from '../..';
+
+import DevelopersTitle from './DevelopersTitle';
+import getUniqueDeveloperValues from './get-unique-developer-values';
+
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
+
+export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+}));
+
+interface Props {
+  type: DeveloperType;
+  visibleMax?: number;
+}
+
+const StyledBox = styled(Box)({
+  '> *': {
+    margin: 5,
+  },
+});
+
+export const VISIBLE_MAX = 6;
+
+const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
+  const detailContext = useContext(DetailContext);
+  const { t } = useTranslation();
+
+  if (!detailContext) {
+    throw Error(t('app-context-not-correct-used'));
+  }
+
+  const developers = useMemo(
+    () => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]),
+    [detailContext.packageMeta, type]
+  );
+
+  const [visibleDevelopersMax, setVisibleDevelopersMax] = useState(visibleMax);
+  const [visibleDevelopers, setVisibleDevelopers] = useState(developers);
+
+  useEffect(() => {
+    if (!developers.length) {
+      return;
+    }
+    setVisibleDevelopers(developers.slice(0, visibleDevelopersMax));
+  }, [developers, visibleDevelopersMax]);
+
+  const handleSetVisibleDevelopersMax = useCallback(() => {
+    setVisibleDevelopersMax(visibleDevelopersMax + VISIBLE_MAX);
+  }, [visibleDevelopersMax]);
+
+  if (!visibleDevelopers || !developers.length) {
+    return null;
+  }
+
+  return (
+    <>
+      <DevelopersTitle type={type} />
+      <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
+        {visibleDevelopers.map((visibleDeveloper) => (
+          <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
+            <Avatar alt={visibleDeveloper.name} src={visibleDeveloper.avatar} />
+          </Tooltip>
+        ))}
+        {visibleDevelopersMax < developers.length && (
+          <Fab onClick={handleSetVisibleDevelopersMax} size="small">
+            <Add />
+          </Fab>
+        )}
+      </StyledBox>
+    </>
+  );
+};
+
+export default Developers;

package/src/pages/Version/DetailSidebar/Developers/DevelopersTitle.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Text from 'verdaccio-ui/components/Text';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
+
+interface Props {
+  type: DeveloperType;
+}
+
+const DevelopersTitle: React.FC<Props> = ({ type }) => {
+  const { t } = useTranslation();
+  switch (type) {
+    case DeveloperType.CONTRIBUTORS:
+      return <StyledText variant={'subtitle1'}>{t('sidebar.contributors.title')}</StyledText>;
+    case DeveloperType.MAINTAINERS:
+      return <StyledText variant={'subtitle1'}>{t('sidebar.maintainers.title')}</StyledText>;
+  }
+};
+
+export default DevelopersTitle;
+
+const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme?.fontWeight.bold,
+  marginBottom: '10px',
+}));

package/src/pages/Version/DetailSidebar/Developers/__snapshots__/Developers.test.tsx.snap

@@ -0,0 +1,380 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test Developers should render the component for contributors with items 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": .emotion-0 {
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.emotion-2>* {
+  margin: 5px;
+}
+
+<body>
+    <div>
+      <span
+        class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+      >
+        Contributors
+      </span>
+      <div
+        class="MuiBox-root MuiBox-root-2 emotion-2 emotion-3"
+      >
+        <div
+          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+          title="dmethvin"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiAvatar-fallback"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+            />
+          </svg>
+        </div>
+        <div
+          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+          title="mgol"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiAvatar-fallback"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": .emotion-0 {
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.emotion-2>* {
+  margin: 5px;
+}
+
+<div>
+    <span
+      class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+    >
+      Contributors
+    </span>
+    <div
+      class="MuiBox-root MuiBox-root-2 emotion-2 emotion-3"
+    >
+      <div
+        class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+        title="dmethvin"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiAvatar-fallback"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+          />
+        </svg>
+      </div>
+      <div
+        class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+        title="mgol"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiAvatar-fallback"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`test Developers should render the component for maintainers with items 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": .emotion-0 {
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.emotion-2>* {
+  margin: 5px;
+}
+
+<body>
+    <div>
+      <span
+        class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+      >
+        Maintainers
+      </span>
+      <div
+        class="MuiBox-root MuiBox-root-1 emotion-2 emotion-3"
+      >
+        <div
+          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+          title="dmethvin"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiAvatar-fallback"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+            />
+          </svg>
+        </div>
+        <div
+          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+          title="mgol"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiAvatar-fallback"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": .emotion-0 {
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.emotion-2>* {
+  margin: 5px;
+}
+
+<div>
+    <span
+      class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+    >
+      Maintainers
+    </span>
+    <div
+      class="MuiBox-root MuiBox-root-1 emotion-2 emotion-3"
+    >
+      <div
+        class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+        title="dmethvin"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiAvatar-fallback"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+          />
+        </svg>
+      </div>
+      <div
+        class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+        title="mgol"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiAvatar-fallback"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`test Developers should render the component with no items 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div />
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/src/pages/Version/DetailSidebar/Developers/get-unique-developer-values.ts

@@ -0,0 +1,16 @@
+import { Developer } from '../../../../../types/packageMeta';
+
+function getUniqueDeveloperValues(developers?: Developer[]): Developer[] {
+  if (!developers) {
+    return [];
+  }
+  return developers.reduce(
+    (accumulator: Developer[], current: Developer) =>
+      accumulator.some((developer) => developer.email === current.email)
+        ? accumulator
+        : [...accumulator, current],
+    []
+  );
+}
+
+export default getUniqueDeveloperValues;

package/src/pages/Version/DetailSidebar/Developers/index.ts

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

package/src/pages/Version/DetailSidebar/Developers/styles.ts

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
+import Text from 'verdaccio-ui/components/Text';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const Details = styled('span')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+export const Content = styled('div')({
+  margin: '10px 0 10px 0',
+  display: 'flex',
+  flexWrap: 'wrap',
+  '> *': {
+    margin: '5px',
+  },
+});
+
+export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  marginBottom: '10px',
+  textTransform: 'capitalize',
+}));
+
+export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+}));

package/src/pages/Version/DetailSidebar/Dist/Dist.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContext } from '../../context';
+
+import Dist from './Dist';
+
+const withDistComponent = (
+  packageMeta: React.ContextType<typeof DetailContext>['packageMeta']
+): JSX.Element => (
+  <DetailContext.Provider value={{ packageMeta }}>
+    <Dist />
+  </DetailContext.Provider>
+);
+
+describe('<Dist /> component', () => {
+  afterEach(function () {
+    cleanup();
+  });
+
+  test('should render the component in default state', () => {
+    const wrapper = render(
+      withDistComponent({
+        latest: {
+          name: 'verdaccio1',
+          version: '4.0.0',
+          dist: {
+            fileCount: 7,
+            unpackedSize: 10,
+          },
+          license: '',
+        },
+        _uplinks: {},
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component with license as string', () => {
+    const wrapper = render(
+      withDistComponent({
+        latest: {
+          name: 'verdaccio2',
+          version: '4.0.0',
+          dist: {
+            fileCount: 7,
+            unpackedSize: 10,
+          },
+          license: 'MIT',
+        },
+        _uplinks: {},
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component with license as object', () => {
+    const wrapper = render(
+      withDistComponent({
+        latest: {
+          name: 'verdaccio3',
+          version: '4.0.0',
+          dist: {
+            fileCount: 7,
+            unpackedSize: 10,
+          },
+          license: {
+            type: 'MIT',
+            url: 'https://www.opensource.org/licenses/mit-license.php',
+          },
+        },
+        _uplinks: {},
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/pages/Version/DetailSidebar/Dist/Dist.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import List from 'verdaccio-ui/components/List';
+import fileSizeSI from 'verdaccio-ui/utils/file-size';
+import { formatLicense } from 'verdaccio-ui/utils/package';
+
+import { DetailContext } from '../../context';
+
+import { StyledText, DistListItem, DistChips } from './styles';
+
+const DistChip: FC<{ name: string }> = ({ name, children }) =>
+  children ? (
+    <DistChips
+      label={
+        <>
+          <b>{name}</b>
+          {': '}
+          {children}
+        </>
+      }
+    />
+  ) : null;
+
+const Dist: FC = () => {
+  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();
+
+  if (!packageMeta) {
+    return null;
+  }
+
+  const { dist, license } = packageMeta && packageMeta.latest;
+
+  return (
+    <List
+      subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}>
+      <DistListItem button={true}>
+        <DistChip name={t('sidebar.distribution.file-count')}>{dist.fileCount}</DistChip>
+        <DistChip name={t('sidebar.distribution.size')}>
+          {dist.unpackedSize && fileSizeSI(dist.unpackedSize)}
+        </DistChip>
+        <DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
+      </DistListItem>
+    </List>
+  );
+};
+
+export default Dist;