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

package/src/components/Readme/index.ts

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

package/src/components/Readme/types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+  description: string;
+}

package/src/components/Readme/utils.ts

@@ -0,0 +1,29 @@
+import * as DOMPurify from 'dompurify';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+
+const marked = new Marked(
+  markedHighlight({
+    async: false,
+    highlight(code, lang) {
+      const hljs = require('highlight.js');
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  })
+);
+
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  pedantic: false,
+  gfm: true,
+  breaks: false,
+});
+
+export function parseReadme(readme: string): string | void {
+  if (typeof readme === 'string') {
+    const html = marked.parse(readme);
+    return DOMPurify.sanitize(html);
+  }
+  return '';
+}

package/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx

@@ -0,0 +1,31 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Content, Title } from './styles';
+import { Props } from './types';
+
+const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose, title = '' }) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog
+      data-testid={'registryInfo--dialog'}
+      id="registryInfo--dialog-container"
+      maxWidth="sm"
+      onClose={onClose}
+      open={open}
+    >
+      <Title>{title}</Title>
+      <Content>{children}</Content>
+      <DialogActions>
+        <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
+          {t('button.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default RegistryInfoDialog;

package/src/components/RegistryInfoDialog/index.ts

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

package/src/components/RegistryInfoDialog/styles.ts

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { Theme } from '../../';
+
+export const Title = styled(DialogTitle)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+  fontSize: props.theme?.fontSize.lg,
+}));
+
+export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({
+  padding: '0 24px',
+  backgroundColor: theme?.palette.background.default,
+}));
+
+export const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  padding: '10px 24px',
+  backgroundColor: theme?.palette.background.default,
+}));

package/src/components/RegistryInfoDialog/types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface Props {
+  children: ReactNode;
+  open: boolean;
+  title: string;
+  onClose: () => void;
+}

package/src/components/Repository/Repository.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { default as Repository } from '.';
+
+const meta: Meta<typeof Repository> = {
+  title: 'Components/Sidebar/Repository',
+  component: Repository,
+};
+export default meta;
+type Story = StoryObj<typeof Repository>;
+
+export const Primary: Story = {
+  name: 'Git Repository',
+  render: () => {
+    return (
+      <Repository
+        packageMeta={{
+          _uplinks: {},
+          latest: {
+            name: 'verdaccio-ui/local-storage',
+            version: '8.0.1-next.1',
+            repository: {
+              type: 'git',
+              url: 'git://github.com/verdaccio/ui.git',
+            },
+          },
+        }}
+      />
+    );
+  },
+};
+
+export const HTTPS: Story = {
+  name: 'Https repo',
+  render: () => (
+    <Repository
+      packageMeta={{
+        _uplinks: {},
+        latest: {
+          name: 'verdaccio-ui/local-storage',
+          version: '8.0.1-next.1',
+          repository: {
+            type: 'https',
+            url: 'https://github.com/verdaccio/ui.git',
+          },
+        },
+      }}
+    />
+  ),
+};
+
+export const HTTP: Story = {
+  name: 'Http repo',
+  render: () => (
+    <Repository
+      packageMeta={{
+        _uplinks: {},
+        latest: {
+          name: 'verdaccio-ui/local-storage',
+          version: '8.0.1-next.1',
+          repository: {
+            type: 'http',
+            url: 'http://github.com/verdaccio/ui.git',
+          },
+        },
+      }}
+    />
+  ),
+};

package/src/components/Repository/Repository.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import Repository from './Repository';
+import data from './__partials__/data.json';
+
+describe('<Repository /> component', () => {
+  test('should load the component in default state', () => {
+    const { container } = render(<Repository packageMeta={data} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should render the component in with no repository data', () => {
+    const packageMeta = {
+      ...data,
+      latest: {
+        ...data?.latest,
+        repository: undefined,
+      },
+    };
+
+    const { queryByText } = render(<Repository packageMeta={packageMeta} />);
+
+    expect(queryByText('Repository')).toBeFalsy();
+  });
+
+  test('should render the component in with invalid url', () => {
+    const packageMeta = {
+      ...data,
+      latest: {
+        ...data?.latest,
+        repository: {
+          type: 'git',
+          url: 'git://github.com/verdaccio/ui.git',
+        },
+      },
+    };
+
+    const { queryByText } = render(<Repository packageMeta={packageMeta} />);
+
+    expect(queryByText('Repository')).toBeFalsy();
+  });
+});

package/src/components/Repository/Repository.tsx

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+import Avatar from '@mui/material/Avatar';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme } from '../../Theme';
+import { url as urlUtils } from '../../utils';
+import CopyClipboard from '../CopyClipboard';
+import { Git } from '../Icons';
+import { Link } from '../Link';
+
+const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === '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<{ packageMeta: any }> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+  const url = packageMeta?.latest?.repository?.url;
+  if (!url || !urlUtils.isURL(url)) {
+    return null;
+  }
+
+  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>
+        <RepositoryAvatar sx={{ backgroundColor: '#fff' }}>
+          <Git />
+        </RepositoryAvatar>
+        <RepositoryListItemText
+          primary={
+            <CopyClipboard dataTestId="repositoryID" text={repositoryURL} title={repositoryURL}>
+              <GithubLink external={true} to={repositoryURL} variant="outline">
+                {repositoryURL}
+              </GithubLink>
+            </CopyClipboard>
+          }
+        />
+      </RepositoryListItem>
+    </List>
+  );
+};
+
+export default Repository;