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

package/src/Theme/theme.ts

@@ -0,0 +1,161 @@
+import { createTheme } from '@mui/material/styles';
+
+import { PRIMARY_COLOR } from './colors';
+
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  orange: '#CD4000',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#586069',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+  eclipse: '#3c3c3c',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+  primary: PRIMARY_COLOR,
+  secondary: '#20232a',
+  background: '#fff',
+  dodgerBlue: '#1ba1f2',
+  cyanBlue: '#253341',
+};
+
+const themeModes = {
+  light: {
+    ...colors,
+  },
+  dark: {
+    ...colors,
+    primary: '#24394e',
+    secondary: '#424242',
+    background: '#1A202C',
+  },
+};
+
+function applyPrimaryColor(mode: ThemeMode, primaryColor: string): any {
+  if (mode === 'light') {
+    themeModes['light'].primary = primaryColor;
+  }
+
+  return themeModes[mode];
+}
+
+export type ThemeMode = keyof typeof themeModes;
+
+const fontSize = {
+  xxl: 26,
+  xl: 24,
+  lg: 21,
+  md: 18,
+  default: 16,
+  sm: 14,
+  ssm: 12,
+};
+
+export type FontSize = keyof typeof fontSize;
+
+const fontWeight = {
+  light: 300,
+  regular: 400,
+  semiBold: 500,
+  bold: 700,
+};
+
+export type FontWeight = keyof typeof fontWeight;
+
+export const breakPoints = {
+  xsmall: 400,
+  small: 576,
+  medium: 768,
+  large: 1024,
+  container: 1240,
+  xlarge: 1275,
+};
+
+export type BreakPoints = typeof breakPoints;
+
+const customizedTheme = {
+  fontSize,
+  fontWeight,
+  breakPoints,
+};
+
+type CustomizedTheme = typeof customizedTheme;
+
+export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
+  const palette = applyPrimaryColor(themeMode, primaryColor);
+  return createTheme({
+    typography: {
+      fontFamily: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Helvetica Neue"',
+        'Arial',
+        'sans-serif',
+      ].join(','),
+    },
+    palette: {
+      mode: themeMode,
+      ...palette,
+      primary: { main: palette.primary },
+      secondary: { main: palette.secondary },
+      error: { main: palette.red },
+      background: {
+        default: palette.background,
+      },
+    },
+    ...customizedTheme,
+  });
+};
+
+export type Theme = ReturnType<typeof getTheme>;
+
+declare module '@mui/material/styles/createTheme' {
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface Theme extends CustomizedTheme {}
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface DeprecatedThemeOptions extends CustomizedTheme {}
+}
+
+declare module '@mui/material/styles/createPalette' {
+  interface CustomPalette {
+    black: string;
+    white: string;
+    red: string;
+    orange: string;
+    greySuperLight: string;
+    greyLight: string;
+    greyLight2: string;
+    greyLight3: string;
+    greyDark: string;
+    greyDark2: string;
+    greyChateau: string;
+    greyGainsboro: string;
+    greyAthens: string;
+    eclipse: string;
+    paleNavy: string;
+    saltpan: string;
+    snow: string;
+    love: string;
+    nobel01: string;
+    nobel02: string;
+    background: string;
+    dodgerBlue: string;
+    cyanBlue: string;
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface Palette extends CustomPalette {}
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface PaletteOptions extends Partial<CustomPalette> {}
+}

package/src/__mocks__/react-markdown.tsx

@@ -0,0 +1,8 @@
+// eslint-disable
+import React from 'react';
+
+// @ts-ignore
+export default function ({ children }) {
+  return <>{children}</>;
+}
+// eslint-enable

package/src/__mocks__/remark-plugin.ts

@@ -0,0 +1 @@
+export default function () {}

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { default as ActionBar } from '.';
+
+export default {
+  title: 'ActionBar  ',
+};
+
+export const ActionBarAll: any = () => (
+  <ActionBar
+    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 RawViewer: any = () => (
+  <ActionBar
+    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',
+        },
+      },
+    }}
+    showRaw={true}
+  />
+);

package/src/components/ActionBar/ActionBar.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { store } from '../../store/store';
+import { cleanup, fireEvent, renderWithStore, screen } from '../../test/test-react-testing-library';
+import ActionBar from './ActionBar';
+
+const defaultPackageMeta = {
+  _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',
+    },
+  },
+};
+
+describe('<ActionBar /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should render the component in default state', () => {
+    const { container } = renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('when there is no action bar data', () => {
+    const packageMeta = {
+      ...defaultPackageMeta,
+      latest: {
+        ...defaultPackageMeta.latest,
+        homepage: undefined,
+        bugs: undefined,
+        dist: {
+          ...defaultPackageMeta.latest.dist,
+          tarball: undefined,
+        },
+      },
+    };
+
+    const { container } = renderWithStore(<ActionBar packageMeta={packageMeta} />, store);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('when there is a button to download a tarball', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    expect(screen.getByLabelText('action-bar-action.download-tarball')).toBeTruthy();
+  });
+
+  test('when there is a button to raw manifest', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    expect(screen.getByLabelText('action-bar-action.raw')).toBeTruthy();
+  });
+
+  test('when click button to raw manifest open a dialog with viewver', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    fireEvent.click(screen.getByLabelText('action-bar-action.raw'));
+    // TODO: fix this part
+    // expect(screen.getByTestId('raw-viewver-dialog')).toBeInTheDocument();
+  });
+
+  test('should not display download tarball button', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={true} />, store);
+    expect(screen.queryByLabelText('Download tarball')).toBeFalsy();
+  });
+
+  test('should not display show raw button', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} showRaw={false} />, store);
+    expect(screen.queryByLabelText('action-bar-action.raw')).toBeFalsy();
+  });
+
+  test('when there is a button to open an issue', () => {
+    renderWithStore(<ActionBar packageMeta={defaultPackageMeta} />, store);
+    // TODO: should be visible by text
+    // expect(screen.getByLabelText('action-bar-action.open-an-issue')).toBeTruthy();
+    expect(screen.getByTestId('BugReportIcon')).toBeInTheDocument();
+  });
+});

package/src/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,59 @@
+import Box from '@mui/material/Box';
+import React, { useState } from 'react';
+
+import { url } from '../../utils';
+import RawViewer from '../RawViewer';
+import ActionBarAction, { ActionBarActionProps } from './ActionBarAction';
+
+export type Props = {
+  showRaw?: boolean;
+  showDownloadTarball?: boolean;
+  packageMeta: any;
+};
+
+const ActionBar: React.FC<Props> = ({ showRaw, showDownloadTarball = true, packageMeta }) => {
+  const [isRawViewerOpen, setIsRawViewerOpen] = useState(false);
+
+  if (!packageMeta?.latest) {
+    return null;
+  }
+
+  const { homepage, bugs, dist } = packageMeta.latest;
+
+  const actions: ActionBarActionProps[] = [];
+
+  if (homepage && url.isURL(homepage)) {
+    actions.push({ type: 'VISIT_HOMEPAGE', link: homepage });
+  }
+
+  if (bugs?.url && url.isURL(bugs.url)) {
+    actions.push({ type: 'OPEN_AN_ISSUE', link: bugs.url });
+  }
+
+  if (dist?.tarball && url.isURL(dist.tarball) && showDownloadTarball) {
+    actions.push({ type: 'DOWNLOAD_TARBALL', link: dist.tarball });
+  }
+
+  if (showRaw) {
+    actions.push({ type: 'RAW_DATA', action: () => setIsRawViewerOpen(true) });
+  }
+
+  return (
+    <Box alignItems="center" display="flex" marginBottom="14px">
+      {actions.map((action) => (
+        <ActionBarAction key={action.type} {...action} />
+      ))}
+      {isRawViewerOpen && (
+        <RawViewer
+          isOpen={isRawViewerOpen}
+          onClose={() => {
+            setIsRawViewerOpen(false);
+          }}
+          packageMeta={packageMeta}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default ActionBar;

package/src/components/ActionBar/ActionBarAction.tsx

@@ -0,0 +1,84 @@
+import styled from '@emotion/styled';
+import BugReportIcon from '@mui/icons-material/BugReport';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import HomeIcon from '@mui/icons-material/Home';
+import RawOnIcon from '@mui/icons-material/RawOn';
+import FabMUI from '@mui/material/Fab';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import { Theme } from '../../Theme';
+import { Dispatch } from '../../store/store';
+import { Link } from '../Link';
+
+export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor:
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+  marginRight: 10,
+  ':hover': {
+    color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    background: theme?.palette.white,
+  },
+}));
+
+type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';
+
+export interface ActionBarActionProps {
+  type: ActionType;
+  link?: string;
+  action?: () => void;
+}
+
+/* eslint-disable react/jsx-no-bind */
+const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action }) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch<Dispatch>();
+
+  const handleDownload = useCallback(async () => {
+    dispatch.download.getTarball({ link });
+  }, [dispatch, link]);
+
+  switch (type) {
+    case 'VISIT_HOMEPAGE':
+      return (
+        <Tooltip title={t('action-bar-action.visit-home-page') as string}>
+          <Link external={true} to={link} variant="button">
+            <Fab size="small">
+              <HomeIcon />
+            </Fab>
+          </Link>
+        </Tooltip>
+      );
+    case 'OPEN_AN_ISSUE':
+      return (
+        <Tooltip title={t('action-bar-action.open-an-issue') as string}>
+          <Link external={true} to={link} variant="button">
+            <Fab size="small">
+              <BugReportIcon />
+            </Fab>
+          </Link>
+        </Tooltip>
+      );
+    case 'DOWNLOAD_TARBALL':
+      return (
+        <Tooltip title={t('action-bar-action.download-tarball') as string}>
+          <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+            <DownloadIcon />
+          </Fab>
+        </Tooltip>
+      );
+    case 'RAW_DATA':
+      return (
+        <Tooltip title={t('action-bar-action.raw') as string}>
+          <Fab data-testid="raw-btn" onClick={action} size="small">
+            <RawOnIcon />
+          </Fab>
+        </Tooltip>
+      );
+  }
+};
+
+export default ActionBarAction;