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

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

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Loading /> component should render the component in default state 1`] = `
+.emotion-0 {
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  position: absolute;
+}
+
+.emotion-2 {
+  margin: 0 0 30px 0;
+  border-radius: 25px;
+  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
+  background: #f7f8f6;
+}
+
+.emotion-4 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 90px;
+  height: 90px;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-8 {
+  color: #4b5e40;
+}
+
+<div
+  class="emotion-0 emotion-1"
+  data-testid="loading"
+>
+  <div
+    class="emotion-2 emotion-3"
+  >
+    <div
+      class="emotion-4 emotion-5"
+    />
+  </div>
+  <div
+    class="emotion-6 emotion-7"
+  >
+    <div
+      class="MuiCircularProgress-root emotion-8 emotion-9 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+      role="progressbar"
+      style="width: 50px; height: 50px;"
+    >
+      <svg
+        class="MuiCircularProgress-svg"
+        viewBox="22 22 44 44"
+      >
+        <circle
+          class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+          cx="44"
+          cy="44"
+          fill="none"
+          r="20.2"
+          stroke-width="3.6"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Loading/index.ts

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

package/src/components/Loading/styles.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const Wrapper = styled('div')({
+  transform: 'translate(-50%, -50%)',
+  top: '50%',
+  left: '50%',
+  position: 'absolute',
+});
+
+export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  margin: '0 0 30px 0',
+  borderRadius: 25,
+  boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
+  background: theme?.palette.type === 'dark' ? theme?.palette.black : '#f7f8f6',
+}));

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { render } from 'verdaccio-ui/utils/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 } from 'verdaccio-ui/design-tokens/theme';
+import { useConfig } from 'verdaccio-ui/providers/config';
+
+import blackAndWithLogo from './img/logo-black-and-white.svg';
+import defaultLogo from './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;
+}
+
+const Logo: React.FC<Props> = ({ size, onClick, className }) => {
+  const { configOptions } = useConfig();
+  if (configOptions?.logo) {
+    return (
+      <ImageLogo onClick={onClick} className={className}>
+        <img alt="logo" height="40px" src={configOptions.logo} />
+      </ImageLogo>
+    );
+  }
+  return <StyledLogo size={size} onClick={onClick} className={className} />;
+};
+
+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.type]})`,
+  backgroundRepeat: ' no-repeat',
+  width: sizes[size],
+  height: sizes[size],
+}));

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

@@ -0,0 +1,19 @@
+// 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;
+  background-position: center;
+  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/Menu.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIMenu, MenuProps } from '@material-ui/core/Menu';
+import React, { forwardRef } from 'react';
+
+type MenuRef = HTMLDivElement;
+
+const Menu = forwardRef<MenuRef, MenuProps>(function Menu(props, ref) {
+  return <MaterialUIMenu {...props} ref={ref} />;
+});
+
+export default Menu;

package/src/components/MenuItem.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/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/NotFound/NotFound.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+import Box from '../Box';
+import Button from '../Button';
+import Heading from '../Heading';
+
+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.type === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  marginBottom: 16,
+}));

package/src/components/NotFound/Notfound.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { render, fireEvent } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import NotFound from './NotFound';
+
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
+describe('<NotFound /> component', () => {
+  test('should load the component in default state', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <NotFound />
+      </MemoryRouter>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('go to Home Page button click', async () => {
+    const { getByTestId } = render(
+      <MemoryRouter>
+        <NotFound />
+      </MemoryRouter>
+    );
+
+    const node = getByTestId('not-found-go-to-home-button');
+    fireEvent.click(node);
+    expect(mockHistory).toHaveBeenCalled();
+  });
+});

package/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NotFound /> component should load the component in default state 1`] = `
+.emotion-0 {
+  width: 150px;
+  margin: 0 auto;
+}
+
+.emotion-2 {
+  color: #4b5e40;
+  margin-bottom: 16px;
+}
+
+<div
+  class="MuiBox-root MuiBox-root-1"
+  data-testid="404"
+>
+  <img
+    alt="404 - Page not found"
+    class="emotion-0 emotion-1"
+    src="[object Object]"
+  />
+  <h4
+    class="MuiTypography-root not-found-text emotion-2 emotion-3 MuiTypography-h4"
+  >
+    Sorry, we couldn't find it...
+  </h4>
+  <button
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained"
+    data-testid="not-found-go-to-home-button"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="MuiButton-label"
+    >
+      Go to the home page
+    </span>
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;

package/src/components/NotFound/img/package.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495.2 495.2"><path fill="#d38c0d" d="M325.6 224.4L495.2 126 325.6 28.4l-168.8 99.2z"/><g fill="#efbb67"><path d="M170.4 224.4l168-97.6-168-98.4L0 126.8z"/><path d="M416 368.4l-168 98.4-168-98.4v-196L248 74l168 98.4z"/></g><path fill="#d38c0d" d="M248 74l168 98.4v196l-168 98.4"/><path fill="#efbb67" d="M326.4 314.8L495.2 218l-169.6-98.4L156 218z"/><path fill="#d38c0d" d="M170.4 316.4l168.8-99.2-168.8-97.6L0 218z"/><path fill="#704a0e" d="M248.8 270.8L416 172.4 248.8 74 78.4 172.4z"/><path fill="#513307" d="M248.8 270.8L416 172.4 248.8 74"/><path fill="#2d1c05" d="M248.8 270.8l36-21.6-36-20.8-36 20.8z"/><g fill="#0dd396"><path d="M368 379.6l40-23.2v-12.8l-40 23.2zM368 356.4l40-23.2v-12.8l-40 23.2zM368 333.2l40-23.2v-13.6l-40 24z"/></g></svg>

package/src/components/NotFound/index.ts

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

package/src/components/NotFound/styles.ts

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+import { PRIMARY_COLOR } from 'verdaccio-ui/utils/colors';
+
+import { default as MuiCard } from '../Card';
+import { default as Typography } from '../Heading';
+import List from '../List';
+
+export const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  flex: 1,
+  padding: '16px',
+});
+
+export const Inner = styled('div')({
+  maxWidth: '650px',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const EmptyPackage = styled('img')({
+  width: '150px',
+  margin: '0 auto',
+});
+
+export const Heading = styled(Typography)({
+  color: PRIMARY_COLOR,
+});
+
+export const StyledList = styled(List)({
+  padding: 0,
+  color: PRIMARY_COLOR,
+});
+
+export const Card = styled(MuiCard)({
+  marginTop: '24px',
+});

package/src/components/Paper.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIPaper, PaperProps } from '@material-ui/core/Paper';
+import React, { forwardRef } from 'react';
+
+type PaperRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const Paper = forwardRef<PaperRef, PaperProps>(function Paper(props, ref) {
+  return <MaterialUIPaper {...props} ref={ref} />;
+});
+
+export default Paper;

package/src/components/SnackbarContent.tsx

@@ -0,0 +1,15 @@
+import {
+  default as MaterialUISnackbarContent,
+  SnackbarContentProps,
+} from '@material-ui/core/SnackbarContent';
+import React, { forwardRef } from 'react';
+
+type SnackbarContentRef = HTMLDivElement;
+
+const SnackbarContent = forwardRef<SnackbarContentRef, SnackbarContentProps>(
+  function SnackbarContent(props, ref) {
+    return <MaterialUISnackbarContent {...props} ref={ref} />;
+  }
+);
+
+export default SnackbarContent;

package/src/components/SvgIcon.tsx

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { default as MaterialUISvgIcon, SvgIconProps } from '@material-ui/core/SvgIcon';
+import React from 'react';
+
+type Size = 'sm' | 'md';
+
+type Props = Omit<SvgIconProps, 'color' | 'fontsize' | 'name'> & {
+  size?: Size;
+  title?: string;
+  className?: string;
+};
+
+const SvgIcon = React.forwardRef<SVGSVGElement, Props>(function SvgIcon(
+  { size = 'md', title, ...props },
+  ref
+) {
+  return <StyledMaterialUISvgIcon size={size} titleAccess={title} {...props} ref={ref} />;
+});
+
+export { SvgIcon };
+
+const getSize = (size: Size) => {
+  if (size === 'md') {
+    return {
+      width: 18,
+      height: 18,
+    };
+  }
+
+  return {
+    width: 14,
+    height: 16,
+  };
+};
+
+const StyledMaterialUISvgIcon = styled(MaterialUISvgIcon)<{ size: Size }>(({ size }) => ({
+  ...getSize(size),
+}));

package/src/components/Tab.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUITab, TabProps } from '@material-ui/core/Tab';
+import React, { forwardRef } from 'react';
+
+type TabRef = HTMLButtonElement;
+
+const Tab = forwardRef<TabRef, TabProps>(function Tab(props, ref) {
+  return <MaterialUITab {...props} innerRef={ref} />;
+});
+
+export default Tab;

package/src/components/Tabs.tsx

@@ -0,0 +1,14 @@
+import { default as MaterialUITabs, TabsProps } from '@material-ui/core/Tabs';
+import React, { forwardRef } from 'react';
+
+type TabsRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+interface Props extends Omit<TabsProps, 'onChange'> {
+  onChange: (event: React.ChangeEvent<{}>, value: number) => void;
+}
+
+const Tabs = forwardRef<TabsRef, Props>(function Tabs(props, ref) {
+  return <MaterialUITabs {...props} innerRef={ref} />;
+});
+
+export default Tabs;

package/src/components/Text/Text.tsx

@@ -0,0 +1,17 @@
+import { default as MaterialUITypography } from '@material-ui/core/Typography';
+import React, { forwardRef } from 'react';
+
+import { TextProps } from './TextConfig';
+
+type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+// The reference is already from type of the Component, so the any below is not a problem
+const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
+  return <MaterialUITypography {...props} component="span" ref={ref} />;
+});
+
+Text.defaultProps = {
+  variant: 'subtitle1',
+};
+
+export default Text;

package/src/components/Text/TextConfig.ts

@@ -0,0 +1,7 @@
+import { TypographyProps } from '@material-ui/core/Typography';
+
+type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
+
+export interface TextProps extends Omit<TypographyProps, 'variant'> {
+  variant?: TextType;
+}

package/src/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Text';
+export { TextProps } from './TextConfig';

package/src/components/TextField/TextField.test.tsx

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

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,23 @@
+import { default as MaterialUITextField, TextFieldProps } from '@material-ui/core/TextField';
+import React, { forwardRef } from 'react';
+
+// The default element type of MUI's TextField is 'div'
+type TextFieldRef = HTMLDivElement;
+
+const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField(
+  { InputProps, classes, ...props },
+  ref
+) {
+  return (
+    <MaterialUITextField
+      {...props}
+      innerRef={ref}
+      InputProps={{
+        ...InputProps,
+        classes,
+      }}
+    />
+  );
+});
+
+export default TextField;

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextField /> component should load the component in default state 1`] = `
+<div
+  class="MuiFormControl-root MuiTextField-root"
+>
+  <div
+    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+  >
+    <input
+      aria-invalid="false"
+      class="MuiInputBase-input MuiInput-input"
+      name="test"
+      type="text"
+      value="test"
+    />
+  </div>
+</div>
+`;

package/src/components/TextField/index.ts

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

package/src/components/Toolbar.tsx

@@ -0,0 +1,10 @@
+import { default as MaterialUIToolbar, ToolbarProps } from '@material-ui/core/Toolbar';
+import React, { forwardRef } from 'react';
+
+type ToolbarRef = HTMLDivElement;
+
+const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(props, ref) {
+  return <MaterialUIToolbar {...props} ref={ref} />;
+});
+
+export default Toolbar;

package/src/components/Tooltip.tsx

@@ -0,0 +1,25 @@
+import { default as MaterialUITooltip, TooltipProps } from '@material-ui/core/Tooltip';
+import { TFunctionResult } from 'i18next';
+import React, { forwardRef } from 'react';
+
+// The default element type of MUI's Tooltip is 'div' and the change of this prop is not allowed
+type TooltipRef = HTMLDivElement;
+
+// Returning only the children in case of undefined title was necessary as the Tooltip component no longer accepts this type
+// You can read more about this in this issue https://github.com/mui-org/material-ui/issues/20701
+type Props = Omit<TooltipProps, 'title'> & {
+  title: TFunctionResult;
+};
+
+const Tooltip = forwardRef<TooltipRef, Props>(function ToolTip({ title, children, ...props }, ref) {
+  if (!title) {
+    return children;
+  }
+  return (
+    <MaterialUITooltip {...props} title={title} innerRef={ref}>
+      {children}
+    </MaterialUITooltip>
+  );
+});
+
+export default Tooltip;