feat(button): convert to TypeScript and export types

Author: WesSouza

src/AppBar/AppBar.mdx

@@ -5,7 +5,7 @@ menu: Components
 
 import { AppBar } from './AppBar';
 import Toolbar from '../Toolbar/Toolbar';
-import Button from '../Button/Button';
+import { Button } from '../Button/Button';
 import TextField from '../TextField/TextField';
 import List from '../List/List';
 import ListItem from '../ListItem/ListItem';

src/Bar/Bar.mdx

@@ -6,7 +6,7 @@ menu: Components
 import { Bar } from '../Bar/Bar';
 import { AppBar } from '../AppBar/AppBar.js';
 import Toolbar from '../Toolbar/Toolbar.js';
-import Button from '../Button/Button.js';
+import { Button } from '../Button/Button.js';
 
 # Bar
 

src/Button/Button.mdx

@@ -3,11 +3,11 @@ name: Button
 menu: Components
 ---
 
-import Button from './Button'
-import Window from '../Window/Window'
-import WindowContent from '../WindowContent/WindowContent'
-import Cutout from '../Cutout/Cutout'
-import Toolbar from '../Toolbar/Toolbar'
+import { Button } from './Button';
+import Window from '../Window/Window';
+import WindowContent from '../WindowContent/WindowContent';
+import Cutout from '../Cutout/Cutout';
+import Toolbar from '../Toolbar/Toolbar';
 
 # Button
 
@@ -16,7 +16,7 @@ import Toolbar from '../Toolbar/Toolbar'
 #### Default
 
 <Playground>
-  <Button >Default</Button>
+  <Button>Default</Button>
 </Playground>
 
 #### Disabled
@@ -58,15 +58,9 @@ import Toolbar from '../Toolbar/Toolbar'
       justifyContent: 'space-between'
     }}
   >
-    <Button size='sm'>
-      small
-    </Button>
-    <Button size='md'>
-      medium
-    </Button>
-    <Button size='lg'>
-      large
-    </Button>
+    <Button size='sm'>small</Button>
+    <Button size='md'>medium</Button>
+    <Button size='lg'>large</Button>
   </div>
 </Playground>
 
@@ -90,14 +84,10 @@ import Toolbar from '../Toolbar/Toolbar'
             >
               Primary
             </Button>
-            <Button
-              variant='flat'
-              fullWidth
-              style={{ marginRight: '0.5rem' }}
-            >
+            <Button variant='flat' fullWidth style={{ marginRight: '0.5rem' }}>
               Regular
             </Button>
-            <Button  variant='flat' disabled fullWidt>
+            <Button variant='flat' disabled fullWidt>
               Disabled
             </Button>
           </Toolbar>

src/Button/Button.spec.js renamed to src/Button/Button.spec.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 
 import { renderWithTheme, theme } from '../../test/utils';
 import { blockSizes } from '../common/system';
 
-import Button from './Button';
+import { Button } from './Button';
 
 const defaultProps = {
   children: 'click me'

src/Button/Button.stories.js renamed to src/Button/Button.stories.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import styled from 'styled-components';
-
+import { ComponentMeta } from '@storybook/react';
+import { useState } from 'react';
 import {
   Button,
-  Window,
-  WindowHeader,
-  WindowContent,
+  Cutout,
+  Divider,
   List,
   ListItem,
-  Divider,
-  Cutout,
-  Toolbar
+  Toolbar,
+  Window,
+  WindowContent,
+  WindowHeader
 } from 'react95';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   padding: 5rem;
@@ -32,7 +32,7 @@ export default {
   title: 'Button',
   component: Button,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Button>;
 
 export function Default() {
   return (
@@ -66,7 +66,7 @@ Default.story = {
 const imageSrc =
   'https://image.freepik.com/foto-gratuito/la-frutta-fresca-del-kiwi-tagliata-a-meta-con-la-decorazione-completa-del-pezzo-e-bella-sulla-tavola-di-legno_47436-1.jpg';
 export function Menu() {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
 
   return (
     <Window style={{ maxWidth: '250px' }}>

src/Button/Button.js renamed to src/Button/Button.tsx

@@ -1,36 +1,61 @@
 /* eslint-disable no-nested-ternary */
 
-import React from 'react';
-import propTypes from 'prop-types';
-
+import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import {
   createBorderStyles,
-  createWellBorderStyles,
   createBoxStyles,
-  createFlatBoxStyles,
   createDisabledTextStyles,
+  createFlatBoxStyles,
   createHatchedBackground,
+  createWellBorderStyles,
   focusOutline
 } from '../common';
-import { noOp } from '../common/utils';
 import { blockSizes } from '../common/system';
+import { noOp } from '../common/utils';
+import { CommonStyledProps, Sizes } from '../types';
 
-const commonButtonStyles = css`
+type ButtonProps = {
+  active?: boolean;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+  onTouchStart?: React.ButtonHTMLAttributes<HTMLButtonElement>['onTouchStart'];
+  primary?: boolean;
+  size?: Sizes;
+  square?: boolean;
+  type?: string;
+  variant?: 'default' | 'menu' | 'flat';
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+  CommonStyledProps;
+
+type StyledButtonProps = Pick<
+  ButtonProps,
+  | 'active'
+  | 'disabled'
+  | 'fullWidth'
+  | 'primary'
+  | 'size'
+  | 'square'
+  | 'variant'
+>;
+
+const commonButtonStyles = css<StyledButtonProps>`
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: ${({ size }) => blockSizes[size]};
-  width: ${({ fullWidth, square, size }) =>
+  height: ${({ size = 'md' }) => blockSizes[size]};
+  width: ${({ fullWidth, size = 'md', square }) =>
     fullWidth ? '100%' : square ? blockSizes[size] : 'auto'};
   padding: ${({ square }) => (square ? 0 : `0 10px`)};
   font-size: 1rem;
   user-select: none;
   &:active {
-    padding-top: ${({ isDisabled }) => !isDisabled && '2px'};
+    padding-top: ${({ disabled }) => !disabled && '2px'};
   }
-  padding-top: ${({ active, isDisabled }) => active && !isDisabled && '2px'};
+  padding-top: ${({ active, disabled }) => active && !disabled && '2px'};
   &:after {
     content: '';
     position: absolute;
@@ -46,8 +71,8 @@ const commonButtonStyles = css`
   font-family: inherit;
 `;
 
-export const StyledButton = styled.button`
-  ${({ variant, theme, active, isDisabled, primary }) =>
+export const StyledButton = styled.button<StyledButtonProps>`
+  ${({ active, disabled, primary, theme, variant }) =>
     variant === 'flat'
       ? css`
           ${createFlatBoxStyles()}
@@ -63,7 +88,7 @@ export const StyledButton = styled.button`
             outline-offset: -4px;
           `}
           &:focus:after, &:active:after {
-            ${!active && !isDisabled && focusOutline}
+            ${!active && !disabled && focusOutline}
             outline-offset: -4px;
           }
         `
@@ -73,18 +98,18 @@ export const StyledButton = styled.button`
           border: 2px solid transparent;
           &:hover,
           &:focus {
-            ${!isDisabled && !active && createWellBorderStyles(false)}
+            ${!disabled && !active && createWellBorderStyles(false)}
           }
           &:active {
-            ${!isDisabled && createWellBorderStyles(true)}
+            ${!disabled && createWellBorderStyles(true)}
           }
           ${active && createWellBorderStyles(true)}
-          ${isDisabled && createDisabledTextStyles()}
+          ${disabled && createDisabledTextStyles()}
         `
       : css`
           ${createBoxStyles()};
           border: none;
-          ${isDisabled && createDisabledTextStyles()}
+          ${disabled && createDisabledTextStyles()}
           ${active
             ? createHatchedBackground({
                 mainColor: theme.material,
@@ -115,11 +140,11 @@ export const StyledButton = styled.button`
               : createBorderStyles({ invert: false })}
           }
           &:active:before {
-            ${!isDisabled && createBorderStyles({ invert: true })}
+            ${!disabled && createBorderStyles({ invert: true })}
           }
           &:focus:after,
           &:active:after {
-            ${!active && !isDisabled && focusOutline}
+            ${!active && !disabled && focusOutline}
             outline-offset: -8px;
           }
           &:active:focus:after,
@@ -130,49 +155,41 @@ export const StyledButton = styled.button`
   ${commonButtonStyles}
 `;
 
-const Button = React.forwardRef(function Button(props, ref) {
-  const { onClick, disabled, children, ...otherProps } = props;
-
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    onClick,
+    disabled = false,
+    children,
+    type = 'button',
+    fullWidth = false,
+    size = 'md',
+    square = false,
+    active = false,
+    onTouchStart = noOp,
+    primary = false,
+    variant = 'default',
+    ...otherProps
+  },
+  ref
+) {
   return (
     <StyledButton
-      onClick={disabled ? undefined : onClick}
+      active={active}
       disabled={disabled}
-      isDisabled={disabled}
+      fullWidth={fullWidth}
+      onClick={disabled ? undefined : onClick}
+      onTouchStart={onTouchStart}
+      primary={primary}
       ref={ref}
+      size={size}
+      square={square}
+      type={type}
+      variant={variant}
       {...otherProps}
     >
       {children}
     </StyledButton>
   );
 });
 
-Button.defaultProps = {
-  type: 'button',
-  onClick: null,
-  disabled: false,
-  fullWidth: false,
-  size: 'md',
-  square: false,
-  active: false,
-  // onTouchStart below to enable button :active style on iOS
-  onTouchStart: noOp,
-  primary: false,
-  variant: 'default'
-};
-
-Button.propTypes = {
-  type: propTypes.string,
-  onClick: propTypes.func,
-  disabled: propTypes.bool,
-  fullWidth: propTypes.bool,
-  size: propTypes.oneOf(['sm', 'md', 'lg']),
-  square: propTypes.bool,
-  active: propTypes.bool,
-  onTouchStart: propTypes.func,
-  primary: propTypes.bool,
-  variant: propTypes.oneOf(['default', 'menu', 'flat']),
-  // eslint-disable-next-line react/require-default-props
-  children: propTypes.node
-};
-
-export default Button;
+export { Button, ButtonProps };

src/Checkbox/Checkbox.mdx

@@ -5,7 +5,7 @@ menu: Components
 
 import { Checkbox } from './Checkbox';
 import Fieldset from '../Fieldset/Fieldset';
-import Button from '../Button/Button';
+import { Button } from '../Button/Button';
 import Cutout from '../Cutout/Cutout';
 import List from '../List/List';
 import ListItem from '../ListItem/ListItem';

src/DatePicker/DatePicker.js

@@ -9,7 +9,7 @@ import WindowContent from '../WindowContent/WindowContent';
 import Select from '../Select/Select';
 import NumberField from '../NumberField/NumberField';
 import Cutout from '../Cutout/Cutout';
-import Button from '../Button/Button';
+import { Button } from '../Button/Button';
 import Toolbar from '../Toolbar/Toolbar';
 
 const Calendar = styled(Cutout)`

src/NumberField/NumberField.js

@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import { clamp } from '../common/utils';
 
-import Button from '../Button/Button';
+import { Button } from '../Button/Button';
 import { blockSizes } from '../common/system';
 import TextField from '../TextField/TextField';
 

src/Tooltip/Tooltip.mdx

@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import Tooltip from './Tooltip';
-import Button from '../Button/Button';
+import { Button } from '../Button/Button';
 
 # Tooltip
 

src/Tree/Tree.stories.js

@@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
 
 import { Tree, Fieldset } from 'react95';
-import Button from '../Button/Button';
+import { Button } from '../Button/Button';
 
 const Wrapper = styled.div`
   background: ${({ theme }) => theme.material};