fix: detailContainer Component - Replaced class by func. comp (#130)

* refactor: coverted class comp. into func.comp

* refactor: added forward ref comp.

* fix: fixed external link color

* fix: fixed typo

* refactor: applied feedbacks

src/components/ActionBar/ActionBar.tsx

@@ -4,12 +4,12 @@ import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
 import List from '@material-ui/core/List';
-import Tooltip from '@material-ui/core/Tooltip';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
 import { Fab, ActionListItem } from './styles';
 import { isURL, extractFileName, downloadFile } from '../../utils/url';
 import api from '../../utils/api';
+import Tooltip from '../../muiComponents/Tooltip';
 
 export interface Action {
   icon: string;

src/components/AutoComplete/styles.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { css } from 'react-emotion';
 import Paper from '@material-ui/core/Paper';
 
-import TextField from '../TextField';
+import TextField from '../../muiComponents/TextField';
 
 export interface InputFieldProps {
   color: string;
@@ -17,6 +17,7 @@ export const Wrapper = styled('div')({
   },
 });
 
+/* eslint-disable verdaccio/jsx-spread */
 export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
   <TextField
     {...others}

src/components/AvatarTooltip/AvatarTooltip.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 
 import Avatar from '@material-ui/core/Avatar';
-import Tooltip from '@material-ui/core/Tooltip';
 import { isEmail } from '../../utils/url';
 
+import Tooltip from '../../muiComponents/TextField';
+
 export interface AvatarDeveloper {
   name: string;
   packageName: string;

src/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -1,9 +1,9 @@
-import Tooltip from '@material-ui/core/Tooltip';
 import FileCopy from '@material-ui/icons/FileCopy';
 import React from 'react';
 
 import { copyToClipBoardUtility } from '../../utils/cli-utils';
 import { TEXT } from '../../utils/constants';
+import Tooltip from '../../muiComponents/Tooltip';
 
 import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
 

src/components/CopyToClipBoard/styles.ts

@@ -1,4 +1,4 @@
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from '../../muiComponents/IconButton';
 import styled from 'react-emotion';
 
 export const ClipBoardCopy = styled('div')({

src/components/Dependencies/Dependencies.tsx

@@ -76,10 +76,6 @@ class DependencyBlock extends Component<{ title: string; dependencies: [] }> {
 }
 
 class Dependencies extends Component {
-  public state = {
-    tabPosition: 0,
-  };
-
   public render(): ReactElement<HTMLElement> {
     return (
       <DetailContextConsumer>

src/components/DetailContainer/DetailContainer.test.tsx

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

src/components/DetailContainer/DetailContainer.tsx

@@ -1,77 +1,33 @@
-import React, { Component, ReactElement, Fragment } from 'react';
+import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
+import Box from '@material-ui/core/Box';
 
-import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
-import Readme from '../Readme';
-import Versions from '../Versions';
-import { preventXSS } from '../../utils/sec-utils';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import { Content } from './styles';
-import Dependencies from '../Dependencies';
-import UpLinks from '../UpLinks';
+import { DetailContext } from '../../pages/Version';
 
-interface DetailContainerState {
-  tabPosition: number;
-}
+import DetailContainerTabs from './DetailContainerTabs';
+import DetailContainerContent from './DetailContainerContent';
+import { TabPosition } from './tabs';
 
-export const README_LABEL = 'Readme';
-export const DEPS_LABEL = 'Dependencies';
-export const VERSION_LABEL = 'Versions';
-export const UPLINKS_LABEL = 'Uplinks';
+const DetailContainer: React.FC = () => {
+  const [tabPosition, setTabPosition] = useState(TabPosition.README);
+  const detailContext = useContext(DetailContext);
+  const { readMe } = detailContext;
 
-class DetailContainer<P> extends Component<P, DetailContainerState> {
-  public state = {
-    tabPosition: 0,
-  };
+  const handleChangeTabPosition = useCallback(
+    (event: ChangeEvent<{}>) => {
+      event.preventDefault();
+      const eventTarget = event.target as HTMLSpanElement;
+      const chosentab = eventTarget.innerText as TabPosition;
+      setTabPosition(TabPosition[chosentab]);
+    },
+    [setTabPosition]
+  );
 
-  public render(): ReactElement<HTMLElement> {
-    return (
-      <DetailContextConsumer>
-        {context => {
-          return this.renderTabs(context as VersionPageConsumerProps);
-        }}
-      </DetailContextConsumer>
-    );
-  }
-
-  private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => {
-    event.preventDefault();
-    this.setState({ tabPosition });
-  };
-
-  private renderListTabs(tabPosition: number): React.ReactElement<HTMLElement> {
-    return (
-      <Tabs indicatorColor={'primary'} onChange={this.handleChange} textColor={'primary'} value={tabPosition} variant={'fullWidth'}>
-        <Tab data-testid={'readme-tab'} id={'readme-tab'} label={README_LABEL} />
-        <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={DEPS_LABEL} />
-        <Tab data-testid={'versions-tab'} id={'versions-tab'} label={VERSION_LABEL} />
-        <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={UPLINKS_LABEL} />
-      </Tabs>
-    );
-  }
-
-  private renderTabs = ({ readMe }) => {
-    const { tabPosition } = this.state;
-
-    return (
-      <Fragment>
-        <Content>
-          {this.renderListTabs(tabPosition)}
-          <br />
-          {tabPosition === 0 && this.renderReadme(readMe)}
-          {tabPosition === 1 && <Dependencies />}
-          {tabPosition === 2 && <Versions />}
-          {tabPosition === 3 && <UpLinks />}
-        </Content>
-      </Fragment>
-    );
-  };
-
-  private renderReadme = (readMe: string): ReactElement<HTMLElement> => {
-    const encodedReadme = preventXSS(readMe);
-
-    return <Readme description={encodedReadme} />;
-  };
-}
+  return (
+    <Box component="div" display="flex" flexDirection="column" padding={2}>
+      <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
+      <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
+    </Box>
+  );
+};
 
 export default DetailContainer;

src/components/DetailContainer/DetailContainerContent.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Dependencies from '../Dependencies';
+import UpLinks from '../UpLinks';
+import Versions from '../Versions';
+
+import DetailContainerContentReadme from './DetailContainerContentReadme';
+import { TabPosition } from './tabs';
+
+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;

src/components/DetailContainer/DetailContainerContentReadme.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { preventXSS } from '../../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;

src/components/DetailContainer/DetailContainerTabs.tsx

@@ -0,0 +1,37 @@
+import React, { ChangeEvent, useState, useEffect } from 'react';
+import { default as MuiTabs } from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import styled from 'react-emotion';
+
+import { TabPosition } from './tabs';
+
+interface Props {
+  tabPosition: TabPosition;
+  onChangeTabPosition: (event: ChangeEvent<{}>) => void;
+}
+
+const Tabs = styled(MuiTabs)({
+  marginBottom: 16,
+});
+
+const getTabIndex = (tabPosition: TabPosition): number => Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
+
+const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
+  const [tabPositionIndex, setTabPositionIndex] = useState(0);
+
+  useEffect(() => {
+    const tabIndex = getTabIndex(tabPosition);
+    setTabPositionIndex(tabIndex);
+  }, [tabPosition]);
+
+  return (
+    <Tabs indicatorColor={'primary'} onChange={onChangeTabPosition} textColor={'primary'} value={tabPositionIndex} variant={'fullWidth'}>
+      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
+      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
+      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />
+      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} />
+    </Tabs>
+  );
+};
+
+export default DetailContainerTabs;

src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DetailContainer renders correctly 1`] = `
+<div
+  class="MuiBox-root MuiBox-root-2"
+>
+  <div
+    class="MuiTabs-root css-1qm1lh emotion-0"
+  >
+    <div
+      class="MuiTabs-scroller MuiTabs-fixed"
+      style="overflow: hidden;"
+    >
+      <div
+        class="MuiTabs-flexContainer"
+        role="tablist"
+      >
+        <button
+          aria-selected="true"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected MuiTab-fullWidth"
+          data-testid="readme-tab"
+          id="readme-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiTab-wrapper"
+          >
+            Readme
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-selected="false"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          data-testid="dependencies-tab"
+          id="dependencies-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiTab-wrapper"
+          >
+            Dependencies
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-selected="false"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          data-testid="versions-tab"
+          id="versions-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiTab-wrapper"
+          >
+            Versions
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          aria-selected="false"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
+          data-testid="uplinks-tab"
+          id="uplinks-tab"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiTab-wrapper"
+          >
+            Uplinks
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+      <span
+        class="PrivateTabIndicator-root-27 PrivateTabIndicator-colorPrimary-28 MuiTabs-indicator"
+        style="left: 0px; width: 0px;"
+      />
+    </div>
+  </div>
+</div>
+`;

src/components/DetailContainer/styles.ts

@@ -1,7 +0,0 @@
-import styled from 'react-emotion';
-
-export const Content = styled('div')({
-  '&&': {
-    padding: '15px',
-  },
-});

src/components/DetailContainer/tabs.ts

@@ -0,0 +1,6 @@
+export enum TabPosition {
+  README = 'Readme',
+  DEPENDENCIES = 'Dependencies',
+  VERSIONS = 'Versions',
+  UPLINKS = 'Uplinks',
+}

src/components/DetailContainer/types.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface Props {
-  children: ReactNode;
-  open: boolean;
-  onClose: () => void;
-}

src/components/Developers/__snapshots__/Developers.test.tsx.snap

@@ -72,79 +72,150 @@ exports[`test Developers should render the component for contributors with items
             name="dmethvin"
             version="1.0.0"
           >
-            <WithStyles(ForwardRef(Tooltip))
+            <ForwardRef(ToolTip)
               title="dmethvin"
             >
-              <ForwardRef(Tooltip)
-                classes={
+              <WithStyles(ForwardRef(TextField))
+                InputProps={
                   Object {
-                    "popper": "MuiTooltip-popper",
-                    "popperInteractive": "MuiTooltip-popperInteractive",
-                    "tooltip": "MuiTooltip-tooltip",
-                    "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
-                    "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
-                    "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
-                    "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
-                    "touch": "MuiTooltip-touch",
+                    "classes": undefined,
                   }
                 }
+                innerRef={null}
                 title="dmethvin"
               >
-                <a
-                  aria-describedby={null}
-                  className=""
-                  href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
-                  target="_top"
+                <ForwardRef(TextField)
+                  InputProps={
+                    Object {
+                      "classes": undefined,
+                    }
+                  }
+                  classes={
+                    Object {
+                      "root": "MuiTextField-root",
+                    }
+                  }
                   title="dmethvin"
                 >
-                  <WithStyles(ForwardRef(Avatar))
-                    aria-label="dmethvin"
+                  <WithStyles(ForwardRef(FormControl))
+                    className="MuiTextField-root"
+                    required={false}
+                    title="dmethvin"
+                    variant="standard"
                   >
-                    <ForwardRef(Avatar)
-                      aria-label="dmethvin"
+                    <ForwardRef(FormControl)
+                      className="MuiTextField-root"
                       classes={
                         Object {
-                          "colorDefault": "MuiAvatar-colorDefault",
-                          "img": "MuiAvatar-img",
-                          "root": "MuiAvatar-root",
+                          "fullWidth": "MuiFormControl-fullWidth",
+                          "marginDense": "MuiFormControl-marginDense",
+                          "marginNormal": "MuiFormControl-marginNormal",
+                          "root": "MuiFormControl-root",
                         }
                       }
-                    >
-                      <div
-                        aria-label="dmethvin"
-                        className="MuiAvatar-root MuiAvatar-colorDefault"
-                      />
-                    </ForwardRef(Avatar)>
-                  </WithStyles(ForwardRef(Avatar))>
-                </a>
-                <ForwardRef(Popper)
-                  anchorEl={
-                    <a
-                      class=""
-                      href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
-                      target="_top"
+                      required={false}
                       title="dmethvin"
+                      variant="standard"
                     >
                       <div
-                        aria-label="dmethvin"
-                        class="MuiAvatar-root MuiAvatar-colorDefault"
-                      />
-                    </a>
-                  }
-                  className="MuiTooltip-popper"
-                  id={null}
-                  open={false}
-                  placement="bottom"
-                  transition={true}
-                />
-              </ForwardRef(Tooltip)>
-            </WithStyles(ForwardRef(Tooltip))>
+                        className="MuiFormControl-root MuiTextField-root"
+                        title="dmethvin"
+                      >
+                        <WithStyles(ForwardRef(Input))>
+                          <ForwardRef(Input)
+                            classes={
+                              Object {
+                                "disabled": "Mui-disabled",
+                                "error": "Mui-error",
+                                "focused": "Mui-focused",
+                                "formControl": "MuiInput-formControl",
+                                "fullWidth": "MuiInput-fullWidth",
+                                "input": "MuiInput-input",
+                                "inputMarginDense": "MuiInput-inputMarginDense",
+                                "inputMultiline": "MuiInput-inputMultiline",
+                                "inputTypeSearch": "MuiInput-inputTypeSearch",
+                                "multiline": "MuiInput-multiline",
+                                "root": "MuiInput-root",
+                                "underline": "MuiInput-underline",
+                              }
+                            }
+                          >
+                            <WithStyles(ForwardRef(InputBase))
+                              classes={
+                                Object {
+                                  "disabled": "Mui-disabled",
+                                  "error": "Mui-error",
+                                  "focused": "Mui-focused",
+                                  "formControl": "MuiInput-formControl",
+                                  "fullWidth": "MuiInput-fullWidth",
+                                  "input": "MuiInput-input",
+                                  "inputMarginDense": "MuiInput-inputMarginDense",
+                                  "inputMultiline": "MuiInput-inputMultiline",
+                                  "inputTypeSearch": "MuiInput-inputTypeSearch",
+                                  "multiline": "MuiInput-multiline",
+                                  "root": "MuiInput-root MuiInput-underline",
+                                  "underline": null,
+                                }
+                              }
+                              fullWidth={false}
+                              inputComponent="input"
+                              multiline={false}
+                              type="text"
+                            >
+                              <ForwardRef(InputBase)
+                                classes={
+                                  Object {
+                                    "adornedEnd": "MuiInputBase-adornedEnd",
+                                    "adornedStart": "MuiInputBase-adornedStart",
+                                    "disabled": "Mui-disabled Mui-disabled",
+                                    "error": "Mui-error Mui-error",
+                                    "focused": "Mui-focused Mui-focused",
+                                    "formControl": "MuiInputBase-formControl MuiInput-formControl",
+                                    "fullWidth": "MuiInputBase-fullWidth MuiInput-fullWidth",
+                                    "input": "MuiInputBase-input MuiInput-input",
+                                    "inputAdornedEnd": "MuiInputBase-inputAdornedEnd",
+                                    "inputAdornedStart": "MuiInputBase-inputAdornedStart",
+                                    "inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
+                                    "inputMarginDense": "MuiInputBase-inputMarginDense MuiInput-inputMarginDense",
+                                    "inputMultiline": "MuiInputBase-inputMultiline MuiInput-inputMultiline",
+                                    "inputSelect": "MuiInputBase-inputSelect",
+                                    "inputTypeSearch": "MuiInputBase-inputTypeSearch MuiInput-inputTypeSearch",
+                                    "marginDense": "MuiInputBase-marginDense",
+                                    "multiline": "MuiInputBase-multiline MuiInput-multiline",
+                                    "root": "MuiInputBase-root MuiInput-root MuiInput-underline",
+                                  }
+                                }
+                                fullWidth={false}
+                                inputComponent="input"
+                                multiline={false}
+                                type="text"
+                              >
+                                <div
+                                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                                  onClick={[Function]}
+                                >
+                                  <input
+                                    aria-invalid={false}
+                                    className="MuiInputBase-input MuiInput-input"
+                                    disabled={false}
+                                    onAnimationStart={[Function]}
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    required={false}
+                                    type="text"
+                                  />
+                                </div>
+                              </ForwardRef(InputBase)>
+                            </WithStyles(ForwardRef(InputBase))>
+                          </ForwardRef(Input)>
+                        </WithStyles(ForwardRef(Input))>
+                      </div>
+                    </ForwardRef(FormControl)>
+                  </WithStyles(ForwardRef(FormControl))>
+                </ForwardRef(TextField)>
+              </WithStyles(ForwardRef(TextField))>
+            </ForwardRef(ToolTip)>
           </AvatarTooltip>
         </span>
       </Styled(span)>
@@ -159,79 +230,150 @@ exports[`test Developers should render the component for contributors with items
             name="mgol"
             version="1.0.0"
           >
-            <WithStyles(ForwardRef(Tooltip))
+            <ForwardRef(ToolTip)
               title="mgol"
             >
-              <ForwardRef(Tooltip)
-                classes={
+              <WithStyles(ForwardRef(TextField))
+                InputProps={
                   Object {
-                    "popper": "MuiTooltip-popper",
-                    "popperInteractive": "MuiTooltip-popperInteractive",
-                    "tooltip": "MuiTooltip-tooltip",
-                    "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
-                    "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
-                    "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
-                    "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
-                    "touch": "MuiTooltip-touch",
+                    "classes": undefined,
                   }
                 }
+                innerRef={null}
                 title="mgol"
               >
-                <a
-                  aria-describedby={null}
-                  className=""
-                  href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
-                  target="_top"
+                <ForwardRef(TextField)
+                  InputProps={
+                    Object {
+                      "classes": undefined,
+                    }
+                  }
+                  classes={
+                    Object {
+                      "root": "MuiTextField-root",
+                    }
+                  }
                   title="mgol"
                 >
-                  <WithStyles(ForwardRef(Avatar))
-                    aria-label="mgol"
+                  <WithStyles(ForwardRef(FormControl))
+                    className="MuiTextField-root"
+                    required={false}
+                    title="mgol"
+                    variant="standard"
                   >
-                    <ForwardRef(Avatar)
-                      aria-label="mgol"
+                    <ForwardRef(FormControl)
+                      className="MuiTextField-root"
                       classes={
                         Object {
-                          "colorDefault": "MuiAvatar-colorDefault",
-                          "img": "MuiAvatar-img",
-                          "root": "MuiAvatar-root",
+                          "fullWidth": "MuiFormControl-fullWidth",
+                          "marginDense": "MuiFormControl-marginDense",
+                          "marginNormal": "MuiFormControl-marginNormal",
+                          "root": "MuiFormControl-root",
                         }
                       }
-                    >
-                      <div
-                        aria-label="mgol"
-                        className="MuiAvatar-root MuiAvatar-colorDefault"
-                      />
-                    </ForwardRef(Avatar)>
-                  </WithStyles(ForwardRef(Avatar))>
-                </a>
-                <ForwardRef(Popper)
-                  anchorEl={
-                    <a
-                      class=""
-                      href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
-                      target="_top"
+                      required={false}
                       title="mgol"
+                      variant="standard"
                     >
                       <div
-                        aria-label="mgol"
-                        class="MuiAvatar-root MuiAvatar-colorDefault"
-                      />
-                    </a>
-                  }
-                  className="MuiTooltip-popper"
-                  id={null}
-                  open={false}
-                  placement="bottom"
-                  transition={true}
-                />
-              </ForwardRef(Tooltip)>
-            </WithStyles(ForwardRef(Tooltip))>
+                        className="MuiFormControl-root MuiTextField-root"
+                        title="mgol"
+                      >
+                        <WithStyles(ForwardRef(Input))>
+                          <ForwardRef(Input)
+                            classes={
+                              Object {
+                                "disabled": "Mui-disabled",
+                                "error": "Mui-error",
+                                "focused": "Mui-focused",
+                                "formControl": "MuiInput-formControl",
+                                "fullWidth": "MuiInput-fullWidth",
+                                "input": "MuiInput-input",
+                                "inputMarginDense": "MuiInput-inputMarginDense",
+                                "inputMultiline": "MuiInput-inputMultiline",
+                                "inputTypeSearch": "MuiInput-inputTypeSearch",
+                                "multiline": "MuiInput-multiline",
+                                "root": "MuiInput-root",
+                                "underline": "MuiInput-underline",
+                              }
+                            }
+                          >
+                            <WithStyles(ForwardRef(InputBase))
+                              classes={
+                                Object {
+                                  "disabled": "Mui-disabled",
+                                  "error": "Mui-error",
+                                  "focused": "Mui-focused",
+                                  "formControl": "MuiInput-formControl",
+                                  "fullWidth": "MuiInput-fullWidth",
+                                  "input": "MuiInput-input",
+                                  "inputMarginDense": "MuiInput-inputMarginDense",
+                                  "inputMultiline": "MuiInput-inputMultiline",
+                                  "inputTypeSearch": "MuiInput-inputTypeSearch",
+                                  "multiline": "MuiInput-multiline",
+                                  "root": "MuiInput-root MuiInput-underline",
+                                  "underline": null,
+                                }
+                              }
+                              fullWidth={false}
+                              inputComponent="input"
+                              multiline={false}
+                              type="text"
+                            >
+                              <ForwardRef(InputBase)
+                                classes={
+                                  Object {
+                                    "adornedEnd": "MuiInputBase-adornedEnd",
+                                    "adornedStart": "MuiInputBase-adornedStart",
+                                    "disabled": "Mui-disabled Mui-disabled",
+                                    "error": "Mui-error Mui-error",
+                                    "focused": "Mui-focused Mui-focused",
+                                    "formControl": "MuiInputBase-formControl MuiInput-formControl",
+                                    "fullWidth": "MuiInputBase-fullWidth MuiInput-fullWidth",
+                                    "input": "MuiInputBase-input MuiInput-input",
+                                    "inputAdornedEnd": "MuiInputBase-inputAdornedEnd",
+                                    "inputAdornedStart": "MuiInputBase-inputAdornedStart",
+                                    "inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
+                                    "inputMarginDense": "MuiInputBase-inputMarginDense MuiInput-inputMarginDense",
+                                    "inputMultiline": "MuiInputBase-inputMultiline MuiInput-inputMultiline",
+                                    "inputSelect": "MuiInputBase-inputSelect",
+                                    "inputTypeSearch": "MuiInputBase-inputTypeSearch MuiInput-inputTypeSearch",
+                                    "marginDense": "MuiInputBase-marginDense",
+                                    "multiline": "MuiInputBase-multiline MuiInput-multiline",
+                                    "root": "MuiInputBase-root MuiInput-root MuiInput-underline",
+                                  }
+                                }
+                                fullWidth={false}
+                                inputComponent="input"
+                                multiline={false}
+                                type="text"
+                              >
+                                <div
+                                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                                  onClick={[Function]}
+                                >
+                                  <input
+                                    aria-invalid={false}
+                                    className="MuiInputBase-input MuiInput-input"
+                                    disabled={false}
+                                    onAnimationStart={[Function]}
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    required={false}
+                                    type="text"
+                                  />
+                                </div>
+                              </ForwardRef(InputBase)>
+                            </WithStyles(ForwardRef(InputBase))>
+                          </ForwardRef(Input)>
+                        </WithStyles(ForwardRef(Input))>
+                      </div>
+                    </ForwardRef(FormControl)>
+                  </WithStyles(ForwardRef(FormControl))>
+                </ForwardRef(TextField)>
+              </WithStyles(ForwardRef(TextField))>
+            </ForwardRef(ToolTip)>
           </AvatarTooltip>
         </span>
       </Styled(span)>
@@ -312,79 +454,150 @@ exports[`test Developers should render the component for maintainers with items
             name="dmethvin"
             version="1.0.0"
           >
-            <WithStyles(ForwardRef(Tooltip))
+            <ForwardRef(ToolTip)
               title="dmethvin"
             >
-              <ForwardRef(Tooltip)
-                classes={
+              <WithStyles(ForwardRef(TextField))
+                InputProps={
                   Object {
-                    "popper": "MuiTooltip-popper",
-                    "popperInteractive": "MuiTooltip-popperInteractive",
-                    "tooltip": "MuiTooltip-tooltip",
-                    "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
-                    "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
-                    "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
-                    "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
-                    "touch": "MuiTooltip-touch",
+                    "classes": undefined,
                   }
                 }
+                innerRef={null}
                 title="dmethvin"
               >
-                <a
-                  aria-describedby={null}
-                  className=""
-                  href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
-                  target="_top"
+                <ForwardRef(TextField)
+                  InputProps={
+                    Object {
+                      "classes": undefined,
+                    }
+                  }
+                  classes={
+                    Object {
+                      "root": "MuiTextField-root",
+                    }
+                  }
                   title="dmethvin"
                 >
-                  <WithStyles(ForwardRef(Avatar))
-                    aria-label="dmethvin"
+                  <WithStyles(ForwardRef(FormControl))
+                    className="MuiTextField-root"
+                    required={false}
+                    title="dmethvin"
+                    variant="standard"
                   >
-                    <ForwardRef(Avatar)
-                      aria-label="dmethvin"
+                    <ForwardRef(FormControl)
+                      className="MuiTextField-root"
                       classes={
                         Object {
-                          "colorDefault": "MuiAvatar-colorDefault",
-                          "img": "MuiAvatar-img",
-                          "root": "MuiAvatar-root",
+                          "fullWidth": "MuiFormControl-fullWidth",
+                          "marginDense": "MuiFormControl-marginDense",
+                          "marginNormal": "MuiFormControl-marginNormal",
+                          "root": "MuiFormControl-root",
                         }
                       }
-                    >
-                      <div
-                        aria-label="dmethvin"
-                        className="MuiAvatar-root MuiAvatar-colorDefault"
-                      />
-                    </ForwardRef(Avatar)>
-                  </WithStyles(ForwardRef(Avatar))>
-                </a>
-                <ForwardRef(Popper)
-                  anchorEl={
-                    <a
-                      class=""
-                      href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
-                      target="_top"
+                      required={false}
                       title="dmethvin"
+                      variant="standard"
                     >
                       <div
-                        aria-label="dmethvin"
-                        class="MuiAvatar-root MuiAvatar-colorDefault"
-                      />
-                    </a>
-                  }
-                  className="MuiTooltip-popper"
-                  id={null}
-                  open={false}
-                  placement="bottom"
-                  transition={true}
-                />
-              </ForwardRef(Tooltip)>
-            </WithStyles(ForwardRef(Tooltip))>
+                        className="MuiFormControl-root MuiTextField-root"
+                        title="dmethvin"
+                      >
+                        <WithStyles(ForwardRef(Input))>
+                          <ForwardRef(Input)
+                            classes={
+                              Object {
+                                "disabled": "Mui-disabled",
+                                "error": "Mui-error",
+                                "focused": "Mui-focused",
+                                "formControl": "MuiInput-formControl",
+                                "fullWidth": "MuiInput-fullWidth",
+                                "input": "MuiInput-input",
+                                "inputMarginDense": "MuiInput-inputMarginDense",
+                                "inputMultiline": "MuiInput-inputMultiline",
+                                "inputTypeSearch": "MuiInput-inputTypeSearch",
+                                "multiline": "MuiInput-multiline",
+                                "root": "MuiInput-root",
+                                "underline": "MuiInput-underline",
+                              }
+                            }
+                          >
+                            <WithStyles(ForwardRef(InputBase))
+                              classes={
+                                Object {
+                                  "disabled": "Mui-disabled",
+                                  "error": "Mui-error",
+                                  "focused": "Mui-focused",
+                                  "formControl": "MuiInput-formControl",
+                                  "fullWidth": "MuiInput-fullWidth",
+                                  "input": "MuiInput-input",
+                                  "inputMarginDense": "MuiInput-inputMarginDense",
+                                  "inputMultiline": "MuiInput-inputMultiline",
+                                  "inputTypeSearch": "MuiInput-inputTypeSearch",
+                                  "multiline": "MuiInput-multiline",
+                                  "root": "MuiInput-root MuiInput-underline",
+                                  "underline": null,
+                                }
+                              }
+                              fullWidth={false}
+                              inputComponent="input"
+                              multiline={false}
+                              type="text"
+                            >
+                              <ForwardRef(InputBase)
+                                classes={
+                                  Object {
+                                    "adornedEnd": "MuiInputBase-adornedEnd",
+                                    "adornedStart": "MuiInputBase-adornedStart",
+                                    "disabled": "Mui-disabled Mui-disabled",
+                                    "error": "Mui-error Mui-error",
+                                    "focused": "Mui-focused Mui-focused",
+                                    "formControl": "MuiInputBase-formControl MuiInput-formControl",
+                                    "fullWidth": "MuiInputBase-fullWidth MuiInput-fullWidth",
+                                    "input": "MuiInputBase-input MuiInput-input",
+                                    "inputAdornedEnd": "MuiInputBase-inputAdornedEnd",
+                                    "inputAdornedStart": "MuiInputBase-inputAdornedStart",
+                                    "inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
+                                    "inputMarginDense": "MuiInputBase-inputMarginDense MuiInput-inputMarginDense",
+                                    "inputMultiline": "MuiInputBase-inputMultiline MuiInput-inputMultiline",
+                                    "inputSelect": "MuiInputBase-inputSelect",
+                                    "inputTypeSearch": "MuiInputBase-inputTypeSearch MuiInput-inputTypeSearch",
+                                    "marginDense": "MuiInputBase-marginDense",
+                                    "multiline": "MuiInputBase-multiline MuiInput-multiline",
+                                    "root": "MuiInputBase-root MuiInput-root MuiInput-underline",
+                                  }
+                                }
+                                fullWidth={false}
+                                inputComponent="input"
+                                multiline={false}
+                                type="text"
+                              >
+                                <div
+                                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                                  onClick={[Function]}
+                                >
+                                  <input
+                                    aria-invalid={false}
+                                    className="MuiInputBase-input MuiInput-input"
+                                    disabled={false}
+                                    onAnimationStart={[Function]}
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    required={false}
+                                    type="text"
+                                  />
+                                </div>
+                              </ForwardRef(InputBase)>
+                            </WithStyles(ForwardRef(InputBase))>
+                          </ForwardRef(Input)>
+                        </WithStyles(ForwardRef(Input))>
+                      </div>
+                    </ForwardRef(FormControl)>
+                  </WithStyles(ForwardRef(FormControl))>
+                </ForwardRef(TextField)>
+              </WithStyles(ForwardRef(TextField))>
+            </ForwardRef(ToolTip)>
           </AvatarTooltip>
         </span>
       </Styled(span)>
@@ -399,79 +612,150 @@ exports[`test Developers should render the component for maintainers with items
             name="mgol"
             version="1.0.0"
           >
-            <WithStyles(ForwardRef(Tooltip))
+            <ForwardRef(ToolTip)
               title="mgol"
             >
-              <ForwardRef(Tooltip)
-                classes={
+              <WithStyles(ForwardRef(TextField))
+                InputProps={
                   Object {
-                    "popper": "MuiTooltip-popper",
-                    "popperInteractive": "MuiTooltip-popperInteractive",
-                    "tooltip": "MuiTooltip-tooltip",
-                    "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
-                    "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
-                    "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
-                    "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
-                    "touch": "MuiTooltip-touch",
+                    "classes": undefined,
                   }
                 }
+                innerRef={null}
                 title="mgol"
               >
-                <a
-                  aria-describedby={null}
-                  className=""
-                  href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
-                  target="_top"
+                <ForwardRef(TextField)
+                  InputProps={
+                    Object {
+                      "classes": undefined,
+                    }
+                  }
+                  classes={
+                    Object {
+                      "root": "MuiTextField-root",
+                    }
+                  }
                   title="mgol"
                 >
-                  <WithStyles(ForwardRef(Avatar))
-                    aria-label="mgol"
+                  <WithStyles(ForwardRef(FormControl))
+                    className="MuiTextField-root"
+                    required={false}
+                    title="mgol"
+                    variant="standard"
                   >
-                    <ForwardRef(Avatar)
-                      aria-label="mgol"
+                    <ForwardRef(FormControl)
+                      className="MuiTextField-root"
                       classes={
                         Object {
-                          "colorDefault": "MuiAvatar-colorDefault",
-                          "img": "MuiAvatar-img",
-                          "root": "MuiAvatar-root",
+                          "fullWidth": "MuiFormControl-fullWidth",
+                          "marginDense": "MuiFormControl-marginDense",
+                          "marginNormal": "MuiFormControl-marginNormal",
+                          "root": "MuiFormControl-root",
                         }
                       }
-                    >
-                      <div
-                        aria-label="mgol"
-                        className="MuiAvatar-root MuiAvatar-colorDefault"
-                      />
-                    </ForwardRef(Avatar)>
-                  </WithStyles(ForwardRef(Avatar))>
-                </a>
-                <ForwardRef(Popper)
-                  anchorEl={
-                    <a
-                      class=""
-                      href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
-                      target="_top"
+                      required={false}
                       title="mgol"
+                      variant="standard"
                     >
                       <div
-                        aria-label="mgol"
-                        class="MuiAvatar-root MuiAvatar-colorDefault"
-                      />
-                    </a>
-                  }
-                  className="MuiTooltip-popper"
-                  id={null}
-                  open={false}
-                  placement="bottom"
-                  transition={true}
-                />
-              </ForwardRef(Tooltip)>
-            </WithStyles(ForwardRef(Tooltip))>
+                        className="MuiFormControl-root MuiTextField-root"
+                        title="mgol"
+                      >
+                        <WithStyles(ForwardRef(Input))>
+                          <ForwardRef(Input)
+                            classes={
+                              Object {
+                                "disabled": "Mui-disabled",
+                                "error": "Mui-error",
+                                "focused": "Mui-focused",
+                                "formControl": "MuiInput-formControl",
+                                "fullWidth": "MuiInput-fullWidth",
+                                "input": "MuiInput-input",
+                                "inputMarginDense": "MuiInput-inputMarginDense",
+                                "inputMultiline": "MuiInput-inputMultiline",
+                                "inputTypeSearch": "MuiInput-inputTypeSearch",
+                                "multiline": "MuiInput-multiline",
+                                "root": "MuiInput-root",
+                                "underline": "MuiInput-underline",
+                              }
+                            }
+                          >
+                            <WithStyles(ForwardRef(InputBase))
+                              classes={
+                                Object {
+                                  "disabled": "Mui-disabled",
+                                  "error": "Mui-error",
+                                  "focused": "Mui-focused",
+                                  "formControl": "MuiInput-formControl",
+                                  "fullWidth": "MuiInput-fullWidth",
+                                  "input": "MuiInput-input",
+                                  "inputMarginDense": "MuiInput-inputMarginDense",
+                                  "inputMultiline": "MuiInput-inputMultiline",
+                                  "inputTypeSearch": "MuiInput-inputTypeSearch",
+                                  "multiline": "MuiInput-multiline",
+                                  "root": "MuiInput-root MuiInput-underline",
+                                  "underline": null,
+                                }
+                              }
+                              fullWidth={false}
+                              inputComponent="input"
+                              multiline={false}
+                              type="text"
+                            >
+                              <ForwardRef(InputBase)
+                                classes={
+                                  Object {
+                                    "adornedEnd": "MuiInputBase-adornedEnd",
+                                    "adornedStart": "MuiInputBase-adornedStart",
+                                    "disabled": "Mui-disabled Mui-disabled",
+                                    "error": "Mui-error Mui-error",
+                                    "focused": "Mui-focused Mui-focused",
+                                    "formControl": "MuiInputBase-formControl MuiInput-formControl",
+                                    "fullWidth": "MuiInputBase-fullWidth MuiInput-fullWidth",
+                                    "input": "MuiInputBase-input MuiInput-input",
+                                    "inputAdornedEnd": "MuiInputBase-inputAdornedEnd",
+                                    "inputAdornedStart": "MuiInputBase-inputAdornedStart",
+                                    "inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
+                                    "inputMarginDense": "MuiInputBase-inputMarginDense MuiInput-inputMarginDense",
+                                    "inputMultiline": "MuiInputBase-inputMultiline MuiInput-inputMultiline",
+                                    "inputSelect": "MuiInputBase-inputSelect",
+                                    "inputTypeSearch": "MuiInputBase-inputTypeSearch MuiInput-inputTypeSearch",
+                                    "marginDense": "MuiInputBase-marginDense",
+                                    "multiline": "MuiInputBase-multiline MuiInput-multiline",
+                                    "root": "MuiInputBase-root MuiInput-root MuiInput-underline",
+                                  }
+                                }
+                                fullWidth={false}
+                                inputComponent="input"
+                                multiline={false}
+                                type="text"
+                              >
+                                <div
+                                  className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                                  onClick={[Function]}
+                                >
+                                  <input
+                                    aria-invalid={false}
+                                    className="MuiInputBase-input MuiInput-input"
+                                    disabled={false}
+                                    onAnimationStart={[Function]}
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    required={false}
+                                    type="text"
+                                  />
+                                </div>
+                              </ForwardRef(InputBase)>
+                            </WithStyles(ForwardRef(InputBase))>
+                          </ForwardRef(Input)>
+                        </WithStyles(ForwardRef(Input))>
+                      </div>
+                    </ForwardRef(FormControl)>
+                  </WithStyles(ForwardRef(FormControl))>
+                </ForwardRef(TextField)>
+              </WithStyles(ForwardRef(TextField))>
+            </ForwardRef(ToolTip)>
           </AvatarTooltip>
         </span>
       </Styled(span)>

src/components/Header/Header.tsx

@@ -3,24 +3,35 @@ import { Link } from 'react-router-dom';
 import { css } from 'emotion';
 
 import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
 import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 import Info from '@material-ui/icons/Info';
 import Help from '@material-ui/icons/Help';
-import Tooltip from '@material-ui/core/Tooltip';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import { default as IconSearch } from '@material-ui/icons/Search';
 
 import { getRegistryURL } from '../../utils/url';
-import ExternalLink from '../Link';
 import Logo from '../Logo';
 import RegistryInfoDialog from '../RegistryInfoDialog/RegistryInfoDialog';
 import Label from '../Label/Label';
 import Search from '../Search/Search';
 import RegistryInfoContent from '../RegistryInfoContent/RegistryInfoContent';
 
-import { Greetings, NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar, LeftSide, RightSide, IconSearchButton, SearchWrapper } from './styles';
+import IconButton from '../../muiComponents/IconButton';
+import Tooltip from '../../muiComponents/Tooltip';
+
+import {
+  Greetings,
+  NavBar,
+  InnerNavBar,
+  MobileNavBar,
+  InnerMobileNavBar,
+  LeftSide,
+  RightSide,
+  IconSearchButton,
+  SearchWrapper,
+  StyledExternalLink,
+} from './styles';
 
 interface Props {
   logo?: string;
@@ -174,9 +185,11 @@ class Header extends Component<Props, State> {
       case 'help':
         content = (
           // @ts-ignore
-          <IconButton blank={true} color={'inherit'} component={ExternalLink} to={'https://verdaccio.org/docs/en/installation'}>
-            <Help />
-          </IconButton>
+          <StyledExternalLink blank={true} to={'https://verdaccio.org/docs/en/installation'}>
+            <IconButton color={'inherit'}>
+              <Help />
+            </IconButton>
+          </StyledExternalLink>
         );
         break;
       case 'info':

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `"<div><header class=\\"MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc e1jf5lit8 MuiAppBar-colorPrimary\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1pwdmmq e1jf5lit0 MuiToolbar-gutters\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1vacr9s e1jf5lit3 MuiToolbar-gutters\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root MuiToolbar-regular css-m61s5i e1jf5lit2 MuiToolbar-gutters\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\" title=\\"Documentation\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></a><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-account\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\\"></path></svg></span></button></div></div></header></div>"`;
+exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `"<div><header class=\\"MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc e1jf5lit8 MuiAppBar-colorPrimary\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1pwdmmq e1jf5lit0 MuiToolbar-gutters\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1vacr9s e1jf5lit3 MuiToolbar-gutters\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root MuiToolbar-regular css-m61s5i e1jf5lit2 MuiToolbar-gutters\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" title=\\"Documentation\\" class=\\"css-1aacqdd e1jf5lit9\\"><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></button></a><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-account\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\\"></path></svg></span></button></div></div></header></div>"`;
 
-exports[`<Header /> component with logged out state should load the component in logged out state 1`] = `"<div><header class=\\"MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc e1jf5lit8 MuiAppBar-colorPrimary\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1pwdmmq e1jf5lit0 MuiToolbar-gutters\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1vacr9s e1jf5lit3 MuiToolbar-gutters\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root MuiToolbar-regular css-m61s5i e1jf5lit2 MuiToolbar-gutters\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\" title=\\"Documentation\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></a><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-login\\"><span class=\\"MuiButton-label\\">Login</span></button></div></div></header></div>"`;
+exports[`<Header /> component with logged out state should load the component in logged out state 1`] = `"<div><header class=\\"MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc e1jf5lit8 MuiAppBar-colorPrimary\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1pwdmmq e1jf5lit0 MuiToolbar-gutters\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1vacr9s e1jf5lit3 MuiToolbar-gutters\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root MuiToolbar-regular css-m61s5i e1jf5lit2 MuiToolbar-gutters\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" title=\\"Documentation\\" class=\\"css-1aacqdd e1jf5lit9\\"><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></button></a><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-login\\"><span class=\\"MuiButton-label\\">Login</span></button></div></div></header></div>"`;

src/components/Header/styles.ts

@@ -1,11 +1,13 @@
 import styled, { css } from 'react-emotion';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
-import IconButton from '@material-ui/core/IconButton';
 
 import colors from '../../utils/styles/colors';
 import mq from '../../utils/styles/media';
 
+import IconButton from '../../muiComponents/IconButton';
+import ExternalLink from '../Link';
+
 export const InnerNavBar = styled(Toolbar)({
   '&&': {
     justifyContent: 'space-between',
@@ -108,3 +110,9 @@ export const NavBar = styled(AppBar)`
     }};
   }
 `;
+
+export const StyledExternalLink = styled(ExternalLink)({
+  '&&': {
+    color: 'white',
+  },
+});

src/components/Package/Package.tsx

@@ -4,12 +4,12 @@ import BugReport from '@material-ui/icons/BugReport';
 import Grid from '@material-ui/core/Grid';
 import HomeIcon from '@material-ui/icons/Home';
 import ListItem from '@material-ui/core/ListItem';
-import Tooltip from '@material-ui/core/Tooltip';
 
 import { PackageMetaInterface } from 'types/packageMeta';
 import Tag from '../Tag';
 import fileSizeSI from '../../utils/file-size';
 import { formatDate, formatDateDistance } from '../../utils/package';
+import Tooltip from '../../muiComponents/Tooltip';
 import {
   Author,
   Avatar,

src/components/Package/styles.ts

@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
 import Grid from '@material-ui/core/Grid';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
-import MuiIconButton from '@material-ui/core/IconButton';
 import Photo from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
@@ -13,6 +12,7 @@ import Ico from '../Icon';
 import Label from '../Label';
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
+import { default as MuiIconButton } from '../../muiComponents/IconButton';
 
 export const OverviewItem = styled('span')`
   && {

src/components/TextField/TextField.tsx

@@ -1,14 +0,0 @@
-import { default as TextFieldMaterialUI, TextFieldProps } from '@material-ui/core/TextField';
-import React from 'react';
-
-const TextField: React.FC<TextFieldProps> = ({ InputProps, classes, ...other }) => (
-  <TextFieldMaterialUI
-    {...other}
-    InputProps={{
-      ...InputProps,
-      classes,
-    }}
-  />
-);
-
-export default TextField;

src/muiComponents/IconButton/IconButton.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import { default as MuiIconButton, IconButtonProps } from '@material-ui/core/IconButton';
+
+type IconButtonRef = HTMLElementTagNameMap['button'];
+
+/* eslint-disable verdaccio/jsx-spread */
+// eslint-disable-next-line react/display-name
+const IconButton = forwardRef<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
+  return <MuiIconButton {...props} ref={ref} />;
+});
+
+export default IconButton;

src/muiComponents/IconButton/index.ts

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

src/muiComponents/TextField/TextField.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { default as TextFieldMaterialUI, TextFieldProps } from '@material-ui/core/TextField';
+
+// The default element type of MUI's TextField is 'div'
+type TextFieldRef = HTMLElementTagNameMap['div'];
+
+/* eslint-disable verdaccio/jsx-spread */
+// eslint-disable-next-line react/display-name
+const TextField = forwardRef<TextFieldRef, TextFieldProps>(function ToolTip({ InputProps, classes, ...props }, ref) {
+  return (
+    <TextFieldMaterialUI
+      {...props}
+      InputProps={{
+        ...InputProps,
+        classes,
+      }}
+      innerRef={ref}
+    />
+  );
+});
+
+export default TextField;

src/muiComponents/Tooltip/Tooltip.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import { default as MuiTooltip, TooltipProps } from '@material-ui/core/Tooltip';
+
+// The default element type of MUI's Tooltip is 'div' and the change of this prop is not allowed
+type TooltipRef = HTMLElementTagNameMap['div'];
+
+/* eslint-disable verdaccio/jsx-spread */
+// eslint-disable-next-line react/display-name
+const Tooltip = forwardRef<TooltipRef, TooltipProps>(function ToolTip(props, ref) {
+  return <MuiTooltip {...props} innerRef={ref} />;
+});
+
+export default Tooltip;

src/muiComponents/Tooltip/index.ts

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