@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next.1

package/src/components/Developers/Developers.tsx

@@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+import Add from '@mui/icons-material/Add';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import FabMUI from '@mui/material/Fab';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Theme } from '../../Theme';
+import Title from './Title';
+import getUniqueDeveloperValues from './get-unique-developer-values';
+
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
+
+export const Fab = styled(FabMUI)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+}));
+
+interface Props {
+  type: DeveloperType;
+  visibleMax?: number;
+  packageMeta: any;
+}
+
+const StyledBox = styled(Box)({
+  '> *': {
+    margin: 5,
+  },
+});
+
+export const VISIBLE_MAX = 6;
+
+const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX, packageMeta }) => {
+  const developers = useMemo(
+    () => getUniqueDeveloperValues(packageMeta?.latest[type]),
+    [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 (
+    <>
+      <Title type={type} />
+      <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
+        {visibleDevelopers.map((visibleDeveloper) => {
+          return (
+            <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/components/Developers/Title.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme } from '../../Theme';
+
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
+
+interface Props {
+  type: DeveloperType;
+}
+
+const Title: 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 Title;
+
+const StyledText = styled(Typography)<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme?.fontWeight.bold,
+  marginBottom: '10px',
+}));

package/src/components/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/components/Developers/index.ts

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

package/src/components/Developers/styles.ts

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import FabMUI from '@mui/material/Fab';
+import Typography from '@mui/material/Typography';
+
+import { Theme } from '../../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(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  marginBottom: '10px',
+  textTransform: 'capitalize',
+}));
+
+export const Fab = styled(FabMUI)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+}));

package/src/components/Distribution/Dist.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { default as Dist } from '.';
+
+export default {
+  title: 'Components/Sidebar/Dist',
+};
+
+export const AllProperties: any = () => (
+  <Dist
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        dist: {
+          fileCount: 7,
+          unpackedSize: 10,
+        },
+        license: 'MIT',
+      },
+      _uplinks: {},
+    }}
+  />
+);
+
+export const NoFileSize: any = () => (
+  <Dist
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        dist: {
+          // @ts-ignore
+          fileCount: undefined,
+          unpackedSize: 10,
+        },
+        license: 'MIT',
+      },
+      _uplinks: {},
+    }}
+  />
+);
+
+export const OnlyLicense: any = () => (
+  <Dist
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        license: { type: 'MIT' },
+      },
+      _uplinks: {},
+    }}
+  />
+);
+
+export const NoRender: any = () => (
+  <Dist
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+      },
+      _uplinks: {},
+    }}
+  />
+);

package/src/components/Distribution/Dist.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import { cleanup, render } from '../../test/test-react-testing-library';
+import { PackageMetaInterface } from '../../types/packageMeta';
+import Dist from './Dist';
+
+const withDistComponent = (packageMeta: PackageMetaInterface): JSX.Element => (
+  <Dist packageMeta={packageMeta} />
+);
+
+describe('<Dist /> component', () => {
+  afterEach(function () {
+    cleanup();
+  });
+
+  test('should render the component in default state', () => {
+    const { getByText } = render(
+      withDistComponent({
+        latest: {
+          name: 'verdaccio1',
+          version: '4.0.0',
+          dist: {
+            fileCount: 7,
+            unpackedSize: 10,
+          },
+          license: '',
+        },
+        _uplinks: {},
+      })
+    );
+    expect(getByText('sidebar.distribution.title')).toBeInTheDocument();
+    expect(getByText('sidebar.distribution.file-count')).toBeInTheDocument();
+    expect(getByText('sidebar.distribution.size')).toBeInTheDocument();
+    expect(getByText('sidebar.distribution.size')).toBeInTheDocument();
+    expect(getByText('7', { exact: false })).toBeInTheDocument();
+    expect(getByText('10.00 Bytes', { exact: false })).toBeInTheDocument();
+  });
+
+  test('should render the component with license as string', () => {
+    const { getByText } = render(
+      withDistComponent({
+        latest: {
+          name: 'verdaccio2',
+          version: '4.0.0',
+          dist: {
+            fileCount: 7,
+            unpackedSize: 10,
+          },
+          license: 'MIT',
+        },
+        _uplinks: {},
+      })
+    );
+    expect(getByText('MIT', { exact: false })).toBeInTheDocument();
+  });
+
+  test('should render the component with license as object', () => {
+    const { getByText } = 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(getByText('MIT', { exact: false })).toBeInTheDocument();
+  });
+
+  test('should not render if latest is missing', () => {
+    const { queryAllByText } = render(
+      withDistComponent({
+        // @ts-ignore
+        latest: undefined,
+        _uplinks: {},
+      })
+    );
+    expect(queryAllByText('sidebar.distribution.title')).toHaveLength(0);
+  });
+
+  test('should not render if latest content is missing', () => {
+    const { queryAllByText } = render(
+      withDistComponent({
+        // @ts-expect-error
+        latest: { dist: undefined, license: undefined },
+        _uplinks: {},
+      })
+    );
+    expect(queryAllByText('sidebar.distribution.title')).toHaveLength(0);
+  });
+});

package/src/components/Distribution/Dist.tsx

@@ -0,0 +1,58 @@
+import List from '@mui/material/List';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PackageMetaInterface } from '../../types/packageMeta';
+import { DistChips, DistListItem, StyledText } from './styles';
+import { fileSizeSI, formatLicense } from './utils';
+
+const DistChip: FC<{ name: string; children?: React.ReactElement | string }> = ({
+  name,
+  children,
+}) =>
+  children ? (
+    <DistChips
+      label={
+        <>
+          <b>{name}</b>
+          {': '}
+          {children}
+        </>
+      }
+    />
+  ) : null;
+
+const Dist: FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+
+  if (!packageMeta?.latest) {
+    return null;
+  }
+
+  const { dist, license } = packageMeta.latest;
+
+  if (!dist && !license) {
+    return null;
+  }
+
+  return (
+    <List
+      subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}
+    >
+      <DistListItem>
+        {dist?.fileCount && (
+          <DistChip name={t('sidebar.distribution.file-count')}>{`${dist.fileCount}`}</DistChip>
+        )}
+        {dist?.unpackedSize ? (
+          <DistChip name={t('sidebar.distribution.size')}>{fileSizeSI(dist.unpackedSize)}</DistChip>
+        ) : null}
+
+        <DistChip name={t('sidebar.distribution.license')}>
+          {formatLicense(license as string)}
+        </DistChip>
+      </DistListItem>
+    </List>
+  );
+};
+
+export default Dist;

package/src/components/Distribution/index.ts

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

package/src/components/Distribution/styles.ts

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import Chip from '@mui/material/Chip';
+import FabMUI from '@mui/material/Fab';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+
+import { Theme } from '../../Theme';
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const DistListItem = styled(ListItem)({
+  paddingLeft: 0,
+  paddingRight: 0,
+  flexWrap: 'wrap',
+});
+
+export const DistChips = styled(Chip)({
+  marginRight: 5,
+  textTransform: 'capitalize',
+  marginTop: 5,
+});
+
+export const DownloadButton = styled(FabMUI)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+}));

package/src/components/Distribution/utils.ts

@@ -0,0 +1,32 @@
+import { LicenseInterface } from '../../types/packageMeta';
+
+/**
+ * Formats license field for webui.
+ * @see https://docs.npmjs.com/files/package.json#license
+ */
+// License should use type License defined above, but conflicts with the unit test that provide array or empty object
+export function formatLicense(license: string | LicenseInterface): string | undefined {
+  if (typeof license === 'string') {
+    return license;
+  }
+
+  if (license?.type) {
+    return license.type;
+  }
+
+  return;
+}
+
+export function fileSizeSI(
+  a: number,
+  b?: typeof Math,
+  c?: (p: number) => number,
+  d?: number,
+  e?: number
+): string {
+  return (
+    ((b = Math), (c = b.log), (d = 1e3), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2) +
+    ' ' +
+    (e ? 'kMGTPEZY'[--e] + 'B' : 'Bytes')
+  );
+}

package/src/components/Distribution/utilts.spec.ts

@@ -0,0 +1,17 @@
+import { fileSizeSI, formatLicense } from './utils';
+
+test('formatLicense as  string', () => {
+  expect(formatLicense('MIT')).toEqual('MIT');
+});
+
+test('formatLicense as format object', () => {
+  expect(formatLicense({ type: 'MIT' })).toEqual('MIT');
+});
+
+test('fileSizeSI as number 1000', () => {
+  expect(fileSizeSI(1000)).toEqual('1.00 kB');
+});
+
+test('fileSizeSI as number 0', () => {
+  expect(fileSizeSI(0)).toEqual('0.00 Bytes');
+});

package/src/components/Engines/Engines.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { default as Engines } from '.';
+
+export default {
+  title: 'Components/Sidebar/Engines',
+};
+
+export const EnginesNpmNode: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          node: '>= 0.1.98',
+          npm: '>3',
+        },
+      },
+    }}
+  />
+);
+
+export const EnginesNode: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          node: '>= 18',
+        },
+      },
+    }}
+  />
+);
+
+export const EnginesYarn: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          yarn: '>3',
+        },
+      },
+    }}
+  />
+);
+
+export const EnginesPnpm: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          pnpm: '>7',
+        },
+      },
+    }}
+  />
+);
+
+export const EnginesAll: any = () => (
+  <Engines
+    packageMeta={{
+      latest: {
+        engines: {
+          node: '>= 18',
+          pnpm: '>7',
+          yarn: '>3',
+          npm: '>3',
+        },
+      },
+    }}
+  />
+);

package/src/components/Engines/Engines.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { cleanup, render } from '../../test/test-react-testing-library';
+import { PackageMetaInterface } from '../../types/packageMeta';
+import Engine from './Engines';
+
+jest.mock('./img/node.png', () => '');
+jest.mock('../Install/img/npm.svg', () => '');
+
+const mockPackageMeta = (
+  engines?: PackageMetaInterface['latest']['engines']
+): PackageMetaInterface => ({
+  latest: {
+    name: 'verdaccio',
+    version: '0.0.0',
+    dist: {
+      fileCount: 1,
+      unpackedSize: 1,
+    },
+    ...(engines && { engines }),
+  },
+  _uplinks: {},
+});
+
+describe('<Engines /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+  const htmlRender = 'sidebar.engines.npm-version';
+
+  test('should render the component in default state', () => {
+    const packageMeta = mockPackageMeta({
+      node: '>= 0.1.98',
+      npm: '>3',
+    });
+
+    const wrapper = render(<Engine packageMeta={packageMeta} />);
+
+    expect(wrapper.getByText(htmlRender)).toBeInTheDocument();
+  });
+
+  test('should render the component when there is no engine key in package meta', () => {
+    const packageMeta = mockPackageMeta();
+    const wrapper = render(<Engine packageMeta={packageMeta} />);
+
+    expect(wrapper.queryByText(htmlRender)).not.toBeInTheDocument();
+  });
+
+  test('should render the component when there is no keys in engine in package meta', () => {
+    const packageMeta = mockPackageMeta({});
+
+    const wrapper = render(<Engine packageMeta={packageMeta} />);
+
+    expect(wrapper.queryByText(htmlRender)).not.toBeInTheDocument();
+  });
+});

package/src/components/Engines/Engines.tsx

@@ -0,0 +1,95 @@
+import Avatar from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PackageMetaInterface } from '../../types/packageMeta';
+import { NodeJS, Npm, Pnpm, Yarn } from '../Icons';
+import { EngineListItem, StyledText } from './styles';
+
+/**
+ * The props type for {@link EngineItem}.
+ */
+type EngineItemProps = { title: string; element: React.ReactElement; engineText?: string };
+
+/**
+ *
+ *
+ * @category Component
+ */
+const EngineItem: FC<EngineItemProps> = ({ title, element, engineText }) => (
+  <Grid item={true} xs={6}>
+    <List subheader={<StyledText variant={'subtitle1'}>{title}</StyledText>}>
+      <EngineListItem>
+        <Avatar sx={{ bgcolor: '#FFF' }}>{element}</Avatar>
+        <ListItemText primary={engineText} />
+      </EngineListItem>
+    </List>
+  </Grid>
+);
+
+interface EngineMetadata extends Omit<PackageMetaInterface, 'latest'> {
+  latest: {
+    engines?: { npm?: string; node?: string; pnpm?: string; yarn?: string };
+  };
+}
+
+/**
+ * The props type for {@link Engine}.
+ */
+export type Props = { packageMeta: EngineMetadata };
+
+/**
+ *
+ *
+ * @category Component
+ */
+const Engine: React.FC<Props> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+
+  const engines = packageMeta?.latest?.engines;
+
+  if (!engines) {
+    return null;
+  }
+
+  return (
+    <Grid container={true}>
+      {engines.node ? (
+        <EngineItem
+          element={<NodeJS />}
+          engineText={engines.node}
+          title={t('sidebar.engines.node-js')}
+        />
+      ) : null}
+
+      {engines.npm ? (
+        <EngineItem
+          element={<Npm />}
+          engineText={engines.node}
+          title={t('sidebar.engines.npm-version')}
+        />
+      ) : null}
+
+      {engines.yarn ? (
+        <EngineItem
+          element={<Yarn />}
+          engineText={engines.yarn}
+          title={t('sidebar.engines.npm-version')}
+        />
+      ) : null}
+
+      {engines.pnpm ? (
+        <EngineItem
+          element={<Pnpm />}
+          engineText={engines.pnpm}
+          title={t('sidebar.engines.npm-version')}
+        />
+      ) : null}
+    </Grid>
+  );
+};
+
+export default Engine;