Merge pull request #1040 from primer/VanAnderson/SideNav-TSX-migration

Migrate SideNav to TypeScript

.changeset/ninety-fans-remember.md

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

src/SideNav.js → src/SideNav.tsx

@@ -2,13 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled, {css} from 'styled-components'
 import classnames from 'classnames'
-import {COMMON, get} from './constants'
-import theme from './theme'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants'
 import Link from './Link'
 import BorderBox from './BorderBox'
-import sx from './sx'
+import {ComponentProps} from './utils/types'
+import theme from './theme'
+import sx, {SxProp} from './sx'
+import * as History from 'history'
+
+type SideNavBaseProps = {
+  variant?: 'lightweight' | 'normal'
+  bordered?: boolean
+} & ComponentProps<typeof BorderBox>
 
-function SideNavBase({variant, className, bordered, children, ...props}) {
+function SideNavBase({variant, className, bordered, children, ...props}: SideNavBaseProps) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal'
   const newClassName = classnames(className, `variant-${variantClassName}`)
 
@@ -40,8 +47,13 @@ const SideNav = styled(SideNavBase)`
   ${COMMON};
   ${sx};
 `
+type StyledSideNavLinkProps = {
+  to?: History.LocationDescriptor
+  selected?: boolean
+  variant?: 'full' | 'normal'
+}
 
-SideNav.Link = styled(Link).attrs(props => {
+const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
   const isReactRouter = typeof props.to === 'string'
   if (isReactRouter || props.selected) {
     // according to their docs, NavLink supports aria-current:
@@ -50,7 +62,7 @@ SideNav.Link = styled(Link).attrs(props => {
   } else {
     return {}
   }
-})`
+})<StyledSideNavLinkProps>`
   position: relative;
   display: block;
   ${props =>
@@ -147,27 +159,28 @@ SideNav.defaultProps = {
 }
 
 SideNav.propTypes = {
-  as: PropTypes.elementType,
   bordered: PropTypes.bool,
   children: PropTypes.node,
   theme: PropTypes.object,
   variant: PropTypes.oneOf(['normal', 'lightweight']),
   ...BorderBox.propTypes
 }
 
-SideNav.Link.defaultProps = {
+SideNavLink.defaultProps = {
   theme,
   variant: 'normal'
 }
 
-SideNav.Link.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+SideNavLink.propTypes = {
   selected: PropTypes.bool,
   theme: PropTypes.object,
   variant: PropTypes.oneOf(['normal', 'full']),
   ...Link.propTypes
 }
 
-SideNav.Link.displayName = 'SideNav.Link'
+SideNavLink.displayName = 'SideNav.Link'
+
+export type SideNavProps = ComponentProps<typeof SideNav>
+export type SideNavLinksProps = ComponentProps<typeof SideNavLink>
 
-export default SideNav
+export default Object.assign(SideNav, {Link: SideNavLink})