@northlight/ui 2.41.0 → 2.41.1

package/lib/components/typography/stylized/small.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import { Text as ChakraText, TextProps, useStyleConfig } from '@chakra-ui/react'
+
+/**
+ * One of the stylized typography components
+ * @see Capitalized
+ * @see Lead
+ * @see Blockquote
+ * @see Tiny
+ * @see {@link https://northlight.dev/reference/small }
+ *
+ * @example (Example)
+ * (?
+ * <Small>Small</Small>
+ * ?)
+ * (_Note, all other css properties not listed under the
+ * props tab to right should be passed down via **sx**_)
+ *
+ */
+export const Small = forwardRef<HTMLParagraphElement, TextProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('Small', { sx })
+
+  return (
+    <ChakraText
+      as="small"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </ChakraText>
+  )
+})

package/lib/components/typography/stylized/tiny.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import { Text as ChakraText, TextProps, useStyleConfig } from '@chakra-ui/react'
+
+/**
+ * One of the stylized typography components
+ * @see Capitalized
+ * @see Lead
+ * @see Blockquote
+ * @see Small
+ * @see {@link https://northlight.dev/reference/tiny }
+ *
+ * @example (Example)
+ * (?
+ * <Tiny>Tiny</Tiny>
+ * ?)
+ * (_Note, all other css properties not listed under the
+ * props tab to right should be passed down via **sx**_)
+ *
+ */
+export const Tiny = forwardRef<HTMLParagraphElement, TextProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('Tiny', { sx })
+
+  return (
+    <ChakraText
+      as="span"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </ChakraText>
+  )
+})

package/lib/components/typography/types.ts

@@ -0,0 +1,11 @@
+import { Heading } from '@chakra-ui/react'
+import { P } from './body'
+import { Label } from './labels'
+import { NumVal } from './numvals'
+import { Blockquote } from './stylized'
+
+export type HeadingType = typeof Heading
+export type BodyType = typeof P
+export type StylizedType = typeof Blockquote
+export type LabelType = typeof Label
+export type NumValType = typeof NumVal

package/lib/components/visually-hidden/index.ts

@@ -0,0 +1,4 @@
+export {
+  VisuallyHidden,
+  VisuallyHiddenInput,
+} from '@chakra-ui/react'

package/lib/components/wrap/index.ts

@@ -0,0 +1,4 @@
+export {
+  Wrap,
+  WrapItem,
+} from '@chakra-ui/react'

package/lib/general.d.ts

@@ -0,0 +1,27 @@
+import { ComponentType } from 'react'
+import {
+  GroupBase,
+} from 'chakra-react-select'
+import { CustomElementType, SearchBarOptionType } from './components/search-bar'
+
+declare module 'react-select/dist/declarations/src/Select' {
+  export interface Props<
+      Option extends SearchBarOptionType,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      IsMulti extends boolean,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      Group extends GroupBase<Option>
+    > {
+    customOption?: CustomElementType<Option>
+    customTag?: CustomElementType<Option>
+    icon?: ComponentType<any>
+    leftComponent?: React.ReactNode
+    toggleCreateNewOption?: () => void
+  }
+}
+
+declare module 'react' {
+  function forwardRef<T, P = {}> (
+    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null
+}

package/lib/hooks/index.ts

@@ -0,0 +1,26 @@
+export * from './use-boolean'
+export * from './use-breakpoint-value'
+export * from './use-clipboard'
+export * from './use-controllable'
+export * from './use-debounce'
+export * from './use-disclosure'
+export * from './use-loading-message'
+export * from './use-media-query'
+export * from './use-merge-refs'
+export * from './use-outside-click'
+export * from './use-prefers-reduced-motion'
+export * from './use-scroll-to-bottom'
+export * from './use-theme'
+export * from './use-token'
+export * from './use-arrow-focus'
+export * from './use-form'
+export * from './use-controller'
+export * from './use-form-context'
+export * from './use-watch'
+export * from './use-form-state'
+export * from './use-field-array'
+export * from './use-select-callbacks'
+export * from './use-outside-rect-click'
+export * from './use-screen-size'
+export * from './use-did-update-effect'
+export * from './use-resize-width'

package/lib/hooks/use-arrow-focus/index.ts

@@ -0,0 +1,76 @@
+import { useFocusManager } from '@react-aria/focus'
+
+export const useArrowFocus = (columns: number) => {
+  const {
+    focusNext: next,
+    focusPrevious: previous,
+    focusFirst,
+    focusLast,
+  } = useFocusManager()
+
+  const defaultOpts = {
+    ArrowRight: {
+      wrap: true,
+      repeat: 1,
+    },
+    ArrowLeft: {
+      wrap: true,
+      repeat: 1,
+    },
+    ArrowDown: {
+      wrap: false,
+      repeat: columns,
+    },
+    ArrowUp: {
+      wrap: false,
+      repeat: columns,
+    },
+  }
+
+  const focusPrevious = ({
+    repeat,
+    wrap,
+  } = defaultOpts.ArrowLeft) => {
+    for (let i = 0; i < repeat; i += 1) {
+      previous({ wrap })
+    }
+  }
+
+  const focusNext = ({
+    repeat,
+    wrap,
+  } = defaultOpts.ArrowRight) => {
+    for (let i = 0; i < repeat; i += 1) {
+      next({ wrap })
+    }
+  }
+
+  const defaultArrows = (e: any) => {
+    switch (e.key) {
+      case 'ArrowRight':
+        focusNext(defaultOpts.ArrowRight)
+        break
+      case 'ArrowLeft':
+        focusPrevious(defaultOpts.ArrowLeft)
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        focusNext(defaultOpts.ArrowDown)
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        focusPrevious(defaultOpts.ArrowUp)
+        break
+      default:
+        break
+    }
+  }
+
+  return {
+    defaultArrows,
+    focusPrevious,
+    focusNext,
+    focusFirst,
+    focusLast,
+  }
+}

package/lib/hooks/use-boolean/index.ts

@@ -0,0 +1,3 @@
+export {
+  useBoolean,
+} from '@chakra-ui/react'

package/lib/hooks/use-breakpoint-value/index.ts

@@ -0,0 +1,4 @@
+export {
+  useBreakpoint,
+  useBreakpointValue,
+} from '@chakra-ui/react'

package/lib/hooks/use-clipboard/index.ts

@@ -0,0 +1,3 @@
+export {
+  useClipboard,
+} from '@chakra-ui/react'

package/lib/hooks/use-controllable/index.ts

@@ -0,0 +1,4 @@
+export {
+  useControllableProp,
+  useControllableState,
+} from '@chakra-ui/react'

package/lib/hooks/use-controller/index.ts

@@ -0,0 +1,3 @@
+export {
+  useController,
+} from 'react-hook-form'

package/lib/hooks/use-debounce/index.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react'
+
+export const useDebounce = <T>(value: T, delay: number) => {
+  const [ debouncedValue, setDebouncedValue ] = useState<T>(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [ value, delay ])
+
+  return debouncedValue
+}

package/lib/hooks/use-did-update-effect/index.ts

@@ -0,0 +1,12 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react'
+
+export const useDidUpdateEffect = (effect: EffectCallback, dependencies: DependencyList) => {
+  const didMountRef = useRef(false)
+
+  useEffect(() => {
+    if (didMountRef.current) {
+      effect()
+    }
+    didMountRef.current = true
+  }, dependencies)
+}

package/lib/hooks/use-disclosure/index.ts

@@ -0,0 +1,3 @@
+export {
+  useDisclosure,
+} from '@chakra-ui/react'

package/lib/hooks/use-field-array/index.ts

@@ -0,0 +1,3 @@
+export {
+  useFieldArray,
+} from 'react-hook-form'

package/lib/hooks/use-form/index.ts

@@ -0,0 +1,3 @@
+export {
+  useForm,
+} from 'react-hook-form'

package/lib/hooks/use-form-context/index.ts

@@ -0,0 +1,3 @@
+export {
+  useFormContext,
+} from 'react-hook-form'

package/lib/hooks/use-form-state/index.ts

@@ -0,0 +1,3 @@
+export {
+  useFormState,
+} from 'react-hook-form'

package/lib/hooks/use-interval/index.ts

@@ -0,0 +1,3 @@
+export {
+  useInterval,
+} from '@chakra-ui/react'

package/lib/hooks/use-loading-message/index.ts

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+import { useInterval } from '../use-interval'
+
+export const useLoadingMessage = (prefix: string = '', delay: number = 300) => {
+  const [ dots, setDots ] = useState('.')
+
+  useInterval(() => {
+    if (dots.length === 3) {
+      setDots('.')
+    } else {
+      setDots(`${dots}.`)
+    }
+  }, delay)
+  return `${prefix}${dots}`
+}

package/lib/hooks/use-media-query/index.ts

@@ -0,0 +1,3 @@
+export {
+  useMediaQuery,
+} from '@chakra-ui/react'

package/lib/hooks/use-merge-refs/index.ts

@@ -0,0 +1,3 @@
+export {
+  useMergeRefs,
+} from '@chakra-ui/react'

package/lib/hooks/use-outside-click/index.ts

@@ -0,0 +1,3 @@
+export {
+  useOutsideClick,
+} from '@chakra-ui/react'

package/lib/hooks/use-outside-rect-click/index.ts

@@ -0,0 +1,98 @@
+import { isNil } from 'ramda'
+import { MutableRefObject, useEffect, useRef } from 'react'
+
+const isBetween = (point: number, min: number, max: number) => (point >= min && point <= max)
+
+const isEventInsideRect = (
+  ref:MutableRefObject<HTMLElement>,
+  event: MouseEvent | TouchEvent
+) => {
+  let clientX
+  let clientY
+
+  if (event instanceof MouseEvent) {
+    clientX = event.clientX
+    clientY = event.clientY
+  } else if (event instanceof TouchEvent && event.changedTouches[0]) {
+    clientX = event.changedTouches[0].clientX
+    clientY = event.changedTouches[0].clientY
+  }
+
+  if (isNil(clientX) || isNil(clientY)) return true
+
+  const {
+    top,
+    right,
+    left,
+    bottom,
+  } = ref.current.getBoundingClientRect()
+
+  return isBetween(clientX, left, right) && isBetween(clientY, top, bottom)
+}
+
+const isHtmlElementRef =
+  (ref: MutableRefObject<HTMLElement | null>): ref is MutableRefObject<HTMLElement> =>
+    !isNil(ref.current)
+
+export const useOutsideRectClick =
+(ref: MutableRefObject<HTMLElement | null>, callback: (event: MouseEvent | TouchEvent) => void) => {
+  const stateRef = useRef({
+    isPointerDownOutsideRect: false,
+    ignoreEmulatedMouseEvents: false,
+  })
+
+  const state = stateRef.current
+
+  useEffect(() => {
+    const handleMouseClick = (event: MouseEvent | TouchEvent) => {
+      if (!isHtmlElementRef(ref)) {
+        return
+      }
+      const isInBound = isEventInsideRect(ref, event)
+
+      if (isInBound) return
+      callback(event)
+    }
+
+    const onPointerDown: any = (event: MouseEvent | TouchEvent) => {
+      if (!isHtmlElementRef(ref)) {
+        return
+      }
+      if (!isEventInsideRect(ref, event)) {
+        state.isPointerDownOutsideRect = true
+      }
+    }
+
+    const onMouseUp: any = (event: MouseEvent) => {
+      if (state.ignoreEmulatedMouseEvents) {
+        state.ignoreEmulatedMouseEvents = false
+        return
+      }
+
+      if (state.isPointerDownOutsideRect) {
+        state.isPointerDownOutsideRect = false
+        handleMouseClick(event)
+      }
+    }
+
+    const onTouchEnd = (event: TouchEvent) => {
+      state.ignoreEmulatedMouseEvents = true
+      if (state.isPointerDownOutsideRect) {
+        state.isPointerDownOutsideRect = false
+        handleMouseClick(event)
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown, true)
+    document.addEventListener('mouseup', onMouseUp, true)
+    document.addEventListener('touchstart', onPointerDown, true)
+    document.addEventListener('touchend', onTouchEnd, true)
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown, true)
+      document.removeEventListener('mouseup', onMouseUp, true)
+      document.removeEventListener('touchstart', onPointerDown, true)
+      document.removeEventListener('touchend', onTouchEnd, true)
+    }
+  }, [ callback ])
+}

package/lib/hooks/use-prefers-reduced-motion/index.ts

@@ -0,0 +1,3 @@
+export {
+  usePrefersReducedMotion,
+} from '@chakra-ui/react'

package/lib/hooks/use-resize-width/index.ts

@@ -0,0 +1,44 @@
+import { MouseEvent, useState } from 'react'
+import { clamp } from '../../utils'
+
+interface UseResizeWidthProps {
+  stationaryEdge?: 'left' | 'right'
+  minWidthPx?: number
+  maxWidthPx?: number
+  defaultWidthPx: number
+}
+
+export const useResizeWidth = ({
+  stationaryEdge = 'left',
+  minWidthPx = 0,
+  maxWidthPx = Number.MAX_SAFE_INTEGER,
+  defaultWidthPx,
+}: UseResizeWidthProps) => {
+  const [ adjustableWidth, setAdjustableWidth ] = useState(defaultWidthPx)
+
+  const resizeProps = {
+    onMouseDown: (e: MouseEvent<unknown>) => {
+      e.preventDefault()
+      const startX = e.clientX
+      const onMouseMove = (event: { clientX: number }) => {
+        const newWidth =
+          stationaryEdge === 'left'
+            ? adjustableWidth + (event.clientX - startX)
+            : adjustableWidth - (event.clientX - startX)
+        setAdjustableWidth(clamp(minWidthPx, maxWidthPx, newWidth))
+      }
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+      }
+      document.addEventListener('mousemove', onMouseMove)
+      document.addEventListener('mouseup', onMouseUp)
+    },
+  }
+
+  return {
+    adjustableWidth,
+    setAdjustableWidth,
+    resizeProps,
+  }
+}

package/lib/hooks/use-screen-size/index.ts

@@ -0,0 +1,12 @@
+import { useMediaQuery } from '../use-media-query'
+
+export const useScreenSize = () => {
+  const screenSizes = useMediaQuery([ '(min-width: 1280px)', '(min-width: 1024px)' ])
+  if (screenSizes[0]) {
+    return 'lg'
+  }
+  if (screenSizes[1]) {
+    return 'md'
+  }
+  return 'sm'
+}

package/lib/hooks/use-scroll-to-bottom/index.ts

@@ -0,0 +1,18 @@
+import { RefObject, useEffect } from 'react'
+import { smoothScrollToBottom } from './utils/smooth-scroll-to-bottom'
+
+export interface Message {
+  content: string
+  role: string
+  type?: string
+  data?: string
+}
+
+export const useScrollToBottom = (scrollView: RefObject<HTMLDivElement>, messages: Message[]) => {
+  useEffect(() => {
+    const div = scrollView.current
+    if (div) {
+      smoothScrollToBottom(div)
+    }
+  }, [ messages ])
+}

package/lib/hooks/use-scroll-to-bottom/utils/smooth-scroll-to-bottom.ts

@@ -0,0 +1,17 @@
+export const smoothScrollToBottom = (div: HTMLDivElement) => {
+  const totalSteps = 50
+  let currentStep = 0
+  const targetScrollTop = div.scrollHeight - div.clientHeight
+  const originalScrollTop = div.scrollTop
+  const scrollInterval = setInterval(() => {
+    if (currentStep >= totalSteps) {
+      clearInterval(scrollInterval)
+    } else {
+      currentStep += 1
+      const scrollProgress = currentStep / totalSteps
+      const easing = 1 - (1 - scrollProgress) * (1 - scrollProgress) // quadratic ease out
+      // eslint-disable-next-line no-param-reassign
+      div.scrollTop = originalScrollTop + ((targetScrollTop - originalScrollTop) * easing)
+    }
+  }, 20)
+}

package/lib/hooks/use-select-callbacks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-select-callbacks'
+export * from './types'

package/lib/hooks/use-select-callbacks/types.ts

@@ -0,0 +1,25 @@
+import {
+  ActionMeta,
+  Props as ChakraReactSelectProps,
+  GroupBase,
+  MultiValue,
+  SingleValue,
+} from 'chakra-react-select'
+
+export interface UseSelectCallbacksProps<T, K extends boolean = false>
+  extends Omit<
+  ChakraReactSelectProps<T, boolean, GroupBase<T>>,
+  'onChange' | 'value'
+  > {
+  onChange: (option: K extends true ? MultiValue<T> : SingleValue<T>, event: ActionMeta<T>) => void
+  onAdd: (val: unknown) => void
+  onRemove: (val: unknown) => void
+  isMulti?: boolean
+  value: T | T[]
+}
+export interface BasicOption {
+  label: string
+  value: unknown
+}
+
+export type SelectActionMeta<T> = ActionMeta<T>

package/lib/hooks/use-select-callbacks/use-select-callbacks.ts

@@ -0,0 +1,43 @@
+import { ActionMeta, MultiValue, SingleValue } from 'chakra-react-select'
+import { difference, isNil, last, map, prop } from 'ramda'
+import { useRef } from 'react'
+import { BasicOption, UseSelectCallbacksProps } from './types'
+
+export const useSelectCallbacks = <
+  T extends BasicOption,
+  K extends boolean = false
+>({
+    onChange,
+    onAdd,
+    onRemove,
+    isMulti = false,
+    value,
+  }: UseSelectCallbacksProps<T, K>) => {
+  const items = useRef<MultiValue<T> | SingleValue<T>>(value)
+
+  const handleChange = (
+    val: K extends true ? MultiValue<T> : SingleValue<T>,
+    event: ActionMeta<T>
+  ) => {
+    onChange(val, event)
+    if (!isMulti && !isNil(val)) {
+      onAdd((val as T).value)
+    } else if (
+      !isNil(val) &&
+      (val as T[]).length > (items.current as T[]).length
+    ) {
+      onAdd(last(val as T[])?.value)
+    } else {
+      const removedItems = map(
+        prop('value'),
+        difference(
+          isMulti ? (items.current as T[]) : ([ items.current ] as T[]),
+          val as T[]
+        )
+      )
+      onRemove(removedItems.length === 1 ? removedItems[0] : removedItems)
+    }
+    items.current = val
+  }
+  return handleChange
+}

package/lib/hooks/use-theme/index.ts

@@ -0,0 +1,3 @@
+export {
+  useTheme,
+} from '@chakra-ui/react'

package/lib/hooks/use-token/index.ts

@@ -0,0 +1,3 @@
+export {
+  useToken,
+} from '@chakra-ui/react'

package/lib/hooks/use-watch/index.ts

@@ -0,0 +1,3 @@
+export {
+  useWatch,
+} from 'react-hook-form'

package/lib/index.ts

@@ -0,0 +1,6 @@
+export { useInterval } from './hooks/use-interval'
+export * from './components'
+export * from './hooks'
+export * from './theme'
+export * from './types'
+export * from './utils'

package/lib/internal-components/index.ts

@@ -0,0 +1 @@
+export * from './input-group-wrapper'

package/lib/internal-components/input-group-wrapper/index.ts

@@ -0,0 +1,2 @@
+export * from './input-group-wrapper'
+export * from './types'