@companix/uikit 0.0.1

package/src/Tabs/Tabs.scss

@@ -0,0 +1,58 @@
+@use '../mixins.scss';
+
+.tabs {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 0 auto;
+  position: relative;
+
+  @include mixins.use-styles(tab, container);
+}
+
+.tab-indicator-container {
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+
+  @include mixins.use-styles(tab, indicator, container);
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  @include mixins.use-styles(tab, indicator);
+}
+
+.tab {
+  outline: none;
+  font-family: inherit;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  background-color: transparent;
+  user-select: none;
+  position: relative;
+  cursor: pointer;
+  font-family: inherit;
+
+  @include mixins.use-styles(tab);
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    @include mixins.use-styles(tab, disabled);
+  }
+
+  &:not([data-disabled]):not([data-state='active']):hover {
+    @include mixins.use-styles(tab, hover);
+  }
+
+  &[data-state='active'] {
+    @include mixins.use-styles(tab, active);
+  }
+}

package/src/Tabs/index.tsx

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

@@ -0,0 +1,34 @@
+.form-textarea {
+  display: flex;
+
+  textarea {
+    padding: var(--form_space-y, 0px) var(--form_space, 0px);
+    border-radius: var(--form_border-radius);
+    border-style: solid;
+    border-width: 2px;
+    border-top-width: 0;
+    border-left-width: 0;
+    border-color: transparent;
+    min-height: max-content;
+    resize: vertical;
+    display: block;
+
+    ::-webkit-search-cancel-button {
+      display: none;
+    }
+
+    ::-webkit-search-decoration {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    ::-ms-clear {
+      display: none;
+    }
+
+    &[data-grow] {
+      resize: none;
+      border: none;
+    }
+  }
+}

package/src/TextArea/index.tsx

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

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

package/src/Toaster/Toast.tsx

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

@@ -0,0 +1,151 @@
+@use '../mixins.scss';
+
+@mixin use-appearance($appearance) {
+  &[data-appearance='#{$appearance}'] {
+    @include mixins.use-styles(toaster, $appearance);
+
+    .toaster {
+      &-icon {
+        @include mixins.use-styles(toaster, $appearance, icon);
+      }
+
+      &-title {
+        @include mixins.use-styles(toaster, $appearance, title);
+      }
+
+      &-description {
+        @include mixins.use-styles(toaster, $appearance, description);
+      }
+    }
+  }
+}
+
+.toaster {
+  pointer-events: all;
+  position: absolute;
+  outline: none;
+  opacity: 1;
+  transition: transform 0.4s, opacity 0.4s, height 0.4s, box-shadow 0.2s;
+  transform: var(--y);
+  display: flex;
+  align-items: center;
+
+  @include mixins.use-styles(toaster);
+
+  // appearance
+
+  @include use-appearance(primary);
+  @include use-appearance(neutral);
+  @include use-appearance(negative);
+  @include use-appearance(positive);
+  @include use-appearance(warning);
+
+  &[data-expanded]:not([data-mounted]) {
+    opacity: 0;
+    --y: translateY(calc(var(--lift) * -100% - var(--toaster_viewport_offset, 0)));
+  }
+
+  &[data-expanded][data-mounted] {
+    --y: translateY(calc(var(--lift) * var(--offset)));
+  }
+
+  &[data-state='closed'] {
+    animation: toastOut 400ms, toastFadeOut 400ms;
+  }
+
+  &-viewport {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    left: var(--toaster_viewport_offset);
+    right: var(--toaster_viewport_offset);
+    z-index: 40;
+    outline: none;
+    pointer-events: none;
+    gap: var(--toasters-gap, 0);
+
+    &[data-side='top'] {
+      top: var(--toaster_viewport_offset);
+
+      .toaster {
+        --lift: 1;
+        top: 0;
+      }
+    }
+
+    &[data-side='bottom'] {
+      bottom: var(--toaster_viewport_offset);
+      top: auto;
+
+      .toaster {
+        --lift: -1;
+        bottom: 0;
+      }
+    }
+
+    &[data-align='center'] {
+      align-items: center;
+    }
+
+    &[data-align='right'] {
+      align-items: flex-end;
+    }
+
+    &[data-align='left'] {
+      align-items: flex-start;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+
+    @include mixins.use-styles(toaster, content);
+  }
+
+  &-title {
+    @include mixins.use-styles(toaster, title);
+  }
+
+  &-description {
+    @include mixins.use-styles(toaster, description);
+  }
+
+  &-close {
+    cursor: pointer;
+    top: var(--toaster_close_space, 0);
+    right: var(--toaster_close_space, 0);
+    position: absolute;
+    transition: color 0.2s;
+
+    @include mixins.use-styles(toaster, close);
+
+    &:hover {
+      @include mixins.use-styles(toaster, close, hover);
+    }
+
+    svg {
+      @include mixins.use-size(toaster, close, size);
+    }
+  }
+
+  &-icon {
+    @include mixins.use-styles(toaster, icon);
+
+    svg {
+      @include mixins.use-size(toaster, icon, size);
+    }
+  }
+}
+
+@keyframes toastOut {
+  to {
+    transform: translateY(calc(var(--lift) * -100% - var(--toaster_viewport_offset)));
+  }
+}
+
+@keyframes toastFadeOut {
+  to {
+    opacity: 0;
+  }
+}

package/src/Toaster/Viewport.tsx

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

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

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

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