@companix/uikit 0.0.2 → 0.0.4

package/src/Toaster/index.tsx

@@ -1,52 +0,0 @@
-import { hash } from '@companix/utils-js'
-import { Viewport, ViewportProps, ViewportRef } from './Viewport'
-import { useMemo, useRef } from 'react'
-
-export interface ToastOptions {
-  appearance?: 'primary' | 'neutral' | 'positive' | 'negative' | 'warning'
-  icon?: React.ReactNode
-  title?: React.ReactNode
-  description?: React.ReactNode
-  duration?: number
-}
-
-export interface InnerToast extends ToastOptions {
-  id: string
-}
-
-export const createToaster = (rootProps: ViewportProps = {}) => {
-  const store = {
-    emit: (toast: InnerToast) => {
-      console.error('uninitialized', toast)
-    }
-  }
-
-  return {
-    send: (toast: ToastOptions) => {
-      store.emit({ ...toast, id: hash() })
-    },
-    Viewport: (props: ViewportProps = {}) => {
-      const ref = useRef<ViewportRef>(null)
-
-      useMemo(() => {
-        store.emit = (value) => {
-          if (ref.current) {
-            ref.current.addToast(value)
-          }
-        }
-      }, [])
-
-      return (
-        <Viewport
-          ref={ref}
-          align={props.align ?? rootProps.align}
-          closeIcon={props.closeIcon ?? rootProps.closeIcon}
-          duration={props.duration ?? rootProps.duration}
-          gap={props.gap ?? rootProps.gap}
-          side={props.side ?? rootProps.side}
-          swipeThreshold={props.swipeThreshold ?? rootProps.swipeThreshold}
-        />
-      )
-    }
-  }
-}

package/src/Tooltip/index.tsx

@@ -1,33 +0,0 @@
-import { useState } from 'react'
-import { Popover } from '..'
-import { Side } from '../Popover'
-
-interface TooltipProps {
-  children: React.ReactNode
-  content: React.ReactNode
-  side?: Side
-}
-
-export const Tooltip = ({ children, content, side }: TooltipProps) => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <Popover
-      showArrows
-      className="tooltip"
-      open={open}
-      side={side}
-      content={() => content}
-      triggerProps={{
-        onMouseEnter: () => {
-          setOpen(true)
-        },
-        onMouseLeave: () => {
-          setOpen(false)
-        }
-      }}
-    >
-      {children}
-    </Popover>
-  )
-}

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

@@ -1,51 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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 }
-}