@companix/uikit 0.0.1

package/src/Select/index.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useMemo } from 'react'
+import { OptionsList } from '../OptionItem/OptionsList'
+import { OptionItem } from '../OptionItem/OptionItem'
+import { Popover } from '../Popover'
+import { useFroozeClosing } from '../__hooks/use-frooze-closing'
+import { FormProps } from '../Form'
+import type { Option } from '../types'
+import { SelectInput } from './SelectInput'
+import { useScrollListController } from '../__hooks/use-scrollbox'
+
+interface SelectProps<T> extends Omit<FormProps, 'value' | 'onChange' | 'rightElement'> {
+  options: Option<T>[]
+  onChange: (event: T | null) => void
+  placeholder?: string
+  clearButton?: boolean
+  clearButtonIcon?: boolean
+  value: T | null
+  children?: React.ReactNode
+  minimalOptions?: boolean
+  matchTarget?: 'width' | 'min-width'
+}
+
+export const Select = <T,>(props: SelectProps<T>) => {
+  const {
+    options,
+    onChange,
+    minimalOptions,
+    clearButton,
+    clearButtonIcon,
+    matchTarget = 'width',
+    value,
+    children,
+    disabled,
+    ...inputProps
+  } = props
+
+  const currentOption = useMemo(() => {
+    const index = options.findIndex((o) => o.value === value)
+
+    return {
+      index,
+      option: options[index] as Option<T> | undefined
+    }
+  }, [options, value])
+
+  const active = currentOption.option?.value ?? null
+
+  const { popoverRef, froozePopoverPosition, handleAnimationEnd } = useFroozeClosing()
+  const { scrollToElement, optionsWrapperRef, scrollBoxRef } = useScrollListController()
+
+  const handleChange = (value: T, close: () => void) => {
+    froozePopoverPosition()
+    onChange(value)
+    close()
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange(null)
+  }
+
+  const onOpened = () => {
+    if (currentOption.index !== -1) {
+      scrollToElement(currentOption.index, true)
+    }
+  }
+
+  return (
+    <Popover
+      minimal
+      ref={popoverRef}
+      sideOffset={0}
+      matchTarget={matchTarget}
+      onAnimationEnd={handleAnimationEnd}
+      onOpenAutoFocus={(e) => e.preventDefault()}
+      onCloseAutoFocus={(e) => e.preventDefault()}
+      disabled={disabled}
+      content={({ close }) => (
+        <SelectPopover<T>
+          options={options}
+          active={active}
+          scrollboxRef={scrollBoxRef}
+          optionsWrapperRef={optionsWrapperRef}
+          minimalOptions={minimalOptions}
+          onOpened={onOpened}
+          onSelect={(value) => handleChange(value, close)}
+        />
+      )}
+    >
+      {children ?? (
+        <SelectInput
+          {...inputProps}
+          disabled={disabled}
+          value={currentOption.option?.title ?? ''}
+          onClear={handleClear}
+          clearButton={clearButton}
+          clearButtonIcon={clearButtonIcon}
+        />
+      )}
+    </Popover>
+  )
+}
+
+interface SelectPopoverProps<T> {
+  scrollboxRef?: React.Ref<HTMLDivElement>
+  optionsWrapperRef?: React.RefObject<HTMLDivElement>
+  options: Option<T>[]
+  minimalOptions?: boolean
+  active?: T | null
+  onSelect?: (value: T) => void
+  onOpened?: () => void
+}
+
+const SelectPopover = <T,>(props: SelectPopoverProps<T>) => {
+  const { active, onOpened, scrollboxRef, optionsWrapperRef, options, onSelect, minimalOptions } = props
+
+  useEffect(() => {
+    onOpened?.()
+  }, [])
+
+  return (
+    <OptionsList scrollboxRef={scrollboxRef} optionsWrapperRef={optionsWrapperRef} maxHeight={300}>
+      {options.map((option, i) => (
+        <OptionItem
+          key={`option-item-${option.value}-${i}`}
+          active={active === option.value}
+          onClick={() => onSelect?.(option.value)}
+          minimal={minimalOptions}
+          {...option}
+        />
+      ))}
+    </OptionsList>
+  )
+}

package/src/SelectTags/SelectTags.scss

@@ -0,0 +1,66 @@
+@use '../mixins.scss';
+
+.select-tags {
+  display: flex;
+  flex-direction: column;
+
+  .form-input {
+    padding-left: var(--form_space, 0);
+  }
+
+  &-empty {
+    @include mixins.use-styles(tag, empty);
+  }
+
+  &-container {
+    display: flex;
+    align-items: center;
+    cursor: text;
+
+    .expand-icon {
+      margin: 0px var(--form_space, 0);
+    }
+  }
+}
+
+.tag {
+  display: flex;
+  align-items: center;
+  cursor: default;
+  user-select: none;
+
+  @include mixins.use-styles(tag);
+
+  &-name {
+    @include mixins.use-styles(tag, name);
+  }
+
+  &-close-button {
+    cursor: pointer;
+    @include mixins.use-styles(tag, close);
+
+    &:hover {
+      @include mixins.use-styles(tag, close, hover);
+    }
+  }
+
+  &-close-icon {
+    @include mixins.use-size(tag, close, size);
+  }
+
+  &-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+    flex-wrap: wrap;
+    min-width: 0;
+    position: relative;
+
+    @include mixins.use-styles(tag, container);
+
+    &:not([data-readonly]) {
+      padding-bottom: 0;
+    }
+  }
+}

package/src/SelectTags/index.tsx

@@ -0,0 +1,192 @@
+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/Spinner.scss

@@ -0,0 +1,14 @@
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner-border {
+  display: inline-block;
+  border-style: solid;
+  border-color: currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: 0.75s linear infinite spinner-border;
+}

package/src/Spinner/index.tsx

@@ -0,0 +1,19 @@
+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/StepperInput.scss

@@ -0,0 +1,35 @@
+.number-input-container {
+  display: flex;
+  gap: 4px;
+}
+
+.number-stepper {
+  display: flex;
+  flex-direction: column;
+  height: 30px;
+  min-height: 30px;
+  line-height: 30px;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 47%);
+  border-radius: 4px;
+
+  &-splitter {
+    height: 1px;
+    background-color: var(--border-color);
+  }
+
+  &-slot {
+    border-radius: 0px;
+    height: 13.5px;
+
+    &[data-slot='decrement'] {
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+
+    &[data-slot='increment'] {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+  }
+}

package/src/Stepper/index.tsx

@@ -0,0 +1,76 @@
+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/Switch.scss

@@ -0,0 +1,102 @@
+@use '../mixins.scss';
+
+.switch {
+  display: inline-table;
+  user-select: none;
+  touch-action: manipulation;
+  max-width: max-content;
+
+  &[data-disabled] {
+    @include mixins.use-styles(switch, disabled);
+  }
+
+  &-track {
+    cursor: pointer;
+    outline: none;
+    position: relative;
+
+    &:after {
+      visibility: hidden;
+      content: '\00A0';
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      @include mixins.use-styles(switch, track, disabled);
+    }
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(switch, track, checked);
+    }
+
+    &[data-state='unchecked'] {
+      @include mixins.use-styles(switch, track, unchecked);
+    }
+
+    @include mixins.use-styles(switch, track);
+  }
+
+  &-thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    @include mixins.use-styles(switch, thumb);
+    @include mixins.use-size(switch, thumb, size);
+
+    border-radius: 9999px;
+
+    &[data-state='unchecked'] {
+      transform: translate(
+        var(--switch_track_outline_width),
+        calc(var(--switch_track_height) - var(--switch_thumb_size) - var(--switch_track_outline_width))
+      );
+
+      .switch-thumb-icon {
+        @include mixins.use-styles(switch, icon, unchecked);
+      }
+    }
+
+    &[data-state='checked'] {
+      transform: translate(
+        calc(var(--switch_track_width) - var(--switch_thumb_size) - var(--switch_track_outline_width)),
+        calc(var(--switch_track_height) - var(--switch_thumb_size) - var(--switch_track_outline_width))
+      );
+
+      .switch-thumb-icon {
+        @include mixins.use-styles(switch, icon, checked);
+      }
+    }
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      inset: 0;
+
+      @include mixins.use-styles(switch, icon);
+
+      &[data-visible] {
+        @include mixins.use-styles(switch, icon, visible);
+      }
+
+      svg {
+        @include mixins.use-size(switch, icon, size);
+      }
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    display: table-cell;
+    word-break: break-word;
+
+    &[data-disabled] {
+      cursor: default;
+      @include mixins.use-styles(switch, label, disabled);
+    }
+
+    @include mixins.use-styles(switch, label);
+  }
+}

package/src/Switch/index.tsx

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