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

package/src/pages/Version/DetailContainer/Deprecated/Deprecated.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import React from 'react';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const CardStyled = styled(Card)<{ theme?: Theme }>(({ theme }) => {
+  return {
+    marginTop: theme?.spacing(1),
+    marginBottom: theme?.spacing(0.5),
+    backgroundColor: theme?.palette?.error.light,
+    opacity: '0.9',
+    color: theme?.palette?.error.contrastText,
+    fontWeight: 'bold',
+  };
+});
+
+export type Props = {
+  message: string;
+};
+
+const Deprecated: React.FC<Props> = ({ message }) => {
+  return (
+    <CardStyled>
+      <CardContent>{message}</CardContent>
+    </CardStyled>
+  );
+};
+
+export default Deprecated;

package/src/pages/Version/DetailContainer/Deprecated/index.ts

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

package/src/pages/Version/DetailContainer/DetailContainer.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import DetailContainer from './DetailContainer';
+
+describe('DetailContainer', () => {
+  test('renders correctly', () => {
+    const { container } = render(<DetailContainer />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test.todo('should test click on tabs');
+});

package/src/pages/Version/DetailContainer/DetailContainer.tsx

@@ -0,0 +1,37 @@
+import React, { useState, useContext } from 'react';
+
+import Box from 'verdaccio-ui/components/Box';
+
+import { DetailContext } from '../context';
+
+import Deprecated from './Deprecated';
+import DetailContainerContent from './DetailContainerContent';
+import DetailContainerTabs from './DetailContainerTabs';
+
+export enum TabPosition {
+  README = 'readme',
+  DEPENDENCIES = 'dependencies',
+  VERSIONS = 'versions',
+  UPLINKS = 'uplinks',
+}
+
+const DetailContainer: React.FC = () => {
+  const tabs = Object.values(TabPosition);
+  const [tabPosition, setTabPosition] = useState(0);
+  const detailContext = useContext(DetailContext);
+  const { readMe, packageMeta } = detailContext;
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setTabPosition(newValue);
+  };
+
+  return (
+    <Box component="div" display="flex" flexDirection="column" padding={2}>
+      <DetailContainerTabs onChange={handleChange} tabPosition={tabPosition} />
+      {packageMeta?.latest?.deprecated && <Deprecated message={packageMeta?.latest?.deprecated} />}
+      <DetailContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
+    </Box>
+  );
+};
+
+export default DetailContainer;

package/src/pages/Version/DetailContainer/DetailContainerContent.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import loadable from '../../../App/utils/loadable';
+
+import DetailContainerContentReadme from './DetailContainerContentReadme';
+
+export enum TabPosition {
+  README = 'readme',
+  DEPENDENCIES = 'dependencies',
+  VERSIONS = 'versions',
+  UPLINKS = 'uplinks',
+}
+
+const Versions = loadable(() => import(/* webpackChunkName: "Versions" */ './Versions'));
+const UpLinks = loadable(() => import(/* webpackChunkName: "UpLinks" */ './UpLinks'));
+
+const Dependencies = loadable(
+  () => import(/* webpackChunkName: "Dependencies" */ './Dependencies')
+);
+
+interface Props {
+  tabPosition: TabPosition;
+  readDescription?: string;
+}
+
+const DetailContainerContent: React.FC<Props> = ({ tabPosition, readDescription }) => {
+  switch (tabPosition) {
+    case TabPosition.README:
+      return <DetailContainerContentReadme description={readDescription} />;
+    case TabPosition.UPLINKS:
+      return <UpLinks />;
+    case TabPosition.VERSIONS:
+      return <Versions />;
+    case TabPosition.DEPENDENCIES:
+      return <Dependencies />;
+    default:
+      return null;
+  }
+};
+
+export default DetailContainerContent;

package/src/pages/Version/DetailContainer/DetailContainerContentReadme.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { preventXSS } from 'verdaccio-ui/utils/sec-utils';
+
+import Readme from './Readme';
+
+interface Props {
+  description?: string;
+}
+
+const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
+  if (!description) {
+    return null;
+  }
+  const encodedReadme = preventXSS(description);
+  return <Readme description={encodedReadme} />;
+};
+
+export default DetailContainerContentReadme;

package/src/pages/Version/DetailContainer/DetailContainerTabs.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Tab from 'verdaccio-ui/components/Tab';
+import { default as MuiTabs } from 'verdaccio-ui/components/Tabs';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+interface Props {
+  onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
+  tabPosition: number;
+}
+
+const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tabs
+      color={'primary'}
+      indicatorColor={'primary'}
+      onChange={onChange}
+      value={tabPosition}
+      variant={'fullWidth'}>
+      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
+      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
+      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
+      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
+    </Tabs>
+  );
+};
+
+export default DetailContainerTabs;
+
+const Tabs = styled(MuiTabs)<{ theme?: Theme }>({
+  marginBottom: 16,
+});

package/src/pages/Version/DetailContainer/NoItems/NoItems.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Text from 'verdaccio-ui/components/Text';
+
+interface Props {
+  text: string;
+  className?: string;
+}
+
+const NoItems: React.FC<Props> = ({ className, text }) => (
+  <Text className={className} gutterBottom={true} variant="subtitle1">
+    {text}
+  </Text>
+);
+
+export default NoItems;

package/src/pages/Version/DetailContainer/NoItems/Noitems.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import NoItems from './NoItems';
+
+describe('<NoItem /> component', () => {
+  const props = {
+    text: 'test',
+  };
+
+  test('should load the component in default state', () => {
+    const { container } = render(<NoItems text={props.text} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/pages/Version/DetailContainer/NoItems/__snapshots__/Noitems.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NoItem /> component should load the component in default state 1`] = `
+<span
+  class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom"
+>
+  test
+</span>
+`;

package/src/pages/Version/DetailContainer/NoItems/index.ts

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

package/src/pages/Version/DetailContainer/Readme/Readme.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render, cleanup } from 'verdaccio-ui/utils/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/pages/Version/DetailContainer/Readme/Readme.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import 'github-markdown-css';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+import { Props } from './types';
+
+const Readme: React.FC<Props> = ({ description }) => (
+  <Wrapper className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />
+);
+
+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',
+  },
+}));

package/src/pages/Version/DetailContainer/Readme/__snapshots__/Readme.spec.tsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Readme /> component should load the component in default state 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": .emotion-0 {
+  background: #fff;
+  color: #000;
+  padding: 16px 24px;
+}
+
+.emotion-0 ul {
+  list-style: disc;
+}
+
+<body>
+    <div>
+      <div
+        class="markdown-body emotion-0 emotion-1"
+      >
+        test
+      </div>
+    </div>
+  </body>,
+  "container": .emotion-0 {
+  background: #fff;
+  color: #000;
+  padding: 16px 24px;
+}
+
+.emotion-0 ul {
+  list-style: disc;
+}
+
+<div>
+    <div
+      class="markdown-body emotion-0 emotion-1"
+    >
+      test
+    </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/pages/Version/DetailContainer/Readme/index.ts

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

package/src/pages/Version/DetailContainer/Readme/types.ts

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

package/src/pages/Version/DetailContainer/UpLinks/UpLinks.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContext } from '../../context';
+
+import UpLinks from './UpLinks';
+
+describe('<UpLinks /> component', () => {
+  beforeEach(cleanup);
+
+  test('should render the component when there is no uplink', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        dist: { fileCount: 0, unpackedSize: 0 },
+      },
+      _uplinks: {},
+    };
+
+    const wrapper = render(
+      <DetailContext.Provider value={{ packageMeta }}>
+        <UpLinks />
+      </DetailContext.Provider>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('should render the component with uplinks', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        author: {
+          name: 'verdaccio user',
+          url: '',
+          avatar: 'https://www.gravatar.com/avatar/000000',
+        },
+        dist: { fileCount: 0, unpackedSize: 0 },
+      },
+      _uplinks: {
+        npmjs: {
+          etag: '"W/"252f0a131cedd3ea82dfefd6fa049558""',
+          fetched: 1529779934081,
+        },
+      },
+    };
+
+    const wrapper = render(
+      <DetailContext.Provider value={{ packageMeta }}>
+        <UpLinks />
+      </DetailContext.Provider>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/pages/Version/DetailContainer/UpLinks/UpLinks.tsx

@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import List from 'verdaccio-ui/components/List';
+import ListItem from 'verdaccio-ui/components/ListItem';
+import { formatDateDistance } from 'verdaccio-ui/utils/package';
+
+import { DetailContext } from '../..';
+import NoItems from '../NoItems';
+
+import { StyledText, Spacer, ListItemText } from './styles';
+
+const UpLinks: React.FC = () => {
+  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();
+
+  if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
+    return null;
+  }
+
+  const { _uplinks: uplinks, latest } = packageMeta;
+
+  if (Object.keys(uplinks).length === 0) {
+    return <NoItems text={t('uplinks.no-items', { name: latest.name })} />;
+  }
+
+  return (
+    <>
+      <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
+      <List>
+        {Object.keys(uplinks)
+          .reverse()
+          .map((name) => (
+            <ListItem key={name}>
+              <ListItemText>{name}</ListItemText>
+              <Spacer />
+              <ListItemText>{formatDateDistance(uplinks[name].fetched)}</ListItemText>
+            </ListItem>
+          ))}
+      </List>
+    </>
+  );
+};
+
+export default UpLinks;