@companix/uikit 0.0.1

package/src/Icon/index.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames'
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { forwardRef } from 'react'
+
+export interface IconProps {
+  icon: IconDefinition
+  size?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'
+  className?: string
+}
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ icon, className, size = 'm', ...restProps }, ref) => {
+    const [width, height, , , svgPathData] = icon.icon
+
+    return (
+      <svg
+        ref={ref}
+        data-prefix={icon.prefix}
+        data-icon={icon.iconName}
+        viewBox={`0 0 ${width} ${height}`}
+        className={classNames(`icon icon-size-${size}`, className)}
+        {...restProps}
+        role="img"
+      >
+        <Paths paths={svgPathData} />
+      </svg>
+    )
+  }
+)
+
+const Paths = ({ paths }: { paths: string[] | string }) => {
+  if (Array.isArray(paths)) {
+    return (
+      <g>
+        {paths.map((d, i) => (
+          <path key={`-d-${i}`} fill="currentColor" d={d} />
+        ))}
+      </g>
+    )
+  }
+
+  return <path fill="currentColor" d={paths} />
+}

package/src/LoadButton/index.tsx

@@ -0,0 +1,17 @@
+import { Button, ButtonProps } from '../Button'
+import { UseLoadingProps, useLoading } from '../__hooks/use-loading'
+
+export interface LoadButtonProps extends UseLoadingProps, Omit<ButtonProps, 'onClick'> {}
+
+export const LoadButton = ({ onClick, appearance = 'primary', ...rest }: LoadButtonProps) => {
+  const { isLoading, isError, handleClick } = useLoading({ onClick })
+
+  return (
+    <Button
+      appearance={isError ? 'negative' : appearance}
+      {...rest}
+      loading={isLoading}
+      onClick={handleClick}
+    />
+  )
+}

package/src/NumberInput/index.tsx

@@ -0,0 +1,74 @@
+import { useRef, useState } from 'react'
+import { Form, FormProps } from '../Form'
+
+export interface NumberInputProps extends Omit<FormProps, 'value' | 'onChange'> {
+  value: number | null
+  onChange: (value: number | null) => void
+}
+
+export const NumberInput = ({ value, onChange, ...props }: NumberInputProps) => {
+  const [, rerender] = useState([])
+  const input = useRef<string>(getInputValue(value))
+
+  if (+input.current !== value) {
+    input.current = getInputValue(value)
+  }
+
+  return (
+    <Form
+      {...props}
+      value={input.current}
+      onChange={(e) => {
+        const source = (e.currentTarget.value as string).trim()
+
+        if (source === '') {
+          input.current = ''
+          return onChange(null)
+        }
+
+        if (source.startsWith('.')) {
+          return
+        }
+
+        const numbersigns = source.replace('.', '').split('')
+
+        if (numbersigns.some((symbol) => isNaN(parseInt(symbol)))) {
+          return
+        }
+
+        input.current = clean(source.split(''))
+
+        if (+input.current === value) {
+          return rerender([])
+        }
+
+        onChange(+input.current)
+      }}
+    />
+  )
+}
+
+const getInputValue = (value: number | null) => {
+  return value === null ? '' : value.toString()
+}
+
+const clean = (signs: string[]) => {
+  const result = [...signs]
+  const source = [...signs]
+
+  if (source.every((value) => value === '0')) {
+    return '0'
+  }
+
+  for (let i = 0; i < source.length; i++) {
+    if (source[i] !== '0') {
+      break
+    }
+
+    if (source[i] === '0' && source[i + 1] !== '.') {
+      result.shift()
+    }
+  }
+
+  return result.join('')
+}

package/src/OptionItem/Option.scss

@@ -0,0 +1,89 @@
+@use '../mixins.scss';
+
+.option-list {
+  display: flex;
+  flex-direction: column;
+
+  @include mixins.use-styles(option, list);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+
+  @include mixins.use-styles(option);
+
+  &-icon {
+    @include mixins.use-styles(option, icon);
+
+    svg {
+      @include mixins.use-size(option, icon, size);
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
+
+    &-inner {
+      @include mixins.use-styles(option, content, layout);
+    }
+  }
+
+  &-title {
+    word-break: break-word;
+  }
+
+  &-label {
+    @include mixins.use-styles(option, label);
+  }
+
+  &-check {
+    @include mixins.use-styles(option, check);
+
+    svg {
+      @include mixins.use-size(option, check, size);
+    }
+  }
+
+  & > * {
+    margin-right: 8px;
+  }
+
+  & > :last-child {
+    margin-right: 0;
+  }
+
+  &:not([data-disabled]) {
+    cursor: pointer;
+
+    &:hover {
+      @include mixins.use-styles(option, hover);
+    }
+
+    &:active {
+      @include mixins.use-styles(option, active);
+    }
+  }
+
+  &[data-selected] {
+    @include mixins.use-styles(option, selected);
+  }
+
+  &[data-disabled] {
+    user-select: none;
+
+    @include mixins.use-styles(option, disabled);
+  }
+
+  &[data-minimal] {
+    @include mixins.use-styles(option, minimal);
+
+    &[data-selected] {
+      @include mixins.use-styles(option, minimal, selected);
+    }
+  }
+}

package/src/OptionItem/OptionItem.tsx

@@ -0,0 +1,49 @@
+import cn from 'classnames'
+
+import { Icon } from '../Icon'
+import { attr } from '@companix/utils-browser'
+import { forwardRef } from 'react'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { Option } from '../types'
+
+interface OptionProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    Omit<Option<unknown>, 'value'> {
+  active?: boolean
+  minimal?: boolean
+}
+
+export const OptionItem = forwardRef<HTMLDivElement, OptionProps>(
+  ({ title, icon, active, label, disabled, minimal, onClick, className, ...rest }, ref) => {
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (!disabled) {
+        onClick?.(event)
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cn('option', className)}
+        data-selected={attr(active)}
+        data-disabled={attr(disabled)}
+        data-minimal={attr(minimal)}
+        onClick={handleClick}
+      >
+        <div className="option-content">
+          {icon && <div className="option-icon">{icon}</div>}
+          <div className="option-content-layout">
+            <div className="option-title">{title}</div>
+            {label && <div className="option-label">{label}</div>}
+          </div>
+        </div>
+        {active && !minimal && (
+          <div className="option-check">
+            <Icon icon={faCheck} />
+          </div>
+        )}
+      </div>
+    )
+  }
+)

package/src/OptionItem/OptionsList.tsx

@@ -0,0 +1,26 @@
+import { Scrollable } from '../Scrollable'
+
+interface MenuProps {
+  children: React.ReactNode
+  maxHeight?: number
+  scrollboxRef?: React.Ref<HTMLDivElement>
+  optionsWrapperRef?: React.Ref<HTMLDivElement>
+}
+
+export const OptionsList = ({ children, maxHeight, scrollboxRef, optionsWrapperRef }: MenuProps) => {
+  return (
+    <Scrollable
+      ref={scrollboxRef}
+      implementation="inner"
+      padding={10}
+      thumbPadding={3}
+      thumbColor="#0000002b"
+      maxHeight={maxHeight}
+      scrollY
+    >
+      <div className="option-list" ref={optionsWrapperRef}>
+        {children}
+      </div>
+    </Scrollable>
+  )
+}

package/src/Popover/Popover.scss

@@ -0,0 +1,80 @@
+@use '../mixins.scss';
+
+.popover {
+  outline: none;
+  @include mixins.use-styles(popover);
+
+  &[data-match-target='width'] {
+    width: var(--radix-popover-trigger-width);
+  }
+
+  &[data-match-target='min-width'] {
+    min-width: var(--radix-popover-trigger-width);
+  }
+
+  &-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    &[data-fit-max-height] {
+      max-height: var(--radix-popover-content-available-height);
+    }
+
+    @include mixins.use-styles(popover, content);
+  }
+
+  &-arrow {
+    position: relative;
+
+    &-icon {
+      position: relative;
+    }
+
+    &-border {
+      fill: #111418;
+      fill-opacity: 0.1;
+    }
+
+    &-fill {
+      fill: mixins.get-var-name(popover, content, background);
+    }
+
+    &:before {
+      border-radius: 1px;
+      content: '';
+      display: block;
+      position: absolute;
+      transform: rotate(45deg);
+      height: 20px;
+      margin: 5px;
+      width: 20px;
+      box-shadow: 1px 1px 6px rgba(17, 20, 24, 0.2);
+      margin-top: -14px;
+    }
+  }
+
+  &[data-appearance='default'] {
+    &[data-state='open'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, default, in);
+    }
+
+    &[data-state='closed'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, default, out);
+    }
+  }
+
+  &[data-appearance='minimal'] {
+    &[data-state='open'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, minimal, in);
+    }
+
+    &[data-state='closed'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, minimal, out);
+    }
+  }
+}

package/src/Popover/index.tsx

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

@@ -0,0 +1,148 @@
+@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;
+// }