fix: rest MUI components - Introduced ForwardRef (#224)

* refactor(162): added forwardRef Card

* refactor(162): introduced forwardRefDivider

* refactor(162): introduced forwardRef MuiComponents

* refactor(162): introducing forwardRef

* refactor(162): introduced forwardRef

* refactor(162): introduced forwardRef

* fix(162): fixed link

* fix: fixed port number

* fix: fixed duplicated id

* fix: fixed ref iconbutton

* fix: updated snaps

* fix: fixed port

* fix: fixed eslint errors

* fix: the item should be a button

* fix: fixed eslint errors

src/muiComponents/AppBar/AppBar.tsx

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

src/muiComponents/AppBar/index.ts

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

src/muiComponents/Box/Box.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { default as MaterialUIBox, BoxProps } from '@material-ui/core/Box';
+
+const Box: React.FC<BoxProps> = props => <MaterialUIBox {...props} />;
+
+export default Box;

src/muiComponents/Box/index.ts

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

src/muiComponents/CardActions/CardActions.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUICardActions, CardActionsProps } from '@material-ui/core/CardActions';
+
+type CardActionsRef = HTMLDivElement;
+
+const CardActions = forwardRef<CardActionsRef, CardActionsProps>(function CardContentActions(props, ref) {
+  return <MaterialUICardActions {...props} innerRef={ref} />;
+});
+
+export default CardActions;

src/muiComponents/CardActions/index.ts

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

src/muiComponents/CardContent/CardContent.tsx

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

src/muiComponents/CardContent/index.ts

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

src/muiComponents/Chip/Chip.tsx

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

src/muiComponents/Chip/index.ts

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

src/muiComponents/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { default as MaterialUIDivider, DividerProps } from '@material-ui/core/Divider';
 
-type DividerRef = keyof HTMLElementTagNameMap;
+type DividerRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
 
 const Divider = forwardRef<DividerRef, DividerProps>(function Divider(props, ref) {
   return <MaterialUIDivider {...props} innerRef={ref} />;

src/muiComponents/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIFab, FabProps } from '@material-ui/core/Fab';
+
+type FloatingActionButtonRef = HTMLButtonElement;
+
+const FloatingActionButton = forwardRef<FloatingActionButtonRef, FabProps>(function FloatingActionButton(props, ref) {
+  return <MaterialUIFab {...props} ref={ref} />;
+});
+
+export default FloatingActionButton;

src/muiComponents/FloatingActionButton/index.ts

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

src/muiComponents/FormControl/FormControl.tsx

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

src/muiComponents/FormControl/index.ts

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

src/muiComponents/FormHelperText/FormHelperText.tsx

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

src/muiComponents/FormHelperText/index.ts

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

src/muiComponents/Grid/Grid.tsx

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

src/muiComponents/Grid/index.ts

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

src/muiComponents/Input/Input.tsx

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

src/muiComponents/Input/index.ts

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

src/muiComponents/InputAdornment/InputAdornment.tsx

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

src/muiComponents/InputAdornment/index.ts

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

src/muiComponents/InputLabel/InputLabel.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIInputLabel, InputLabelProps } from '@material-ui/core/InputLabel';
+
+type InputLabelRef = HTMLLabelElement;
+
+const InputLabel = forwardRef<InputLabelRef, InputLabelProps>(function InputLabel(props, ref) {
+  return <MaterialUIInputLabel {...props} ref={ref} />;
+});
+
+export default InputLabel;

src/muiComponents/InputLabel/index.ts

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

src/muiComponents/ListItemText/ListItemText.tsx

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

src/muiComponents/ListItemText/index.ts

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

src/muiComponents/Menu/Menu.tsx

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

src/muiComponents/Menu/index.ts

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

src/muiComponents/MenuItem/MenuItem.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/MenuItem';
+
+type HTMLElementTagName = keyof HTMLElementTagNameMap;
+type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
+
+interface Props extends Omit<MenuItemProps, 'component'> {
+  component?: HTMLElementTagName;
+}
+
+const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem({ button, ...props }, ref) {
+  // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return <MaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
+});
+
+MenuItem.defaultProps = {
+  component: 'li',
+};
+
+export default MenuItem;

src/muiComponents/MenuItem/index.ts

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

src/muiComponents/Paper/Paper.tsx

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

src/muiComponents/Paper/index.ts

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

src/muiComponents/SnackbarContent/SnackbarContent.tsx

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

src/muiComponents/SnackbarContent/index.ts

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

src/muiComponents/Tab/Tab.tsx

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

src/muiComponents/Tab/index.ts

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

src/muiComponents/Tabs/Tabs.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUITabs, TabsProps } from '@material-ui/core/Tabs';
+
+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;

src/muiComponents/Tabs/index.ts

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

src/muiComponents/Text/Text.tsx

@@ -2,14 +2,14 @@ import React, { forwardRef } from 'react';
 import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
 
 type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
-type TextRef = keyof HTMLElementTagNameMap;
+type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
 
-interface Props extends Omit<TypographyProps, 'variant'> {
+export interface TextProps extends Omit<TypographyProps, 'variant'> {
   variant?: TextType;
 }
 
 // The reference is already from type of the Component, so the any below is not a problem
-const Text = forwardRef<TextRef, Props>(function Text(props, ref) {
+const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
   return <MaterialUITypography {...props} ref={ref} />;
 });
 

src/muiComponents/Text/index.ts

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

src/muiComponents/Toolbar/Toolbar.tsx

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

src/muiComponents/Toolbar/index.ts

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