@companix/uikit 0.0.2 → 0.0.4

package/src/SelectTags/index.tsx

@@ -1,192 +0,0 @@
-import { useFroozeClosing } from '../__hooks/use-frooze-closing'
-import type { Option } from '../types'
-import { OptionItem, OptionsList, Popover } from '..'
-import { useMemo, useRef, useState } from 'react'
-import { Icon } from '../Icon'
-import { faChevronDown, faClose } from '@fortawesome/free-solid-svg-icons'
-import { attr, contains, getActiveElementByAnotherElement } from '@companix/utils-browser'
-
-export interface SelectTagsProps<T> {
-  options: Option<T>[]
-  onChange: (event: T[]) => void
-  placeholder?: string
-  value: T[]
-  children?: React.ReactNode
-  disabled?: boolean
-  readOnly?: boolean
-  closeAfterSelect?: boolean
-  emptyText?: string
-  size?: 'sm' | 'md' | 'lg'
-  fill?: boolean
-}
-
-export const SelectTags = <T extends string | number>(props: SelectTagsProps<T>) => {
-  const {
-    options: optionsProp,
-    closeAfterSelect,
-    placeholder,
-    onChange,
-    emptyText = 'Ничего не найдено',
-    readOnly,
-    size = 'md',
-    value: values,
-    disabled
-  } = props
-
-  const [inputValue, setInputValue] = useState('')
-  const inputRef = useRef<HTMLInputElement>(null)
-  const listboxRef = useRef<HTMLDivElement>(null)
-  const { popoverRef, froozePopoverPosition, handleAnimationEnd } = useFroozeClosing()
-
-  const store = useMemo(() => {
-    const store = {} as { [value in T]: Option<T> }
-
-    optionsProp.forEach((option) => {
-      store[option.value] = option
-    })
-
-    return store
-  }, [optionsProp])
-
-  const add = (value: T) => {
-    if (values.includes(value)) {
-      return [...values]
-    }
-
-    return [...values, value]
-  }
-
-  const remove = (value: T) => {
-    return values.filter((item) => value !== item)
-  }
-
-  const handleSelect = (value: T[], close: () => void) => {
-    if (closeAfterSelect) {
-      froozePopoverPosition()
-      onChange(value)
-      close()
-    } else {
-      onChange(value)
-    }
-  }
-
-  const options = useMemo(() => {
-    if (!inputValue.trim()) {
-      return optionsProp
-    }
-
-    return optionsProp.filter(({ title }) => {
-      const normalizedTitle = title.toLowerCase()
-      const normalizedQuery = inputValue.trim().toLowerCase()
-
-      return normalizedTitle.indexOf(normalizedQuery) >= 0
-    })
-  }, [inputValue, optionsProp])
-
-  const handleRootClick = (event: React.MouseEvent) => {
-    if (disabled) return
-
-    // Предотвращаем закрытие Popover при клике на форму
-    if (popoverRef.current && popoverRef.current.getAttribute('data-state') === 'open') {
-      event.preventDefault()
-    }
-
-    const activeElement = getActiveElementByAnotherElement(event.currentTarget)
-
-    if (event.defaultPrevented || contains(event.currentTarget, activeElement)) {
-      return
-    }
-
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }
-
-  const handleRootMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    // Когда клик в сам инпут, не нужно делать preventDefault, так как не будет работать выделение текста
-    if (e.target === inputRef.current) {
-      return
-    }
-    // Делаем preventDefault
-    e.preventDefault()
-  }
-
-  const handleRemove = (e: React.MouseEvent, value: T) => {
-    e.stopPropagation()
-    onChange(remove(value))
-  }
-
-  // const
-
-  return (
-    <Popover
-      minimal
-      ref={popoverRef}
-      sideOffset={0}
-      matchTarget="width"
-      onAnimationEnd={handleAnimationEnd}
-      onOpenAutoFocus={(e) => e.preventDefault()}
-      onCloseAutoFocus={(e) => e.preventDefault()}
-      content={({ close }) => (
-        <OptionsList maxHeight={300}>
-          {options.length === 0 && <div className="select-tags-empty">{emptyText}</div>}
-          {options.map(({ value, title, icon }, i) => (
-            <OptionItem
-              key={`option-item-${value}-${i}`}
-              active={values.includes(value)}
-              onClick={() => handleSelect(add(value), close)}
-              title={title}
-              icon={icon}
-            />
-          ))}
-        </OptionsList>
-      )}
-    >
-      <div
-        className="form"
-        onClick={handleRootClick}
-        onMouseDown={handleRootMouseDown}
-        data-size={size}
-      >
-        <div className="select-tags-container">
-          <div className="select-tags">
-            {values.length > 0 && (
-              <div
-                className="tag-container"
-                ref={listboxRef}
-                role="listbox"
-                data-readonly={attr(readOnly)}
-              >
-                {values.map((value, i) => (
-                  <div key={`tag-option-${value}-${i}`} className="tag">
-                    <span className="tag-name">{store[value].title}</span>
-                    <button className="tag-close-button" onClick={(e) => handleRemove(e, value)}>
-                      <Icon className="tag-close-icon" icon={faClose} size="xxxs" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-            {(!readOnly || values.length === 0) && (
-              <input
-                ref={inputRef}
-                type="text"
-                autoCapitalize="none"
-                autoComplete="off"
-                autoCorrect="off"
-                className="form-input"
-                spellCheck={false}
-                value={inputValue}
-                disabled={disabled}
-                readOnly={readOnly}
-                placeholder={placeholder}
-                onChange={({ target }) => setInputValue(target.value)}
-              />
-            )}
-          </div>
-          <Icon className="expand-icon" icon={faChevronDown} size="xxxs" />
-        </div>
-      </div>
-    </Popover>
-  )
-}

package/src/Spinner/index.tsx

@@ -1,19 +0,0 @@
-import './Spinner.scss'
-import cn from 'classnames'
-
-interface Props {
-  size?: number
-  width?: number
-  color?: string
-  className?: string
-}
-
-export const Spinner = ({ size = 40, className, width = 4, color = 'inherit' }: Props) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px`, color, borderWidth: `${width}px` }}
-      className={cn('spinner-border', className)}
-      role="status"
-    />
-  )
-}

package/src/Stepper/index.tsx

@@ -1,76 +0,0 @@
-import './StepperInput.scss'
-
-import { Form } from '../Form'
-import { useStepperInput, StepperInputOptions } from '../__hooks/use-stepper-input'
-import { usePress } from '@react-aria/interactions'
-import { Button } from '../Button'
-import { attr } from '@companix/utils-browser'
-import { Icon } from '../Icon'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-
-interface StepperInputProps extends StepperInputOptions {
-  buttons?: boolean
-  placeholder?: string
-  inputStyle?: React.CSSProperties
-}
-
-export const StepperInput = ({ inputStyle, placeholder, buttons, ...options }: StepperInputProps) => {
-  const { inputRef, increment, decrement, handleChange, value } = useStepperInput(options)
-
-  return (
-    <div className="number-input-container">
-      <Form
-        ref={inputRef}
-        placeholder={placeholder}
-        style={inputStyle}
-        value={value}
-        onChange={handleChange}
-      />
-      {buttons && <Stepper increment={increment} decrement={decrement} />}
-    </div>
-  )
-}
-
-interface StepperProps {
-  increment: () => void
-  decrement: () => void
-}
-
-const Stepper = ({ increment, decrement }: StepperProps) => {
-  return (
-    <div className="number-stepper">
-      <SlepButton slot="increment" onClick={increment}>
-        <Icon size="xxs" icon={faChevronUp} />
-      </SlepButton>
-      <div className="number-stepper-splitter" />
-      <SlepButton slot="decrement" onClick={decrement}>
-        <Icon size="xxs" icon={faChevronDown} />
-      </SlepButton>
-    </div>
-  )
-}
-
-interface ButtonProps {
-  children: React.ReactNode
-  slot: string
-  onClick: () => void
-}
-
-const SlepButton = ({ children, slot, onClick }: ButtonProps) => {
-  const { pressProps, isPressed } = usePress({ onClick, preventFocusOnPress: true })
-  const { onBeforeInput, ...rest } = pressProps
-
-  return (
-    <Button
-      {...rest}
-      onBeforeInput={onBeforeInput as any}
-      data-slot={slot}
-      data-size={undefined}
-      data-pressed={attr(isPressed)}
-      style={{ border: 'none' }}
-      className="number-stepper-slot"
-    >
-      {children}
-    </Button>
-  )
-}

package/src/Switch/index.tsx

@@ -1,49 +0,0 @@
-import * as SwitchPrimitive from '@radix-ui/react-switch'
-import { attr } from '@companix/utils-browser'
-import { useId } from 'react'
-
-export interface SwitchProps {
-  checked: boolean
-  onCheckedChange: (checked: boolean) => void
-  label?: React.ReactNode
-  disabled?: boolean
-  checkedIcon?: React.ReactNode
-  uncheckedIcon?: React.ReactNode
-}
-
-const Switch = (props: SwitchProps) => {
-  const { checked, disabled, onCheckedChange, uncheckedIcon, checkedIcon, label } = props
-  const id = useId()
-
-  return (
-    <div className="switch" data-disabled={attr(disabled)}>
-      <SwitchPrimitive.Root
-        className="switch-track"
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        disabled={disabled}
-        id={id}
-      >
-        <SwitchPrimitive.Thumb className="switch-thumb">
-          {uncheckedIcon && (
-            <span className="switch-thumb-icon" data-visible={attr(!checked)}>
-              {uncheckedIcon}
-            </span>
-          )}
-          {checkedIcon && (
-            <span className="switch-thumb-icon" data-visible={attr(checked)}>
-              {checkedIcon}
-            </span>
-          )}
-        </SwitchPrimitive.Thumb>
-      </SwitchPrimitive.Root>
-      {label && (
-        <label className="switch-label" htmlFor={id} data-disabled={disabled}>
-          {label}
-        </label>
-      )}
-    </div>
-  )
-}
-
-export { Switch }

package/src/Tabs/index.tsx

@@ -1,89 +0,0 @@
-import * as RadixTabs from '@radix-ui/react-tabs'
-import { createContext, useContext, useEffect, useId, useRef, useState } from 'react'
-
-interface Props {
-  children: React.ReactNode
-  onChange: (value: string) => void
-  value: string
-}
-
-const TabsContext = createContext({ baseId: '', listRef: {} as React.RefObject<HTMLDivElement> })
-
-const makeTriggerId = (baseId: string, value: string) => {
-  return `radix-${baseId}-trigger-${value}`
-}
-
-export const Tabs = ({ children, value, onChange }: Props) => {
-  const listRef = useRef<HTMLDivElement>(null)
-  const baseId = useId()
-
-  return (
-    <RadixTabs.Root value={value} onValueChange={onChange}>
-      <TabsContext.Provider value={{ baseId, listRef }}>
-        <RadixTabs.List className="tabs" ref={listRef}>
-          <TabIndicator value={value} />
-          {children}
-        </RadixTabs.List>
-      </TabsContext.Provider>
-    </RadixTabs.Root>
-  )
-}
-
-const TabIndicator = ({ value }: { value: string }) => {
-  const [styles, setStyles] = useState<React.CSSProperties>({})
-  const { baseId, listRef } = useContext(TabsContext)
-
-  useEffect(() => {
-    const state = { observer: null as null | ResizeObserver }
-
-    if (listRef.current) {
-      const tabIdSelector = `.tab[id="${makeTriggerId(baseId, value)}"]`
-      const selectedTabElement = listRef.current.querySelector<HTMLElement>(tabIdSelector)
-
-      if (selectedTabElement != null) {
-        state.observer = new ResizeObserver(() => {
-          const { clientHeight, clientWidth, offsetLeft, offsetTop } = selectedTabElement
-
-          setStyles({
-            height: clientHeight,
-            transform: `translateX(${Math.floor(offsetLeft)}px) translateY(${Math.floor(offsetTop)}px)`,
-            width: clientWidth
-          })
-        })
-
-        state.observer.observe(selectedTabElement)
-      } else {
-        setStyles({ display: 'none' })
-      }
-    }
-
-    return () => {
-      if (state.observer) {
-        state.observer.disconnect()
-      }
-    }
-  }, [value])
-
-  return (
-    <div className="tab-indicator-container" style={styles}>
-      <div className="tab-indicator" />
-    </div>
-  )
-}
-
-interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  value: string
-}
-
-const Tab = ({ children, value, ...restProps }: TabProps) => {
-  const { baseId } = useContext(TabsContext)
-  const id = makeTriggerId(baseId, value)
-
-  return (
-    <RadixTabs.Trigger {...restProps} id={id} className="tab" value={value}>
-      {children}
-    </RadixTabs.Trigger>
-  )
-}
-
-Tabs.Tab = Tab

package/src/TextArea/index.tsx

@@ -1,51 +0,0 @@
-import { useResizeTextarea } from '../__hooks/use-resize'
-import { attr, callMultiple } from '@companix/utils-browser'
-import { useEffect } from 'react'
-
-interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /**
-   * Свойство управляющее автоматическим изменением высоты компонента.
-   */
-  grow?: boolean
-  /**
-   * Обработчик, срабатывающий при изменении размера компонента.
-   */
-  onResize?: (el: HTMLTextAreaElement) => void
-  fill?: boolean
-}
-
-export const TextArea = ({
-  onResize,
-  grow = false,
-  value,
-  onChange,
-  disabled,
-  required,
-  rows = 2,
-  fill = false,
-  ...textAreaProps
-}: TextAreaProps) => {
-  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow)
-
-  useEffect(resize, [resize, value])
-
-  return (
-    <div
-      className="form form-textarea"
-      data-required={attr(required)}
-      data-disabled={attr(disabled)}
-      data-fill={attr(fill)}
-    >
-      <textarea
-        className="form-input"
-        data-grow={attr(grow)}
-        value={value}
-        ref={refResizeTextarea}
-        rows={rows}
-        disabled={disabled}
-        onChange={callMultiple(onChange, resize)}
-        {...textAreaProps}
-      />
-    </div>
-  )
-}

package/src/Toaster/RemoveListener.tsx

@@ -1,11 +0,0 @@
-import { useEffect } from 'react'
-
-export const RemoveListener = ({ callback }: { callback?: () => void }) => {
-  useEffect(() => {
-    return () => {
-      callback?.()
-    }
-  }, [])
-
-  return null
-}

package/src/Toaster/Toast.tsx

@@ -1,69 +0,0 @@
-import * as ToasterPrimitive from '@radix-ui/react-toast'
-import { attr } from '@companix/utils-browser'
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { ToastOptions } from '.'
-import { RemoveListener } from './RemoveListener'
-
-interface ToastProps extends ToastOptions {
-  onRemoved: () => void
-  onRemoving: () => void
-  onInitialized: (ref: HTMLLIElement) => void
-  closeIcon?: React.ReactNode
-}
-
-export const Toast = (options: ToastProps) => {
-  const [mounted, setMounted] = useState(false)
-
-  const ref = useRef<HTMLLIElement>(null)
-
-  const {
-    appearance = 'neutral',
-    icon,
-    title,
-    description,
-    duration,
-    closeIcon,
-    onRemoving,
-    onRemoved,
-    onInitialized
-  } = options
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useLayoutEffect(() => {
-    if (ref.current) {
-      onInitialized(ref.current)
-    }
-  }, [])
-
-  return (
-    <ToasterPrimitive.Root
-      ref={ref}
-      data-expanded
-      data-appearance={appearance}
-      data-mounted={attr(mounted)}
-      className="toaster"
-      duration={duration}
-    >
-      <RemoveListener callback={onRemoved} />
-      {icon && <div className="toaster-icon">{icon}</div>}
-      <div className="toaster-content">
-        {title && <ToasterPrimitive.Title className="toaster-title">{title}</ToasterPrimitive.Title>}
-        {description && (
-          <ToasterPrimitive.Description className="toaster-description">
-            {description}
-          </ToasterPrimitive.Description>
-        )}
-      </div>
-      <ToasterPrimitive.Close className="toaster-close" onClick={onRemoving}>
-        {closeIcon ?? (
-          <svg viewBox="0 0 16 16" fill="currentColor">
-            <path d="M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z" />
-          </svg>
-        )}
-      </ToasterPrimitive.Close>
-    </ToasterPrimitive.Root>
-  )
-}

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