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

package/src/components/Icons/Icons.stories.tsx

@@ -0,0 +1,37 @@
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import React from 'react';
+
+import {
+  CommonJS,
+  ES6Modules,
+  Earth,
+  Git,
+  Law,
+  License,
+  NodeJS,
+  Time,
+  TypeScript,
+  Version,
+} from '.';
+
+export default {
+  title: 'Components/Icons/Overview',
+};
+
+export const Icons: any = () => (
+  <Box sx={{ width: '100%' }}>
+    <Stack spacing={2}>
+      <NodeJS />
+      <Git />
+      <Version />
+      <TypeScript />
+      <Time />
+      <License />
+      <Law />
+      <ES6Modules />
+      <CommonJS />
+      <Earth />
+    </Stack>
+  </Box>
+);

package/src/components/Icons/Law.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { SvgIcon } from './SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const Law = React.forwardRef(function Law(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path
+        d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z"
+        fillRule="evenodd"
+      />
+    </SvgIcon>
+  );
+});
+
+Law.displayName = 'Law';
+
+export { Law };

package/src/components/Icons/License.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { SvgIcon } from './SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const License = React.forwardRef(function License(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon viewBox="0 0 490.652 490.652" {...props} ref={ref}>
+      <path d="M456.607 9.904H34.04C15.269 9.904 0 25.17 0 43.945V310.17c0 18.77 15.269 34.039 34.04 34.039h260.642c-4.043-10.35-6.534-21.737-7.159-33.742l-253.974-.297.491-266.718 423.063.493V310.17c0 .279-.23.492-.495.492l-15.251-.019c-.637 11.942-3.111 23.263-7.138 33.565h22.389c18.777 0 34.045-15.27 34.045-34.039V43.945c-.001-18.775-15.268-34.041-34.046-34.041z" />
+      <path d="M364.447 381.02c33.354 0 60.386-34.152 60.386-76.289 0-42.131-27.031-76.284-60.386-76.284-33.35 0-60.38 34.153-60.38 76.284 0 42.137 27.031 76.289 60.38 76.289zM81.087 118.345h149.561c9.273 0 16.776-7.499 16.776-16.772 0-9.271-7.504-16.775-16.776-16.775H81.087c-9.271 0-16.771 7.504-16.771 16.775 0 9.273 7.499 16.772 16.771 16.772zm334.08 58.716c0-9.273-7.505-16.779-16.776-16.779H81.087c-9.271 0-16.771 7.506-16.771 16.779 0 9.271 7.499 16.77 16.771 16.77h317.304c9.271 0 16.776-7.498 16.776-16.77zm-334.08 58.707c-9.271 0-16.771 7.504-16.771 16.771 0 9.273 7.499 16.777 16.771 16.777h149.561c9.273 0 16.776-7.504 16.776-16.777 0-9.268-7.504-16.771-16.776-16.771H81.087zm334.338 138.684c-.065.082-23.295 26.869-55.728 23.081l40.331 81.577a2.93 2.93 0 002.637 1.639h.215a2.95 2.95 0 002.571-2.031l10.174-31.234a3.024 3.024 0 011.488-1.728 3.07 3.07 0 012.28-.13l30.977 10.88c.324.112.651.163.98.163.836 0 1.623-.348 2.195-.982.803-.9.964-2.18.441-3.244l-38.561-77.991zm-101.772.146c-.049-.047-.118-.096-.185-.146l-38.561 77.973a2.953 2.953 0 00.448 3.262 2.961 2.961 0 003.174.819l30.978-10.88c.328-.113.658-.16.982-.16.442 0 .884.096 1.294.29.706.36 1.245.987 1.493 1.741l10.173 31.221c.378 1.133 1.391 1.936 2.572 2.014h.21a2.95 2.95 0 002.642-1.621l26.206-53.01-16.755-33.893c-.066-.034-14.672-5.884-24.671-17.61z" />
+    </SvgIcon>
+  );
+});
+
+License.displayName = 'License';
+
+export { License };

package/src/components/Icons/Managers/Npm.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import React from 'react';
+
+const icon = require('./npm.svg');
+
+const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
+export function Npm() {
+  return <ImgIcon alt="npm package manager" height="20" src={icon} width="20" />;
+}

package/src/components/Icons/Managers/Pnpm.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import React from 'react';
+
+const icon = require('./pnpm.svg');
+
+const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
+export function Pnpm() {
+  return <ImgIcon alt="pnpm package manager" height="20" src={icon} width="20" />;
+}

package/src/components/Icons/Managers/Yarn.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { Theme } from '@mui/material';
+import React from 'react';
+
+const icon = require('./yarn.svg');
+
+const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
+export function Yarn() {
+  return <ImgIcon alt="npm package manager" height="20" src={icon} width="20" />;
+}

package/src/components/Icons/Managers/index.ts

@@ -0,0 +1,3 @@
+export { Npm } from './Npm';
+export { Pnpm } from './Pnpm';
+export { Yarn } from './Yarn';

package/src/components/Icons/Managers/npm.svg

@@ -0,0 +1,15 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<polygon fill="#CC0000" points="23,65.6 130,3.3 237,65.6 237,190.1 130,252.4 23,190.1 "/>
+<polygon fill="#FFFFFF" points="133,127.8 232.5,70.5 236.5,186 133,248.5 "/>
+<g>
+	<path fill="#CC0000" d="M234,67l-0.3,122.4l-103.8,60.2l-0.5-120.3L234,67z M146.7,139.3l0.3,80.4l34.5-20.1l-0.1-60.6l17.4-10.3
+		l0,60.8l17.4-10.2l0.1-81.4L146.7,139.3z"/>
+</g>
+<path fill="#910505" d="M136.8,4.2c-4.8-2.7-12.5-2.7-17.3,0L24.7,58.7c-4.8,2.7-8.6,9.5-8.6,14.9v109c0,5.5,3.9,12.2,8.6,14.9
+	l94.8,54.5c4.8,2.7,12.5,2.7,17.3,0l94.8-54.5c4.8-2.7,8.6-9.5,8.6-14.9v-109c0-5.5-3.9-12.2-8.6-14.9L136.8,4.2z M220.9,61.2
+	c4.8,2.7,4.8,7.2,0,9.9l-83,47.7c-4.8,2.7-12.5,2.7-17.3,0L36.4,70.4c-4.8-2.7-4.8-7.2,0-9.9l83-47.7c4.8-2.7,12.5-2.7,17.3,0
+	L220.9,61.2z M23.5,81.5c0-5.5,3.9-7.7,8.6-5l84.9,48.8c4.8,2.7,8.6,9.5,8.6,14.9V237c0,5.5-3.9,7.7-8.6,5l-84.9-48.8
+	c-4.8-2.7-8.6-9.5-8.6-14.9V81.5z M141.8,240.5c-4.8,2.7-8.6,0.5-8.6-5v-95.3c0-5.5,3.9-12.2,8.6-14.9L224.2,78
+	c4.8-2.7,8.6-0.5,8.6,5v95.3c0,5.5-3.9,12.2-8.6,14.9L141.8,240.5z"/>
+</svg>

package/src/components/Icons/Managers/pnpm.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="66.09157809474142 33.5 184.5 184.49999999999997" width="180" height="180"><defs><path d="M67.59 35L247.59 35L247.59 215L67.59 215L67.59 35Z" id="b2JZZcA3fT"></path><path d="M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z" id="bj0tb0Y8q"></path><path d="M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z" id="dkDSTzPj3"></path><path d="M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z" id="a4vNdcNLpF"></path><path d="M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z" id="h2t4Zj1jSU"></path><path d="M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z" id="b4t5pngwvT"></path><path d="M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z" id="b9s1gd5m2"></path><path d="M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z" id="cmt9WLvz7"></path><path d="M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z" id="bJUNqgFSg"></path></defs><g><g><use xlink:href="#b2JZZcA3fT" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#bj0tb0Y8q" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#dkDSTzPj3" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#a4vNdcNLpF" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#h2t4Zj1jSU" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#b4t5pngwvT" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#b9s1gd5m2" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#cmt9WLvz7" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#bJUNqgFSg" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g></g></svg>

package/src/components/Icons/Managers/yarn.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 518 518"><style>.st0{fill:#2c8ebb}.st1{fill:#fff}</style><path class="st0" d="M259 0c143 0 259 116 259 259S402 518 259 518 0 402 0 259 116 0 259 0z"/><path class="st1" d="M435.2 337.5c-1.8-14.2-13.8-24-29.2-23.8-23 .3-42.3 12.2-55.1 20.1-5 3.1-9.3 5.4-13 7.1.8-11.6.1-26.8-5.9-43.5-7.3-20-17.1-32.3-24.1-39.4 8.1-11.8 19.2-29 24.4-55.6 4.5-22.7 3.1-58-7.2-77.8-2.1-4-5.6-6.9-10-8.1-1.8-.5-5.2-1.5-11.9.4C293.1 96 289.6 93.8 286.9 92c-5.6-3.6-12.2-4.4-18.4-2.1-8.3 3-15.4 11-22.1 25.2-1 2.1-1.9 4.1-2.7 6.1-12.7.9-32.7 5.5-49.6 23.8-2.1 2.3-6.2 4-10.5 5.6h.1c-8.8 3.1-12.8 10.3-17.7 23.3-6.8 18.2.2 36.1 7.1 47.7-9.4 8.4-21.9 21.8-28.5 37.5-8.2 19.4-9.1 38.4-8.8 48.7-7 7.4-17.8 21.3-19 36.9-1.6 21.8 6.3 36.6 9.8 42 1 1.6 2.1 2.9 3.3 4.2-.4 2.7-.5 5.6.1 8.6 1.3 7 5.7 12.7 12.4 16.3 13.2 7 31.6 10 45.8 2.9 5.1 5.4 14.4 10.6 31.3 10.6h1c4.3 0 58.9-2.9 74.8-6.8 7.1-1.7 12-4.7 15.2-7.4 10.2-3.2 38.4-12.8 65-30 18.8-12.2 25.3-14.8 39.3-18.2 13.6-3.3 22.1-15.7 20.4-29.4zm-23.8 14.7c-16 3.8-24.1 7.3-43.9 20.2-30.9 20-64.7 29.3-64.7 29.3s-2.8 4.2-10.9 6.1c-14 3.4-66.7 6.3-71.5 6.4-12.9.1-20.8-3.3-23-8.6-6.7-16 9.6-23 9.6-23s-3.6-2.2-5.7-4.2c-1.9-1.9-3.9-5.7-4.5-4.3-2.5 6.1-3.8 21-10.5 27.7-9.2 9.3-26.6 6.2-36.9.8-11.3-6 .8-20.1.8-20.1s-6.1 3.6-11-3.8c-4.4-6.8-8.5-18.4-7.4-32.7 1.2-16.3 19.4-32.1 19.4-32.1s-3.2-24.1 7.3-48.8c9.5-22.5 35.1-40.6 35.1-40.6s-21.5-23.8-13.5-45.2c5.2-14 7.3-13.9 9-14.5 6-2.3 11.8-4.8 16.1-9.5 21.5-23.2 48.9-18.8 48.9-18.8s13-39.5 25-31.8c3.7 2.4 17 32 17 32s14.2-8.3 15.8-5.2c8.6 16.7 9.6 48.6 5.8 68-6.4 32-22.4 49.2-28.8 60-1.5 2.5 17.2 10.4 29 43.1 10.9 29.9 1.2 55 2.9 57.8.3.5.4.7.4.7s12.5 1 37.6-14.5c13.4-8.3 29.3-17.6 47.4-17.8 17.5-.3 18.4 20.2 5.2 23.4z"/></svg>

package/src/components/Icons/SvgIcon.tsx

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import { default as MaterialUISvgIcon, SvgIconProps } from '@mui/material/SvgIcon';
+import React from 'react';
+
+type Size = 'sm' | 'md';
+
+type Props = Omit<SvgIconProps, 'color' | 'fontsize' | 'name'> & {
+  size?: Size;
+  title?: string;
+  className?: string;
+};
+
+const SvgIcon = React.forwardRef<SVGSVGElement, Props>(function SvgIcon(
+  { size = 'md', title, ...props },
+  ref
+) {
+  // eslint-disable-next-line verdaccio/jsx-spread
+  return <StyledMaterialUISvgIcon size={size} titleAccess={title} {...props} ref={ref} />;
+});
+
+export { SvgIcon };
+
+const getSize = (size: Size) => {
+  if (size === 'md') {
+    return {
+      width: 18,
+      height: 18,
+    };
+  }
+
+  return {
+    width: 14,
+    height: 16,
+  };
+};
+
+const StyledMaterialUISvgIcon = styled(MaterialUISvgIcon)<{ size: Size }>(({ size }) => ({
+  ...getSize(size),
+}));

package/src/components/Icons/Time.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SvgIcon } from './SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const Time = React.forwardRef(function Time(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon viewBox="0 0 24 24" {...props} ref={ref}>
+      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+    </SvgIcon>
+  );
+});
+
+Time.displayName = 'Time';
+
+export { Time };

package/src/components/Icons/Version.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { SvgIcon } from './SvgIcon';
+
+type Props = React.ComponentProps<typeof SvgIcon>;
+
+const Version = React.forwardRef(function Version(props: Props, ref: React.Ref<SVGSVGElement>) {
+  return (
+    <SvgIcon height={16} viewBox="0 0 14 16" width={14} {...props} ref={ref}>
+      <path
+        d="M13 3H7c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H8V5h4v6zM4 4h1v1H4v6h1v1H4c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1zM1 5h1v1H1v4h1v1H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1z"
+        fillRule="evenodd"
+      />
+    </SvgIcon>
+  );
+});
+
+Version.displayName = 'Version';
+
+export { Version };

package/src/components/Icons/index.ts

@@ -0,0 +1,8 @@
+export { Version } from './Version';
+export { Time } from './Time';
+export { FileBinary } from './FileBinary';
+export { Law } from './Law';
+export { License } from './License';
+export { Earth } from './Earth';
+export * from './DevsIcons';
+export * from './Managers';

package/src/components/Install/Install.stories.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { default as Install } from '.';
+import { useConfig } from '../../';
+
+const meta: Meta<typeof Install> = {
+  title: 'Components/Sidebar/Install',
+  component: Install,
+};
+
+export default meta;
+type Story = StoryObj<typeof Install>;
+
+const packageMeta = {
+  _uplinks: {},
+  latest: {
+    name: 'verdaccio-ui/local-storage',
+    version: '8.0.1-next.1',
+    dist: {
+      fileCount: 0,
+      unpackedSize: 0,
+      tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+    },
+    homepage: 'https://verdaccio.org',
+    bugs: {
+      url: 'https://github.com/verdaccio/monorepo/issues',
+    },
+  },
+};
+
+export const Primary: Story = {
+  name: 'Default',
+  render: () => {
+    const { configOptions } = useConfig();
+    return (
+      <Install
+        configOptions={{ ...configOptions, pkgManagers: ['npm', 'yarn', 'pnpm'] }}
+        packageMeta={packageMeta}
+        packageName="jquery"
+      />
+    );
+  },
+};
+
+export const npmOnly: Story = {
+  name: 'Only NPM',
+  render: () => {
+    const { configOptions } = useConfig();
+    return (
+      <Install
+        configOptions={{ ...configOptions, pkgManagers: ['npm'] }}
+        packageMeta={packageMeta}
+        packageName="jquery"
+      />
+    );
+  },
+};
+
+export const yarnOnly: Story = {
+  name: 'Only Yarn',
+  render: () => {
+    const { configOptions } = useConfig();
+    return (
+      <Install
+        configOptions={{ ...configOptions, pkgManagers: ['yarn'] }}
+        packageMeta={packageMeta}
+        packageName="jquery"
+      />
+    );
+  },
+};
+
+export const pnpmOnly: Story = {
+  name: 'Only Pnpm',
+  render: () => {
+    const { configOptions } = useConfig();
+    return (
+      <Install
+        configOptions={{ ...configOptions, pkgManagers: ['pnpm'] }}
+        packageMeta={packageMeta}
+        packageName="jquery"
+      />
+    );
+  },
+};

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

@@ -0,0 +1,76 @@
+import React from 'react';
+
+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[] }> = () => {
+  const { configOptions } = useConfig();
+  return <Install configOptions={configOptions} packageMeta={data} packageName="foo" />;
+};
+
+/* eslint-disable react/jsx-no-bind*/
+describe('<Install />', () => {
+  test('renders correctly', () => {
+    render(<ComponentToBeRendered />);
+    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', () => {
+    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'];
+
+    render(<ComponentToBeRendered />);
+
+    expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
+    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('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.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

@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+import { Typography } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { TemplateUIOptions } from '@verdaccio/types';
+
+import { Theme } from '../../Theme';
+import { PackageMetaInterface } from '../../types/packageMeta';
+import { SettingsMenu } from '../SettingsMenu';
+import InstallListItem, { DependencyManager } from './InstallListItem';
+
+const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export type Props = {
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  configOptions: TemplateUIOptions;
+};
+
+const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  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 ? (
+    <>
+      <Grid
+        container={true}
+        justifyContent="flex-end"
+        sx={{ marginRight: theme.spacing(10), alingText: 'right' }}
+      >
+        <SettingsMenu packageName={packageName} />
+      </Grid>
+      <List
+        data-testid={'installList'}
+        subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}
+      >
+        {hasNpm && (
+          <InstallListItem
+            dependencyManager={DependencyManager.NPM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
+        )}
+        {hasYarn && (
+          <InstallListItem
+            dependencyManager={DependencyManager.YARN}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
+        )}
+        {hasPnpm && (
+          <InstallListItem
+            dependencyManager={DependencyManager.PNPM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
+        )}
+      </List>
+    </>
+  ) : null;
+};
+
+export default Install;

package/src/components/Install/InstallListItem.tsx

@@ -0,0 +1,134 @@
+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 { useSettings } from '../../providers/PersistenceSettingProvider';
+import CopyToClipBoard from '../CopyClipboard';
+import { Npm, Pnpm, Yarn } from '../Icons';
+
+const InstallItem = styled(ListItem)({
+  padding: 0,
+  ':hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+const InstallListItemText = styled(ListItemText)({
+  padding: '0 0 0 10px',
+  margin: 0,
+});
+
+const PackageMangerAvatar = styled(Avatar)({
+  borderRadius: '0px',
+  padding: 0,
+});
+
+export enum DependencyManager {
+  NPM = 'npm',
+  YARN = 'yarn',
+  PNPM = 'pnpm',
+}
+
+interface Interface {
+  packageName: string;
+  dependencyManager: DependencyManager;
+  packageVersion?: string;
+}
+
+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;
+  switch (dependencyManager) {
+    case DependencyManager.NPM:
+      return (
+        <InstallItem data-testid={'installListItem-npm'}>
+          <PackageMangerAvatar alt="npm" sx={{ bgcolor: theme.palette.white }}>
+            <Npm />
+          </PackageMangerAvatar>
+          <InstallListItemText
+            primary={
+              <CopyToClipBoard
+                dataTestId="instalNpm"
+                text={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                title={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+              />
+            }
+          />
+        </InstallItem>
+      );
+    case DependencyManager.YARN:
+      return (
+        <InstallItem data-testid={'installListItem-yarn'}>
+          <PackageMangerAvatar alt="yarn" sx={{ bgcolor: theme.palette.white }}>
+            <Yarn />
+          </PackageMangerAvatar>
+          <InstallListItemText
+            primary={
+              <CopyToClipBoard
+                dataTestId="installYarn"
+                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)}`
+                }
+              />
+            }
+          />
+        </InstallItem>
+      );
+    case DependencyManager.PNPM:
+      return (
+        <InstallItem data-testid={'installListItem-pnpm'}>
+          <PackageMangerAvatar alt={'pnpm'} sx={{ bgcolor: theme.palette.white }}>
+            <Pnpm />
+          </PackageMangerAvatar>
+          <InstallListItemText
+            primary={
+              <CopyToClipBoard
+                dataTestId="installPnpm"
+                text={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                title={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+              />
+            }
+          />
+        </InstallItem>
+      );
+    default:
+      return null;
+  }
+};
+
+export default InstallListItem;