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

package/src/components/Dependencies/Dependencies.stories.tsx

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { default as Dependencies } from '.';
+
+const meta: Meta<typeof Dependencies> = {
+  title: 'Components/Detail/Dependencies',
+  component: Dependencies,
+};
+
+export default meta;
+type Story = StoryObj<typeof Dependencies>;
+
+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 },
+    dependencies: {
+      react: '16.9.0',
+      'react-dom': '16.9.0',
+      '@storybook/codemod': '^3.2.6',
+      chalk: '^2.1.0',
+      'child-process-promise': '^2.2.1',
+      commander: '^2.11.0',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+    devDependencies: {
+      'babel-core': '7.0.0-beta6',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+    peerDependencies: {
+      'styled-components': '5.0.0',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+    optionalDependencies: {
+      'styled-components': '5.0.0',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+    bundleDependencies: {
+      'styled-components': '5.0.0',
+      'cross-spawn': '^5.0.1',
+      jscodeshift: '^0.3.30',
+      json5: '^0.5.1',
+      'latest-version': '^3.1.0',
+      'merge-dirs': '^0.2.1',
+      opencollective: '^1.0.3',
+      shelljs: '^0.7.8',
+      'update-notifier': '^2.1.0',
+    },
+  },
+  _uplinks: {},
+};
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => {
+    return <Dependencies packageMeta={packageMeta} />;
+  },
+};
+
+export const OnlyDeps: Story = {
+  name: 'Only dependencies',
+  render: () => {
+    return (
+      <Dependencies
+        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: {
+              'styled-components': '5.0.0',
+              'cross-spawn': '^5.0.1',
+              jscodeshift: '^0.3.30',
+              json5: '^0.5.1',
+              'latest-version': '^3.1.0',
+              'merge-dirs': '^0.2.1',
+              opencollective: '^1.0.3',
+              shelljs: '^0.7.8',
+              'update-notifier': '^2.1.0',
+            },
+            devDependencies: { jscodeshift: '^0.3.30', json5: '^0.5.1' },
+            peerDependencies: {},
+          },
+          _uplinks: {},
+        }}
+      />
+    );
+  },
+};
+
+export const NoDependencies: Story = {
+  name: 'No dependencies',
+  render: () => {
+    return (
+      <Dependencies
+        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: {},
+            devDependencies: {},
+            peerDependencies: {},
+          },
+          _uplinks: {},
+        }}
+      />
+    );
+  },
+};

package/src/components/Dependencies/Dependencies.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { HashRouter } from 'react-router-dom';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import Dependencies from './Dependencies';
+
+describe('<Dependencies /> component', () => {
+  test('Renders a message when there are no dependencies', () => {
+    // Given
+    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 },
+        dependencies: {},
+        devDependencies: {},
+        peerDependencies: {},
+      },
+      _uplinks: {},
+    };
+
+    // When
+    const { getByText } = render(<Dependencies packageMeta={packageMeta} />);
+
+    // Then
+    expect(getByText('dependencies.has-no-dependencies')).toBeDefined();
+  });
+
+  test('Renders a link to each dependency', () => {
+    // Given
+    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 },
+        dependencies: {
+          react: '16.9.0',
+          'react-dom': '16.9.0',
+        },
+        devDependencies: {
+          'babel-core': '7.0.0-beta6',
+        },
+        peerDependencies: {
+          'styled-components': '5.0.0',
+        },
+      },
+      _uplinks: {},
+    };
+
+    // When
+    const { getByText } = render(
+      <HashRouter>
+        <Dependencies packageMeta={packageMeta} />
+      </HashRouter>
+    );
+
+    // Then
+    // FIXME: currently MaterialUI chips do not support the children
+    // prop, therefore it is impossible to use proper links for
+    // dependencies. Those are for now clickable spans
+
+    expect(getByText('dependencies (2)')).toBeDefined();
+    expect(getByText('devDependencies (1)')).toBeDefined();
+    expect(getByText('peerDependencies (1)')).toBeDefined();
+    expect(screen.queryAllByText('dependencies.dependency-block')).toHaveLength(4);
+  });
+});

package/src/components/Dependencies/Dependencies.tsx

@@ -0,0 +1,111 @@
+import Box from '@mui/material/Box';
+import CardContent from '@mui/material/CardContent';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { PackageDependencies } from '../../types/packageMeta';
+import NoItems from '../NoItems';
+import { CardWrap, StyledText, Tag, Tags } from './styles';
+
+interface DependencyBlockProps {
+  title: string;
+  dependencies: PackageDependencies;
+}
+
+const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
+  const history = useHistory();
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const deps = Object.entries(dependencies);
+
+  function handleClick(name: string): void {
+    history.push(`/-/web/detail/${name}`);
+  }
+
+  return (
+    <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
+      <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
+        {`${title} (${deps.length})`}
+      </StyledText>
+      <Tags>
+        {deps.map(([name, version]) => (
+          <Tag
+            className={'dep-tag'}
+            clickable={true}
+            data-testid={name}
+            key={name}
+            label={t('dependencies.dependency-block', { package: name, version })}
+            // eslint-disable-next-line
+            onClick={() => handleClick(name)}
+          />
+        ))}
+      </Tags>
+    </Box>
+  );
+};
+
+function hasKeys(object?: { [key: string]: any }): boolean {
+  return !!object && Object.keys(object).length > 0;
+}
+
+const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+
+  if (!packageMeta) {
+    throw new Error(t('error.package-meta-is-required-at-detail-context'));
+  }
+
+  const { latest } = packageMeta;
+  // FIXME: add dependencies to package meta type
+  // @ts-ignore
+  const {
+    dependencies,
+    devDependencies,
+    peerDependencies,
+    optionalDependencies,
+    bundleDependencies,
+    name,
+  } = latest;
+  const dependencyMap = {
+    dependencies,
+    devDependencies,
+    peerDependencies,
+    bundleDependencies,
+    optionalDependencies,
+  };
+  const hasDependencies =
+    hasKeys(dependencies) ||
+    hasKeys(bundleDependencies) ||
+    hasKeys(optionalDependencies) ||
+    hasKeys(devDependencies) ||
+    hasKeys(peerDependencies);
+  if (hasDependencies) {
+    return (
+      <CardWrap>
+        <CardContent>
+          {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
+            if (!dependencies || Object.keys(dependencies).length === 0) {
+              return null;
+            }
+            return (
+              <>
+                <DependencyBlock
+                  dependencies={dependencies}
+                  key={dependencyType}
+                  title={dependencyType}
+                />
+              </>
+            );
+          })}
+        </CardContent>
+      </CardWrap>
+    );
+  }
+
+  return <NoItems text={t('dependencies.has-no-dependencies', { package: name })} />;
+};
+
+export default Dependencies;

package/src/components/Dependencies/index.ts

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

package/src/components/Dependencies/styles.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import Card from '@mui/material/Card';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+
+import { Theme } from '../../Theme';
+
+export const CardWrap = styled(Card)({
+  margin: '0 0 16px',
+});
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const Tags = styled('div')({
+  display: 'flex',
+  justifyContent: 'start',
+  flexWrap: 'wrap',
+  margin: '0 -5px',
+});
+
+export const Tag = styled(Chip)({
+  margin: '5px',
+});

package/src/components/Dependencies/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface Props {
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+}

package/src/components/Deprecated/Deprecated.stories.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { default as Deprecated } from '.';
+
+export default {
+  title: 'Components/Detail/Deprecated',
+};
+
+export const DeprecatedAll: any = () => <Deprecated message="this is deprecated" />;

package/src/components/Deprecated/Deprecated.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { cleanup, render, screen } from '../../test/test-react-testing-library';
+import Deprecated from './Deprecated';
+
+describe('test Deprecated', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const packageMeta = {
+    latest: {
+      packageName: 'foo',
+      version: '1.0.0',
+      deprecated: 'this is deprecated',
+      maintainers: [],
+      contributors: [],
+    },
+  };
+
+  test('should render the deprecated message', () => {
+    render(<Deprecated message={packageMeta.latest.deprecated} />);
+
+    expect(screen.getByText('this is deprecated')).toBeInTheDocument();
+  });
+});

package/src/components/Deprecated/Deprecated.tsx

@@ -0,0 +1,18 @@
+import Alert from '@mui/material/Alert';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+
+export type Props = {
+  message: string;
+};
+
+const Deprecated: React.FC<Props> = ({ message }) => {
+  const theme = useTheme();
+  return (
+    <Alert severity="warning" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
+      {message}
+    </Alert>
+  );
+};
+
+export default Deprecated;

package/src/components/Deprecated/index.ts

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

package/src/components/Developers/Developers.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { DeveloperType, default as Developers } from '.';
+
+export default {
+  title: 'Components/Sidebar/Developers',
+};
+
+export const DevelopersAll: any = () => (
+  <Developers
+    packageMeta={{
+      latest: {
+        packageName: 'foo',
+        version: '1.0.0',
+        contributors: [
+          {
+            name: 'dmethvin',
+            email: 'test@gmail.com',
+          },
+          {
+            name: 'dmethvin2',
+            email: 'test2@gmail.com',
+          },
+          {
+            name: 'dmethvin3',
+            email: 'test3@gmail.com',
+          },
+        ],
+      },
+    }}
+    type={DeveloperType.CONTRIBUTORS}
+  />
+);
+
+export const DevelopersLimited: any = () => (
+  <Developers
+    packageMeta={{
+      latest: {
+        packageName: 'foo',
+        version: '1.0.0',
+        contributors: [
+          {
+            name: 'dmethvin',
+            email: 'test@gmail.com',
+          },
+          {
+            name: 'dmethvin2',
+            email: 'test2@gmail.com',
+          },
+          {
+            name: 'dmethvin3',
+            email: 'test3@gmail.com',
+          },
+        ],
+      },
+    }}
+    type={DeveloperType.CONTRIBUTORS}
+    visibleMax={1}
+  />
+);

package/src/components/Developers/Developers.test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+
+import { cleanup, fireEvent, render } from '../../test/test-react-testing-library';
+import Developers from './Developers';
+import { DeveloperType } from './Title';
+
+describe('test Developers', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const packageMeta = {
+    latest: {
+      packageName: 'foo',
+      version: '1.0.0',
+      maintainers: [
+        {
+          name: 'dmethvin',
+          email: 'test@gmail.com',
+        },
+        {
+          name: 'mgol',
+          email: 'm.goleb@gmail.com',
+        },
+      ],
+      contributors: [
+        {
+          name: 'dmethvin',
+          email: 'test@gmail.com',
+        },
+        {
+          name: 'mgol',
+          email: 'm.goleb@gmail.com',
+        },
+      ],
+    },
+  };
+
+  test('should render the component with no items', () => {
+    const packageMeta = {
+      latest: {},
+    };
+    const wrapper = render(
+      <Developers packageMeta={packageMeta} type={DeveloperType.MAINTAINERS} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component for maintainers with items', () => {
+    const wrapper = render(
+      <Developers packageMeta={packageMeta} type={DeveloperType.MAINTAINERS} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component for contributors with items', () => {
+    const wrapper = render(
+      <Developers packageMeta={packageMeta} type={DeveloperType.CONTRIBUTORS} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should test onClick the component avatar', () => {
+    const packageMeta = {
+      latest: {
+        packageName: 'foo',
+        version: '1.0.0',
+        contributors: [
+          {
+            name: 'dmethvin',
+            email: 'test@gmail.com',
+          },
+          {
+            name: 'dmethvin2',
+            email: 'test2@gmail.com',
+          },
+          {
+            name: 'dmethvin3',
+            email: 'test3@gmail.com',
+          },
+        ],
+      },
+    };
+
+    const wrapper = render(
+      <Developers packageMeta={packageMeta} type={DeveloperType.CONTRIBUTORS} visibleMax={1} />
+    );
+
+    // const item2 = wrapper.find(Fab);
+    // // TODO: I am not sure here how to verify the method inside the component was called.
+    // item2.simulate('click');
+
+    expect(wrapper.getByText('sidebar.contributors.title')).toBeInTheDocument();
+    fireEvent.click(wrapper.getByRole('button'));
+
+    expect(wrapper.getByLabelText(packageMeta.latest.contributors[0].name)).toBeInTheDocument();
+    expect(wrapper.getByLabelText(packageMeta.latest.contributors[1].name)).toBeInTheDocument();
+  });
+});

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;