Merge pull request #1055 from primer/VanAnderson/utils-ts-migration

Migrate utils to TypeScript

.changeset/light-ears-run.md

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

@types/jest-styled-components/index.d.ts

@@ -0,0 +1 @@
+declare module 'jest-styled-components/serializer'

jest.config.js

@@ -2,5 +2,5 @@ module.exports = {
   cacheDirectory: '.test',
   collectCoverage: true,
   collectCoverageFrom: ['src/*.js'],
-  setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.js', '<rootDir>/src/utils/test-deprecations.js']
+  setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.tsx', '<rootDir>/src/utils/test-deprecations.tsx']
 }

src/utils/deprecate.js → src/utils/deprecate.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable no-console */
 import {useRef, useCallback} from 'react'
+declare var __DEV__: boolean
+
+type DeprecationType = {name: string; message: string; version: string}
 
 const noop = () => {}
 // eslint-disable-next-line import/no-mutable-exports
-let deprecate = null
+let deprecate: ({name, message, version}: DeprecationType) => void | (() => void) = noop
 
 if (__DEV__) {
-  deprecate = ({name, message, version}) => {
+  deprecate = ({name, message, version}: DeprecationType) => {
     Deprecations.deprecate({name, message, version})
   }
-} else {
-  deprecate = noop
 }
 
 export {deprecate}
@@ -19,7 +20,7 @@ export {deprecate}
 let useDeprecation = null
 
 if (__DEV__) {
-  useDeprecation = ({name, message, version}) => {
+  useDeprecation = ({name, message, version}: DeprecationType) => {
     const ref = useRef(false)
     const logDeprecation = useCallback(() => {
       if (!ref.current) {
@@ -39,6 +40,9 @@ if (__DEV__) {
 export {useDeprecation}
 
 export class Deprecations {
+  static instance: Deprecations | null = null
+  deprecations: Array<DeprecationType>
+
   static get() {
     if (!Deprecations.instance) {
       Deprecations.instance = new Deprecations()
@@ -51,7 +55,7 @@ export class Deprecations {
     this.deprecations = []
   }
 
-  static deprecate({name, message, version}) {
+  static deprecate({name, message, version}: DeprecationType) {
     const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`
     console.warn(msg)
 

src/utils/isNumeric.js → src/utils/isNumeric.tsx

@@ -1,3 +1,3 @@
-export default function isNumeric(n) {
+export default function isNumeric(n: any) {
   return !isNaN(parseFloat(n)) && isFinite(n)
 }

src/utils/test-deprecations.js → src/utils/test-deprecations.tsx

@@ -1,5 +1,5 @@
 import semver from 'semver'
-import {Deprecations} from '../utils/deprecate'
+import {Deprecations} from './deprecate'
 
 const ourVersion = require('../../package.json').version
 

src/utils/test-matchers.js → src/utils/test-matchers.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 import 'jest-styled-components'
 import {styleSheetSerializer} from 'jest-styled-components/serializer'
 import theme from '../theme'
+import {ReactTestRendererJSON, ReactTestRendererNode} from 'react-test-renderer'
 import {getClasses, mount, getComputedStyles, render} from './testing'
+import {Nullish} from '@testing-library/react'
 
 expect.addSnapshotSerializer(styleSheetSerializer)
 
-const stringify = d => JSON.stringify(d, null, '  ')
+const stringify = (d: object) => JSON.stringify(d, null, '  ')
 
 /**
  * These are props that styled-system aliases for backwards compatibility.
@@ -34,7 +36,9 @@ expect.extend({
 
   toHaveClasses(node, klasses, only = false) {
     const classes = getClasses(node)
-    const pass = only ? this.equals(classes.sort(), klasses.sort()) : klasses.every(klass => classes.includes(klass))
+    const pass = only
+      ? this.equals(classes.sort(), klasses.sort())
+      : klasses.every((klass: Array<string>) => classes.includes(klass))
     return {
       pass,
       message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}`
@@ -69,13 +73,14 @@ expect.extend({
     const elem = React.cloneElement(element, {sx: sxPropValue})
     const rendered = render(elem)
 
-    function checkStylesDeep(rendered) {
-      const className = rendered.props ? rendered.props.className : ''
+    function checkStylesDeep(rendered: ReactTestRendererJSON): boolean {
+      const className = rendered?.props ? rendered.props.className : ''
       const styles = getComputedStyles(className)
-      if (styles[mediaKey] && styles[mediaKey].color) {
+      const mediaStyles = styles[mediaKey] as Nullish<Record<string, string>>
+      if (mediaStyles && mediaStyles.color) {
         return true
       } else if (rendered.children) {
-        return rendered.children.some(child => checkStylesDeep(child))
+        return rendered.children.some((child: ReactTestRendererNode) => checkStylesDeep(child as ReactTestRendererJSON))
       } else {
         return false
       }

src/utils/testing.tsx

@@ -73,7 +73,7 @@ export function renderClasses(component: React.ReactElement): string {
 /**
  * Returns true if a node renders with a single class.
  */
-export function rendersClass(node: React.ReactElement, klass: string): boolean  {
+export function rendersClass(node: React.ReactElement, klass: string): boolean {
   return renderClasses(node).includes(klass)
 }
 
@@ -96,7 +96,7 @@ export function renderStyles(node: React.ReactElement): any {
   return getComputedStyles(className)
 }
 
-export function getComputedStyles(className: string): Record<string, string> {
+export function getComputedStyles(className: string): Record<string, string | Record<string, string>> {
   const div = document.createElement('div')
   div.className = className
 
@@ -107,14 +107,14 @@ export function getComputedStyles(className: string): Record<string, string> {
       if (rule instanceof CSSMediaRule) {
         readMedia(rule)
       } else if (rule instanceof CSSStyleRule) {
-          readRule(rule, computed)
-        } else {
+        readRule(rule, computed)
+      } else {
         // console.warn('rule.type =', rule.type)
       }
     }
   }
 
-    return computed
+  return computed
 
   function matchesSafe(node: HTMLDivElement, selector: string) {
     if (!selector) {
@@ -194,16 +194,15 @@ export function unloadCSS(path: string) {
 // to render without errors, you can pass a `toRender` function that
 // returns an element ready to be rendered.
 
-
 interface Options {
   skipAs?: boolean
   skipSx?: boolean
 }
 
 interface BehavesAsComponent {
-  Component: React.FunctionComponent<any>,
-  systemPropArray: any[],
-  toRender?: () => React.ReactElement,
+  Component: React.ComponentType<any>
+  systemPropArray: any[]
+  toRender?: () => React.ReactElement
   options?: Options
 }