@companix/uikit 0.0.2 → 0.0.4

package/src/Drawer/index.tsx

@@ -1,46 +0,0 @@
-import classNames from 'classnames'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { varToStyle } from '@companix/utils-browser'
-
-export interface DrawerProps {
-  open: boolean
-  onOpenChange: (value: boolean) => void
-  children: React.ReactNode
-  direction?: 'bottom' | 'top' | 'left' | 'right'
-  className?: string
-  /**
-   * CSS size of the drawer. This sets `width` if horizontal position (default)
-   * and `height` otherwise.
-   *
-   * Constants are available for common sizes:
-   * - `DrawerSize.SMALL = 360px`
-   * - `DrawerSize.STANDARD = 50%`
-   * - `DrawerSize.LARGE = 90%`
-   *
-   * @default DrawerSize.STANDARD = "50%"
-   */
-  size?: string
-}
-
-export const Drawer = ({ open, onOpenChange, children, size, direction, className }: DrawerProps) => {
-  return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="drawer-overlay" />
-        <DialogPrimitive.Content
-          style={varToStyle({ '--drawer-size': size ?? '50%' })}
-          className={classNames('drawer', className)}
-          data-direction={direction}
-        >
-          <VisuallyHidden>
-            <DialogPrimitive.Title />
-          </VisuallyHidden>
-          {children}
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
-  )
-}
-
-Drawer.Close = DialogPrimitive.Close

package/src/File/index.tsx

@@ -1,60 +0,0 @@
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { useRef } from 'react'
-
-export interface FileOverlayProps {
-  multiple?: true
-  onChange?: (file: File[]) => void
-  children: React.ReactNode
-  mimes?: string[]
-  disabled?: boolean
-  className?: string
-}
-
-const FileOverlay = ({
-  onChange,
-  disabled,
-  mimes,
-  children,
-  multiple,
-  className
-}: FileOverlayProps) => {
-  const ref = useRef<HTMLInputElement>(null)
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (disabled) {
-      return
-    }
-
-    if (e.target.files) {
-      onChange?.(Array.from(e.target.files))
-    }
-
-    if (ref.current) {
-      ref.current.value = ''
-    }
-  }
-
-  return (
-    <label className={className}>
-      {children}
-      <VisuallyHidden asChild>
-        <input
-          ref={ref}
-          hidden
-          type="file"
-          autoComplete="off"
-          autoCapitalize="none"
-          autoCorrect="off"
-          spellCheck="false"
-          aria-autocomplete="none"
-          multiple={multiple}
-          accept={(mimes ?? []).join(', ')}
-          onChange={handleChange}
-          disabled={disabled}
-        />
-      </VisuallyHidden>
-    </label>
-  )
-}
-
-export { FileOverlay }

package/src/Form/index.tsx

@@ -1,131 +0,0 @@
-import cn from 'classnames'
-import InputMask from 'react-input-mask'
-
-import { useLayoutAndUpdate } from '../__hooks/use-update'
-import { attr } from '@companix/utils-browser'
-import { forwardRef, useCallback, useRef } from 'react'
-import { mergeRefs } from 'react-merge-refs'
-
-export interface FormProps extends React.HTMLAttributes<HTMLDivElement> {
-  required?: boolean
-  disabled?: boolean
-  leftElement?: React.ReactNode
-  rightElement?: React.ReactNode
-  placeholder?: string
-  value?: string | number
-  readOnly?: boolean
-  onValueChange?: (value: string, targetElement: HTMLInputElement) => void
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  inputRef?: React.RefObject<HTMLInputElement>
-  size?: 'sm' | 'md' | 'lg'
-  fill?: boolean
-  mask?: string
-  maskChar?: string
-}
-
-export const Form = forwardRef<HTMLDivElement, FormProps>(
-  (
-    {
-      required,
-      size,
-      fill,
-      leftElement,
-      rightElement,
-      onChange,
-      onValueChange,
-      readOnly,
-      className,
-      value,
-      placeholder,
-      disabled,
-      mask,
-      maskChar,
-      inputRef: clientInputRef,
-      ...containerProps
-    },
-    ref
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-
-    const rightRef = useRef<HTMLSpanElement>(null)
-    const leftRef = useRef<HTMLSpanElement>(null)
-
-    const elements = { Right: rightRef, Left: leftRef }
-
-    const updateInputWidth = useCallback((side: 'Left' | 'Right') => {
-      if (inputRef.current) {
-        const input = inputRef.current.style
-        const element = elements[side]
-
-        if (element.current && element.current.clientWidth) {
-          if (input[`padding${side}`] !== `${element.current.clientWidth}px`) {
-            input[`padding${side}`] = `${element.current.clientWidth}px`
-          }
-        } else {
-          if (input[`padding${side}`]) {
-            input[`padding${side}`] = ''
-          }
-        }
-      }
-    }, [])
-
-    useLayoutAndUpdate(() => {
-      updateInputWidth('Left')
-      updateInputWidth('Right')
-    }, [rightElement, leftElement])
-
-    const handleInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-      onChange?.(event)
-      onValueChange?.(event.target.value, event.target)
-    }, [])
-
-    return (
-      <div
-        ref={ref}
-        className={cn('form', className)}
-        data-size={size ?? 'md'}
-        data-fill={attr(fill)}
-        data-required={attr(required)}
-        data-disabled={attr(disabled)}
-        {...containerProps}
-      >
-        {leftElement && (
-          <span ref={leftRef} className="form-input-base-left-element">
-            {leftElement}
-          </span>
-        )}
-        <Input
-          type="text"
-          ref={mergeRefs([inputRef, clientInputRef])}
-          className="form-input form-input-base"
-          aria-disabled={disabled}
-          onChange={handleInputChange}
-          value={value}
-          placeholder={placeholder}
-          disabled={disabled}
-          readOnly={readOnly}
-          maskChar={maskChar}
-          mask={mask}
-        />
-        {rightElement && (
-          <span ref={rightRef} className="form-input-base-right-element">
-            {rightElement}
-          </span>
-        )}
-      </div>
-    )
-  }
-)
-
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children'> {
-  mask?: string
-  maskChar?: string
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(({ mask, maskChar, ...inputProps }, ref) => {
-  if (mask) {
-    return <InputMask inputRef={ref} mask={mask} maskChar={maskChar} {...inputProps} />
-  }
-
-  return <input ref={ref} {...inputProps} />
-})

package/src/Icon/index.tsx

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

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

@@ -1,74 +0,0 @@
-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/OptionItem.tsx

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

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