util typescript

.eslintignore

@@ -3,6 +3,8 @@ node_modules/*
 **/.*
 **/dist/*
 *.dist.js
+*.dist.ts
+*.dist.tsx
 .cache
 .github
 coverage/*

packages/actionmenu/package.json

@@ -15,7 +15,7 @@
     "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",
     "build:watch": "yarn build:esm -- --watch",
     "storybook": "start-storybook -p 6006",
-    "test": "jest",
+    "test": "tsc --noEmit --project ./tsconfig.json && jest",
     "test:watch": "yarn test -- --watchAll"
   },
   "style": "dist/index.css",

packages/actionmenu/src/react/index.tsx

@@ -2,7 +2,8 @@ import React, {
   HTMLAttributes,
   KeyboardEventHandler,
   MouseEvent,
-  ReactText
+  ReactText,
+  useImperativeHandle
 } from 'react'
 import { css, compose, keyframes } from 'glamor'
 import {
@@ -52,8 +53,9 @@ interface ActionMenuComponent
 
 export const ActionMenu = React.forwardRef<HTMLUListElement, Props>(
   ({ onClick, onClose, children, origin, ...props }, forwardedRef) => {
-    const fallbackRef = React.useRef()
-    const ref = forwardedRef || fallbackRef
+    const ref = React.useRef<HTMLUListElement>()
+    useImperativeHandle(forwardedRef, () => ref.current)
+
     useCloseOnDocumentEvents(ref, onClose)
 
     const handleKeyDown: KeyboardEventHandler<HTMLUListElement> = evt => {

packages/dropdown/package.json

@@ -15,7 +15,7 @@
     "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",
     "build:watch": "yarn build:esm -- --watch",
     "storybook": "start-storybook -p 6006",
-    "test": "jest",
+    "test": "tsc --noEmit --project ./tsconfig.json && jest",
     "test:watch": "yarn test -- --watchAll"
   },
   "gitHead": "7418883d96a76c59a99f86c2b16516ec752bf913",

packages/dropdown/src/js/index.ts

@@ -1,20 +1,17 @@
 import {
   Children,
+  Ref,
+  HTMLAttributes,
   createContext,
-  createRef,
   useEffect,
+  useImperativeHandle,
   useLayoutEffect,
   useMemo,
-  useState,
-  MutableRefObject,
-  HTMLAttributes
+  useRef,
+  useState
 } from 'react'
 import { canUseDOM } from 'exenv'
-import {
-  useCombinedRefs,
-  useMenuRef,
-  ValueOf
-} from '@pluralsight/ps-design-system-util'
+import { useMenuRef, ValueOf } from '@pluralsight/ps-design-system-util'
 
 import * as vars from '../vars'
 
@@ -88,7 +85,10 @@ const sortDropdownProps = ({
   }
 })
 
-export const useDropdown = (props: UseDropdownProps, forwardedRef) => {
+export const useDropdown = (
+  props: UseDropdownProps,
+  forwardedRef: Ref<HTMLButtonElement>
+) => {
   const { hook, ...rest } = sortDropdownProps(props)
   const [isOpen, setOpen] = useState(false)
 
@@ -179,21 +179,25 @@ export const useDropdown = (props: UseDropdownProps, forwardedRef) => {
 
   const longestMenuItemState = getLongestMenuLabelState()
   const [width, setWidth] = useState<React.ReactText>('auto')
-  const innerRef = createRef()
-  const combinedRef = useCombinedRefs(
-    forwardedRef,
-    innerRef
-  ) as MutableRefObject<HTMLButtonElement>
+
+  const ref = useRef<HTMLButtonElement>()
+  useImperativeHandle(forwardedRef, () => ref.current)
+
   useLayoutEffect(() => {
-    setWidth(combinedRef.current.getBoundingClientRect().width)
-  }, [combinedRef, forwardedRef])
+    const { current } = ref
+
+    if (!current) return
+
+    setWidth(current.getBoundingClientRect().width)
+  }, [])
+
   const inNode = canUseDOM ? document.body : null
   const [menuPosition, setMenuPosition] = useState({ left: 0, top: 0 })
 
   return {
     button: {
       ...rest.button,
-      ref: combinedRef,
+      ref,
       isOpen,
       onClick: handleToggleOpen,
       setMenuPosition

packages/dropdown/src/react/__stories__/index.story.tsx

@@ -593,6 +593,7 @@ interface DropdownWithIconProps
 const DropdownWithIcon = forwardRef<HTMLButtonElement, DropdownWithIconProps>(
   ({ icon, ...props }, forwardedRef) => {
     const allProps = useDropdown(props, forwardedRef)
+
     return (
       <Dropdown.Layout
         {...allProps.layout}

packages/util/package.json

@@ -14,7 +14,7 @@
     "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",
     "build:watch": "yarn build:esm -- --watch",
     "storybook": "start-storybook -p 6006",
-    "test": "jest",
+    "test": "tsc --noEmit --project ./tsconfig.json && jest",
     "test:watch": "yarn test -- --watch"
   },
   "types": "dist/esm/index.d.ts",

packages/util/src/__specs__/combine-fns.spec.js → packages/util/src/__specs__/combine-fns.spec.ts

@@ -6,7 +6,9 @@ test('combineFns()', () => {
   const second = undefined
   const third = null
   const fourth = jest.fn()
+
   combineFns(first, second, third, fourth)(expected)
+
   expect(first).toHaveBeenCalledWith(expected)
   expect(fourth).toHaveBeenCalledWith(expected)
 })

packages/util/src/__specs__/storyshots.spec.ts

@@ -0,0 +1,7 @@
+import path from 'path'
+import initStoryshots from '@storybook/addon-storyshots'
+
+initStoryshots({
+  configPath: path.resolve(__dirname, '../../.storybook'),
+  framework: 'react'
+})

packages/util/src/__specs__/string.spec.js → packages/util/src/__specs__/string.spec.ts

@@ -2,7 +2,7 @@ import { capitalize } from '..'
 
 describe('#capitalize', () => {
   test('empty', () => {
-    expect(capitalize()).toEqual()
+    expect(capitalize(undefined)).toEqual(undefined)
     expect(capitalize('')).toEqual('')
   })
 

packages/util/src/__specs__/styles.spec.js → packages/util/src/__specs__/styles.spec.ts

@@ -1,11 +1,11 @@
 import { stylesFor } from '../styles'
 
 it('returns empty object by default', () => {
-  expect(stylesFor()).toEqual({})
+  expect(stylesFor('', {})).toEqual({})
 })
 
 it('returns empty object without props', () => {
-  expect(stylesFor('someKey')).toEqual({})
+  expect(stylesFor('someKey', {})).toEqual({})
 })
 
 it('returns empty object without selectorKey', () => {

packages/util/src/__specs__/use-combined-refs.spec.js → packages/util/src/__specs__/use-combined-refs.spec.tsx

@@ -1,62 +1,68 @@
-/* eslint-disable react/prop-types */
 import { renderHook } from '@testing-library/react-hooks'
-import { createRef, useImperativeHandle, useCallback, useState } from 'react'
+import { useRef, useImperativeHandle, useCallback, useState } from 'react'
 
 import { useCombinedRefs } from '..'
 
 describe('useCombinedRefs', () => {
   test('multiple refs', () => {
     const { result } = renderHook(() => {
-      const outer = createRef()
-      const inner = createRef()
-      const combinedRef = useCombinedRefs(outer, inner)
-      useImperativeHandle(combinedRef, () => ({
+      const outer = useRef<HTMLElement>(null)
+      const inner = useRef<HTMLElement>(null)
+      const combinedRef = useCombinedRefs(inner, outer)
+
+      useImperativeHandle<unknown, unknown>(combinedRef, () => ({
         value: 'ref'
       }))
+
       return { outer, inner }
     })
     expect(result.current.outer).toEqual({ current: { value: 'ref' } })
     expect(result.current.inner).toEqual({ current: { value: 'ref' } })
   })
+
   test('one ref', () => {
     const { result } = renderHook(() => {
-      const outer = createRef()
-      const inner = createRef()
+      const outer = useRef<HTMLElement>(null)
+      const inner = useRef<HTMLElement>(null)
       const combinedRef = useCombinedRefs(outer)
-      useImperativeHandle(combinedRef, () => ({
+
+      useImperativeHandle<unknown, unknown>(combinedRef, () => ({
         value: 'ref'
       }))
+
       return { outer, inner }
     })
     expect(result.current.outer).toEqual({ current: { value: 'ref' } })
     expect(result.current.inner).toEqual({ current: null })
   })
+
   test('no refs', () => {
     const { result } = renderHook(() => {
-      const outer = createRef()
-      const inner = createRef()
+      const outer = useRef<HTMLElement>(null)
+      const inner = useRef<HTMLElement>(null)
       const combinedRef = useCombinedRefs()
-      useImperativeHandle(combinedRef, () => ({
+
+      useImperativeHandle<unknown, unknown>(combinedRef, () => ({
         value: 'ref'
       }))
+
       return { outer, inner }
     })
+
     expect(result.current.outer).toEqual({ current: null })
     expect(result.current.inner).toEqual({ current: null })
   })
-  test('callbackRef', () => {
+
+  test('with a callback ref', () => {
     const { result } = renderHook(() => {
       const [height, setHeight] = useState(0)
-      const outer = createRef()
-      const inner = useCallback(node => {
-        if (node !== null) {
-          setHeight(5)
-        }
-      }, [])
-      useCombinedRefs(inner, outer)
-      return { height, outer }
+      const cbRef = useCallback(() => setHeight(5), [])
+
+      useCombinedRefs(cbRef)
+
+      return { height }
     })
+
     expect(result.current.height).toEqual(5)
-    expect(result.current.outer).toEqual({ current: null })
   })
 })

packages/util/src/__specs__/use-toggle.spec.js → packages/util/src/__specs__/use-toggle.spec.tsx

@@ -8,11 +8,14 @@ describe('useToggle', () => {
   test('uncontrolled', () => {
     const { result } = renderHook(() => useToggle())
     expect(result.current.isOpen).toBe(false)
+
     act(() => {
       result.current.onToggle()
     })
+
     expect(result.current.isOpen).toBe(true)
   })
+
   test('controlled', () => {
     let open = false
     const mockCallback = jest.fn(() => (open = !open))

packages/util/src/call-all.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * @description calls each function passed to it with the provided arguments
+ * @param {...*} args - arguments to be called with each function
+ */
+export const callAll = <Params extends any[]>(
+  ...fns: (Callback<Params> | undefined)[]
+) => (...args: Params) => {
+  return fns.forEach(fn => fn && fn(...args))
+}
+
+interface Callback<Params extends any[]> {
+  (...args: Params): void
+}

packages/util/src/clone-element-with-ref.ts

@@ -0,0 +1,31 @@
+import {
+  RefCallback,
+  HTMLAttributes,
+  ReactHTMLElement,
+  MutableRefObject,
+  cloneElement
+} from 'react'
+
+import { isCallbackRef, isRef } from '.'
+
+export const cloneElementWithRef = <
+  P extends HTMLAttributes<T>,
+  T extends HTMLElement
+>(
+  el: ReactHTMLElement<T>,
+  outerRef: MutableRefObject<T>,
+  props: P
+) => {
+  const { ref: innerRef } = el
+
+  const combine: RefCallback<T> = node => {
+    if (!node) return
+
+    if (isRef<T>(outerRef)) outerRef.current = node
+
+    if (isCallbackRef<T>(innerRef)) innerRef(node)
+    else if (isRef<T>(innerRef)) innerRef.current = node
+  }
+
+  return cloneElement<P, T>(el, { ...props, ref: combine })
+}

packages/util/src/color.js → packages/util/src/color.ts

@@ -1,15 +1,15 @@
-export function transparentize(amount, hex) {
+export function transparentize(amount: number, hex: string) {
   return rgba({
     ...parseToRgb(hex),
     a: (100 - amount * 100) / 100
   })
 }
 
-function rgba(color) {
+function rgba(color: { r: number; g: number; b: number; a: number }) {
   return `rgba(${color.r},${color.g},${color.b},${color.a})`
 }
 
-function parseToRgb(hex) {
+function parseToRgb(hex: string) {
   return {
     r: parseInt(`${hex[1]}${hex[2]}`, 16),
     g: parseInt(`${hex[3]}${hex[4]}`, 16),