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

package/src/pages/Version/DetailSidebar/Install/img/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/pages/Version/DetailSidebar/Install/img/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/pages/Version/DetailSidebar/Install/img/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/pages/Version/DetailSidebar/Install/index.ts

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

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

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContext } from '../../context';
+import { DetailContextProps } from '../../version-config';
+
+import data from './__partials__/data.json';
+import Repository from './Repository';
+
+const detailContextValue: DetailContextProps = {
+  packageName: 'foo',
+  readMe: 'readMe',
+  enableLoading: () => {},
+  isLoading: false,
+  hasNotBeenFound: false,
+  packageMeta: data,
+};
+
+const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({
+  contextValue,
+}) => (
+  <DetailContext.Provider value={contextValue}>
+    <Repository />
+  </DetailContext.Provider>
+);
+
+describe('<Repository /> component', () => {
+  test('should load the component in default state', () => {
+    const { container } = render(<ComponentToBeRendered contextValue={detailContextValue} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should render the component in with no repository data', () => {
+    const packageMeta = {
+      ...detailContextValue.packageMeta,
+      latest: {
+        ...detailContextValue.packageMeta?.latest,
+        repository: undefined,
+      },
+    };
+
+    const { queryByText } = render(
+      <ComponentToBeRendered
+        contextValue={{
+          ...detailContextValue,
+          packageMeta,
+        }}
+      />
+    );
+
+    expect(queryByText('Repository')).toBeFalsy();
+  });
+
+  test('should render the component in with invalid url', () => {
+    const packageMeta = {
+      ...detailContextValue.packageMeta,
+      latest: {
+        ...detailContextValue.packageMeta?.latest,
+        repository: {
+          type: 'git',
+          url: 'git://github.com/verdaccio/ui.git',
+        },
+      },
+    };
+
+    const { queryByText } = render(
+      <ComponentToBeRendered
+        contextValue={{
+          ...detailContextValue,
+          packageMeta,
+        }}
+      />
+    );
+
+    expect(queryByText('Repository')).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,93 @@
+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 Link from 'verdaccio-ui/components/Link';
+import List from 'verdaccio-ui/components/List';
+import ListItem from 'verdaccio-ui/components/ListItem';
+import ListItemText from 'verdaccio-ui/components/ListItemText';
+import Text from 'verdaccio-ui/components/Text';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { isURL } from 'verdaccio-ui/utils/url';
+
+import { DetailContext } from '../../context';
+
+import git from './img/git.png';
+
+const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  ':hover': {
+    color: theme?.palette.dodgerBlue,
+  },
+}));
+
+const RepositoryListItem = styled(ListItem)({
+  padding: 0,
+  ':hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+const RepositoryListItemText = styled(ListItemText)({
+  padding: '0 10px',
+  margin: 0,
+});
+
+const RepositoryAvatar = styled(Avatar)({
+  borderRadius: '0px',
+  padding: '0',
+  img: {
+    backgroundColor: 'transparent',
+  },
+});
+
+const Repository: React.FC = () => {
+  const detailContext = React.useContext(DetailContext);
+  const { t } = useTranslation();
+
+  const { packageMeta } = detailContext;
+
+  if (!packageMeta?.latest?.repository?.url || !isURL(packageMeta.latest.repository.url)) {
+    return null;
+  }
+
+  const { url } = packageMeta.latest.repository;
+
+  const getCorrectRepositoryURL = (): string => {
+    if (!url.includes('git+')) {
+      return url;
+    }
+
+    return url.split('git+')[1];
+  };
+
+  const repositoryURL = getCorrectRepositoryURL();
+
+  return (
+    <List
+      dense={true}
+      subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}>
+      <RepositoryListItem button={true}>
+        <RepositoryAvatar src={git} />
+        <RepositoryListItemText
+          primary={
+            <CopyToClipBoard text={repositoryURL}>
+              <GithubLink external={true} to={repositoryURL}>
+                {repositoryURL}
+              </GithubLink>
+            </CopyToClipBoard>
+          }
+        />
+      </RepositoryListItem>
+    </List>
+  );
+};
+
+export default Repository;