feat: Migrate button components to TypeScript

.changeset/warm-flowers-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Migrate button components to TypeScript

@types/@styled-system/prop-types/index.d.ts

@@ -0,0 +1 @@
+declare module '@styled-system/prop-types'

src/Button/Button.js → src/Button/Button.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
 import {get} from '../constants'
 import theme from '../theme'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import {ComponentProps} from '../utils/types'
 
-const Button = styled(ButtonBase)`
+const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('buttons.default.color.default')};
   background-color: ${get('buttons.default.bg.default')};
   border: 1px solid ${get('buttons.default.border.default')};
@@ -34,7 +35,7 @@ const Button = styled(ButtonBase)`
     border-color: ${get('buttons.default.border.disabled')};
   }
 
-  ${systemStyles}
+  ${buttonSystemProps};
   ${sx};
 `
 
@@ -47,4 +48,5 @@ Button.propTypes = {
   ...sx.propTypes
 }
 
+export type ButtonProps = ComponentProps<typeof Button>
 export default Button

src/Button/ButtonBase.js → src/Button/ButtonBase.tsx

@@ -1,10 +1,16 @@
+import {WeakValidationMap} from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON, LAYOUT} from '../constants'
+import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
 import theme from '../theme'
 import buttonBaseStyles from './ButtonStyles'
 import {compose, variant, fontSize} from 'styled-system'
+import {ComponentProps} from '../utils/types'
 import systemPropTypes from '@styled-system/prop-types'
+import {FontSizeProps} from 'styled-system'
+
+export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT)
+export type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps
 
 const variants = variant({
   variants: {
@@ -22,21 +28,24 @@ const variants = variant({
   }
 })
 
-const ButtonBase = styled.button.attrs(({disabled, onClick}) => ({
+type StyledButtonBaseProps = {
+  as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType
+  variant?: 'small' | 'medium' | 'large'
+} & FontSizeProps
+
+const ButtonBase = styled.button.attrs<StyledButtonBaseProps>(({disabled, onClick}) => ({
   onClick: disabled ? undefined : onClick
-}))`
+}))<StyledButtonBaseProps>`
   ${buttonBaseStyles}
   ${variants}
 `
 
-export const systemStyles = compose(fontSize, COMMON, LAYOUT)
-
 ButtonBase.defaultProps = {
   theme,
   variant: 'medium'
 }
 
-ButtonBase.propTypes = {
+const propTypes: WeakValidationMap<ButtonBaseProps> = {
   as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.elementType]),
   children: PropTypes.node,
   disabled: PropTypes.bool,
@@ -47,5 +56,7 @@ ButtonBase.propTypes = {
   ...COMMON.propTypes,
   ...LAYOUT.propTypes
 }
+ButtonBase.propTypes = propTypes
 
+export type ButtonBaseProps = ComponentProps<typeof ButtonBase>
 export default ButtonBase

src/Button/ButtonClose.tsx

@@ -0,0 +1,50 @@
+import {COMMON, LAYOUT, get, SystemLayoutProps, SystemCommonProps} from '../constants'
+import defaultTheme from '../theme'
+import sx, {SxProp} from '../sx'
+import {XIcon} from '@primer/octicons-react'
+import PropTypes from 'prop-types'
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {ComponentProps} from '../utils/types'
+
+type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp
+
+const StyledButton = styled.button<StyledButtonProps>`
+  border: none;
+  padding: 0;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+
+  &:focus {
+    box-shadow: ${get('buttons.close.shadow.focus')};
+  }
+
+  &:active {
+    color: ${get('buttons.close.color.default')};
+  }
+  ${COMMON};
+  ${LAYOUT};
+  ${sx};
+`
+
+const ButtonClose = forwardRef<HTMLButtonElement, ComponentProps<typeof StyledButton>>(
+  ({theme = defaultTheme, ...props}, ref) => {
+    return (
+      <StyledButton ref={ref} aria-label="Close" {...{theme, ...props}}>
+        <XIcon />
+      </StyledButton>
+    )
+  }
+)
+
+ButtonClose.propTypes = {
+  children: PropTypes.node,
+  onClick: PropTypes.func,
+  ...COMMON.propTypes,
+  ...LAYOUT.propTypes,
+  ...sx.propTypes
+}
+
+export type ButtonCloseProps = ComponentProps<typeof ButtonClose>
+export default ButtonClose

src/Button/ButtonDanger.js → src/Button/ButtonDanger.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 import {get} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonDanger = styled(ButtonBase)`
+const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('buttons.danger.color.default')};
   border: 1px solid ${get('buttons.danger.border.default')};
   background-color: ${get('buttons.danger.bg.default')};
@@ -35,7 +36,7 @@ const ButtonDanger = styled(ButtonBase)`
     border: 1px solid ${get('buttons.danger.border.default')};
   }
 
-  ${systemStyles}
+  ${buttonSystemProps};
   ${sx};
 `
 
@@ -48,4 +49,5 @@ ButtonDanger.propTypes = {
   ...sx.propTypes
 }
 
+export type ButtonDangerProps = ComponentProps<typeof ButtonDanger>
 export default ButtonDanger

src/Button/ButtonGroup.js → src/Button/ButtonGroup.tsx

@@ -3,6 +3,7 @@ import {get} from '../constants'
 import Box from '../Box'
 import theme from '../theme'
 import sx from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const ButtonGroup = styled(Box)`
   vertical-align: middle;
@@ -57,4 +58,5 @@ ButtonGroup.propTypes = {
   ...sx.propTypes
 }
 
+export type ButtonGroupProps = ComponentProps<typeof ButtonGroup>
 export default ButtonGroup

src/Button/ButtonInvisible.js → src/Button/ButtonInvisible.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
 import {get} from '../constants'
 import theme from '../theme'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import {ComponentProps} from '../utils/types'
 
-const ButtonInvisible = styled(ButtonBase)`
+const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('colors.blue.5')};
   background-color: transparent;
   border: 0;
@@ -15,8 +16,8 @@ const ButtonInvisible = styled(ButtonBase)`
     color: ${get('buttons.default.color.disabled')};
   }
 
-  ${systemStyles}
-  ${sx};
+  ${buttonSystemProps};
+  ${sx}
 `
 
 ButtonInvisible.defaultProps = {
@@ -28,4 +29,5 @@ ButtonInvisible.propTypes = {
   ...sx.propTypes
 }
 
+export type ButtonInvisibleProps = ComponentProps<typeof ButtonInvisible>
 export default ButtonInvisible

src/Button/ButtonOutline.js → src/Button/ButtonOutline.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 import {get} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonOutline = styled(ButtonBase)`
+const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('buttons.outline.color.default')};
   border: 1px solid ${get('buttons.outline.border.default')};
   background-color: ${get('buttons.outline.bg.default')};
@@ -35,7 +36,7 @@ const ButtonOutline = styled(ButtonBase)`
     background-color: ${get('buttons.outline.bg.disabled')};
   }
 
-  ${systemStyles}
+  ${buttonSystemProps};
   ${sx};
 `
 
@@ -48,4 +49,5 @@ ButtonOutline.propTypes = {
   ...sx.propTypes
 }
 
+export type ButtonOutlineProps = ComponentProps<typeof ButtonOutline>
 export default ButtonOutline

src/Button/ButtonPrimary.js → src/Button/ButtonPrimary.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import ButtonBase, {systemStyles} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 import {get} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonPrimary = styled(ButtonBase)`
+export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('buttons.primary.color.default')};
   background-color: ${get('buttons.primary.bg.default')};
   border: 1px solid ${get('buttons.primary.border.default')};
@@ -33,7 +34,7 @@ const ButtonPrimary = styled(ButtonBase)`
     border-color: ${get('buttons.primary.border.disabled')};
   }
 
-  ${systemStyles}
+  ${buttonSystemProps};
   ${sx};
 `
 
@@ -46,4 +47,5 @@ ButtonPrimary.propTypes = {
   ...sx.propTypes
 }
 
+export type ButtonPrimaryProps = ComponentProps<typeof ButtonPrimary>
 export default ButtonPrimary

src/Button/ButtonTableList.js → src/Button/ButtonTableList.tsx

@@ -1,10 +1,21 @@
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import {COMMON, LAYOUT, TYPOGRAPHY, get} from '../constants'
+import {
+  COMMON,
+  LAYOUT,
+  TYPOGRAPHY,
+  get,
+  SystemCommonProps,
+  SystemLayoutProps,
+  SystemTypographyProps
+} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const ButtonTableList = styled.summary`
+type StyledButtonTableListProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp
+
+const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   display: inline-block;
   padding: 0;
   font-size: ${get('fontSizes.1')};
@@ -57,4 +68,5 @@ ButtonTableList.propTypes = {
   ...LAYOUT.propTypes
 }
 
+export type ButtonTableListProps = ComponentProps<typeof ButtonTableList>
 export default ButtonTableList

src/Button/index.ts

@@ -0,0 +1,8 @@
+export {default, ButtonProps} from './Button'
+export {default as ButtonDanger, ButtonDangerProps} from './ButtonDanger'
+export {default as ButtonGroup, ButtonGroupProps} from './ButtonGroup'
+export {default as ButtonOutline, ButtonOutlineProps} from './ButtonOutline'
+export {default as ButtonPrimary, ButtonPrimaryProps} from './ButtonPrimary'
+export {default as ButtonInvisible, ButtonInvisibleProps} from './ButtonInvisible'
+export {default as ButtonTableList, ButtonTableListProps} from './ButtonTableList'
+export {default as ButtonClose, ButtonCloseProps} from './ButtonClose'

src/ProgressBar.tsx

@@ -1,4 +1,3 @@
-// @ts-ignore @styled-system/prop-types does not provide type definitions
 import systemPropTypes from '@styled-system/prop-types'
 import PropTypes from 'prop-types'
 import React from 'react'

src/__tests__/Button.js → src/__tests__/Button.tsx

@@ -16,6 +16,7 @@ import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
 
 describe('Button', () => {