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

package/src/components/LoginDialog/LoginDialog.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { api, store } from '../../../';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
+import LoginDialog from './LoginDialog';
+
+describe('<LoginDialog /> component', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.resetAllMocks();
+    cleanup();
+  });
+
+  test('should render the component in default state', () => {
+    const props = {
+      onClose: jest.fn(),
+    };
+    const { container } = renderWithStore(<LoginDialog onClose={props.onClose} />, store);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should load the component with the open prop', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    const { getByTestId } = renderWithStore(
+      <LoginDialog onClose={props.onClose} open={props.open} />,
+      store
+    );
+
+    const loginDialogHeading = await waitFor(() => getByTestId('login-dialog-form-login-button'));
+    expect(loginDialogHeading).toBeTruthy();
+  });
+
+  test('onClose: should close the login modal', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    const { getByTestId } = renderWithStore(
+      <LoginDialog onClose={props.onClose} open={props.open} />,
+      store
+    );
+
+    const loginDialogButton = await waitFor(() => getByTestId('close-login-dialog-button'));
+    expect(loginDialogButton).toBeTruthy();
+
+    await act(() => {
+      fireEvent.click(loginDialogButton, { open: false });
+    });
+
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  test('setCredentials - should set username and password in state', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    jest.spyOn(api, 'request').mockImplementation(() =>
+      Promise.resolve({
+        username: 'xyz',
+        token: 'djsadaskljd',
+      })
+    );
+
+    await act(async () => {
+      renderWithStore(<LoginDialog onClose={props.onClose} open={props.open} />, store);
+    });
+
+    const userNameInput = screen.getByPlaceholderText('form-placeholder.username');
+    expect(userNameInput).toBeInTheDocument();
+
+    fireEvent.focus(userNameInput);
+
+    fireEvent.change(userNameInput, { target: { value: 'xyz' } });
+
+    const passwordInput = screen.getByPlaceholderText('form-placeholder.password');
+    expect(userNameInput).toBeInTheDocument();
+    fireEvent.focus(passwordInput);
+
+    await act(async () => {
+      fireEvent.change(passwordInput, { target: { value: '1234' } });
+    });
+    const signInButton = screen.getByTestId('login-dialog-form-login-button');
+    expect(signInButton).not.toBeDisabled();
+
+    await act(async () => {
+      fireEvent.click(signInButton);
+    });
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  test.todo('validateCredentials: should validate credentials');
+
+  test.todo('submitCredentials: should submit credentials');
+});

package/src/components/LoginDialog/LoginDialog.tsx

@@ -0,0 +1,79 @@
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import i18next from 'i18next';
+import isEmpty from 'lodash/isEmpty';
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dispatch, LoginBody, RootState } from '../../';
+import LoginDialogCloseButton from './LoginDialogCloseButton';
+import LoginDialogForm, { FormValues } from './LoginDialogForm';
+import LoginDialogHeader from './LoginDialogHeader';
+
+interface Props {
+  open?: boolean;
+  onClose: () => void;
+}
+
+const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
+  const loginStore: any = useSelector((state: RootState) => state.login);
+  const dispatch = useDispatch<Dispatch>();
+  const makeLogin = useCallback(
+    async (username?: string, password?: string): Promise<LoginBody | void> => {
+      // checks isEmpty
+      if (isEmpty(username) || isEmpty(password)) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.username-or-password-cant-be-empty'),
+        });
+        return;
+      }
+
+      try {
+        dispatch.login.getUser({ username, password });
+        // const response: LoginBody = await doLogin(username as string, password as string);
+        dispatch.login.clearError();
+      } catch (e: any) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.unable-to-sign-in'),
+        });
+        // eslint-disable-next-line no-console
+        console.error('login error', e.message);
+      }
+    },
+    [dispatch]
+  );
+
+  const handleDoLogin = useCallback(
+    async (data: FormValues) => {
+      await makeLogin(data.username, data.password);
+    },
+    [makeLogin]
+  );
+
+  useEffect(() => {
+    if (loginStore.token && typeof loginStore.error === 'undefined') {
+      onClose();
+    }
+  }, [loginStore, onClose]);
+
+  return (
+    <Dialog
+      data-testid="login--dialog"
+      fullWidth={true}
+      id="login--dialog"
+      maxWidth="sm"
+      onClose={onClose}
+      open={open}
+    >
+      <LoginDialogCloseButton onClose={onClose} />
+      <DialogContent data-testid="dialogContentLogin">
+        <LoginDialogHeader />
+        <LoginDialogForm error={loginStore.error} onSubmit={handleDoLogin} />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default LoginDialog;

package/src/components/LoginDialog/LoginDialogCloseButton.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import CloseIcon from '@mui/icons-material/Close';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme } from '../../';
+
+const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
+  position: 'absolute',
+  right: theme.spacing() / 2,
+  top: theme.spacing() / 2,
+  color: theme.palette.grey[500],
+}));
+
+interface Props {
+  onClose: () => void;
+}
+
+const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+  return (
+    <DialogTitle>
+      <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
+        <CloseIcon titleAccess={t('button.close')} />
+      </StyledIconButton>
+    </DialogTitle>
+  );
+};
+
+export default LoginDialogCloseButton;

package/src/components/LoginDialog/LoginDialogForm.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable verdaccio/jsx-spread */
+import styled from '@emotion/styled';
+import Button from '@mui/material/Button';
+import React, { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { LoginError, TextField, Theme } from '../../';
+import LoginDialogFormError from './LoginDialogFormError';
+
+const StyledForm = styled('form')<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: theme.spacing(1),
+}));
+
+const StyledButton = styled(Button)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme.spacing(3, 0, 2),
+}));
+
+export interface FormValues {
+  username: string;
+  password: string;
+}
+
+interface Props {
+  onSubmit: (formValues: FormValues) => void;
+  error?: LoginError;
+}
+
+const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid, errors },
+  } = useForm<FormValues>({ mode: 'onChange' });
+
+  const onSubmitForm = (formValues: FormValues) => {
+    onSubmit(formValues);
+  };
+
+  return (
+    <StyledForm noValidate={true} onSubmit={handleSubmit(onSubmitForm)}>
+      <TextField
+        autoComplete="username"
+        error={!!errors.username}
+        fullWidth={true}
+        helperText={errors.username?.message}
+        id="login--dialog-username"
+        {...register('username', {
+          required: { value: true, message: t('form-validation.required-field') },
+          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
+        })}
+        label={t('form.username')}
+        margin="normal"
+        name="username"
+        placeholder={t('form-placeholder.username')}
+        required={true}
+        variant="outlined"
+      />
+      <TextField
+        autoComplete="current-password"
+        error={!!errors.password}
+        fullWidth={true}
+        helperText={errors.password?.message}
+        id="login--dialog-password"
+        {...register('password', {
+          required: { value: true, message: t('form-validation.required-field') },
+          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
+        })}
+        data-testid="password"
+        label={t('form.password')}
+        margin="normal"
+        name="password"
+        placeholder={t('form-placeholder.password')}
+        required={true}
+        type="password"
+        variant="outlined"
+      />
+      {error && <LoginDialogFormError error={error} />}
+      <StyledButton
+        color="primary"
+        data-testid="login-dialog-form-login-button"
+        disabled={!isValid}
+        fullWidth={true}
+        id="login--dialog-button-submit"
+        size="large"
+        type="submit"
+        variant="contained"
+      >
+        {t('button.login')}
+      </StyledButton>
+    </StyledForm>
+  );
+});
+
+export default LoginDialogForm;

package/src/components/LoginDialog/LoginDialogFormError.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import Error from '@mui/icons-material/Error';
+import Box from '@mui/material/Box';
+import SnackbarContent from '@mui/material/SnackbarContent';
+import React, { memo } from 'react';
+
+import { LoginError, Theme } from '../../';
+
+const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor: theme?.palette.error.dark,
+  color: theme?.palette.white,
+}));
+
+const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
+  fontSize: 20,
+  opacity: 0.9,
+  marginRight: theme?.spacing(1),
+}));
+
+export interface FormValues {
+  username: string;
+  password: string;
+}
+
+interface Props {
+  error: LoginError;
+}
+
+const LoginDialogFormError = memo(({ error }: Props) => {
+  return (
+    <StyledSnackbarContent
+      message={
+        <Box alignItems="center" display="flex">
+          <StyledErrorIcon />
+          {error.description}
+        </Box>
+      }
+    />
+  );
+});
+
+export default LoginDialogFormError;

package/src/components/LoginDialog/LoginDialogHeader.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import CloseIcon from '@mui/icons-material/Close';
+import LockOutlined from '@mui/icons-material/LockOutlined';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Heading, Theme } from '../../';
+
+interface Props {
+  onClose?: () => void;
+}
+
+const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box alignItems="center" display="flex" flexDirection="column" position="relative">
+      {onClose && (
+        <StyledIconButton aria-label={t('button.close')} onClick={onClose}>
+          <CloseIcon />
+        </StyledIconButton>
+      )}
+      <StyledAvatar>
+        <LockOutlined />
+      </StyledAvatar>
+      <Heading>{t('button.login')}</Heading>
+    </Box>
+  );
+};
+
+export default LoginDialogHeader;
+
+const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme?.spacing(1),
+  backgroundColor:
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+}));
+
+const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
+  position: 'absolute',
+  right: theme?.spacing() / 2,
+  top: theme?.spacing() / 2,
+  color: theme?.palette.grey[500],
+}));

package/src/components/LoginDialog/__snapshots__/LoginDialog.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LoginDialog /> component should render the component in default state 1`] = `null`;

package/src/components/LoginDialog/index.ts

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

package/src/components/Logo/Logo.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import Logo from './Logo';
+
+describe('<Logo /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(<Logo />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+import { Theme, useConfig } from '../../';
+
+const blackAndWithLogo = require('./img/logo-black-and-white.svg');
+const defaultLogo = require('./img/logo.svg');
+
+const sizes = {
+  'x-small': '30px',
+  small: '40px',
+  big: '90px',
+};
+
+const logos = {
+  light: defaultLogo,
+  dark: blackAndWithLogo,
+};
+
+interface Props {
+  size?: keyof typeof sizes;
+  onClick?: () => void;
+  className?: string;
+  isDefault?: boolean;
+}
+
+const Logo: React.FC<Props> = ({ size, onClick, className, isDefault = false }) => {
+  const { configOptions } = useConfig();
+  if (!isDefault && configOptions?.logo) {
+    return (
+      <ImageLogo className={className} onClick={onClick}>
+        <img alt="logo" height="40px" src={configOptions.logo} />
+      </ImageLogo>
+    );
+  }
+  return <StyledLogo className={className} onClick={onClick} size={size} />;
+};
+
+export default Logo;
+
+const ImageLogo = styled('div')({
+  fontSize: 0,
+});
+
+const StyledLogo = styled('div')<Props & { theme?: Theme }>(({ size = 'small', theme }) => ({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  boxSizing: 'border-box',
+  backgroundPosition: 'center',
+  backgroundSize: 'contain',
+  backgroundImage: `url(${logos[theme?.palette.mode]})`,
+  backgroundRepeat: ' no-repeat',
+  width: sizes[size],
+  height: sizes[size],
+}));

package/src/components/Logo/__snapshots__/Logo.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Logo /> component should render the component in default state 1`] = `
+.emotion-0 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  -webkit-background-position: center;
+  background-position: center;
+  -webkit-background-size: contain;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 40px;
+  height: 40px;
+}
+
+<div
+  class="emotion-0 emotion-1"
+/>
+`;

package/src/components/Logo/img/logo-black-and-white.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-19.8%" y="-11.7%" width="139.6%" height="140.4%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><filter x="-33.9%" y="-50%" width="167.9%" height="272.7%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="b" d="M48 16.729L32.672 47h-8.874L0 0h15.328l12.907 25.492 4.437-8.763H48z"/><path d="M35.2 11H28V8.643h8.4l1.2-2.357H32V3.929h6.8l.8-1.572H36V0h20l-5.6 11H35.2z" id="d"/></defs><g fill="none" fill-rule="evenodd"><rect fill="#000" width="100" height="100" rx="37"/><g transform="translate(22 30)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill-opacity=".6" fill="#FFF" xlink:href="#b"/></g><g transform="translate(22 30)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g><path fill="#FFF" d="M54.785 77H45.88L22 30h15.38L58 70.718z"/></g></svg>

package/src/components/Logo/img/logo.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio"><Title>Verdaccio</Title><defs><path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z"/><filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z"/><filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><rect fill="#F7F8F6" width="100" height="100" rx="37"/><g transform="translate(22 29)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236"/></g><g transform="translate(22 29)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000"/></g><path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F"/><path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square"/></g></svg>

package/src/components/Logo/index.ts

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

package/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import { default as MaterialUIMenuItem, MenuItemProps } from '@mui/material/MenuItem';
+import React, { forwardRef } from 'react';
+
+type HTMLElementTagName = keyof HTMLElementTagNameMap;
+type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
+
+interface Props extends Omit<MenuItemProps, 'component'> {
+  component?: HTMLElementTagName;
+}
+
+const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem(props, ref) {
+  // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
+  // @ts-ignore Type Types of property 'button' are incompatible.
+  return <StyledMaterialUIMenuItem {...props} ref={ref as any} />;
+});
+
+MenuItem.defaultProps = {
+  component: 'li',
+};
+
+export default MenuItem;
+const StyledMaterialUIMenuItem = styled(MaterialUIMenuItem)({
+  outline: 'none',
+});

package/src/components/MenuItem/index.ts

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

package/src/components/NoItems/NoItems.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { default as NoItems } from '.';
+
+export default {
+  title: 'Install  ',
+};
+
+export const NoItemsText: any = () => {
+  return <NoItems text="no items" />;
+};

package/src/components/NoItems/NoItems.tsx

@@ -0,0 +1,16 @@
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+interface Props {
+  text: string;
+  className?: string;
+}
+
+const NoItems: React.FC<Props> = ({ className, text, ...props }) => (
+  // eslint-disable-next-line verdaccio/jsx-spread
+  <Typography {...props} className={className} gutterBottom={true} variant="subtitle1">
+    {text}
+  </Typography>
+);
+
+export default NoItems;

package/src/components/NoItems/Noitems.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render } from '../../test/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/components/NoItems/__snapshots__/Noitems.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NoItem /> component should load the component in default state 1`] = `
+.emotion-0 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
+  margin-bottom: 0.35em;
+}
+
+<h6
+  class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom emotion-0"
+>
+  test
+</h6>
+`;

package/src/components/NoItems/index.ts

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

package/src/components/NotFound/NotFound.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from '../../';
+import Heading from '../Heading';
+// @ts-ignore
+import PackageImg from './img/package.svg';
+
+const NotFound: React.FC = () => {
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const handleGoHome = useCallback(() => {
+    history.push('/');
+  }, [history]);
+
+  return (
+    <Box
+      alignItems="center"
+      data-testid="404"
+      display="flex"
+      flexDirection="column"
+      flexGrow={1}
+      justifyContent="center"
+      p={2}
+    >
+      <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
+      <StyledHeading className="not-found-text" variant="h4">
+        {t('error.404.sorry-we-could-not-find-it')}
+      </StyledHeading>
+      <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
+        {t('button.go-to-the-home-page')}
+      </Button>
+    </Box>
+  );
+};
+
+export default NotFound;
+
+const EmptyPackage = styled('img')({
+  width: '150px',
+  margin: '0 auto',
+});
+
+const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  marginBottom: 16,
+}));