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/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.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TextField from './TextField';
+
+describe('<TextField /> component', () => {
+  const props = {
+    name: 'test',
+    value: 'test',
+  };
+  test('should render the component in default state', () => {
+    const wrapper = mount(<TextField name={props.name} value={props.value} />);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

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/TextField/__snapshots__/TextField.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextField /> component should render 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>"`;

src/muiComponents/TextField/index.ts

@@ -0,0 +1 @@
+export { default } from './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';