@companix/uikit 0.0.1 → 0.0.3

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/Form.scss

@@ -1,70 +0,0 @@
-@use '../mixins.scss';
-
-@mixin use-size($size) {
-  &[data-size='#{$size}'] {
-    .form-input {
-      @include mixins.use-styles(form, size, $size);
-    }
-  }
-}
-
-.form {
-  position: relative;
-
-  @include mixins.use-styles(form);
-
-  @include use-size(sm);
-  @include use-size(md);
-  @include use-size(lg);
-
-  &-space-margin {
-    margin: 0px var(--form_space, 0);
-  }
-
-  &:hover {
-    @include mixins.use-styles(form, hover);
-  }
-
-  &:active {
-    @include mixins.use-styles(form, active);
-  }
-
-  &[data-fill] {
-    width: 100%;
-
-    .form-input {
-      width: 100%;
-    }
-  }
-
-  &[data-required] {
-    @include mixins.use-styles(form, required);
-  }
-
-  &[data-disabled] {
-    @include mixins.use-styles(form, disabled);
-
-    .form-input {
-      cursor: inherit;
-    }
-  }
-
-  &:focus-within {
-    @include mixins.use-styles(form, focus);
-  }
-}
-
-.form-input {
-  outline: none;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-  }
-
-  &::placeholder {
-    user-select: none;
-
-    @include mixins.use-styles(form, placeholder);
-  }
-}

package/src/Form/Input.scss

@@ -1,24 +0,0 @@
-.form-input-base {
-  padding: 0px var(--form_space, 0);
-  border-radius: var(--form_border-radius);
-
-  &-left-element {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-  }
-
-  &-right-element {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-  }
-}

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/icon.scss

@@ -1,18 +0,0 @@
-@use '../mixins.scss';
-
-$icon-sizes: xxxs, xxs, xs, s, m, l, xl, xxl, xxxl;
-
-@each $size in $icon-sizes {
-  .icon-size-#{$size} {
-    @include mixins.use-size(icon, size, $size);
-  }
-}
-
-:where(svg:not([fill])) {
-  fill: currentcolor;
-}
-
-.icon {
-  // display: inline-block;
-  flex-shrink: 0;
-}

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/Option.scss

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

@@ -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/Popover.scss

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