Fix types

Author: MichaelDeBoey

packages/common/src/components/Button/elements.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
+import React, { ComponentProps } from 'react';
 import { Link } from 'react-router-dom';
-import { Button as ReakitButton } from 'reakit/Button';
+import { Button as ReakitButtonBase } from 'reakit/Button';
+import styled, { css } from 'styled-components';
+
 import theme from '../../theme';
-import { IButtonProps } from '.';
 import { withoutProps } from '../../utils';
 
+import { Button } from '.';
+
 export type OptionProps = {
   theme: any;
   disabled?: boolean;
@@ -102,7 +104,7 @@ const getBorder = ({
   return '2px solid #66B9F4';
 };
 
-export const styles = css<IButtonProps | any>`
+export const styles = css<ComponentProps<typeof Button> | any>`
   transition: 0.3s ease all;
   font-family: Poppins, Roboto, sans-serif;
 
@@ -160,6 +162,6 @@ export const LinkButton = styled(withoutProps(`small`)(Link))`
 export const AButton = styled(withoutProps(`small`)(props => <a {...props} />))`
   ${styles};
 `;
-export const Button = styled(withoutProps(`small`)(ReakitButton))`
+export const ReakitButton = styled(withoutProps(`small`)(ReakitButtonBase))`
   ${styles}
 `;

packages/common/src/components/Button/index.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 
-import { LinkButton, AButton, Button as ButtonBase, styles } from './elements';
+import { LinkButton, AButton, ReakitButton, styles } from './elements';
 
 type Props = {
   to?: string;
@@ -28,7 +28,7 @@ const Button: FunctionComponent<Props> = ({ style = {}, ...props }) => {
     return <AButton {...props} style={style} />;
   }
 
-  return <ButtonBase {...props} style={style} />;
+  return <ReakitButton {...props} style={style} />;
 };
 
 export { Button, styles as buttonStyles };

packages/common/src/components/Modal/Modal.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import {
   useDialogState,
   DialogDisclosure,
   DialogBackdrop,
   Dialog,
 } from 'reakit/Dialog';
 import { Portal } from 'reakit/Portal';
-import { Button, IButtonProps } from '../Button';
+import { Button } from '../Button';
 import { Backdrop, Container } from './elements';
 
-export interface IModalProps extends IButtonProps {
+export interface IModalProps extends ComponentProps<typeof Button> {
   label?: string;
   button?: React.ElementType;
   backdrop?: React.ElementType;

packages/common/src/components/MultiAction/elements.ts

@@ -1,15 +1,19 @@
-import styled, { css } from 'styled-components';
+import { ComponentProps } from 'react';
+import { Button as ReakitButton } from 'reakit/Button';
 import { Group } from 'reakit/Group';
-import { Button } from 'reakit/Button';
 import { Menu, MenuItem, MenuDisclosure } from 'reakit/Menu';
-import { IButtonProps, buttonStyles } from '../Button';
+import styled, { css } from 'styled-components';
+
+import { Button, buttonStyles } from '../Button';
 
 export const Container = styled(Group)`
   position: relative;
   display: flex;
 `;
 
-export const PrimaryAction = styled(Button)<IButtonProps>`
+export const PrimaryAction = styled(ReakitButton)<
+  ComponentProps<typeof Button>
+>`
   ${({ block }) => css`
     ${buttonStyles};
     justify-content: center;
@@ -21,7 +25,9 @@ export const PrimaryAction = styled(Button)<IButtonProps>`
   `}
 `;
 
-export const ToggleActionsList = styled(MenuDisclosure)<IButtonProps>`
+export const ToggleActionsList = styled(MenuDisclosure)<
+  ComponentProps<typeof Button>
+>`
   ${buttonStyles};
   justify-content: center;
   width: 32px;

packages/common/src/components/ProgressButton/index.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
-import { Button, IButtonProps } from '../Button';
+import React, { ComponentProps, FunctionComponent } from 'react';
+import { Button } from '../Button';
 import { Wrapper, Loader } from './elements';
 
-interface IProgressButtonProps extends IButtonProps {
+type Props = ComponentProps<typeof Button> & {
   loading?: boolean;
-}
-
-const ProgressButton: React.FC<IProgressButtonProps> = ({
-  loading = false,
+};
+const ProgressButton: FunctionComponent<Props> = ({
   disabled = false,
+  loading = false,
   ...props
 }) => (
   <Wrapper>