@companix/uikit 0.0.2 → 0.0.3

package/src/Toaster/Viewport.tsx

@@ -1,117 +0,0 @@
-import * as ToasterPrimitive from '@radix-ui/react-toast'
-import { varToStyle } from '@companix/utils-browser'
-import { useCallback, useMemo, useState, useImperativeHandle, forwardRef } from 'react'
-import { Toast } from './Toast'
-import { InnerToast } from '.'
-
-enum SwipesDirections {
-  'top-center' = 'up',
-  'top-left' = 'left',
-  'top-right' = 'right',
-  'bottom-center' = 'down',
-  'bottom-left' = 'left',
-  'bottom-right' = 'right'
-}
-
-export interface ViewportProps {
-  side?: 'top' | 'bottom'
-  align?: 'center' | 'left' | 'right'
-  gap?: number // gap between toasts
-  swipeThreshold?: number
-  duration?: number
-  closeIcon?: React.ReactNode
-}
-
-export interface ViewportRef {
-  addToast: (toast: InnerToast) => void
-}
-
-export const Viewport = forwardRef<ViewportRef, ViewportProps>((props, ref) => {
-  const { side = 'top', align = 'center', gap = 14, duration, swipeThreshold, closeIcon } = props
-  const [toasters, setToasters] = useState<InnerToast[]>([])
-
-  const refs = useMemo((): { [id: string]: HTMLLIElement } => {
-    return {}
-  }, [])
-
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        addToast: (toast) => {
-          setToasters((state) => [...state, toast])
-        }
-      }
-    },
-    []
-  )
-
-  const applyOffsets = useCallback((toasters: InnerToast[]) => {
-    toasters.forEach(({ id }, index) => {
-      let offset = 0
-
-      for (let i = index + 1; i < toasters.length; i++) {
-        if (refs[toasters[i].id]) {
-          offset += refs[toasters[i].id].clientHeight + gap
-        }
-      }
-
-      if (refs[id]) {
-        refs[id].style.setProperty('--offset', `${offset}px`)
-      }
-    })
-  }, [])
-
-  const handleClose = (id: string) => {
-    setToasters((state) => {
-      const nextState = [...state]
-      const index = nextState.findIndex((item) => item.id === id)
-
-      if (index !== -1) {
-        nextState.splice(index, 1)
-      }
-
-      return nextState
-    })
-  }
-
-  return (
-    <ToasterPrimitive.Provider
-      duration={duration}
-      swipeThreshold={swipeThreshold}
-      swipeDirection={SwipesDirections[`${side}-${align}`]}
-    >
-      {toasters.map(({ id, ...toast }) => (
-        <Toast
-          {...toast}
-          key={`toaster-${id}`}
-          closeIcon={closeIcon}
-          onInitialized={(ref) => {
-            refs[id] = ref
-            applyOffsets(toasters)
-          }}
-          onRemoving={() => {
-            delete refs[id]
-            applyOffsets(toasters)
-          }}
-          onRemoved={() => {
-            if (refs[id]) {
-              // Если коллбек onRemoved вызвается при истечении duration,
-              // мы не перехватываем событие onRemoving и не изменяем позиции текущих тостов
-              // (автоматическое закрытие тостов всегда происходит в порядке открытия)
-              delete refs[id]
-            }
-
-            handleClose(id)
-          }}
-        />
-      ))}
-      <ToasterPrimitive.Viewport
-        data-side={side}
-        data-align={align}
-        className="toaster-viewport"
-        style={varToStyle({ '--toasters-gap': `${gap}px` })}
-      />
-    </ToasterPrimitive.Provider>
-  )
-})

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/Tooltip.scss

@@ -1,28 +0,0 @@
-@use '../mixins.scss';
-
-.tooltip .popover {
-  &-content {
-    @include mixins.use-styles(tooltip);
-    max-height: none;
-  }
-
-  &-arrow {
-    &-fill {
-      fill: mixins.get-var-name(tooltip, background);
-    }
-  }
-}
-
-.tooltip {
-  &[data-appearance='default'] {
-    &[data-state='open'] {
-      transform-origin: var(--radix-popover-content-transform-origin);
-      @include mixins.use-styles(tooltip, in);
-    }
-
-    &[data-state='closed'] {
-      transform-origin: var(--radix-popover-content-transform-origin);
-      @include mixins.use-styles(tooltip, out);
-    }
-  }
-}

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
-  }
-}