@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/Utils/story/React.example.tsx

@@ -0,0 +1,32 @@
+import { Table } from '@toptal/picasso'
+import React from 'react'
+
+const data = {
+  forwardRef: `Wrapper around React.forwardRef that preserves genericity of the passed component`,
+  useSafeState: `Wrapper around React.useState that ignores state updates when the component is unmounted`,
+  useCombinedRefs: `Combines multiple refs into one`,
+  useWidthOf: `Calculates width of an element`,
+  disableUnsupportedProps: `Removes props that are not supported for passed props values`,
+  ClickAwayListener: `Listen for click events that occur somewhere in the document, outside of the element itself`,
+}
+
+const Example = () => (
+  <Table>
+    <Table.Head>
+      <Table.Row>
+        <Table.Cell>Name</Table.Cell>
+        <Table.Cell>Description</Table.Cell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      {Object.entries(data).map(([name, description]) => (
+        <Table.Row key={name}>
+          <Table.Cell>{name}</Table.Cell>
+          <Table.Cell>{description}</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  </Table>
+)
+
+export default Example

package/src/utils/Utils/story/Strings.example.tsx

@@ -0,0 +1,33 @@
+import { Table } from '@toptal/picasso'
+import React from 'react'
+
+const data = {
+  capitalize: `e.g. capitalize('a test string') === 'A test string'`,
+  toTitleCase: `e.g. toTitleCase('a test string') === 'A Test String'`,
+  kebabToCamelCase: `e.g. kebabToCamelCase('a-test-string') === 'aTestString'`,
+  getNameInitials: `e.g. getNameInitials('John Doe') === 'JD'`,
+  isSubstring: `e.g. isSubstring('test', 'a test string') === true`,
+  generateRandomString: `e.g. 'qw8vd8'`,
+  generateRandomStringOrGetEmptyInTest: ``,
+}
+
+const Example = () => (
+  <Table>
+    <Table.Head>
+      <Table.Row>
+        <Table.Cell>Name</Table.Cell>
+        <Table.Cell>Description</Table.Cell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      {Object.entries(data).map(([name, description]) => (
+        <Table.Row key={name}>
+          <Table.Cell>{name}</Table.Cell>
+          <Table.Cell>{description}</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  </Table>
+)
+
+export default Example

package/src/utils/__tests__/use-page-scroll-lock.test.tsx

@@ -0,0 +1,117 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import { usePageScrollLock } from '../use-page-scroll-lock'
+
+let defaultBodyOverflow: string
+
+const getHtmlElement = (document: Document) => {
+  return document.getElementsByTagName('html')[0]
+}
+
+describe('usePageScrollLock', () => {
+  beforeEach(() => {
+    defaultBodyOverflow = getHtmlElement(document).style.overflow
+  })
+
+  afterEach(() => {
+    getHtmlElement(document).style.overflow = defaultBodyOverflow
+  })
+
+  describe('single usage', () => {
+    it('drops scroll lock when mounted with true', () => {
+      renderHook(() => usePageScrollLock(true))
+
+      expect(getHtmlElement(document).style.overflow).toBe('hidden')
+    })
+
+    describe('lifts scroll lock', () => {
+      it('when unmounted', () => {
+        const { unmount } = renderHook(() => usePageScrollLock(true))
+
+        expect(getHtmlElement(document).style.overflow).toBe('hidden')
+
+        unmount()
+
+        expect(getHtmlElement(document).style.overflow).toBe('')
+      })
+
+      it('when isLocked switches into false', () => {
+        const { rerender } = renderHook(
+          isLocked => usePageScrollLock(isLocked),
+          { initialProps: true }
+        )
+
+        expect(getHtmlElement(document).style.overflow).toBe('hidden')
+
+        rerender(false)
+
+        expect(getHtmlElement(document).style.overflow).toBe('')
+      })
+
+      it('restores prev page overflow', () => {
+        getHtmlElement(document).style.overflow = 'grid'
+
+        const { unmount } = renderHook(() => usePageScrollLock(true))
+
+        expect(getHtmlElement(document).style.overflow).toBe('hidden')
+
+        unmount()
+
+        expect(getHtmlElement(document).style.overflow).toBe('grid')
+      })
+    })
+  })
+
+  describe('multiple instances usage', () => {
+    it('drops scroll lock once any hook gets isLocked=true', () => {
+      const hook1 = renderHook(isLocked => usePageScrollLock(isLocked), {
+        initialProps: false,
+      })
+      const hook2 = renderHook(isLocked => usePageScrollLock(isLocked), {
+        initialProps: false,
+      })
+      const hook3 = renderHook(isLocked => usePageScrollLock(isLocked), {
+        initialProps: false,
+      })
+
+      expect(getHtmlElement(document).style.overflow).toBe('')
+
+      hook1.rerender(true)
+
+      expect(getHtmlElement(document).style.overflow).toBe('hidden')
+
+      hook2.rerender(true)
+      hook3.rerender(true)
+
+      expect(getHtmlElement(document).style.overflow).toBe('hidden')
+    })
+
+    it('lifts scroll lock once no hook with isLocked=true left mounted', () => {
+      getHtmlElement(document).style.overflow = 'block'
+
+      const hook1 = renderHook(isLocked => usePageScrollLock(isLocked), {
+        initialProps: true,
+      })
+      const hook2 = renderHook(isLocked => usePageScrollLock(isLocked), {
+        initialProps: true,
+      })
+      const hook3 = renderHook(isLocked => usePageScrollLock(isLocked), {
+        initialProps: true,
+      })
+
+      expect(getHtmlElement(document).style.overflow).toBe('hidden')
+
+      hook3.unmount()
+
+      expect(getHtmlElement(document).style.overflow).toBe('hidden')
+
+      hook2.rerender(false)
+
+      expect(getHtmlElement(document).style.overflow).toBe('hidden')
+
+      hook1.rerender(false)
+
+      expect(getHtmlElement(document).style.overflow).toBe('block')
+    })
+  })
+})

package/src/utils/capitalize.ts

@@ -0,0 +1 @@
+export { default as capitalize } from '@material-ui/core/utils/capitalize'

package/src/utils/constants.ts

@@ -0,0 +1 @@
+export const AVATAR_INITIALS_LIMIT = 3

package/src/utils/disable-unsupported-props.ts

@@ -0,0 +1,45 @@
+import unsafeErrorLog from './unsafe-error-log'
+
+type PIndex = { [index: string]: unknown }
+
+export type FeatureOptions<P extends object> = {
+  featureProps: Partial<P>
+  unsupportedProps: Partial<P>
+}
+
+export default <P extends object>(
+  componentName: string,
+  props: P,
+  options: FeatureOptions<P>
+) => {
+  const { featureProps, unsupportedProps } = options
+
+  const featurePropNames = Object.keys(featureProps)
+
+  // Check if in props there are props with same value as feature props, if
+  // so it will mean we need to check further for unsupported props and reset them
+  if (
+    featurePropNames.every(
+      propName =>
+        (props as PIndex)[propName] !== (featureProps as PIndex)[propName]
+    )
+  ) {
+    return props
+  }
+
+  const unsupportedPropNames = Object.keys(unsupportedProps)
+
+  // Check for unsupported props if there are props that are enabled, if so
+  // warn developer in console and reset props to turn off unsupported props
+  if (unsupportedPropNames.some(propName => (props as PIndex)[propName])) {
+    unsafeErrorLog(
+      `${componentName} doesn't support: ${unsupportedPropNames.join(
+        ', '
+      )} props when used with ${JSON.stringify(featureProps)}`
+    )
+
+    return { ...props, ...unsupportedProps }
+  }
+
+  return props
+}

package/src/utils/forward-ref.ts

@@ -0,0 +1,38 @@
+import React from 'react'
+
+export type Component<T, P> = T & {
+  defaultProps?: Partial<P>
+  displayName?: string
+}
+
+/**
+ * Wraps the exotic generic functional component type returned by the `forwardRef`.
+ * This function adopts the type of the exotic component to take `defaultProps` and
+ * `displayName`.
+ *
+ * @see forwardRef
+ *
+ * @param component exotic component returned by `forwardRef`
+ */
+export const documentable = <T, P>(component: T): Component<T, P> => component as Component<T, P>
+
+/**
+ * Wrapper around React.forwardRef that preserves genericity of the passed `Component`.
+ * @note If you need to set `defaultProps` and `displayName` properties, you need to wrap
+ * result of this function into `documentable`,
+ *
+ * @see documentable
+ *
+ * @warning ⚠️ Use it only when you need to preserve genericity of the component as it
+ * omits some type checks on the prop type of the component and IT DOESN'T ADD ref
+ * property type to the list of props — you have to do it on your own. If you don't
+ * care about genericity use React.forwardRef directly.
+ *
+ * @param component React component conforming to forwardRef type constraints
+ */
+export const forwardRef = <P, T>(
+  component: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+) =>
+  React.forwardRef(component) as unknown as (
+    props: P & { ref?: React.Ref<T> }
+  ) => React.ReactElement | null

package/src/utils/get-name-initials.ts

@@ -0,0 +1,15 @@
+import { AVATAR_INITIALS_LIMIT } from './constants'
+
+export default (fullName: string) => {
+  return fullName
+    .split(' ')
+    .map(word => {
+      if (word === '' || word.length <= 1) {
+        return ''
+      }
+
+      return word[0]
+    })
+    .join('')
+    .slice(0, AVATAR_INITIALS_LIMIT)
+}

package/src/utils/get-react-node-text-content.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Extracts only the text contents of a ReactNode *recursively*.
+ *
+ * Be aware that depending on the size of the node element tree this function
+ * can ve very slow and actually throw a StackOverflow error. Shouldn't be a
+ * problem for elements that you expect a shallow or raw text input.
+ *
+ * @example
+ * // Results on `Foo Bar`
+ * getReactNodeTextContent(<div>Foo <span>Bar</span></div>)
+ *
+ * @see {@link https://stackoverflow.com/a/60564620/4595583} for the inspiration
+ */
+export const getReactNodeTextContent = (node: ReactNode): string => {
+  switch (typeof node) {
+    case 'number':
+    case 'string':
+      return String(node).trim()
+
+    case 'object':
+      if (Array.isArray(node)) {
+        return node.map(getReactNodeTextContent).filter(Boolean).join(' ')
+      }
+
+      if (node != null && 'props' in node) {
+        return getReactNodeTextContent(node.props.children)
+      }
+
+    // All other cases are ignored (booleans, null, undefined and non-elements)
+    // Fall through
+    default:
+      return ''
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,92 @@
+import { alpha, lighten, darken } from '@toptal/picasso-shared'
+
+import * as TransitionUtils from './Transitions'
+
+const colorUtils = {
+  alpha,
+  lighten,
+  darken,
+}
+
+export { colorUtils }
+
+export {
+  breakpointsList as breakpoints,
+  screens,
+  isScreenSize,
+  useBreakpoint,
+  useScreens,
+  shadows,
+  colors as palette,
+  gradients,
+  generateRandomString,
+  generateRandomStringOrGetEmptyInTest,
+  sizes,
+} from '@toptal/picasso-provider'
+export type { BreakpointKeys } from '@toptal/picasso-provider'
+export { useIsomorphicLayoutEffect, isBrowser } from '@toptal/picasso-shared'
+
+export { default as ClickAwayListener } from '@material-ui/core/ClickAwayListener'
+
+export { capitalize } from './capitalize'
+export { default as disableUnsupportedProps } from './disable-unsupported-props'
+export { type FeatureOptions } from './disable-unsupported-props'
+export { forwardRef, documentable } from './forward-ref'
+export type { Component } from './forward-ref'
+export { default as getNameInitials } from './get-name-initials'
+export { default as isBoolean } from './is-boolean'
+export { default as isNumber } from './is-number'
+export { default as isOverflown } from './is-overflown'
+export { default as isPointerDevice } from './is-pointer-device'
+export { default as isString } from './is-string'
+export { default as isSubstring } from './is-substring'
+export { default as kebabToCamelCase } from './kebab-to-camel-case'
+export type { Maybe } from './monads'
+export { default as noop } from './noop'
+export { default as toTitleCase } from './to-title-case'
+export { default as useCombinedRefs } from './use-combined-refs'
+export { default as useSafeState } from './use-safe-state'
+export { default as useWidthOf } from './use-width-of'
+export { default as loaderPalette } from './loader-palette'
+export { default as unsafeErrorLog } from './unsafe-error-log'
+export { default as useBoolean } from './useBoolean/use-boolean'
+export { default as useInterval } from './useInterval'
+export { default as useOnScreen } from './useOnScreen'
+export { default as useMouseEnter } from './useMouseEnter'
+export { default as sum } from './sum'
+export type { ReferenceObject } from './use-width-of'
+export { default as useMultipleForwardRefs } from './use-multiple-forward-refs'
+export { usePageScrollLock } from './use-page-scroll-lock'
+export { AVATAR_INITIALS_LIMIT } from './constants'
+
+export const Transitions = TransitionUtils
+
+export { useModal } from './Modal'
+export * from './Modal'
+
+export { formatAmount, DEFAULT_CURRENCY, DEFAULT_LOCALE } from './Formatters'
+
+export type { FormatAmount } from './Formatters'
+export * from './get-react-node-text-content'
+
+export * from './Colors'
+export * from './Formatters'
+export * from './Gradients'
+export * from './Modal'
+export * from './Transitions'
+
+export { SPACING_0 } from '@toptal/picasso-provider'
+export { SPACING_1 } from '@toptal/picasso-provider'
+export { SPACING_2 } from '@toptal/picasso-provider'
+export { SPACING_3 } from '@toptal/picasso-provider'
+export { SPACING_4 } from '@toptal/picasso-provider'
+export { SPACING_6 } from '@toptal/picasso-provider'
+export { SPACING_8 } from '@toptal/picasso-provider'
+export { SPACING_10 } from '@toptal/picasso-provider'
+export { SPACING_12 } from '@toptal/picasso-provider'
+export { spacingToRem } from '@toptal/picasso-provider'
+
+export {
+  useDeprecationWarning,
+  usePropDeprecationWarning,
+} from './use-deprecation-warnings'

package/src/utils/is-boolean.ts

@@ -0,0 +1,3 @@
+const isBoolean = (value: unknown): boolean => typeof value === 'boolean'
+
+export default isBoolean

package/src/utils/is-number.ts

@@ -0,0 +1,3 @@
+const isNumber = (value: unknown): boolean => typeof value === 'number'
+
+export default isNumber

package/src/utils/is-overflown.ts

@@ -0,0 +1,20 @@
+/**
+ * Pixel value of font render space correction.
+ * It's individual for different fonts, so it won't work for 100% cases,
+ * but it allows us to be much closer to actual overflow detection while calculating.
+ * Tolerance of the render could be 0-2px depending on the font that is used,
+ * and also affected by the right-padding added at Ellipsis component.
+ */
+const FONT_RENDER_CORRECTION = 0.475
+
+const isOverflown = (element: HTMLElement) => {
+  const { scrollWidth, scrollHeight } = element
+  const { width, height } = element.getBoundingClientRect()
+
+  return (
+    scrollWidth > width + FONT_RENDER_CORRECTION ||
+    scrollHeight > height + FONT_RENDER_CORRECTION
+  )
+}
+
+export default isOverflown

package/src/utils/is-pointer-device.ts

@@ -0,0 +1,9 @@
+import { isBrowser } from '@toptal/picasso-shared'
+
+const isPointerDevice = (): boolean | undefined => {
+  return isBrowser()
+    ? window.matchMedia('(hover: hover) and (pointer: fine)').matches
+    : undefined
+}
+
+export default isPointerDevice

package/src/utils/is-string.ts

@@ -0,0 +1,3 @@
+const isString = (value: unknown): value is string => typeof value === 'string'
+
+export default isString

package/src/utils/is-substring.ts

@@ -0,0 +1,4 @@
+const isSubstring = (subStr: string, str: string) =>
+  str.toLowerCase().includes(subStr.trim().toLowerCase())
+
+export default isSubstring

package/src/utils/kebab-to-camel-case.ts

@@ -0,0 +1,7 @@
+/**
+ * @deprecated [FX-4716] Use kebabToCamelCase() from @@toptal/picasso-provider package
+ */
+const kebabToCamelCase = (str: string) =>
+  str.replace(/-([a-z])/g, (substring: string) => substring[1].toUpperCase())
+
+export default kebabToCamelCase

package/src/utils/loader-palette.ts

@@ -0,0 +1,9 @@
+import { alpha } from '@toptal/picasso-shared'
+import { colors } from '@toptal/picasso-provider'
+
+const loaderColors = {
+  foreground: alpha(colors.grey.main2, 0.16),
+  background: alpha(colors.grey.main2, 0.04),
+}
+
+export default loaderColors

package/src/utils/monads.ts

@@ -0,0 +1 @@
+export type Maybe<T> = T | null | undefined

package/src/utils/noop.ts

@@ -0,0 +1 @@
+export default () => {}

package/src/utils/sum.ts

@@ -0,0 +1,4 @@
+const sum = (values: number[]) =>
+  values.reduce((total, value) => total + value, 0)
+
+export default sum