@companix/uikit 0.0.1

package/src/__hooks/use-frooze-closing.ts

@@ -0,0 +1,51 @@
+import { useCallback, useRef } from 'react'
+
+// При смене выбранного значения в select-компоненте может измениться ширина кнопки.
+// Это приводит к пересчёту позиции popover, привязанного к её размерам и координатам.
+// Во время анимированного закрытия popover это способно вызвать нежелательные визуальные артефакты.
+
+// Чтобы запретить данное поведение, разработан хук useFroozeClosing, который фиксирует и применяет значения ширины и позиции открытого popover-окна перед событием закрытия.
+
+export const useFroozeClosing = () => {
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const stateRef = useRef<{ cb: null | (() => void) }>({ cb: null })
+
+  const froozePopoverPosition = useCallback(() => {
+    if (popoverRef.current && popoverRef.current.parentElement) {
+      const parent = popoverRef.current.parentElement
+
+      const width = parent.style.getPropertyValue('--radix-popper-anchor-width')
+      const position = parent.style.getPropertyValue('transform')
+
+      const observer = new MutationObserver(() => {
+        if (parent.style.transform !== position) {
+          parent.style.setProperty('transform', position)
+        }
+      })
+
+      observer.observe(parent, {
+        attributes: true,
+        attributeFilter: ['style']
+      })
+
+      stateRef.current.cb = () => {
+        observer.disconnect()
+      }
+
+      popoverRef.current.style.setProperty('--radix-popover-trigger-width', width)
+    }
+  }, [])
+
+  const handleAnimationEnd = useCallback(() => {
+    if (stateRef.current.cb) {
+      stateRef.current.cb()
+      stateRef.current.cb = null
+    }
+  }, [])
+
+  return {
+    popoverRef,
+    handleAnimationEnd,
+    froozePopoverPosition
+  }
+}

package/src/__hooks/use-loading.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+
+export interface UseLoadingProps<T = unknown> {
+  onClick: (startLoad: () => void, param: T) => Promise<any>
+}
+
+export const useLoading = <T = unknown>({ onClick }: UseLoadingProps<T>) => {
+  const [state, setState] = useState({ isLoading: false, isError: false })
+
+  const handleClick = (param: T) => {
+    if (!state.isLoading) {
+      onClick(() => setState({ isLoading: true, isError: false }), param)
+        .then(() => {
+          setState({
+            isLoading: false,
+            isError: false
+          })
+        })
+        .catch((e) => {
+          console.log(e)
+
+          setState({
+            isLoading: false,
+            isError: true
+          })
+        })
+    }
+  }
+
+  return {
+    ...state,
+    handleClick
+  }
+}

package/src/__hooks/use-local-storage.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react'
+
+export const useLocalStorage = <T>(token: string, defaultValue: T) => {
+  const [state, setState] = useState<T>(() => {
+    const initialValue = localStorage.getItem(token)
+
+    if (initialValue) {
+      return JSON.parse(initialValue)
+    }
+
+    return defaultValue
+  })
+
+  useEffect(() => {
+    localStorage.setItem(token, JSON.stringify(state))
+  }, [state])
+
+  return [state, setState] as [T, React.Dispatch<React.SetStateAction<T>>]
+}

package/src/__hooks/use-popover-position.ts

@@ -0,0 +1,24 @@
+import { useRef } from 'react'
+import { px } from '@companix/utils-browser'
+
+export const usePopoverLeftValue = () => {
+  const popoverRef = useRef<HTMLDivElement>(null)
+
+  return {
+    popoverRef,
+    getLeftValue: () => {
+      return popoverRef.current?.style.left ?? '0px'
+    }
+  }
+}
+
+export const useButtonWidth = () => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  return {
+    buttonRef,
+    getWidthValue: () => {
+      return px(buttonRef.current?.offsetWidth ?? 0)
+    }
+  }
+}

package/src/__hooks/use-previos.ts

@@ -0,0 +1,25 @@
+import { useRef } from 'react'
+
+export const usePrevious = <T>(value: T) => {
+  const currentRef = useRef(value)
+  const previousRef = useRef<T>()
+
+  if (currentRef.current !== value) {
+    previousRef.current = currentRef.current
+    currentRef.current = value
+  }
+
+  return previousRef.current
+}
+
+export const usePreviousChanged = <T>(value: T) => {
+  const currentRef = useRef(value)
+  const previousRef = useRef<T>()
+
+  if (currentRef.current !== value) {
+    previousRef.current = currentRef.current
+    currentRef.current = value
+  }
+
+  return previousRef.current
+}

package/src/__hooks/use-resize.ts

@@ -0,0 +1,41 @@
+import { useCallback, useRef } from 'react'
+
+type ResizeText = [React.RefObject<HTMLTextAreaElement>, () => void]
+
+const useResizeTextarea = (
+  onResize: ((el: HTMLTextAreaElement) => void) | undefined,
+  grow: boolean
+): ResizeText => {
+  const elementRef = useRef<HTMLTextAreaElement>(null)
+  const currentScrollHeight = useRef<number>(undefined)
+
+  const resizeElement = useCallback(
+    (el: HTMLTextAreaElement) => {
+      if (grow && el.offsetParent) {
+        el.style.height = ''
+        el.style.height = `${el.scrollHeight}px`
+
+        if (el.scrollHeight !== currentScrollHeight.current && onResize) {
+          onResize(el)
+          currentScrollHeight.current = el.scrollHeight
+        }
+      }
+    },
+    [grow, onResize]
+  )
+
+  const resize = useCallback(() => {
+    const el = elementRef.current
+
+    if (!el) {
+      /* istanbul ignore next: нет возможности воспроизвести */
+      return
+    }
+
+    resizeElement(el)
+  }, [elementRef, resizeElement])
+
+  return [elementRef, resize]
+}
+
+export { useResizeTextarea }

package/src/__hooks/use-scrollbox.ts

@@ -0,0 +1,45 @@
+import { useCallback, useRef } from 'react'
+
+interface UseScrollListControllerReturn {
+  scrollBoxRef: React.RefObject<HTMLDivElement>
+  optionsWrapperRef: React.RefObject<HTMLDivElement>
+  scrollToElement: (index: number, center?: boolean) => void
+}
+
+export const useScrollListController = (): UseScrollListControllerReturn => {
+  const scrollBoxRef = useRef<HTMLDivElement>(null)
+  const optionsWrapperRef = useRef<HTMLDivElement>(null)
+
+  const scrollToElement = useCallback(
+    (index: number, center = false) => {
+      const dropdown = scrollBoxRef.current
+      const optionsWrapper = optionsWrapperRef.current
+
+      if (!dropdown || !optionsWrapper || index < 0 || index > optionsWrapper.children.length) {
+        return
+      }
+
+      const item = optionsWrapper.children[index] as HTMLElement | null
+      /* istanbul ignore if: проверка для TS (ситуация, когда среди children нет элемента с index, маловероятна) */
+      if (!item) {
+        return
+      }
+
+      const dropdownHeight = dropdown.offsetHeight
+      const scrollTop = dropdown.scrollTop
+      const itemTop = item.offsetTop
+      const itemHeight = item.offsetHeight
+
+      if (center) {
+        dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2
+      } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {
+        dropdown.scrollTop = itemTop - dropdownHeight + itemHeight
+      } else if (itemTop < scrollTop) {
+        dropdown.scrollTop = itemTop
+      }
+    },
+    [optionsWrapperRef, scrollBoxRef]
+  )
+
+  return { scrollToElement, scrollBoxRef, optionsWrapperRef }
+}

package/src/__hooks/use-stepper-input.ts

@@ -0,0 +1,82 @@
+import { useRef, useState, useMemo, useCallback, useLayoutEffect } from 'react'
+import { normalize, truncateNumber, getFloatDigits } from '@companix/utils-js'
+
+export interface StepperInputOptions {
+  value: number
+  onChange: (value: number) => void
+  step: number
+  minValue?: number
+}
+
+// TODO: если onChange будет меньше minValue произойдет ошибка
+export const useStepperInput = ({ minValue, value, onChange, step }: StepperInputOptions) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const precision = useMemo(() => {
+    return getFloatDigits(step.toString())
+  }, [step])
+
+  const formatting = useCallback(
+    (value: number) => {
+      if (minValue && value < minValue) {
+        return minValue.toFixed(precision)
+      }
+
+      return truncateNumber(value, precision)
+    },
+    [minValue, precision]
+  )
+
+  const [inputValue, setInputValue] = useState({
+    value: formatting(value),
+    cursor: 0
+  })
+
+  const setChanges = (value: number, i: number = 0) => {
+    const nextValue = formatting(value)
+
+    setInputValue({ value: nextValue, cursor: (inputRef.current?.selectionStart || 0) + i })
+    onChange(+nextValue)
+  }
+
+  if (+inputValue.value !== value) {
+    setInputValue({ value: formatting(value), cursor: 0 })
+  }
+
+  useLayoutEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.setSelectionRange(inputValue.cursor, inputValue.cursor)
+      inputRef.current.focus()
+    }
+  }, [inputValue])
+
+  return {
+    inputRef,
+    value: inputValue.value,
+    increment: () => {
+      setChanges(normalize(value + step, precision))
+    },
+    decrement: () => {
+      setChanges(normalize(value - step, precision))
+    },
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.currentTarget.value.trim()
+
+      if (value) {
+        if (isNaN(+value) || value.includes('e')) {
+          setChanges(+inputValue.value, -1)
+          return
+        }
+
+        if (inputValue.value.includes('.') && inputValue.value.replace('.', '') === value) {
+          if (inputRef.current && inputRef.current.selectionStart) {
+            setChanges(+inputValue.value)
+            return
+          }
+        }
+      }
+
+      setChanges(+value)
+    }
+  }
+}

package/src/__hooks/use-update.ts

@@ -0,0 +1,19 @@
+import { useEffect, useLayoutEffect, useRef } from 'react'
+
+export const useLayoutAndUpdate = (callback: () => void, deps?: React.DependencyList | undefined) => {
+  const isRendered = useRef(false)
+
+  useLayoutEffect(() => {
+    isRendered.current = true
+    callback()
+  }, [])
+
+  useEffect(() => {
+    if (isRendered.current) {
+      isRendered.current = false
+      return
+    }
+
+    callback()
+  }, deps)
+}

package/src/__hooks/useCalendar.ts

@@ -0,0 +1,104 @@
+import { CalendarProps } from '../DatePicker/Calendar'
+import { addMonths, subMonths, useDayDisableCheker } from '../__libs/calendar'
+import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR } from '../__utils/utils'
+import { useCallback, useState } from 'react'
+
+export interface UseCalendarDependencies
+  extends Pick<
+    CalendarProps,
+    'minDateTime' | 'maxDateTime' | 'shouldDisableDate' | 'disableFuture' | 'disablePast'
+  > {
+  disablePast?: boolean
+  disableFuture?: boolean
+  minDateTime?: Date
+  maxDateTime?: Date
+  value?: Date | null
+}
+
+export const useCalendar = ({
+  value,
+  disablePast,
+  disableFuture,
+  shouldDisableDate,
+  minDateTime,
+  maxDateTime
+}: UseCalendarDependencies) => {
+  const [viewDate, setViewDate] = useState(value || new Date())
+
+  const setPrevMonth = useCallback(() => {
+    // onPrevMonth?.();
+    setViewDate(subMonths(viewDate, 1))
+  }, [viewDate])
+  const setNextMonth = useCallback(() => {
+    // onNextMonth?.();
+    setViewDate(addMonths(viewDate, 1))
+  }, [viewDate])
+
+  const isDayDisabled = useDayDisableCheker({
+    disableFuture,
+    disablePast,
+    shouldDisableDate,
+    minDateTime,
+    maxDateTime
+  })
+
+  const isMonthDisabled = useCallback(
+    (month: number, year?: number): boolean => {
+      const now = new Date()
+      year = year || viewDate.getFullYear()
+      const minMonth = minDateTime ? minDateTime.getMonth() : 0
+      const maxMonth = maxDateTime ? maxDateTime.getMonth() : 11
+      const minYear = minDateTime?.getFullYear() || DEFAULT_MIN_YEAR
+      const maxYear = maxDateTime?.getFullYear() || DEFAULT_MAX_YEAR
+
+      let isDisabled =
+        year >= minYear && year <= maxYear
+          ? (year === minYear && minMonth > month) || (year === maxYear && month > maxMonth)
+          : true
+
+      if (disableFuture) {
+        isDisabled =
+          isDisabled || (year === now.getFullYear() ? month > now.getMonth() : year > now.getFullYear())
+      }
+
+      if (disablePast) {
+        isDisabled =
+          isDisabled || (year === now.getFullYear() ? month < now.getMonth() : year < now.getFullYear())
+      }
+
+      return isDisabled
+    },
+    [disableFuture, disablePast, viewDate, minDateTime, maxDateTime]
+  )
+
+  const isYearDisabled = useCallback(
+    (year: number): boolean => {
+      const now = new Date()
+      const minYear = minDateTime?.getFullYear() || DEFAULT_MIN_YEAR
+      const maxYear = maxDateTime?.getFullYear() || DEFAULT_MAX_YEAR
+
+      let isDisabled = minYear > year || year > maxYear
+
+      if (disableFuture) {
+        isDisabled = isDisabled || year > now.getFullYear()
+      }
+
+      if (disablePast) {
+        isDisabled = isDisabled || year < now.getFullYear()
+      }
+
+      return isDisabled
+    },
+    [disableFuture, disablePast, minDateTime, maxDateTime]
+  )
+
+  return {
+    viewDate,
+    setViewDate,
+    setPrevMonth,
+    setNextMonth,
+    isDayDisabled,
+    isMonthDisabled,
+    isYearDisabled
+  }
+}

package/src/__hooks/useCalendarOptions-copy.ts

@@ -0,0 +1,87 @@
+import { DefaultMonths, getMonthMaxDay } from '../__utils/utils'
+import { range } from '@companix/utils-js'
+import { useMemo } from 'react'
+
+export const defaultMax = new Date(2050, 0, 1)
+export const defaultMin = new Date(1925, 0, 1)
+
+interface Options {
+  min?: Date
+  max?: Date
+  now: Date
+}
+
+const getDate = (date: Date) => {
+  return {
+    day: date.getDate(),
+    month: date.getMonth(),
+    year: date.getFullYear()
+  }
+}
+
+export const useCalendarOptions2 = ({ min = defaultMin, max = defaultMax, now }: Options) => {
+  const max_values = useMemo(() => getDate(max), [max])
+  const min_values = useMemo(() => getDate(min), [min])
+  const now_values = useMemo(() => getDate(now), [now])
+
+  const years = useMemo(() => {
+    return range(max_values.year, min_values.year).map((value) => ({
+      title: value.toString(),
+      value
+    }))
+  }, [max_values.year, min_values.year])
+
+  const months = useMemo(() => {
+    const options = DefaultMonths.map((name, index) => ({
+      title: name,
+      value: index
+    }))
+
+    if (min_values.month && now_values.year === min_values.year) {
+      const i = options.findIndex(({ value }) => value === min_values.month)
+      options.splice(0, i)
+    }
+
+    if (max_values.month && now_values.year === max_values.year) {
+      const i = options.findIndex(({ value }) => value === max_values.month)
+      options.splice(i + 1, options.length)
+    }
+
+    return options
+  }, [now_values.year, min_values.year, min_values.month, max_values.year, max_values.month])
+
+  const days = useMemo(() => {
+    if (now_values.month === 0) {
+      return []
+    }
+
+    const maxDays = getMonthMaxDay(now_values.month, now_values.year)
+
+    const options = Array.from({ length: maxDays }, (_, i) => ({
+      title: `${i + 1}`,
+      value: i + 1
+    }))
+
+    if (
+      min_values.day &&
+      now_values.month === min_values.month &&
+      now_values.year === min_values.year
+    ) {
+      const i = options.findIndex(({ value }) => value === min_values.day)
+      options.splice(0, i)
+    }
+
+    if (
+      max_values.day &&
+      now_values.month === max_values.month &&
+      now_values.year === max_values.year
+    ) {
+      const i = options.findIndex(({ value }) => value === max_values.day)
+      options.splice(i + 1, options.length)
+    }
+
+    return options
+  }, [now_values.month, now_values.year, min, max])
+
+  return { years, months, days }
+}

package/src/__hooks/useCalendarOptions.ts

@@ -0,0 +1,68 @@
+import { DefaultMonths, getMonthMaxDay } from '../__utils/utils'
+import { useMemo } from 'react'
+import { DateFormat } from '..'
+import { range } from '@companix/utils-js'
+
+export const defaultMax = { day: 31, month: 12, year: 2050 }
+export const defaultMin = { day: 1, month: 1, year: 1900 }
+
+interface Options {
+  min?: DateFormat
+  max?: DateFormat
+  now: DateFormat
+}
+
+export const useCalendarOptions = ({ min = defaultMin, max = defaultMax, now }: Options) => {
+  const years = useMemo(() => {
+    return range(max.year, min.year).map((value) => ({
+      title: value.toString(),
+      value
+    }))
+  }, [max.year, min.year])
+
+  const months = useMemo(() => {
+    const options = DefaultMonths.map((name, index) => ({
+      title: name,
+      value: index + 1
+    }))
+
+    if (min.month && now.year === min.year) {
+      const i = options.findIndex(({ value }) => value === min.month)
+      options.splice(0, i)
+    }
+
+    if (max.month && now.year === max.year) {
+      const i = options.findIndex(({ value }) => value === max.month)
+      options.splice(i + 1, options.length)
+    }
+
+    return options
+  }, [now.year, min.year, min.month, max.year, max.month])
+
+  const days = useMemo(() => {
+    if (now.month === 0) {
+      return []
+    }
+
+    const maxDays = getMonthMaxDay(now.month, now.year)
+
+    const options = Array.from({ length: maxDays }, (_, i) => ({
+      title: `${i + 1}`,
+      value: i + 1
+    }))
+
+    if (min.day && now.month === min.month && now.year === min.year) {
+      const i = options.findIndex(({ value }) => value === min.day)
+      options.splice(0, i)
+    }
+
+    if (max.day && now.month === max.month && now.year === max.year) {
+      const i = options.findIndex(({ value }) => value === max.day)
+      options.splice(i + 1, options.length)
+    }
+
+    return options
+  }, [now.month, now.year, min, max])
+
+  return { years, months, days }
+}