Remove propTypes

.changeset/polite-geese-smile.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": major
+---
+
+Remove propTypes in favor of TypeScript types

docs/components/PropsList.js

@@ -1,10 +1,5 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 const PropsList = ({systemProps}) => <div>{systemProps.propNames.join(', ')}</div>
 
-PropsList.propTypes = {
-  systemProps: PropTypes.arrayOf(PropTypes.string)
-}
-
 export default PropsList

docs/components/constants.js

@@ -1,8 +1,7 @@
-import * as styledSystem from 'styled-system'
-import PropTypes from 'prop-types'
+import {theme} from '@primer/components'
 import systemPropTypes from '@styled-system/prop-types'
 import themeGet from '@styled-system/theme-get'
-import {theme} from '@primer/components'
+import * as styledSystem from 'styled-system'
 
 const {get: getKey, compose, system} = styledSystem
 
@@ -17,21 +16,9 @@ const whiteSpace = system({
 
 export const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace)
 
-TYPOGRAPHY.propTypes = {
-  ...systemPropTypes.typography,
-  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre-wrap', 'pre', 'pre-line'])
-}
-
 export const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display)
-COMMON.propTypes = {
-  ...systemPropTypes.space,
-  ...systemPropTypes.color
-}
+
 export const BORDER = compose(styledSystem.border, styledSystem.shadow)
-BORDER.propTypes = {
-  ...systemPropTypes.border,
-  ...systemPropTypes.shadow
-}
 
 // these are 1:1 with styled-system's API now,
 // so you could consider dropping the abstraction

package.json

@@ -45,7 +45,6 @@
     "@primer/octicons-react": "^11.3.0",
     "@primer/primitives": "3.0.0",
     "@styled-system/css": "5.1.5",
-    "@styled-system/prop-types": "5.1.2",
     "@styled-system/props": "5.1.4",
     "@styled-system/theme-get": "5.1.2",
     "@types/history": "4.7.8",

src/Avatar.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
@@ -39,13 +38,5 @@ Avatar.defaultProps = {
   square: false
 }
 
-Avatar.propTypes = {
-  ...COMMON.propTypes,
-  size: PropTypes.number,
-  square: PropTypes.bool,
-  ...sx.propTypes,
-  theme: PropTypes.object
-}
-
 export type AvatarProps = ComponentProps<typeof Avatar>
 export default Avatar

src/AvatarPair.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {Relative, RelativeProps} from './Position'
 import Avatar from './Avatar'
+import {Relative, RelativeProps} from './Position'
 import theme from './theme'
 
 const ChildAvatar = styled(Avatar)`
@@ -30,9 +29,5 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
 AvatarPair.displayName = 'AvatarPair'
 
 AvatarPair.defaultProps = {theme}
-AvatarPair.propTypes = {
-  ...Relative.propTypes,
-  theme: PropTypes.object
-}
 
 export default AvatarPair

src/AvatarStack.tsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import classnames from 'classnames'
-import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
+import {Absolute} from './Position'
 import sx, {SxProp} from './sx'
-import {get, COMMON, SystemCommonProps} from './constants'
 import theme from './theme'
-import {Absolute} from './Position'
 import {ComponentProps} from './utils/types'
 
 type StyledAvatarStackWrapperProps = {
@@ -164,10 +163,4 @@ AvatarStack.defaultProps = {
   theme
 }
 
-AvatarStack.propTypes = {
-  ...COMMON.propTypes,
-  alignRight: PropTypes.bool,
-  ...sx.propTypes
-}
-
 export default AvatarStack

src/BaseStyles.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import styled, {createGlobalStyle} from 'styled-components'
 import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
@@ -52,10 +51,4 @@ BaseStyles.defaultProps = {
   theme
 }
 
-BaseStyles.propTypes = {
-  ...TYPOGRAPHY.propTypes,
-  ...COMMON.propTypes,
-  theme: PropTypes.object
-}
-
 export default BaseStyles

src/BorderBox.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Box from './Box'
 import {BORDER, SystemBorderProps} from './constants'
@@ -19,12 +18,5 @@ BorderBox.defaultProps = {
   borderRadius: 2
 }
 
-BorderBox.propTypes = {
-  ...Box.propTypes,
-  ...BORDER.propTypes,
-  ...sx.propTypes,
-  theme: PropTypes.object
-}
-
 export type BorderBoxProps = ComponentProps<typeof BorderBox>
 export default BorderBox

src/Box.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants'
 import sx, {SxProp} from './sx'
@@ -14,13 +13,5 @@ const Box = styled.div<SystemCommonProps & SystemFlexProps & SystemLayoutProps &
 
 Box.defaultProps = {theme}
 
-Box.propTypes = {
-  ...COMMON.propTypes,
-  ...FLEX.propTypes,
-  ...LAYOUT.propTypes,
-  ...sx.propTypes,
-  theme: PropTypes.object
-}
-
 export type BoxProps = ComponentProps<typeof Box>
 export default Box

src/BranchName.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
@@ -21,12 +20,5 @@ BranchName.defaultProps = {
   theme
 }
 
-BranchName.propTypes = {
-  href: PropTypes.string,
-  ...COMMON.propTypes,
-  ...sx.propTypes,
-  theme: PropTypes.object
-}
-
 export type BranchNameProps = ComponentProps<typeof BranchName>
 export default BranchName

src/Breadcrumb.tsx

@@ -1,6 +1,5 @@
 import classnames from 'classnames'
 import * as History from 'history'
-import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 import Box from './Box'
@@ -84,24 +83,12 @@ Breadcrumb.defaultProps = {
   theme
 }
 
-Breadcrumb.propTypes = {
-  ...COMMON.propTypes,
-  ...sx.propTypes
-}
-
 Breadcrumb.displayName = 'Breadcrumb'
 
 BreadcrumbItem.defaultProps = {
   theme
 }
 
-BreadcrumbItem.propTypes = {
-  href: PropTypes.string,
-  selected: PropTypes.bool,
-  ...sx.propTypes,
-  ...COMMON.propTypes
-}
-
 BreadcrumbItem.displayName = 'Breadcrumb.Item'
 
 export type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbItem>

src/Button/Button.tsx

@@ -39,14 +39,7 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   ${sx};
 `
 
-Button.defaultProps = {
-  theme
-}
-
-Button.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
+Button.defaultProps = {theme}
 
 export type ButtonProps = ComponentProps<typeof Button>
 export default Button

src/Button/ButtonBase.tsx

@@ -1,13 +1,9 @@
-import {WeakValidationMap} from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
+import {compose, fontSize, FontSizeProps, variant} from 'styled-system'
 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'
+import buttonBaseStyles from './ButtonStyles'
 
 export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT)
 export type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps
@@ -45,18 +41,5 @@ ButtonBase.defaultProps = {
   variant: 'medium'
 }
 
-const propTypes: WeakValidationMap<ButtonBaseProps> = {
-  as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.elementType]),
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  fontSize: systemPropTypes.typography.fontSize,
-  onClick: PropTypes.func,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['small', 'medium', 'large']),
-  ...COMMON.propTypes,
-  ...LAYOUT.propTypes
-}
-ButtonBase.propTypes = propTypes
-
 export type ButtonBaseProps = ComponentProps<typeof ButtonBase>
 export default ButtonBase

src/Button/ButtonClose.tsx

@@ -1,10 +1,9 @@
-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 {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import defaultTheme from '../theme'
 import {ComponentProps} from '../utils/types'
 
 type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp
@@ -39,13 +38,5 @@ const ButtonClose = forwardRef<HTMLButtonElement, ComponentProps<typeof StyledBu
   }
 )
 
-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.tsx

@@ -44,10 +44,5 @@ ButtonDanger.defaultProps = {
   theme
 }
 
-ButtonDanger.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
-
 export type ButtonDangerProps = ComponentProps<typeof ButtonDanger>
 export default ButtonDanger

src/Button/ButtonGroup.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
-import {get} from '../constants'
 import Box from '../Box'
-import theme from '../theme'
+import {get} from '../constants'
 import sx from '../sx'
+import theme from '../theme'
 import {ComponentProps} from '../utils/types'
 
 const ButtonGroup = styled(Box)`
@@ -53,10 +53,5 @@ ButtonGroup.defaultProps = {
   theme
 }
 
-ButtonGroup.propTypes = {
-  ...Box.propTypes,
-  ...sx.propTypes
-}
-
 export type ButtonGroupProps = ComponentProps<typeof ButtonGroup>
 export default ButtonGroup

src/Button/ButtonInvisible.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
-import sx, {SxProp} from '../sx'
 import {get} from '../constants'
+import sx, {SxProp} from '../sx'
 import theme from '../theme'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
 const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('colors.blue.5')};
@@ -20,7 +20,6 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
     box-shadow: ${get('buttons.default.shadow.focus')};
   }
 
-
   ${buttonSystemProps};
   ${sx}
 `
@@ -29,10 +28,5 @@ ButtonInvisible.defaultProps = {
   theme
 }
 
-ButtonInvisible.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
-
 export type ButtonInvisibleProps = ComponentProps<typeof ButtonInvisible>
 export default ButtonInvisible

src/Button/ButtonOutline.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 import {get} from '../constants'
-import theme from '../theme'
 import sx, {SxProp} from '../sx'
+import theme from '../theme'
 import {ComponentProps} from '../utils/types'
+import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
 const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   color: ${get('buttons.outline.color.default')};
@@ -44,10 +44,5 @@ ButtonOutline.defaultProps = {
   theme
 }
 
-ButtonOutline.propTypes = {
-  ...ButtonBase.propTypes,
-  ...sx.propTypes
-}
-
 export type ButtonOutlineProps = ComponentProps<typeof ButtonOutline>
 export default ButtonOutline