@verdaccio/ui-components 2.0.0-6-next.4 → 2.0.0-6-next.5

package/src/components/Package/styles.ts

@@ -0,0 +1,104 @@
+import styled from '@emotion/styled';
+import { default as Photo } from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import { default as MuiIconButton } from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
+import { Link } from 'react-router-dom';
+
+import { Theme } from '../../';
+
+export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0 0 0 16px',
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  fontSize: 12,
+  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
+    ':nth-of-type(3)': {
+      display: 'none',
+    },
+  },
+  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+    ':nth-of-type(4)': {
+      display: 'none',
+    },
+  },
+}));
+
+export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  margin: '0 5px 0 0',
+}));
+
+export const Details = styled('span')({
+  marginLeft: '5px',
+  lineHeight: 1.5,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Author = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const Avatar = styled(Photo)({
+  width: '20px',
+  height: '20px',
+});
+
+export const WrapperLink = styled(Link)({
+  textDecoration: 'none',
+});
+
+export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme?.fontWeight.bold,
+  fontSize: 20,
+  display: 'block',
+  marginBottom: 12,
+  color: theme?.palette.mode == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
+  cursor: 'pointer',
+  [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
+    fontSize: 14,
+    marginBottom: 8,
+  },
+}));
+
+export const GridRightAligned = styled(Grid)({
+  textAlign: 'right',
+});
+
+export const Wrapper = styled(List)<{ theme?: Theme }>(({ theme }) => ({
+  ':hover': {
+    backgroundColor:
+      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight3,
+  },
+}));
+
+export const IconButton = styled(MuiIconButton)({
+  padding: 6,
+  svg: {
+    fontSize: 16,
+  },
+});
+
+export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: 8,
+  marginBottom: 12,
+  display: 'flex',
+  flexWrap: 'wrap',
+  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
+    display: 'none',
+  },
+}));
+
+export const PackageListItemText = styled(ListItemText)({
+  paddingRight: 0,
+});
+
+export const Description = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
+  fontSize: '14px',
+  paddingRight: 0,
+}));

package/src/components/PackageList/PackageList.tsx

@@ -0,0 +1,81 @@
+import Divider from '@mui/material/Divider';
+import React from 'react';
+import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
+import { List, ListRowProps } from 'react-virtualized/dist/commonjs/List';
+import { WindowScroller } from 'react-virtualized/dist/commonjs/WindowScroller';
+
+import { Help, Package, useConfig } from '../..';
+import { utils } from '../../utils';
+
+interface Props {
+  packages: any[];
+}
+
+const cache = new CellMeasurerCache({
+  fixedWidth: true,
+  defaultHeight: 100,
+});
+
+/* eslint-disable  verdaccio/jsx-no-style */
+const PackageList: React.FC<Props> = ({ packages }) => {
+  const { configOptions } = useConfig();
+  const renderRow = ({ index, key, parent, style }: ListRowProps) => {
+    const { name, version, description, time, keywords, dist, homepage, bugs, author, license } =
+      packages[index];
+    // TODO: move format license to API side.
+    const formattedLicense = utils.formatLicense(license);
+    return (
+      <CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
+        <div style={style}>
+          {index !== 0 && <Divider />}
+          <Package
+            author={author}
+            bugs={bugs}
+            description={description}
+            dist={dist}
+            homepage={homepage}
+            keywords={keywords}
+            license={formattedLicense}
+            name={name}
+            showDownload={configOptions.showDownloadTarball}
+            time={time}
+            version={version}
+          />
+        </div>
+      </CellMeasurer>
+    );
+  };
+
+  if (packages.length === 0) {
+    return <Help />;
+  }
+
+  return (
+    <WindowScroller>
+      {({ height, isScrolling, scrollTop, onChildScroll }) => (
+        <AutoSizer disableHeight={true}>
+          {({ width }) => {
+            return (
+              <List
+                autoHeight={true}
+                deferredMeasurementCache={cache}
+                height={height}
+                isScrolling={isScrolling}
+                onScroll={onChildScroll}
+                overscanRowCount={3}
+                rowCount={packages.length}
+                rowHeight={cache.rowHeight}
+                rowRenderer={renderRow}
+                scrollTop={scrollTop}
+                width={width}
+              />
+            );
+          }}
+        </AutoSizer>
+      )}
+    </WindowScroller>
+  );
+};
+
+export default PackageList;

package/src/components/PackageList/Packagelist.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import { store } from '../../store';
+import { cleanup, renderWithStore } from '../../test/test-react-testing-library';
+import PackageList from './PackageList';
+
+describe('<PackageList /> component', () => {
+  beforeEach(cleanup);
+
+  test('should load the component with no packages', () => {
+    const props = {
+      packages: [],
+    };
+    const wrapper = renderWithStore(<PackageList packages={props.packages} />, store);
+    expect(wrapper.getByText('help.title')).toBeInTheDocument();
+  });
+
+  test('should load the component with packages', () => {
+    // Mock <Autosizer /> width
+    jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
+
+    const props = {
+      packages: [
+        {
+          name: 'verdaccio',
+          version: '1.0.0',
+          time: new Date(1532211072138).getTime(),
+          description: 'Private NPM repository',
+          author: { name: 'Sam', avatar: 'test avatar' },
+        },
+        {
+          name: 'abc',
+          version: '1.0.1',
+          time: new Date(1532211072138).getTime(),
+          description: 'abc description',
+          author: { name: 'Rose', avatar: 'test avatar' },
+        },
+        {
+          name: 'xyz',
+          version: '1.1.0',
+          description: 'xyz description',
+          author: { name: 'Martin', avatar: 'test avatar' },
+        },
+      ],
+      help: false,
+    };
+
+    const wrapper = renderWithStore(
+      <BrowserRouter>
+        <PackageList packages={props.packages} />
+      </BrowserRouter>,
+      store
+    );
+
+    expect(wrapper.queryAllByTestId('package-item-list')).toHaveLength(3);
+  });
+});

package/src/components/PackageList/index.ts

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

package/src/components/RawViewer/RawViewer.tsx

@@ -0,0 +1,72 @@
+import CloseIcon from '@mui/icons-material/Close';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactJson from 'react-json-view';
+
+export interface ViewerTitleProps {
+  id: string;
+  children?: React.ReactNode;
+  onClose: () => void;
+}
+
+const ViewerTitle = (props: ViewerTitleProps) => {
+  const { children, onClose } = props;
+
+  return (
+    <DialogTitle sx={{ m: 0, p: 2 }}>
+      {children}
+      {onClose ? (
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </DialogTitle>
+  );
+};
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  packageMeta: any;
+};
+
+/* eslint-disable verdaccio/jsx-spread */
+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}
+    >
+      <ViewerTitle id="viewer-title" onClose={onClose}>
+        {t('action-bar-action.raw')}
+      </ViewerTitle>
+      <DialogContent>
+        <ReactJson
+          collapseStringsAfterLength={40}
+          collapsed={true}
+          enableClipboard={false}
+          groupArraysAfterLength={10}
+          src={packageMeta as any}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RawViewer;

package/src/components/RawViewer/index.ts

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

package/src/components/Readme/Readme.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { cleanup, render } from '../../test/test-react-testing-library';
+import Readme from './Readme';
+
+describe('<Readme /> component', () => {
+  beforeEach(cleanup);
+
+  test('should load the component in default state', () => {
+    const wrapper = render(<Readme description="test" />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should dangerously set html', () => {
+    const wrapper = render(<Readme description="<h1>This is a test string</h1>" />);
+    expect(wrapper.getByText('This is a test string')).toBeInTheDocument();
+  });
+});

package/src/components/Readme/Readme.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import 'github-markdown-css';
+import 'highlight.js/styles/default.css';
+import React from 'react';
+
+import { Theme } from '../../Theme';
+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 }}
+    />
+  );
+};
+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/__snapshots__/Readme.spec.tsx.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Readme /> component should load the component in default state 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": .emotion-0 {
+  background: #fff;
+  color: #000;
+  padding: 16px 24px;
+}
+
+.emotion-0 ul {
+  list-style: disc;
+}
+
+.emotion-0 img {
+  max-width: 100%;
+}
+
+<body>
+    <div>
+      <div
+        class="markdown-body emotion-0 emotion-1"
+      >
+        <p>
+          test
+        </p>
+        
+
+      </div>
+    </div>
+  </body>,
+  "container": .emotion-0 {
+  background: #fff;
+  color: #000;
+  padding: 16px 24px;
+}
+
+.emotion-0 ul {
+  list-style: disc;
+}
+
+.emotion-0 img {
+  max-width: 100%;
+}
+
+<div>
+    <div
+      class="markdown-body emotion-0 emotion-1"
+    >
+      <p>
+        test
+      </p>
+      
+
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

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,25 @@
+import * as DOMPurify from 'dompurify';
+import * as marked from 'marked';
+
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  highlight: function (code, lang) {
+    const hljs = require('highlight.js');
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+    return hljs.highlight(code, { language }).value;
+  },
+  langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
+  pedantic: false,
+  gfm: true,
+  breaks: false,
+  mangle: false,
+  xhtml: 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,43 @@
+import React from 'react';
+
+import { default as Repository } from '.';
+
+export default {
+  title: 'Repository',
+};
+
+export const RepositoryGit: any = () => {
+  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 RepositoryHTTPS: any = () => {
+  return (
+    <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',
+          },
+        },
+      }}
+    />
+  );
+};

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();
+  });
+});