Migrate Pagination to TypeScript

.changeset/nervous-lamps-fold.md

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

src/Pagination/Pagination.js → src/Pagination/Pagination.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import sx from '../sx'
 import {get, COMMON} from '../constants'
+import {ComponentProps} from '../utils/types'
 import theme from '../theme'
 import Box from '../Box'
 import {buildPaginationModel, buildComponentData} from './model'
@@ -109,6 +110,17 @@ const Page = styled.a`
   ${COMMON};
 `
 
+type UsePaginationPagesParameters = {
+  theme?: object // set to theme type once /src/theme.js is converted
+  pageCount: number
+  currentPage: number
+  onPageChange: (e: React.MouseEvent, n: number) => void
+  hrefBuilder: (n: number) => string
+  marginPageCount: number
+  showPages?: boolean
+  surroundingPageCount: number
+}
+
 function usePaginationPages({
   theme,
   pageCount,
@@ -118,11 +130,11 @@ function usePaginationPages({
   marginPageCount,
   showPages,
   surroundingPageCount
-}) {
-  const pageChange = React.useCallback(n => e => onPageChange(e, n), [onPageChange])
+}: UsePaginationPagesParameters) {
+  const pageChange = React.useCallback(n => (e: React.MouseEvent) => onPageChange(e, n), [onPageChange])
 
   const model = React.useMemo(() => {
-    return buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount)
+    return buildPaginationModel(pageCount, currentPage, !!showPages, marginPageCount, surroundingPageCount)
   }, [pageCount, currentPage, showPages, marginPageCount, surroundingPageCount])
 
   const children = React.useMemo(() => {
@@ -146,17 +158,28 @@ const PaginationContainer = styled.nav`
   ${sx};
 `
 
+export type PaginationProps = {
+  theme: object
+  pageCount: number
+  currentPage: number
+  onPageChange?: (e: React.MouseEvent, n: number) => void
+  hrefBuilder?: (n: number) => string
+  marginPageCount: number
+  showPages?: boolean
+  surroundingPageCount?: number
+}
+
 function Pagination({
   theme,
   pageCount,
   currentPage,
-  onPageChange,
-  hrefBuilder,
-  marginPageCount,
-  showPages,
-  surroundingPageCount,
+  onPageChange = noop,
+  hrefBuilder = defaultHrefBuilder,
+  marginPageCount = 1,
+  showPages = true,
+  surroundingPageCount = 2,
   ...rest
-}) {
+}: PaginationProps) {
   const pageElements = usePaginationPages({
     theme,
     pageCount,
@@ -176,7 +199,7 @@ function Pagination({
   )
 }
 
-function defaultHrefBuilder(pageNum) {
+function defaultHrefBuilder(pageNum: number) {
   return `#${pageNum}`
 }
 

src/Pagination/model.js → src/Pagination/model.tsx

@@ -1,9 +1,15 @@
-export function buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount) {
+export function buildPaginationModel(
+  pageCount: number,
+  currentPage: number,
+  showPages: boolean,
+  marginPageCount: number,
+  surroundingPageCount: number
+) {
   const pages = []
 
   if (showPages) {
-    const pageNums = []
-    const addPage = n => {
+    const pageNums: Array<number> = []
+    const addPage = (n: number) => {
       if (n >= 1 && n <= pageCount) {
         pageNums.push(n)
       }
@@ -113,7 +119,18 @@ export function buildPaginationModel(pageCount, currentPage, showPages, marginPa
   return [prev, ...pages, next]
 }
 
-export function buildComponentData(page, hrefBuilder, onClick) {
+type PageType = {
+  type: string
+  num: number
+  disabled?: boolean
+  selected?: boolean
+}
+
+export function buildComponentData(
+  page: PageType,
+  hrefBuilder: (n: number) => string,
+  onClick: (e: React.MouseEvent) => void
+) {
   const props = {}
   let content = ''
   let key = ''
@@ -151,7 +168,7 @@ export function buildComponentData(page, hrefBuilder, onClick) {
     }
     case 'NUM': {
       key = `page-${page.num}`
-      content = page.num
+      content = String(page.num)
       if (page.selected) {
         Object.assign(props, {as: 'em', 'aria-current': 'page'})
       } else {

src/__tests__/Pagination/PaginationModel.js → src/__tests__/Pagination/PaginationModel.tsx

@@ -1,12 +1,12 @@
 import 'babel-polyfill'
 import {buildPaginationModel} from '../../Pagination/model'
 
-function first(array, count = 1) {
+function first(array: Array<any>, count = 1) {
   const slice = array.slice(0, count)
   return count === 1 ? slice[0] : slice
 }
 
-function last(array, count = 1) {
+function last(array: Array<any>, count = 1) {
   const len = array.length
   const slice = array.slice(len - count, len)
   return count === 1 ? slice[0] : slice