@companix/uikit 0.0.1

package/src/Radio/index.tsx

@@ -0,0 +1,68 @@
+import { useId } from 'react'
+import * as RadioPrimitive from '@radix-ui/react-radio-group'
+import { attr } from '@companix/utils-browser'
+
+interface RadioOption<T> {
+  value: T
+  label: React.ReactNode
+}
+
+interface RadioGroupProps<T> {
+  options: RadioOption<T>[]
+  onChange: (event: T) => void
+  value: T | null
+  disabled?: boolean
+  required?: boolean
+  size?: 'sm' | 'md'
+}
+
+export const RadioGroup = <T extends string>(props: RadioGroupProps<T>) => {
+  const { options, value, onChange, disabled, required, size } = props
+
+  return (
+    <RadioPrimitive.Root
+      className="radio-group"
+      disabled={disabled}
+      data-required={attr(required && !value)}
+      data-v={value}
+      value={value}
+      onValueChange={(e) => onChange(e as T)}
+    >
+      {options.map((option, i) => (
+        <Radio
+          key={`radio-${option.value}-${i}`}
+          {...option}
+          size={size}
+          disabled={disabled}
+          required={required && !value}
+        />
+      ))}
+    </RadioPrimitive.Root>
+  )
+}
+
+interface RadioProps extends RadioOption<string> {
+  size?: 'sm' | 'md'
+  disabled?: boolean
+  required?: boolean
+}
+
+export const Radio = ({ value, label, size = 'md', disabled, required }: RadioProps) => {
+  const id = useId()
+
+  return (
+    <span
+      className="radio"
+      data-disabled={attr(disabled)}
+      data-size={size}
+      data-required={attr(required)}
+    >
+      <RadioPrimitive.Item className="radio-box" value={value} disabled={disabled} id={id}>
+        <RadioPrimitive.Indicator className="radio-mark" />
+      </RadioPrimitive.Item>
+      <label className="radio-label" htmlFor={id} data-disabled={attr(disabled)}>
+        {label}
+      </label>
+    </span>
+  )
+}

package/src/Scrollable/ImitateScroll.tsx

@@ -0,0 +1,141 @@
+import cn from 'classnames'
+
+import { useRef, useLayoutEffect, useMemo, useCallback, useEffect } from 'react'
+import { getContainers, pc, px } from '@companix/utils-browser'
+
+interface Props {
+  children: React.ReactNode
+  thumbClassName: string
+  thumbColor?: string
+  trackWidth?: number
+  thumbMargin?: number
+  scrollableClassName?: string
+}
+
+// Отслеживание изменений scrollHeight:
+// https://stackoverflow.com/questions/44428370/detect-scrollheight-change-with-mutationobserver
+
+const ImitateScroll = ({
+  children,
+  thumbClassName,
+  scrollableClassName,
+  thumbMargin = 0,
+  trackWidth = 20
+}: Props) => {
+  const scrollThumbRef = useRef<HTMLDivElement>(null)
+  const scrollableRef = useRef<HTMLDivElement>(null)
+
+  const data = useMemo(() => {
+    return { positons: { top: 0, y: 0 }, scrollRatio: 0 }
+  }, [])
+
+  const listeners = useMemo(() => {
+    return {
+      start() {
+        document.addEventListener('mousemove', handleMouseMove)
+        document.addEventListener('mouseup', handleMouseUp)
+      },
+      clear() {
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    const observer = new ResizeObserver(setThumbHeight)
+
+    if (scrollableRef.current) {
+      getContainers(scrollableRef.current, (element) => {
+        observer.observe(element)
+      })
+    }
+
+    return () => {
+      if (scrollableRef.current) {
+        getContainers(scrollableRef.current, (element) => {
+          observer.unobserve(element)
+        })
+      }
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    setThumbHeight()
+  }, [])
+
+  const setThumbHeight = useCallback(() => {
+    const { current: container } = scrollableRef
+    const { current: thumb } = scrollThumbRef
+
+    if (thumb && container) {
+      const scrollRatio = container.clientHeight / container.scrollHeight
+
+      thumb.style.height = pc(scrollRatio * 100)
+      thumb.style.display = scrollRatio === 1 ? 'none' : 'block'
+
+      data.scrollRatio = scrollRatio
+    }
+  }, [])
+
+  const handleMouseMove = useCallback(({ clientY }: MouseEvent) => {
+    const { current: container } = scrollableRef
+
+    if (container) {
+      const dy = clientY - data.positons.y
+      container.scrollTop = data.positons.top + dy / data.scrollRatio
+    }
+  }, [])
+
+  const handleMouseUp = useCallback(() => {
+    listeners.clear()
+  }, [])
+
+  const handleMouseDown = useCallback(({ clientY }: React.MouseEvent) => {
+    const { current: container } = scrollableRef
+
+    if (container) {
+      data.positons = {
+        top: container.scrollTop,
+        y: clientY
+      }
+    }
+
+    listeners.start()
+  }, [])
+
+  const handleScroll = () => {
+    requestAnimationFrame(() => {
+      const { current: container } = scrollableRef
+      const { current: thumb } = scrollThumbRef
+
+      if (thumb && container) {
+        thumb.style.top = pc((container.scrollTop * 100) / container.scrollHeight)
+      }
+    })
+  }
+
+  return (
+    <div className="relative h-full overflow-hidden">
+      <div
+        className={cn('hidden-scroll h-full overflow-y-scroll', scrollableClassName)}
+        onScroll={handleScroll}
+        ref={scrollableRef}
+      >
+        {children}
+      </div>
+      <div
+        className="absolute right-0 top-0 box-border h-full"
+        style={{ width: px(trackWidth), padding: px(thumbMargin) }}
+      >
+        <div
+          onMouseDown={handleMouseDown}
+          className={`${thumbClassName} relative w-full rounded-full`}
+          ref={scrollThumbRef}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { ImitateScroll }

package/src/Scrollable/Scrollable.scss

@@ -0,0 +1,50 @@
+.scrollable::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+}
+
+.scrollable::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  border: var(--thumb-padding) solid transparent;
+  border-radius: 999px;
+  background-color: var(--thumb-color);
+}
+
+.scrollable::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+.scrollable-hover-interaction::-webkit-scrollbar-thumb,
+.scrollable-hover-interaction::-webkit-scrollbar-track {
+  visibility: hidden;
+}
+.scrollable-hover-interaction:hover::-webkit-scrollbar-thumb,
+.scrollable-hover-interaction:hover::-webkit-scrollbar-track {
+  visibility: visible;
+}
+
+.scrollable-border-position::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+
+  border-right-width: 0px;
+  border-bottom-width: 0px;
+
+  border-left-width: calc(var(--thumb-padding) * 2);
+  border-top-width: calc(var(--thumb-padding) * 2);
+}
+
+.hidden-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-thumb {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-track {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-corner {
+  display: none;
+}

package/src/Scrollable/index.tsx

@@ -0,0 +1,141 @@
+import './Scrollable.scss'
+
+import classNames from 'classnames'
+import { forwardRef } from 'react'
+import { px, varToStyle } from '@companix/utils-browser'
+
+interface OuterImplementation {
+  implementation: 'outer'
+  shadowPadding?: number
+  scrollbarWidth: number
+  noneCorrect?: boolean
+}
+
+interface EdgeImplementation {
+  implementation: 'edge'
+  scrollbarWidth: number
+  padding: number
+}
+
+interface InnerImplementation {
+  implementation: 'inner'
+  padding: number
+}
+
+interface ScrollableProps {
+  heightAuto?: boolean
+  scrollX?: boolean
+  scrollY?: boolean
+  interactionKind?: 'static' | 'hover'
+  thumbPos?: 'center' | 'border'
+  thumbPadding?: number
+  thumbColor?: string
+  onWheel?: React.WheelEventHandler<HTMLDivElement>
+  onScroll?: React.UIEventHandler<HTMLDivElement>
+  maxHeight?: number
+  children: React.ReactNode
+  style?: React.CSSProperties
+  className?: string
+}
+
+type Implementation = InnerImplementation | OuterImplementation | EdgeImplementation
+
+const Scrollable = forwardRef<HTMLDivElement, ScrollableProps & Implementation>((props, ref) => {
+  let {
+    interactionKind = 'static',
+    thumbPos = 'center',
+    thumbPadding = 4,
+    heightAuto,
+    scrollX,
+    className,
+    scrollY,
+    onWheel,
+    maxHeight,
+    onScroll,
+    thumbColor,
+    children
+  } = props
+
+  const style: React.CSSProperties = (() => {
+    if (props.implementation === 'edge') {
+      thumbPadding = 0
+
+      const { padding, scrollbarWidth } = props
+
+      return {
+        ...varToStyle({ '--scrollbar-width': px(scrollbarWidth) }),
+        padding: `0px ${padding - scrollbarWidth}px 0px ${padding}px`
+      }
+    }
+
+    if (props.implementation === 'outer') {
+      const { shadowPadding = 0, noneCorrect, scrollbarWidth } = props
+
+      if ((window as any).IS_MOBILE) {
+        return {
+          padding: shadowPadding,
+          margin: -shadowPadding
+        }
+      }
+
+      return {
+        ...varToStyle({ '--scrollbar-width': px(scrollbarWidth) }),
+        padding: shadowPadding,
+        margin: -shadowPadding,
+        marginRight: noneCorrect ? undefined : `calc(-${scrollbarWidth}px - ${shadowPadding}px)`,
+        marginBottom: 0
+      }
+    }
+
+    if (props.implementation === 'inner') {
+      const { padding } = props
+
+      if ((window as any).IS_MOBILE) {
+        return {
+          [scrollY ? 'paddingLeft' : 'paddingTop']: padding,
+          [scrollY ? 'paddingRight' : 'paddingBottom']: padding
+        }
+      }
+
+      return {
+        [scrollY ? 'paddingLeft' : 'paddingTop']: padding,
+        ...varToStyle({ '--scrollbar-width': px(padding) })
+      }
+    }
+
+    return {}
+  })()
+
+  return (
+    <div
+      ref={ref}
+      onWheel={onWheel}
+      onScroll={onScroll}
+      onMouseDown={(e) => {
+        e.preventDefault()
+      }}
+      style={{
+        ...style,
+        ...props.style,
+        ...{ maxHeight: maxHeight ? px(maxHeight) : undefined },
+        ...varToStyle({ '--thumb-padding': px(thumbPadding) }),
+        ...varToStyle({ '--thumb-color': thumbColor ?? '#c1c2c8bd' })
+      }}
+      className={classNames(
+        !(window as any).IS_MOBILE && 'scrollable',
+        className,
+        heightAuto ? '' : 'h-full',
+        {
+          'overflow-y-scroll': scrollY,
+          'overflow-x-scroll': scrollX,
+          'scrollable-hover-interaction': interactionKind === 'hover',
+          'scrollable-border-position': thumbPos === 'border'
+        }
+      )}
+    >
+      {children}
+    </div>
+  )
+})
+
+export { Scrollable }

package/src/Select/Select.scss

@@ -0,0 +1,80 @@
+@use '../mixins.scss';
+
+.select {
+  cursor: pointer;
+  max-width: 100%;
+
+  &-layout {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: inherit;
+  }
+
+  &-placeholder {
+    user-select: none;
+
+    @include mixins.use-styles(form, placeholder);
+  }
+
+  &-content {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    align-self: stretch;
+    overflow: hidden;
+
+    &:first-child {
+      padding-left: var(--form_space, 0);
+    }
+
+    &-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &-element {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  &-close-button {
+    pointer-events: auto;
+    cursor: pointer;
+    padding: 0px var(--form_space, 0);
+    height: 100%;
+    outline: none;
+    color: var(--select_clean_color);
+
+    &:hover {
+      color: var(--select_clean_hover_color);
+    }
+  }
+
+  &-expand {
+    margin-right: var(--form_space, 0);
+
+    &:first-child {
+      margin-left: var(--form_space, 0);
+    }
+  }
+}
+
+// expand icon
+
+.expand-icon {
+  color: var(--select_expand_color);
+  transition: transform 0.2s;
+}
+
+.form {
+  &[data-state='open'] {
+    .expand-icon {
+      transform: rotate(180deg);
+    }
+  }
+}

package/src/Select/SelectInput.tsx

@@ -0,0 +1,131 @@
+import cn from 'classnames'
+
+import { attr } from '@companix/utils-browser'
+import { forwardRef, useCallback, useRef } from 'react'
+import { Icon } from '../Icon'
+import { faChevronDown, faClose } from '@fortawesome/free-solid-svg-icons'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+
+export interface SelectFormProps extends React.HTMLAttributes<HTMLDivElement> {
+  required?: boolean
+  disabled?: boolean
+  className?: string
+  leftElement?: React.ReactNode
+  placeholder?: string
+  value?: string | number
+  size?: 'sm' | 'md' | 'lg'
+  fill?: boolean
+  clearButton?: boolean
+  clearButtonIcon?: boolean
+  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const SelectInput = forwardRef<HTMLDivElement, SelectFormProps>(
+  (
+    {
+      required,
+      size,
+      fill,
+      leftElement,
+      className,
+      value,
+      clearButton,
+      placeholder,
+      clearButtonIcon,
+      disabled,
+      onClear,
+      ...containerProps
+    },
+    ref
+  ) => {
+    const selectInputRef = useRef<HTMLInputElement>(null)
+
+    // https://vkui.io/components/custom-select/
+    const passClickAndFocusToInputOnClick = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!selectInputRef.current || !document) {
+          return
+        }
+
+        const clickTargetIsNotAnInput = e.target !== selectInputRef.current
+        if (clickTargetIsNotAnInput) {
+          selectInputRef.current.click()
+
+          const inputIsNotFocused = document.activeElement !== selectInputRef.current
+          if (inputIsNotFocused) {
+            selectInputRef.current.focus()
+          }
+        }
+      },
+      [selectInputRef]
+    )
+
+    const preventInputBlurWhenClickInsideFocusedSelectArea = (e: React.MouseEvent<HTMLDivElement>) => {
+      // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
+      // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
+      // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
+      const isInputFocused = document && document.activeElement === selectInputRef.current
+      if (isInputFocused) {
+        e.preventDefault()
+      }
+    }
+
+    const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (disabled) return
+      passClickAndFocusToInputOnClick(event)
+    }
+
+    const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+      preventInputBlurWhenClickInsideFocusedSelectArea(event)
+    }
+
+    const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
+      selectInputRef.current && selectInputRef.current.focus()
+      onClear?.(event)
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn('form select', className)}
+        data-size={size ?? 'md'}
+        data-fill={attr(fill)}
+        data-required={attr(required)}
+        data-disabled={attr(disabled)}
+        onMouseDown={onMouseDown}
+        {...containerProps}
+        onClick={onClick}
+      >
+        <div className="select-layout form-input">
+          {leftElement && <div className="select-element">{leftElement}</div>}
+          <div className="select-content">
+            <div className="select-content-text" aria-disabled={disabled}>
+              {!value && <span className="select-placeholder">{placeholder}</span>}
+              {value}
+            </div>
+          </div>
+          <div className="select-element">
+            {clearButton && value && (
+              <button className="select-close-button" onClick={handleClear}>
+                {clearButtonIcon ?? <Icon className="select-close-icon" icon={faClose} size="xxxs" />}
+              </button>
+            )}
+            <Icon className="expand-icon select-expand" icon={faChevronDown} size="xxxs" />
+          </div>
+        </div>
+        <VisuallyHidden asChild>
+          <input
+            ref={selectInputRef}
+            autoComplete="off"
+            autoCapitalize="none"
+            autoCorrect="off"
+            spellCheck="false"
+            aria-autocomplete="none"
+            onClick={containerProps.onClick}
+            readOnly
+          />
+        </VisuallyHidden>
+      </div>
+    )
+  }
+)