@verdaccio/ui-components 3.0.0-next.0 → 3.0.0-next.2

package/src/components/CopyClipboard/CopyToClipBoard.tsx

@@ -4,6 +4,7 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 
+import { Theme } from '../../Theme';
 import { copyToClipBoardUtility } from './utils';
 
 interface Props {
@@ -19,14 +20,14 @@ const Wrapper = styled('div')({
   justifyContent: 'space-between',
 });
 
-const Content = styled('span')({
+const Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'inline-block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   height: 'auto',
   whiteSpace: 'break-spaces',
-  fontSize: '1rem',
-});
+  fontSize: theme?.fontSize.sm,
+}));
 
 function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {
   return (

package/src/components/Deprecated/Deprecated.tsx

@@ -1,30 +1,17 @@
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import { styled } from '@mui/system';
+import Alert from '@mui/material/Alert';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 
-import { Theme } from '../../Theme';
-
-export const CardStyled = styled(Card)<{ theme?: Theme }>(({ theme }) => {
-  return {
-    marginTop: theme?.spacing(1),
-    marginBottom: theme?.spacing(0.5),
-    backgroundColor: theme?.palette?.error.light,
-    opacity: '0.9',
-    color: theme?.palette?.error.contrastText,
-    fontWeight: 'bold',
-  };
-});
-
 export type Props = {
   message: string;
 };
 
 const Deprecated: React.FC<Props> = ({ message }) => {
+  const theme = useTheme();
   return (
-    <CardStyled>
-      <CardContent>{message}</CardContent>
-    </CardStyled>
+    <Alert severity="warning" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
+      {message}
+    </Alert>
   );
 };
 

package/src/components/Engines/Engines.tsx

@@ -1,7 +1,7 @@
+import { Typography } from '@mui/material';
 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';
 
@@ -24,7 +24,7 @@ const EngineItem: FC<EngineItemProps> = ({ title, element, engineText }) => (
     <List subheader={<StyledText variant={'subtitle1'}>{title}</StyledText>}>
       <EngineListItem>
         <Avatar sx={{ bgcolor: '#FFF' }}>{element}</Avatar>
-        <ListItemText primary={engineText} />
+        <Typography variant="subtitle2">{engineText}</Typography>
       </EngineListItem>
     </List>
   </Grid>
@@ -68,7 +68,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
       {engines.npm ? (
         <EngineItem
           element={<Npm />}
-          engineText={engines.node}
+          engineText={engines.npm}
           title={t('sidebar.engines.npm-version')}
         />
       ) : null}
@@ -77,7 +77,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
         <EngineItem
           element={<Yarn />}
           engineText={engines.yarn}
-          title={t('sidebar.engines.npm-version')}
+          title={t('sidebar.engines.yarn-version')}
         />
       ) : null}
 
@@ -85,7 +85,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
         <EngineItem
           element={<Pnpm />}
           engineText={engines.pnpm}
-          title={t('sidebar.engines.npm-version')}
+          title={t('sidebar.engines.pnpm-version')}
         />
       ) : null}
     </Grid>

package/src/components/Install/Install.test.tsx

@@ -5,6 +5,7 @@ import { PackageManagers } from '@verdaccio/types';
 import { useConfig } from '../../providers';
 import { render, screen } from '../../test/test-react-testing-library';
 import Install from './Install';
+import { getGlobalInstall } from './InstallListItem';
 import data from './__partials__/data.json';
 
 const ComponentToBeRendered: React.FC<{ pkgManagers?: PackageManagers[] }> = () => {
@@ -16,12 +17,9 @@ const ComponentToBeRendered: React.FC<{ pkgManagers?: PackageManagers[] }> = ()
 describe('<Install />', () => {
   test('renders correctly', () => {
     render(<ComponentToBeRendered />);
-    expect(screen.getByText('sidebar.installation.install-using-pnpm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm-command')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn-command')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm-command')).toBeInTheDocument();
+    expect(screen.getByText('yarn add foo@8.0.0')).toBeInTheDocument();
+    expect(screen.getByText('pnpm install foo@8.0.0')).toBeInTheDocument();
+    expect(screen.getByText('npm install foo@8.0.0')).toBeInTheDocument();
   });
 
   test('should have 3 children', () => {
@@ -38,47 +36,41 @@ describe('<Install />', () => {
     render(<ComponentToBeRendered />);
 
     expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.queryByText('sidebar.installation.install-using-pnpm')).not.toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-yarn')).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm-command')).toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-yarn-command')
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-pnpm-command')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('yarn')).not.toBeInTheDocument();
+    expect(screen.getByText('npm install foo@8.0.0')).toBeInTheDocument();
   });
 
   test('should have the element YARN', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn'];
     render(<ComponentToBeRendered />);
     expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.queryByText('sidebar.installation.install-using-pnpm')).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn')).toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-npm')).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-npm-command')
-    ).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn-command')).toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-pnpm-command')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('npm')).not.toBeInTheDocument();
+    expect(screen.getByText('yarn add foo@8.0.0')).toBeInTheDocument();
   });
 
   test('should have the element PNPM', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['pnpm'];
     render(<ComponentToBeRendered />);
-    expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm')).toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-yarn')).not.toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-npm')).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-npm-command')
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-yarn-command')
-    ).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm-command')).toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('yarn')).not.toBeInTheDocument();
+    expect(screen.getByText('pnpm install foo@8.0.0')).toBeInTheDocument();
+  });
+});
+
+describe('getGlobalInstall', () => {
+  test('no global', () => {
+    expect(getGlobalInstall(false, 'foo', '1.0.0')).toEqual('1.0.0@foo');
+  });
+  test('global', () => {
+    expect(getGlobalInstall(true, 'foo', '1.0.0')).toEqual('-g 1.0.0@foo');
+  });
+
+  test('yarn no global', () => {
+    expect(getGlobalInstall(false, 'foo', '1.0.0', true)).toEqual('1.0.0@foo');
+  });
+  test('yarn global', () => {
+    expect(getGlobalInstall(true, 'foo', '1.0.0', true)).toEqual('1.0.0@foo');
   });
 });

package/src/components/Install/Install.tsx

@@ -27,7 +27,6 @@ export type Props = {
 const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-
   if (!packageMeta || !packageName) {
     return null;
   }
@@ -51,13 +50,25 @@ const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) =
         subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}
       >
         {hasNpm && (
-          <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.NPM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
         {hasYarn && (
-          <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.YARN}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
         {hasPnpm && (
-          <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.PNPM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
       </List>
     </>

package/src/components/Install/InstallListItem.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import Avatar from '@mui/material/Avatar';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
+import { useTheme } from '@mui/styles';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { useSettings } from '../../providers/PersistenceSettingProvider';
 import CopyToClipBoard from '../CopyClipboard';
@@ -35,78 +35,94 @@ export enum DependencyManager {
 interface Interface {
   packageName: string;
   dependencyManager: DependencyManager;
+  packageVersion?: string;
 }
 
-const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
-  const { t } = useTranslation();
+export function getGlobalInstall(isGlobal, packageVersion, packageName, isYarn = false) {
+  const name = isGlobal
+    ? `${isYarn ? '' : '-g'} ${packageVersion ? `${packageName}@${packageVersion}` : packageName}`
+    : packageVersion
+    ? `${packageName}@${packageVersion}`
+    : packageName;
+
+  return name.trim();
+}
+
+const InstallListItem: React.FC<Interface> = ({
+  packageName,
+  dependencyManager,
+  packageVersion,
+}) => {
   const { localSettings } = useSettings();
+  const theme = useTheme();
   const isGlobal = localSettings[packageName]?.global ?? false;
-  const pkgName = isGlobal ? `-g ${packageName}` : packageName;
-
   switch (dependencyManager) {
     case DependencyManager.NPM:
       return (
         <InstallItem data-testid={'installListItem-npm'}>
-          <PackageMangerAvatar alt="npm" sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt="npm" sx={{ bgcolor: theme.palette.white }}>
             <Npm />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
-                dataTestId="installYarn"
-                text={t('sidebar.installation.install-using-npm-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-npm-command', {
-                  packageName: pkgName,
-                })}
+                dataTestId="instalNpm"
+                text={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                title={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
               />
             }
-            secondary={t('sidebar.installation.install-using-npm')}
           />
         </InstallItem>
       );
     case DependencyManager.YARN:
       return (
         <InstallItem data-testid={'installListItem-yarn'}>
-          <PackageMangerAvatar alt="yarn" sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt="yarn" sx={{ bgcolor: theme.palette.white }}>
             <Yarn />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
                 dataTestId="installYarn"
-                text={t('sidebar.installation.install-using-yarn-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-yarn-command', {
-                  packageName: pkgName,
-                })}
+                text={
+                  isGlobal
+                    ? `yarn ${localSettings.yarnModern ? '' : 'global'} add ${getGlobalInstall(
+                        isGlobal,
+                        packageVersion,
+                        packageName,
+                        true
+                      )}`
+                    : `yarn add ${getGlobalInstall(isGlobal, packageVersion, packageName, true)}`
+                }
+                title={
+                  isGlobal
+                    ? `yarn global add ${getGlobalInstall(
+                        isGlobal,
+                        packageVersion,
+                        packageName,
+                        true
+                      )}`
+                    : `yarn add ${getGlobalInstall(isGlobal, packageVersion, packageName, true)}`
+                }
               />
             }
-            secondary={t('sidebar.installation.install-using-yarn')}
           />
         </InstallItem>
       );
     case DependencyManager.PNPM:
       return (
         <InstallItem data-testid={'installListItem-pnpm'}>
-          <PackageMangerAvatar alt={'pnpm'} sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt={'pnpm'} sx={{ bgcolor: theme.palette.white }}>
             <Pnpm />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
                 dataTestId="installPnpm"
-                text={t('sidebar.installation.install-using-pnpm-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-pnpm-command', {
-                  packageName: pkgName,
-                })}
+                text={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                title={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
               />
             }
-            secondary={t('sidebar.installation.install-using-pnpm')}
           />
         </InstallItem>
       );

package/src/components/Link/Link.tsx

@@ -15,15 +15,22 @@ export const CustomRouterLink = styled(RouterLink)`
 
 // TODO: improve any with custom types for a and RouterLink
 const Link = React.forwardRef<LinkRef, any>(function LinkFunction(
-  { external, to, children, variant, className },
+  { external, to, children, variant, className, onClick },
   ref
 ) {
   return external ? (
-    <a className={className} href={to} ref={ref} rel="noopener noreferrer" target="_blank">
+    <a
+      className={className}
+      href={to}
+      onClick={onClick}
+      ref={ref}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
       <Typography variant={variant ?? 'caption'}>{children}</Typography>
     </a>
   ) : (
-    <CustomRouterLink className={className} innerRef={ref} to={to}>
+    <CustomRouterLink className={className} innerRef={ref} onClick={onClick} to={to}>
       <Typography variant={variant}>{children}</Typography>
     </CustomRouterLink>
   );

package/src/components/Package/Package.tsx

@@ -4,6 +4,7 @@ import BugReport from '@mui/icons-material/BugReport';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import HomeIcon from '@mui/icons-material/Home';
 import { useTheme } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
 import Grid from '@mui/material/Grid';
 import ListItem from '@mui/material/ListItem';
 import Tooltip from '@mui/material/Tooltip';
@@ -71,6 +72,7 @@ const Package: React.FC<PackageInterface> = ({
   const dispatch = useDispatch<Dispatch>();
   const { t } = useTranslation();
   const theme = useTheme();
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.download);
 
   const handleDownload = useCallback(
     async (tarballDist: string) => {
@@ -163,7 +165,6 @@ const Package: React.FC<PackageInterface> = ({
     dist?.tarball &&
     url.isURL(dist.tarball) && (
       <Link
-        external={true}
         onClick={() => {
           handleDownload(dist.tarball);
         }}
@@ -174,7 +175,13 @@ const Package: React.FC<PackageInterface> = ({
           title={t('package.tarball')}
         >
           <IconButton aria-label={t('package.download')} size="large">
-            <DownloadIcon />
+            {isLoading ? (
+              <CircularProgress size={13}>
+                <DownloadIcon />
+              </CircularProgress>
+            ) : (
+              <DownloadIcon />
+            )}
           </IconButton>
         </Tooltip>
       </Link>
@@ -195,6 +202,7 @@ const Package: React.FC<PackageInterface> = ({
           container={true}
           item={true}
           justify="flex-end"
+          spacing={3}
           xs={true}
         >
           {renderHomePageLink()}

package/src/components/RawViewer/RawViewer.tsx

@@ -47,12 +47,7 @@ type Props = {
 const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) => {
   const { t } = useTranslation();
   return (
-    <Dialog
-      data-testid={'rawViewer--dialog'}
-      fullScreen={true}
-      id="raw-viewer--dialog-container"
-      open={isOpen}
-    >
+    <Dialog data-testid={'rawViewer--dialog'} fullScreen={true} open={isOpen}>
       <ViewerTitle id="viewer-title" onClose={onClose}>
         {t('action-bar-action.raw')}
       </ViewerTitle>

package/src/components/Readme/Readme.tsx

@@ -1,30 +1,19 @@
-import styled from '@emotion/styled';
-import 'github-markdown-css';
 import 'highlight.js/styles/default.css';
 import React from 'react';
 
-import { Theme } from '../../Theme';
+import { useCustomTheme } from '../../';
+import ReadmeDark from './ReadmeDark';
+import ReadmeLight from './ReadmeLight';
 import { Props } from './types';
-import { parseReadme } from './utils';
 
 const Readme: React.FC<Props> = ({ description }) => {
-  return (
-    <Wrapper
-      className="markdown-body"
-      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
-    />
+  // @ts-ignore
+  const { isDarkMode } = useCustomTheme();
+
+  return isDarkMode ? (
+    <ReadmeDark description={description} />
+  ) : (
+    <ReadmeLight description={description} />
   );
 };
 export default Readme;
-
-const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: theme?.palette.white,
-  color: theme?.palette.black,
-  padding: theme?.spacing(2, 3),
-  ul: {
-    listStyle: 'disc',
-  },
-  img: {
-    maxWidth: '100%',
-  },
-}));

package/src/components/Readme/ReadmeDark.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import cx from 'classnames';
+import 'highlight.js/styles/default.css';
+import React from 'react';
+
+import { Theme } from '../../Theme';
+// @ts-ignore
+import styles from './github-markdown-dark.css';
+import { Props } from './types';
+import { parseReadme } from './utils';
+
+const Readme: React.FC<Props> = ({ description }) => {
+  return (
+    <Wrapper
+      className={cx('markdown-body', styles['markdown-body'])}
+      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+    />
+  );
+};
+export default Readme;
+
+const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.white,
+  color: theme?.palette.black,
+  padding: theme?.spacing(2, 3),
+  ul: {
+    listStyle: 'disc',
+  },
+  img: {
+    maxWidth: '100%',
+  },
+}));

package/src/components/Readme/ReadmeLight.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import cx from 'classnames';
+import 'highlight.js/styles/default.css';
+import React from 'react';
+
+import { Theme } from '../../Theme';
+// @ts-ignore
+import styles from './github-markdown-light.css';
+import { Props } from './types';
+import { parseReadme } from './utils';
+
+const Readme: React.FC<Props> = ({ description }) => {
+  return (
+    <Wrapper
+      className={cx('markdown-body', styles['markdown-body'])}
+      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+    />
+  );
+};
+export default Readme;
+
+const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.white,
+  color: theme?.palette.black,
+  padding: theme?.spacing(2, 3),
+  ul: {
+    listStyle: 'disc',
+  },
+  img: {
+    maxWidth: '100%',
+  },
+}));