@companix/uikit 0.0.1 → 0.0.3

package/src/Popover/index.tsx

@@ -1,117 +0,0 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { attr } from '@companix/utils-browser'
-import classNames from 'classnames'
-import { forwardRef, useRef } from 'react'
-
-export type Align = 'start' | 'center' | 'end'
-export type Side = 'top' | 'right' | 'bottom' | 'left'
-
-export interface PopoverProps {
-  children: React.ReactNode
-  open?: boolean
-  triggerRef?: React.Ref<HTMLButtonElement>
-  triggerProps?: React.ButtonHTMLAttributes<HTMLButtonElement>
-  onOpenChange?: (open: boolean) => void
-  content: ({ close }: { close: () => void }) => React.ReactNode
-  onAnimationEnd?: () => void
-  onAnimationStart?: () => void
-  onOpenAutoFocus?: (event: Event) => void
-  onCloseAutoFocus?: (event: Event) => void
-  side?: Side
-  align?: Align
-  showArrows?: boolean
-  minimal?: boolean
-  sideOffset?: number
-  matchTarget?: 'width' | 'min-width'
-  className?: string
-  fitMaxHeight?: boolean
-  disabled?: boolean
-}
-
-export const Popover = forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
-  const {
-    children,
-    sideOffset,
-    matchTarget,
-    onAnimationEnd,
-    onAnimationStart,
-    onOpenAutoFocus,
-    onCloseAutoFocus,
-    triggerRef,
-    triggerProps,
-    open,
-    content,
-    onOpenChange,
-    align,
-    disabled,
-    minimal,
-    className,
-    fitMaxHeight = true,
-    side,
-    showArrows
-  } = props
-
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  const close = () => {
-    if (buttonRef.current) {
-      buttonRef.current.click()
-    }
-  }
-
-  const handleOpen = (e: React.MouseEvent) => {
-    if (disabled) {
-      e.preventDefault()
-    }
-  }
-
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <PopoverPrimitive.Trigger ref={triggerRef} {...triggerProps} onClick={handleOpen} asChild>
-        {children}
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          ref={ref}
-          className={classNames('popover', className)}
-          side={side}
-          align={align}
-          data-appearance={minimal ? 'minimal' : 'default'}
-          data-match-target={matchTarget}
-          sideOffset={sideOffset ?? 6}
-          avoidCollisions
-          arrowPadding={10}
-          onAnimationStart={onAnimationStart}
-          onAnimationEnd={onAnimationEnd}
-          onOpenAutoFocus={onOpenAutoFocus}
-          onCloseAutoFocus={onCloseAutoFocus}
-        >
-          <PopoverPrimitive.Close ref={buttonRef} style={{ display: 'none' }} />
-          {showArrows && (
-            <PopoverPrimitive.Arrow width={30} height={11} asChild>
-              <div className="popover-arrow">
-                <svg className="popover-arrow-icon" viewBox="0 0 30 11" width={30} height={11}>
-                  <path
-                    className="popover-arrow-border"
-                    d="M 18.112 -2.704 C 19.127 -3.64 19.999 -5.626 19.999 -7.001 L 19.999 18.999 C 19.999 17.621 19.131 15.642 18.111 14.702 L 10.927 8.084 C 9.69 6.944 9.694 5.05 10.927 3.914 L 18.112 -2.704 Z"
-                    style={{ transformBox: 'fill-box', transformOrigin: '50% 50%' }}
-                    transform="matrix(0, -1, 1, 0, 0.000001, 0)"
-                  />
-                  <path
-                    className="popover-arrow-fill"
-                    d="M 17.789 -2.965 C 19.009 -4.09 19.999 -6.341 19.999 -7.995 L 19.999 -10.001 L 19.999 19.999 L 19.999 17.994 C 19.999 16.34 19.016 14.094 17.789 12.964 L 10.606 6.348 C 9.796 5.602 9.804 4.388 10.606 3.648 L 17.789 -2.966 L 17.789 -2.965 Z"
-                    style={{ transformBox: 'fill-box', transformOrigin: '50% 50%' }}
-                    transform="matrix(0, -1, 1, 0, 0, 0)"
-                  />
-                </svg>
-              </div>
-            </PopoverPrimitive.Arrow>
-          )}
-          <div className="popover-content" data-fit-max-height={attr(fitMaxHeight)}>
-            {content({ close })}
-          </div>
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  )
-})

package/src/Radio/Radio.scss

@@ -1,148 +0,0 @@
-@use '../mixins.scss';
-
-.radio {
-  display: inline-table;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  max-width: max-content;
-
-  @include mixins.use-styles(radio);
-
-  &:not([data-required]):not([data-disabled]):hover {
-    .radio-box[data-state='unchecked'] {
-      @include mixins.use-styles(radio, box, hover);
-    }
-  }
-
-  &:not([data-required]):not([data-disabled]):active {
-    .radio-box[data-state='unchecked'] {
-      @include mixins.use-styles(radio, box, active);
-    }
-  }
-
-  &[data-disabled] {
-    @include mixins.use-styles(radio, disabled);
-  }
-
-  &[data-required] {
-    @include mixins.use-styles(radio, required);
-
-    .radio-box {
-      &::before {
-        content: ' ';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-
-        @include mixins.use-styles(radio, required, box);
-        border-radius: mixins.get-var-name(radio, box, border-radius);
-      }
-    }
-  }
-
-  &[data-size='sm'] {
-    @include mixins.use-styles(radio, size, sm);
-
-    .radio-box {
-      @include mixins.use-size(radio, size, sm, box);
-    }
-
-    .radio-mark {
-      @include mixins.use-size(radio, size, sm, mark);
-    }
-  }
-
-  &[data-size='md'] {
-    @include mixins.use-styles(radio, size, md);
-
-    .radio-box {
-      @include mixins.use-size(radio, size, md, box);
-    }
-
-    .radio-mark {
-      @include mixins.use-size(radio, size, md, mark);
-    }
-  }
-
-  &-box {
-    cursor: pointer;
-    outline: none;
-    transition: background-color 0.1s linear;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include mixins.use-styles(radio, box);
-
-    &[data-disabled] {
-      cursor: default;
-    }
-
-    &:after {
-      visibility: hidden;
-      content: '\00A0';
-    }
-
-    &[data-state='checked'] {
-      @include mixins.use-styles(radio, box, checked);
-    }
-  }
-
-  &-mark {
-    position: absolute;
-    @include mixins.use-styles(radio, mark);
-
-    &[data-state='checked'] {
-      @include mixins.use-styles(radio, mark, in);
-    }
-
-    &[data-state='unchecked'] {
-      @include mixins.use-styles(radio, mark, out);
-    }
-  }
-
-  &-label {
-    cursor: pointer;
-    display: table-cell;
-    word-break: break-word;
-
-    &[data-disabled] {
-      cursor: default;
-    }
-
-    @include mixins.use-styles(radio, label);
-  }
-}
-
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  @include mixins.use-styles(radio, group);
-}
-
-// .radio-icon {
-//   width: 16px;
-//   height: 16px;
-//   background-color: transparent;
-//   border: 1px solid #ffffff75;
-//   border-radius: 100px;
-
-//   &[data-checked] {
-//     background-color: #fff;
-//   }
-// }
-
-// .radio {
-//   display: flex;
-//   align-items: center;
-//   outline: none;
-//   cursor: pointer;
-//   gap: 6px;
-// }

package/src/Radio/index.tsx

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

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

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

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