Merge pull request #982 from primer/cb/ts-base-styles

Migrate BaseStyles to TypeScript

.changeset/flat-moose-guess.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `BaseStyles` to TypeScript

src/BaseStyles.js → src/BaseStyles.tsx

@@ -1,9 +1,10 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import styled, {createGlobalStyle} from 'styled-components'
-import PropTypes from 'prop-types'
-import {TYPOGRAPHY, COMMON} from './constants'
+import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
 import useMouseIntent from './hooks/useMouseIntent'
 import theme from './theme'
+import {ComponentProps} from './utils/types'
 
 const GlobalStyle = createGlobalStyle`
   * { box-sizing: border-box; }
@@ -24,21 +25,25 @@ const GlobalStyle = createGlobalStyle`
       outline: none;
     }
   }
+`
 
+const Base = styled.div<SystemTypographyProps & SystemCommonProps>`
+  ${TYPOGRAPHY};
+  ${COMMON};
 `
-const Base = props => {
+
+export type BaseStylesProps = ComponentProps<typeof Base>
+
+function BaseStyles(props: BaseStylesProps) {
   const {color, lineHeight, fontFamily, theme, ...rest} = props
   useMouseIntent()
   return (
-    <div {...rest}>
+    <Base {...rest}>
       <GlobalStyle />
       {props.children}
-    </div>
+    </Base>
   )
 }
-const BaseStyles = styled(Base)`
-  ${TYPOGRAPHY} ${COMMON};
-`
 
 BaseStyles.defaultProps = {
   color: 'gray.9',
@@ -52,4 +57,5 @@ BaseStyles.propTypes = {
   ...COMMON.propTypes,
   theme: PropTypes.object
 }
+
 export default BaseStyles

src/Box.tsx

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps, FLEX, SystemFlexProps, LAYOUT, SystemLayoutProps} from './constants'
+import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants'
 import sx, {SxProp} from './sx'
 import theme from './theme'
+import {ComponentProps} from './utils/types'
 
 const Box = styled.div<SystemCommonProps & SystemFlexProps & SystemLayoutProps & SxProp>`
   ${COMMON}
@@ -18,8 +19,8 @@ Box.propTypes = {
   ...FLEX.propTypes,
   ...LAYOUT.propTypes,
   ...sx.propTypes,
-  theme: PropTypes.object,
+  theme: PropTypes.object
 }
 
-export type BoxProps = React.ComponentProps<typeof Box>
+export type BoxProps = ComponentProps<typeof Box>
 export default Box

src/BranchName.tsx

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import theme from './theme'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {ComponentProps} from './utils/types'
 
 const BranchName = styled.a<SystemCommonProps & SxProp>`
   display: inline-block;
@@ -27,5 +28,5 @@ BranchName.propTypes = {
   theme: PropTypes.object
 }
 
-export type BranchNameProps = React.ComponentProps<typeof BranchName>
+export type BranchNameProps = ComponentProps<typeof BranchName>
 export default BranchName

src/Heading.tsx

@@ -1,8 +1,9 @@
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
 import sx, {SxProp} from './sx'
-import PropTypes from 'prop-types'
-import {TYPOGRAPHY, COMMON, get, SystemTypographyProps, SystemCommonProps} from './constants'
 import theme from './theme'
+import {ComponentProps} from './utils/types'
 
 const Heading = styled.h2<SystemTypographyProps & SystemCommonProps & SxProp>`
   font-weight: ${get('fontWeights.bold')};
@@ -24,5 +25,5 @@ Heading.propTypes = {
   ...TYPOGRAPHY.propTypes
 }
 
-export type HeadingProps = React.ComponentProps<typeof Heading>
+export type HeadingProps = ComponentProps<typeof Heading>
 export default Heading

src/Label.tsx

@@ -4,6 +4,7 @@ import {borderColor, BorderColorProps, variant} from 'styled-system'
 import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import theme from './theme'
+import {ComponentProps} from './utils/types'
 
 const outlineStyles = css`
   margin-top: -1px; // offsets the 1px border
@@ -82,5 +83,5 @@ Label.propTypes = {
   ...sx.propTypes
 }
 
-export type LabelProps = React.ComponentProps<typeof Label>
+export type LabelProps = ComponentProps<typeof Label>
 export default Label

src/LabelGroup.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components'
 import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import theme from './theme'
+import {ComponentProps} from './utils/types'
 
 const LabelGroup = styled.span<SystemCommonProps & SxProp>`
   ${COMMON}
@@ -23,5 +24,5 @@ LabelGroup.propTypes = {
   ...sx.propTypes
 }
 
-export type LabelGroupProps = React.ComponentProps<typeof LabelGroup>
+export type LabelGroupProps = ComponentProps<typeof LabelGroup>
 export default LabelGroup

src/Pagehead.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import theme from './theme'
+import {ComponentProps} from './utils/types'
 
 const Pagehead = styled.div<SystemCommonProps & SxProp>`
   position: relative;
@@ -24,5 +25,5 @@ Pagehead.propTypes = {
   ...sx.propTypes
 }
 
-export type PageheadProps = React.ComponentProps<typeof Pagehead>
+export type PageheadProps = ComponentProps<typeof Pagehead>
 export default Pagehead

src/utils/types.ts

@@ -0,0 +1,12 @@
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export type ComponentProps<T> = T extends React.ComponentType<infer Props>
+  ? Props extends object
+    ? Props
+    : never
+  : never