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

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

@@ -0,0 +1,58 @@
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Avatar from 'verdaccio-ui/components/Avatar';
+import Grid from 'verdaccio-ui/components/Grid';
+import List from 'verdaccio-ui/components/List';
+import ListItemText from 'verdaccio-ui/components/ListItemText';
+
+import { DetailContext } from '../../context';
+import npm from '../Install/img/npm.svg';
+
+import node from './img/node.png';
+import { StyledText, EngineListItem } from './styles';
+
+const Engine: React.FC = () => {
+  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();
+
+  const engines = packageMeta?.latest?.engines;
+
+  if (!engines || (!engines.node && !engines.npm)) {
+    return null;
+  }
+
+  return (
+    <Grid container={true}>
+      {engines.node && (
+        <Grid item={true} xs={6}>
+          <List
+            subheader={
+              <StyledText variant={'subtitle1'}>{t('sidebar.engines.node-js')}</StyledText>
+            }>
+            <EngineListItem button={true}>
+              <Avatar src={node} />
+              <ListItemText primary={engines.node} />
+            </EngineListItem>
+          </List>
+        </Grid>
+      )}
+
+      {engines.npm && (
+        <Grid item={true} xs={6}>
+          <List
+            subheader={
+              <StyledText variant={'subtitle1'}>{t('sidebar.engines.npm-version')}</StyledText>
+            }>
+            <EngineListItem button={true}>
+              <Avatar src={npm} />
+              <ListItemText primary={engines.npm} />
+            </EngineListItem>
+          </List>
+        </Grid>
+      )}
+    </Grid>
+  );
+};
+
+export default Engine;

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

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

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

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+import ListItem from 'verdaccio-ui/components/ListItem';
+import Text from 'verdaccio-ui/components/Text';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const EngineListItem = styled(ListItem)({
+  paddingLeft: 0,
+});

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

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { render, screen } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContext } from '../../context';
+import { DetailContextProps } from '../../version-config';
+
+import data from './__partials__/data.json';
+import Install from './Install';
+
+const detailContextValue: Partial<DetailContextProps> = {
+  packageName: 'foo',
+  packageMeta: data,
+};
+
+const ComponentToBeRendered: React.FC = () => (
+  <DetailContext.Provider value={detailContextValue}>
+    <Install />
+  </DetailContext.Provider>
+);
+
+/* eslint-disable react/jsx-no-bind*/
+describe('<Install />', () => {
+  test('renders correctly', () => {
+    render(<ComponentToBeRendered />);
+    expect(screen.getByText('pnpm install foo')).toBeInTheDocument();
+    expect(screen.getByText('yarn add foo')).toBeInTheDocument();
+    expect(screen.getByText('npm install foo')).toBeInTheDocument();
+  });
+
+  test('should have 3 children', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn', 'pnpm', 'npm'];
+    const { getByTestId } = render(<ComponentToBeRendered />);
+    const installListItems = getByTestId('installList');
+    // installitems + subHeader = 4
+    expect(installListItems.children.length).toBe(4);
+  });
+
+  test('should have the element NPM', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['npm'];
+    const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
+    expect(getByTestId('installListItem-npm')).toBeTruthy();
+    expect(queryByText(`npm install ${detailContextValue.packageName}`)).toBeTruthy();
+    expect(queryByText('Install using npm')).toBeTruthy();
+    expect(screen.queryByText('pnpm install foo')).not.toBeInTheDocument();
+    expect(screen.queryByText('yarn add foo')).not.toBeInTheDocument();
+  });
+
+  test('should have the element YARN', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn'];
+    const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
+    expect(getByTestId('installListItem-yarn')).toBeTruthy();
+    expect(queryByText(`yarn add ${detailContextValue.packageName}`)).toBeTruthy();
+    expect(queryByText('Install using yarn')).toBeTruthy();
+  });
+
+  test('should have the element PNPM', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['pnpm'];
+    const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
+    expect(getByTestId('installListItem-pnpm')).toBeTruthy();
+    expect(queryByText(`pnpm install ${detailContextValue.packageName}`)).toBeTruthy();
+    expect(queryByText('Install using pnpm')).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import List from 'verdaccio-ui/components/List';
+import Text from 'verdaccio-ui/components/Text';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { useConfig } from 'verdaccio-ui/providers/config';
+
+import { DetailContext } from '../..';
+
+import InstallListItem, { DependencyManager } from './InstallListItem';
+
+const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+const Install: React.FC = () => {
+  const { t } = useTranslation();
+  const { configOptions } = useConfig();
+  const detailContext = useContext(DetailContext);
+
+  const { packageMeta, packageName } = detailContext;
+
+  if (!packageMeta || !packageName) {
+    return null;
+  }
+
+  const hasNpm = configOptions?.pkgManagers?.includes('npm');
+  const hasYarn = configOptions?.pkgManagers?.includes('yarn');
+  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm') ?? true;
+  const hasPkgManagers = hasNpm | hasPnpm | hasYarn;
+
+  return hasPkgManagers ? (
+    <List
+      data-testid={'installList'}
+      subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}>
+      {hasNpm && (
+        <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
+      )}
+      {hasYarn && (
+        <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
+      )}
+      {hasPnpm && (
+        <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
+      )}
+    </List>
+  ) : null;
+};
+
+export default Install;

package/src/pages/Version/DetailSidebar/Install/InstallListItem.tsx

@@ -0,0 +1,97 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Avatar from 'verdaccio-ui/components/Avatar';
+import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
+import ListItem from 'verdaccio-ui/components/ListItem';
+import ListItemText from 'verdaccio-ui/components/ListItemText';
+
+// logos of package managers
+import npmLogo from './img/npm.svg';
+import pnpmLogo from './img/pnpm.svg';
+import yarnLogo from './img/yarn.svg';
+
+const InstallItem = styled(ListItem)({
+  padding: 0,
+  ':hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+const InstallListItemText = styled(ListItemText)({
+  padding: '0 10px',
+  margin: 0,
+});
+
+const PackageMangerAvatar = styled(Avatar)({
+  borderRadius: '0px',
+  padding: '0',
+  img: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export enum DependencyManager {
+  NPM = 'npm',
+  YARN = 'yarn',
+  PNPM = 'pnpm',
+}
+
+interface Interface {
+  packageName: string;
+  dependencyManager: DependencyManager;
+}
+
+const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
+  const { t } = useTranslation();
+
+  switch (dependencyManager) {
+    case DependencyManager.NPM:
+      return (
+        <InstallItem button={true} data-testid={'installListItem-npm'}>
+          <PackageMangerAvatar alt="npm" src={npmLogo} />
+          <InstallListItemText
+            primary={
+              <CopyToClipBoard
+                text={t('sidebar.installation.install-using-npm-command', { packageName })}
+              />
+            }
+            secondary={t('sidebar.installation.install-using-npm')}
+          />
+        </InstallItem>
+      );
+    case DependencyManager.YARN:
+      return (
+        <InstallItem button={true} data-testid={'installListItem-yarn'}>
+          <PackageMangerAvatar alt="yarn" src={yarnLogo} />
+          <InstallListItemText
+            primary={
+              <CopyToClipBoard
+                text={t('sidebar.installation.install-using-yarn-command', { packageName })}
+              />
+            }
+            secondary={t('sidebar.installation.install-using-yarn')}
+          />
+        </InstallItem>
+      );
+    case DependencyManager.PNPM:
+      return (
+        <InstallItem button={true} data-testid={'installListItem-pnpm'}>
+          <PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} />
+          <InstallListItemText
+            primary={
+              <CopyToClipBoard
+                text={t('sidebar.installation.install-using-pnpm-command', { packageName })}
+              />
+            }
+            secondary={t('sidebar.installation.install-using-pnpm')}
+          />
+        </InstallItem>
+      );
+    default:
+      return null;
+  }
+};
+
+export default InstallListItem;