@verdaccio/ui-components 2.0.0-6-next.8 → 2.0.0-6-next.10

package/src/components/CopyClipboard/CopyToClipBoard.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import CopyToClipBoard from './CopyToClipBoard';
 
 export default {
-  title: 'CopyToClipBoard',
+  title: 'Components/Sidebar/CopyToClipBoard',
   component: CopyToClipBoard,
   argTypes: {
     backgroundColor: { control: 'color' },

package/src/components/CopyClipboard/CopyToClipBoard.tsx

@@ -34,12 +34,12 @@ function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props)
       <Content>{children ?? text}</Content>
       {title ? (
         <Tooltip disableFocusListener={true} title={title}>
-          <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="large">
+          <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="small">
             <FileCopy fontSize="small" />
           </IconButton>
         </Tooltip>
       ) : (
-        <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="large">
+        <IconButton data-testid={dataTestId} onClick={copyToClipBoardUtility(text)} size="small">
           <FileCopy fontSize="small" />
         </IconButton>
       )}

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

@@ -1,58 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { default as Dependencies } from '.';
 
-export default {
-  title: 'Dependencies  ',
+const meta: Meta<typeof Dependencies> = {
+  title: 'Components/Detail/Dependencies',
+  component: Dependencies,
 };
 
-export const DeprecatedAll: any = () => (
-  <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: {
-          react: '16.9.0',
-          'react-dom': '16.9.0',
-        },
-        devDependencies: {
-          'babel-core': '7.0.0-beta6',
-        },
-        peerDependencies: {
-          'styled-components': '5.0.0',
-        },
-      },
-      _uplinks: {},
-    }}
-  />
-);
+export default meta;
+type Story = StoryObj<typeof Dependencies>;
 
-export const NoDependencies: any = () => (
-  <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: {},
-    }}
-  />
-);
+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.tsx

@@ -1,4 +1,6 @@
+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';
@@ -10,44 +12,38 @@ import { CardWrap, StyledText, Tag, Tags } from './styles';
 interface DependencyBlockProps {
   title: string;
   dependencies: PackageDependencies;
-  enableLoading?: () => void;
 }
 
-const DependencyBlock: React.FC<DependencyBlockProps> = ({
-  title,
-  dependencies,
-  enableLoading,
-}) => {
+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 {
-    enableLoading?.();
-
     history.push(`/-/web/detail/${name}`);
   }
 
   return (
-    <CardWrap data-testid={title}>
-      <CardContent>
-        <StyledText 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>
-      </CardContent>
-    </CardWrap>
+    <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>
   );
 };
 
@@ -65,37 +61,51 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { latest } = packageMeta;
   // FIXME: add dependencies to package meta type
   // @ts-ignore
-  const { dependencies, devDependencies, peerDependencies, name } = latest;
-  const dependencyMap = { dependencies, devDependencies, peerDependencies };
+  const {
+    dependencies,
+    devDependencies,
+    peerDependencies,
+    optionalDependencies,
+    bundleDependencies,
+    name,
+  } = latest;
+  const dependencyMap = {
+    dependencies,
+    devDependencies,
+    peerDependencies,
+    bundleDependencies,
+    optionalDependencies,
+  };
   const hasDependencies =
-    hasKeys(dependencies) || hasKeys(devDependencies) || hasKeys(peerDependencies);
-
+    hasKeys(dependencies) ||
+    hasKeys(bundleDependencies) ||
+    hasKeys(optionalDependencies) ||
+    hasKeys(devDependencies) ||
+    hasKeys(peerDependencies);
   if (hasDependencies) {
     return (
-      <>
-        {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
-          if (!dependencies || Object.keys(dependencies).length === 0) {
-            return null;
-          }
-
-          return (
-            <DependencyBlock
-              dependencies={dependencies}
-              key={dependencyType}
-              title={dependencyType}
-            />
-          );
-        })}
-      </>
+      <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
-      className="no-dependencies"
-      text={t('dependencies.has-no-dependencies', { package: name })}
-    />
-  );
+  return <NoItems text={t('dependencies.has-no-dependencies', { package: name })} />;
 };
 
 export default Dependencies;

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

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

package/src/components/Deprecated/Deprecated.tsx

@@ -1,6 +1,6 @@
-import styled from '@emotion/styled';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
+import { styled } from '@mui/system';
 import React from 'react';
 
 import { Theme } from '../../Theme';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { DeveloperType, default as Developers } from '.';
 
 export default {
-  title: 'Developers',
+  title: 'Components/Sidebar/Developers',
 };
 
 export const DevelopersAll: any = () => (

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

@@ -3,10 +3,10 @@ import React from 'react';
 import { default as Dist } from '.';
 
 export default {
-  title: 'Dist',
+  title: 'Components/Sidebar/Dist',
 };
 
-export const DistFileAll: any = () => (
+export const AllProperties: any = () => (
   <Dist
     packageMeta={{
       latest: {
@@ -16,7 +16,50 @@ export const DistFileAll: any = () => (
           fileCount: 7,
           unpackedSize: 10,
         },
-        license: '',
+        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

@@ -14,7 +14,7 @@ describe('<Dist /> component', () => {
   });
 
   test('should render the component in default state', () => {
-    const wrapper = render(
+    const { getByText } = render(
       withDistComponent({
         latest: {
           name: 'verdaccio1',
@@ -28,11 +28,16 @@ describe('<Dist /> component', () => {
         _uplinks: {},
       })
     );
-    expect(wrapper).toMatchSnapshot();
+    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 wrapper = render(
+    const { getByText } = render(
       withDistComponent({
         latest: {
           name: 'verdaccio2',
@@ -46,11 +51,11 @@ describe('<Dist /> component', () => {
         _uplinks: {},
       })
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(getByText('MIT', { exact: false })).toBeInTheDocument();
   });
 
   test('should render the component with license as object', () => {
-    const wrapper = render(
+    const { getByText } = render(
       withDistComponent({
         latest: {
           name: 'verdaccio3',
@@ -67,6 +72,28 @@ describe('<Dist /> component', () => {
         _uplinks: {},
       })
     );
-    expect(wrapper).toMatchSnapshot();
+    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

@@ -25,23 +25,31 @@ const DistChip: FC<{ name: string; children?: React.ReactElement | string }> = (
 const Dist: FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
-  if (!packageMeta) {
+  if (!packageMeta?.latest) {
     return null;
   }
 
-  const { dist, license } = packageMeta && packageMeta.latest;
+  const { dist, license } = packageMeta.latest;
+
+  if (!dist && !license) {
+    return null;
+  }
 
   return (
     <List
       subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}
     >
       <DistListItem>
-        <DistChip name={t('sidebar.distribution.file-count')}>{`${dist.fileCount}`}</DistChip>
-        {dist.unpackedSize ? (
+        {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)}</DistChip>
+        <DistChip name={t('sidebar.distribution.license')}>
+          {formatLicense(license as string)}
+        </DistChip>
       </DistListItem>
     </List>
   );

package/src/components/Distribution/utils.ts

@@ -1,10 +1,11 @@
+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
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export function formatLicense(license: any): string | undefined {
+export function formatLicense(license: string | LicenseInterface): string | undefined {
   if (typeof license === 'string') {
     return license;
   }

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { default as Engines } from '.';
 
 export default {
-  title: 'Engines',
+  title: 'Components/Sidebar/Engines',
 };
 
 export const EnginesNpmNode: any = () => (