@toptal/picasso-utils 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-77646e396.4080 → 1.0.1-alpha-fx-4861-find-missing-deep-imports-in-staff-portal-25389459e.4083

package/src/utils/test.tsx

@@ -0,0 +1,372 @@
+import { render, act } from '@toptal/picasso-test-utils'
+import type { Ref } from 'react'
+import React, { createRef, useEffect } from 'react'
+
+import type { ReferenceObject } from './index'
+import {
+  capitalize,
+  getNameInitials,
+  isBoolean,
+  isNumber,
+  isString,
+  isSubstring,
+  toTitleCase,
+  kebabToCamelCase,
+  useCombinedRefs,
+  useWidthOf,
+  useSafeState,
+  forwardRef,
+  documentable,
+  disableUnsupportedProps,
+  sum,
+  getReactNodeTextContent,
+  isBrowser,
+} from './index'
+import unsafeErrorLog from './unsafe-error-log'
+
+jest.mock('./unsafe-error-log')
+
+describe('capitalize', () => {
+  it('should capitalize first letter', () => {
+    const string = capitalize('test string')
+
+    expect(string).toBe('Test string')
+  })
+})
+
+describe('getNameInitials', () => {
+  it('should extract first letters', () => {
+    expect(getNameInitials('John Doe')).toBe('JD')
+  })
+
+  it('should ignore extra spaces', () => {
+    expect(getNameInitials(' John  Doe ')).toBe('JD')
+  })
+
+  it('should ignore single letter middle names', () => {
+    expect(getNameInitials('John T Doe')).toBe('JD')
+  })
+
+  it('should extract up to 3 letters', () => {
+    expect(getNameInitials('John Doe John Doe')).toBe('JDJ')
+  })
+})
+
+describe('isBoolean', () => {
+  it('should return true for booleans', () => {
+    expect(isBoolean(true)).toBe(true)
+    expect(isBoolean(false)).toBe(true)
+  })
+
+  it('should return false for other types', () => {
+    expect(isBoolean(1)).toBe(false)
+    expect(isBoolean('1')).toBe(false)
+    expect(isBoolean({})).toBe(false)
+    expect(isBoolean(null)).toBe(false)
+    expect(isBoolean(undefined)).toBe(false)
+  })
+})
+
+describe('isNumber', () => {
+  it('should return true for numbers', () => {
+    expect(isNumber(1)).toBe(true)
+  })
+
+  it('should return false for other types', () => {
+    expect(isNumber(true)).toBe(false)
+    expect(isNumber('1')).toBe(false)
+    expect(isNumber({})).toBe(false)
+    expect(isNumber(null)).toBe(false)
+    expect(isNumber(undefined)).toBe(false)
+  })
+})
+
+describe('isString', () => {
+  it('should return true for strings', () => {
+    expect(isString('')).toBe(true)
+    expect(isString('1')).toBe(true)
+  })
+
+  it('should return false for other types', () => {
+    expect(isString(true)).toBe(false)
+    expect(isString(1)).toBe(false)
+    expect(isString({})).toBe(false)
+    expect(isString(null)).toBe(false)
+    expect(isString(undefined)).toBe(false)
+  })
+})
+
+describe('toTitleCase', () => {
+  it('should convert strings', () => {
+    expect(toTitleCase('ab bc')).toBe('Ab Bc')
+  })
+
+  it('should ignore react nodes', () => {
+    const node = <div>ab bc</div>
+
+    expect(toTitleCase(node)).toBe(node)
+  })
+})
+
+describe('isSubstring', () => {
+  it('should check if a string contains another ignoring case', () => {
+    expect(isSubstring('TEST', 'a test string')).toBe(true)
+    expect(isSubstring('test', 'a test string')).toBe(true)
+    expect(isSubstring('test word', 'a test string')).toBe(false)
+  })
+})
+
+describe('kebabToCamelCase', () => {
+  it('should convert kebab to camel case', () => {
+    expect(kebabToCamelCase('a-test-string')).toBe('aTestString')
+  })
+})
+
+describe('sum', () => {
+  it('returns the total of all numbers in an array', () => {
+    expect(sum([0, 1, 2, 3])).toBe(6)
+  })
+})
+
+const TestUseCombinedRefs = ({ refs }: { refs: Ref<HTMLDivElement>[] }) => {
+  return <div ref={useCombinedRefs(...refs)} />
+}
+
+describe('useCombinedRefs', () => {
+  it('should combine object and function refs', async () => {
+    const refObject = createRef<HTMLDivElement>()
+    const refFunction = jest.fn()
+
+    render(<TestUseCombinedRefs refs={[refObject, refFunction]} />)
+
+    expect(refObject.current).toBeDefined()
+    expect(refFunction.mock.calls[0][0]).toBeDefined()
+  })
+})
+
+const TestForwardRef = documentable(
+  forwardRef(
+    <T extends string>(
+      { item }: { ref: Ref<HTMLDivElement>; item: T },
+      ref: Ref<HTMLDivElement>
+    ) => {
+      return <div ref={ref}>{item}</div>
+    }
+  )
+)
+
+describe('forwardRef', () => {
+  it('should forward a ref with generic component', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    render(<TestForwardRef ref={ref} item='item' />)
+
+    expect(ref.current).toBeDefined()
+    expect(ref.current?.tagName).toBe('DIV')
+  })
+})
+
+const TestUseSafeState = () => {
+  const [state, setState] = useSafeState('initial')
+
+  useEffect(() => {
+    setTimeout(() => setState('changed'), 100)
+  }, [setState])
+
+  return <div>{state}</div>
+}
+
+describe('useSafeState', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('should use initial state', () => {
+    const { queryByText } = render(<TestUseSafeState />)
+
+    expect(queryByText('initial')).toBeInTheDocument()
+  })
+
+  it('should set state in an async effect', () => {
+    const { queryByText } = render(<TestUseSafeState />)
+
+    act(() => {
+      jest.runAllTimers()
+    })
+
+    expect(queryByText('changed')).toBeInTheDocument()
+  })
+
+  it('should not throw when state is set after unmounting', () => {
+    const { unmount } = render(<TestUseSafeState />)
+
+    unmount()
+
+    expect(() =>
+      act(() => {
+        jest.runAllTimers()
+      })
+    ).not.toThrow()
+  })
+})
+
+const TestUseWidthOf = ({ element }: { element: ReferenceObject }) => {
+  const width = useWidthOf(element)
+
+  return <div>{width}</div>
+}
+
+describe('useWidthOf', () => {
+  it('should measure width of passed element', () => {
+    const rect = {
+      top: 10,
+      left: 10,
+      right: 110,
+      bottom: 30,
+      width: 100,
+      height: 20,
+    }
+    const element = {
+      getBoundingClientRect: () => rect,
+    } as ReferenceObject
+
+    const { queryByText } = render(<TestUseWidthOf element={element} />)
+    const message = queryByText('100px')
+
+    expect(message).toBeInTheDocument()
+  })
+})
+
+const TestDisableUnsupportedProps = (props: {
+  type: string
+  max?: number | string
+}) => {
+  const { type, max } = disableUnsupportedProps(
+    'TestDisableUnsupportedProps',
+    props,
+    {
+      featureProps: {
+        type: 'text',
+      },
+      unsupportedProps: {
+        max: '',
+      },
+    }
+  )
+
+  return <input type={type} max={max} />
+}
+
+describe('disableUnsupportedProps', () => {
+  it('should render with supported props', () => {
+    const { getByRole } = render(
+      <TestDisableUnsupportedProps type='number' max={2} />
+    )
+    const input = getByRole('spinbutton')
+
+    expect(input).toHaveProperty('type', 'number')
+    expect(input).toHaveProperty('max', '2')
+    expect(unsafeErrorLog).not.toHaveBeenCalled()
+  })
+
+  it('should override unsupported props and warn the developer', () => {
+    const { getByRole } = render(
+      <TestDisableUnsupportedProps type='text' max={2} />
+    )
+    const input = getByRole('textbox')
+
+    expect(input).toHaveProperty('type', 'text')
+    expect(input).toHaveProperty('max', '')
+    expect(unsafeErrorLog).toHaveBeenCalledWith(
+      'TestDisableUnsupportedProps doesn\'t support: max props when used with {"type":"text"}'
+    )
+  })
+})
+
+describe('isBrowser', () => {
+  let windowSpy: any
+
+  beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get')
+  })
+
+  afterEach(() => {
+    windowSpy?.mockRestore()
+  })
+
+  it('should return true if window is undefined', () => {
+    windowSpy?.mockImplementation(() => undefined)
+
+    expect(isBrowser()).toBe(false)
+  })
+
+  it('should return true for window is not undefined', () => {
+    windowSpy.mockImplementation(() => ({}))
+
+    expect(isBrowser()).toBe(true)
+  })
+})
+
+describe('getRectNodeTextContent', () => {
+  describe('when getting text from string node', () => {
+    it.each(['foo', ''])(
+      "returns its content original content, value: '%s'",
+      txt => {
+        expect(getReactNodeTextContent(txt)).toBe(txt)
+      }
+    )
+
+    it('strips spaces from start and end of the text', () => {
+      expect(getReactNodeTextContent('  foo   ')).toBe('foo')
+    })
+  })
+
+  describe('when getting text from a number node', () => {
+    it.each([42, -12, Infinity, NaN, -0])(
+      'returns its content original content, value: %s',
+      num => {
+        expect(getReactNodeTextContent(num)).toBe(String(num))
+      }
+    )
+  })
+
+  describe('when getting text from a array node', () => {
+    it('returns the contents of its elements joined by space', () => {
+      expect(getReactNodeTextContent(['foo', <div>bar</div>, 45])).toBe(
+        'foo bar 45'
+      )
+    })
+  })
+
+  describe('when getting text from non printable nodes in react', () => {
+    it.each([null, undefined, true, false])(
+      'returns an empty string, value: "%s"',
+      nonOp => {
+        expect(getReactNodeTextContent(nonOp)).toBe('')
+      }
+    )
+  })
+
+  describe('when getting text from a complex node', () => {
+    it("returns it's children content recursively", () => {
+      expect(
+        getReactNodeTextContent(
+          <div>
+            <h1>Title</h1>
+            <caption>
+              <span>Subtitle</span>
+            </caption>
+            <p>
+              <img />
+              Amet quidem quod doloribus dignissimos
+            </p>
+          </div>
+        )
+      ).toBe('Title Subtitle Amet quidem quod doloribus dignissimos')
+    })
+  })
+})

package/src/utils/to-title-case.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+import titleCase from 'ap-style-title-case'
+
+import isString from './is-string'
+
+const toTitleCase = (node: ReactNode) => {
+  if (!node || !isString(node)) {
+    return node
+  }
+
+  return titleCase(node as string)
+}
+
+export default toTitleCase

package/src/utils/unsafe-error-log.ts

@@ -0,0 +1,5 @@
+const unsafeErrorLog = (error: string) => {
+  console.log(error)
+}
+
+export default unsafeErrorLog

package/src/utils/use-combined-refs.ts

@@ -0,0 +1,26 @@
+import type { RefObject, Ref } from 'react'
+import { useRef, useEffect } from 'react'
+
+const useCombinedRefs = <T>(...refs: (RefObject<T> | Ref<T>)[]) => {
+  const targetRef = useRef<T>(null)
+
+  useEffect(() => {
+    refs.forEach(ref => {
+      if (!ref) {
+        return
+      }
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current)
+      } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ref.current = targetRef.current
+      }
+    })
+  }, [refs])
+
+  return targetRef
+}
+
+export default useCombinedRefs

package/src/utils/use-deprecation-warnings.ts

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import unsafeErrorLog from './unsafe-error-log'
+
+interface UseDeprecationWarningArgs {
+  description?: string
+  name: string
+  newName?: string
+}
+
+const useDeprecationWarning = ({
+  description,
+  name,
+  newName,
+}: UseDeprecationWarningArgs) => {
+  const message =
+    `'${name}' component is deprecated and will be removed in the next major release of Picasso.'` +
+    `${newName ? ` Please use '${newName}' instead.` : ''}` +
+    `${description ? `\n${description}` : ''}`
+
+  React.useEffect(() => {
+    unsafeErrorLog(message)
+  }, [message])
+}
+
+interface UsePropDeprecationWarningArgs<P> {
+  props: P
+  componentName: string
+  description?: string
+  name: keyof P
+  newName?: string
+}
+
+const usePropDeprecationWarning = <P extends {}>({
+  props,
+  componentName,
+  description,
+  name,
+  newName,
+}: UsePropDeprecationWarningArgs<P>) => {
+  const propName = String(name)
+  const message =
+    `${componentName}'s '${propName}' prop is deprecated and will be removed in the next major release of Picasso.` +
+    `${newName ? ` Please use '${newName}' instead.` : ''}` +
+    `${description ? `\n${description}` : ''}`
+
+  const isDeprecatedPropUsed = name in props
+
+  React.useEffect(() => {
+    if (isDeprecatedPropUsed) {
+      unsafeErrorLog(message)
+    }
+  }, [isDeprecatedPropUsed, message])
+}
+
+export { useDeprecationWarning, usePropDeprecationWarning }

package/src/utils/use-multiple-forward-refs.ts

@@ -0,0 +1,37 @@
+import type { ForwardedRef } from 'react'
+import { useCallback } from 'react'
+
+const forwardRef = <T>(ref: ForwardedRef<T>, value: T) => {
+  if (typeof ref === 'function') {
+    ref(value)
+  } else if (ref) {
+    ref.current = value
+  }
+}
+
+/**
+ * This hook allows to forward ref to multiple holders.
+ *
+ * @example
+ *
+ *   const ref1 = useRef(null)
+ *   const ref2 = useRef(null)
+ *
+ *   const ref = useMultipleForwardRefs([ref1, ref2])
+ *
+ *   <div ref={ref} />
+ *
+ *   console.log(ref1.current) // <div />
+ *   console.log(ref2.current) // <div />
+ */
+const useMultipleForwardRefs = <T>(refs: ForwardedRef<T>[]) =>
+  useCallback(
+    (refValue: T) => {
+      for (const ref of refs) {
+        forwardRef(ref, refValue)
+      }
+    },
+    [...refs]
+  )
+
+export default useMultipleForwardRefs

package/src/utils/use-page-scroll-lock.ts

@@ -0,0 +1,64 @@
+import { isBrowser } from '@toptal/picasso-shared'
+import { useEffect, useMemo } from 'react'
+
+const layers = new Set<number>()
+let scrollLock: { prevHtmlOverflow: string } | undefined = undefined
+
+export const usePageScrollLock = (isLocked: boolean) => {
+  const layerId = useMemo(generateLayerId, [])
+
+  useEffect(() => {
+    if (isLocked) {
+      layers.add(layerId)
+      syncPageScrollLock()
+    }
+
+    return () => {
+      layers.delete(layerId)
+      syncPageScrollLock()
+    }
+  }, [layerId, isLocked])
+}
+
+const generateLayerId = (() => {
+  let count = 0
+
+  return () => {
+    count = count + 1
+
+    return count
+  }
+})()
+
+const syncPageScrollLock = () => {
+  if (layers.size > 0) {
+    addPageScrollLock()
+  } else {
+    removePageScrollLock()
+  }
+}
+
+const addPageScrollLock = () => {
+  if (!isBrowser()) {
+    return
+  }
+
+  if (!scrollLock) {
+    scrollLock = {
+      prevHtmlOverflow: document.getElementsByTagName('html')[0].style.overflow,
+    }
+    document.getElementsByTagName('html')[0].style.overflow = 'hidden'
+  }
+}
+
+const removePageScrollLock = () => {
+  if (!isBrowser()) {
+    return
+  }
+
+  if (scrollLock) {
+    document.getElementsByTagName('html')[0].style.overflow =
+      scrollLock.prevHtmlOverflow
+    scrollLock = undefined
+  }
+}

package/src/utils/use-safe-state.ts

@@ -0,0 +1,25 @@
+import { useRef, useState, useCallback, useEffect } from 'react'
+
+const useSafeState = <S>(initState: S | (() => S)) => {
+  const [state, unsafeSetState] = useState<S>(initState)
+
+  const isMounted = useRef(false)
+
+  useEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  })
+
+  const setState: typeof unsafeSetState = useCallback(newState => {
+    if (isMounted.current) {
+      unsafeSetState(newState)
+    }
+  }, [])
+
+  return [state, setState]
+}
+
+export default useSafeState as typeof useState

package/src/utils/use-width-of.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { useIsomorphicLayoutEffect } from '@toptal/picasso-shared'
+
+export interface ReferenceObject {
+  offsetParent?: Element
+  getBoundingClientRect: () => ClientRect
+}
+
+const useWidthOf = <T extends ReferenceObject>(element: T | null) => {
+  const [menuWidth, setMenuWidth] = useState<string | undefined>()
+
+  const offsetParent = element?.offsetParent
+
+  useIsomorphicLayoutEffect(() => {
+    if (!element) {
+      return
+    }
+    const { width } = element.getBoundingClientRect()
+
+    setMenuWidth(`${width}px`)
+  }, [element, offsetParent])
+
+  return menuWidth
+}
+
+export default useWidthOf

package/src/utils/useBoolean/index.ts

@@ -0,0 +1 @@
+export { default } from './use-boolean'

package/src/utils/useBoolean/test.tsx

@@ -0,0 +1,25 @@
+import { act, renderHook } from '@testing-library/react-hooks'
+
+import useBoolean from './use-boolean'
+
+describe('useBoolean', () => {
+  it('sets state correctly', () => {
+    const { result } = renderHook(() => useBoolean())
+    const [, open, close, toggle] = result.current
+
+    expect(result.current[0]).toBeFalsy()
+
+    act(() => open())
+
+    expect(result.current[0]).toBeTruthy()
+
+    act(() => close())
+    expect(result.current[0]).toBeFalsy()
+
+    act(() => toggle())
+    expect(result.current[0]).toBeTruthy()
+
+    act(() => toggle())
+    expect(result.current[0]).toBeFalsy()
+  })
+})

package/src/utils/useBoolean/use-boolean.ts

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+
+/** Set value to true */
+type SetTruthy = () => void
+/** Set value to false */
+type SetFalsy = () => void
+/** Toggle the value */
+type Toggle = () => void
+type IsTruthy = boolean
+
+type UseBooleanType = (
+  defaultValue?: boolean
+) => [IsTruthy, SetTruthy, SetFalsy, Toggle]
+
+/**
+ *
+ * @param defaultValue?: Boolean
+ * @returns [isTruthy, setTruthy, setFalsy, toggle]
+ */
+const useBoolean: UseBooleanType = (defaultValue = false) => {
+  const [isTruthy, setBoolean] = useState(defaultValue)
+
+  const setTruthy: SetTruthy = () => setBoolean(true)
+  const setFalsy: SetFalsy = () => setBoolean(false)
+  const toggle: Toggle = () => setBoolean(value => !value)
+
+  return [isTruthy, setTruthy, setFalsy, toggle]
+}
+
+export default useBoolean

package/src/utils/useInterval/index.ts

@@ -0,0 +1 @@
+export { default } from './use-interval'