@companix/uikit 0.0.1

package/playground/tooltip/index.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@/Button'
+import { ButtonGroup } from '@/ButtonGroup'
+import { Tooltip } from '@/Tooltip'
+
+export const TooltipExample = () => {
+  return (
+    <div className="col-group">
+      <div className="row-group">
+        <Tooltip content={<div>Content Tooltip</div>}>
+          <Button>Hover</Button>
+        </Tooltip>
+        <ButtonGroup>
+          <Tooltip content={<div>Each</div>}>
+            <Button>Group</Button>
+          </Tooltip>
+          <Tooltip content={<div>has</div>}>
+            <Button>Of</Button>
+          </Tooltip>
+          <Tooltip content={<div>a tooltip</div>}>
+            <Button>Buttons</Button>
+          </Tooltip>
+        </ButtonGroup>
+      </div>
+    </div>
+  )
+}

package/src/Button/Button.scss

@@ -0,0 +1,128 @@
+@use '../mixins.scss';
+
+// scheme: bth-[appearance]-[mode]-[property]--[state]
+//
+// appearance:  primary, neutral, positive, negative
+// mode: default, outline, minimal
+// state: enabled, hovered, pressed, disabled, loading
+// property: text, background, shadow, border
+
+@mixin use-mode($appearance, $mode) {
+  @include mixins.use-styles(button, $appearance, $mode, enabled);
+
+  &:hover {
+    @include mixins.use-styles(button, $appearance, $mode, hovered);
+  }
+
+  &[data-active],
+  &:active {
+    @include mixins.use-styles(button, $appearance, $mode, pressed);
+  }
+
+  &[data-loading] {
+    @include mixins.use-styles(button, $appearance, $mode, loading);
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    @include mixins.use-styles(button, $appearance, $mode, disabled);
+  }
+}
+
+@mixin use-appearance($appearance) {
+  &[data-appearance='#{$appearance}'] {
+    &[data-mode='default'] {
+      @include use-mode($appearance, default);
+    }
+
+    &[data-mode='outline'] {
+      @include use-mode($appearance, outline);
+    }
+
+    &[data-mode='minimal'] {
+      @include use-mode($appearance, minimal);
+    }
+  }
+}
+
+.button {
+  overflow: visible;
+  box-sizing: border-box;
+  -moz-user-focus: ignore;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  @include mixins.use-styles(button);
+  @include mixins.items-spacing(8px);
+
+  // fill
+
+  &[data-fill] {
+    width: 100%;
+  }
+
+  // align
+
+  &[data-align='center'] {
+    justify-content: center;
+
+    & > .button-text {
+      text-align: center;
+    }
+  }
+
+  &[data-align='left'] {
+    justify-content: left;
+
+    & > .button-text {
+      flex: 1 1 auto;
+      text-align: left;
+    }
+  }
+
+  &[data-align='right'] {
+    justify-content: right;
+
+    & > .button-text {
+      flex: 1 1 auto;
+      text-align: right;
+    }
+  }
+
+  // sizes
+
+  &[data-size='sm'] {
+    @include mixins.use-styles(button, size, sm);
+  }
+
+  &[data-size='md'] {
+    @include mixins.use-styles(button, size, md);
+  }
+
+  &[data-size='lg'] {
+    @include mixins.use-styles(button, size, lg);
+  }
+
+  // text
+
+  &-text {
+    @include mixins.truncate-text();
+  }
+
+  // appearance
+
+  @include use-appearance(primary);
+  @include use-appearance(neutral);
+  @include use-appearance(negative);
+  @include use-appearance(positive);
+}

package/src/Button/index.tsx

@@ -0,0 +1,72 @@
+import classNames from 'classnames'
+import { Spinner } from '../Spinner'
+import { forwardRef } from 'react'
+import { attr } from '@companix/utils-browser'
+
+export type Appearance = 'primary' | 'neutral' | 'positive' | 'negative'
+export type Mode = 'default' | 'outline' | 'minimal'
+export type Size = 'sm' | 'md' | 'lg'
+
+export interface InternButtonProps {
+  icon?: React.ReactNode
+  iconRight?: React.ReactNode
+  appearance?: Appearance
+  mode?: Mode
+  size?: Size
+  fill?: boolean
+  align?: 'left' | 'center' | 'right'
+  loading?: boolean
+  active?: boolean
+  text?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+}
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, InternButtonProps {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      fill,
+      text,
+      active,
+      mode = 'default',
+      appearance = 'neutral',
+      size = 'md',
+      align,
+      icon,
+      loading,
+      className,
+      iconRight,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={classNames('button', className)}
+        data-size={size}
+        data-loading={attr(loading)}
+        data-align={loading ? 'center' : align ?? (icon && iconRight ? 'left' : 'center')}
+        data-appearance={appearance}
+        data-mode={mode}
+        data-fill={attr(fill)}
+        data-active={attr(active)}
+        {...buttonProps}
+        onClick={loading ?? buttonProps.disabled ? undefined : buttonProps.onClick}
+      >
+        {loading ? (
+          <Spinner size={14} width={2} />
+        ) : (
+          <>
+            {icon}
+            {(children ?? text) && <span className="button-text">{text ?? children}</span>}
+            {iconRight}
+          </>
+        )}
+      </button>
+    )
+  }
+)

package/src/ButtonGroup/ButtonGroup.scss

@@ -0,0 +1,18 @@
+.button-group {
+  display: flex;
+
+  &[data-fill] {
+    width: 100%;
+  }
+
+  & > .button:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  & > .button:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    margin-right: -1px;
+  }
+}

package/src/ButtonGroup/index.tsx

@@ -0,0 +1,20 @@
+import './ButtonGroup.scss'
+import { forwardRef } from 'react'
+import cn from 'classnames'
+import { attr } from '@companix/utils-browser'
+
+interface ButtonGroupProps {
+  children: React.ReactNode
+  className?: string
+  fill?: boolean
+}
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ children, className, fill }, ref) => {
+    return (
+      <div ref={ref} className={cn('button-group', className)} data-fill={attr(fill)}>
+        {children}
+      </div>
+    )
+  }
+)

package/src/Checkbox/Checkbox.scss

@@ -0,0 +1,115 @@
+@use '../mixins.scss';
+
+.checkbox {
+  display: inline-table;
+  user-select: none;
+  touch-action: manipulation;
+  max-width: max-content;
+
+  @include mixins.use-styles(checkbox);
+
+  &:not([data-disabled]):not([data-required]):hover {
+    .checkbox-box[data-state='unchecked'] {
+      @include mixins.use-styles(checkbox, box, hover);
+    }
+  }
+
+  &:not([data-disabled]):not([data-required]):active {
+    .checkbox-box[data-state='unchecked'] {
+      @include mixins.use-styles(checkbox, box, active);
+    }
+  }
+
+  &:not([data-disabled]) {
+    .checkbox-box[data-state='checked'] {
+      @include mixins.use-styles(checkbox, box, checked);
+    }
+  }
+
+  &[data-disabled] {
+    @include mixins.use-styles(checkbox, disabled);
+  }
+
+  &[data-required] {
+    @include mixins.use-styles(checkbox, required);
+
+    .checkbox-box::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+
+      @include mixins.use-styles(checkbox, required, box);
+
+      border-radius: mixins.get-var-name(checkbox, box, border-radius);
+    }
+  }
+
+  &[data-size='sm'] {
+    @include mixins.use-styles(checkbox, size, sm);
+
+    .checkbox-box {
+      @include mixins.use-size(checkbox, size, sm, box);
+    }
+  }
+
+  &[data-size='md'] {
+    @include mixins.use-styles(checkbox, size, md);
+
+    .checkbox-box {
+      @include mixins.use-size(checkbox, size, md, box);
+    }
+  }
+
+  &-box {
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.1s linear;
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+
+    @include mixins.use-styles(checkbox, box);
+
+    &[data-disabled] {
+      cursor: default;
+    }
+
+    &:after {
+      visibility: hidden;
+      content: '\00A0';
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    display: table-cell;
+    word-break: break-word;
+
+    &[data-disabled] {
+      cursor: default;
+    }
+
+    @include mixins.use-styles(checkbox, label);
+  }
+
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(checkbox, icon, in);
+    }
+
+    &[data-state='unchecked'] {
+      @include mixins.use-styles(checkbox, icon, out);
+    }
+  }
+}

package/src/Checkbox/index.tsx

@@ -0,0 +1,46 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Icon } from '../Icon'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { useId } from 'react'
+import { attr } from '@companix/utils-browser'
+
+interface CheckboxProps {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  size?: 'sm' | 'md'
+  label?: React.ReactNode
+  disabled?: boolean
+  required?: boolean
+}
+
+const Checkbox = ({ checked, required, disabled, onCheckedChange, size, label }: CheckboxProps) => {
+  const id = useId()
+
+  return (
+    <div
+      className="checkbox"
+      data-size={size ?? 'md'}
+      data-required={attr(required && !checked)}
+      data-disabled={attr(disabled)}
+    >
+      <CheckboxPrimitive.Root
+        className="checkbox-box"
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        id={id}
+      >
+        <CheckboxPrimitive.Indicator className="checkbox-icon">
+          <Icon icon={faCheck} size="xxxs" />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      {label && (
+        <label className="checkbox-label" htmlFor={id} data-disabled={attr(disabled)}>
+          {label}
+        </label>
+      )}
+    </div>
+  )
+}
+
+export { Checkbox }

package/src/Countdown/index.tsx

@@ -0,0 +1,54 @@
+import { getNextCandleTime, getTimes, sleep } from '@companix/utils-js'
+import { useState, useEffect, useRef } from 'react'
+
+const formatTime = (num: number) => String(num).padStart(2, '0')
+
+interface CountDownProps {
+  expiration: number
+  separator?: string
+  onExpired?: VoidFunction
+}
+
+export const Countdown = ({ expiration, separator = ':', onExpired }: CountDownProps) => {
+  const ref = useRef<null | NodeJS.Timeout>(null)
+  const [, rerender] = useState([])
+
+  useEffect(() => {
+    const currentTime = Date.now()
+    const closestNextSecondTimestamp = getNextCandleTime(currentTime, '1s')
+    const waitToNextSecond = closestNextSecondTimestamp - currentTime
+
+    if (ref.current) {
+      clearInterval(ref.current)
+    }
+
+    sleep(waitToNextSecond).then(() => {
+      rerender([])
+
+      ref.current = setInterval(() => {
+        rerender([])
+      }, 1000)
+    })
+
+    return () => {
+      if (ref.current) {
+        clearInterval(ref.current)
+      }
+    }
+  }, [expiration])
+
+  const time = expiration - Date.now()
+  const { hours, minutes, seconds } = getTimes(time)
+
+  useEffect(() => {
+    if (time <= 0) {
+      onExpired?.()
+
+      if (ref.current) {
+        clearInterval(ref.current)
+      }
+    }
+  }, [time <= 0])
+
+  return <>{[formatTime(hours), formatTime(minutes), formatTime(seconds)].join(separator)}</>
+}

package/src/DateInput/DateInput.scss

@@ -0,0 +1,11 @@
+.data-input {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+
+  .form {
+    input {
+      width: 100%;
+    }
+  }
+}

package/src/DateInput/index.tsx

@@ -0,0 +1,96 @@
+import { useMemo, useEffect } from 'react'
+import { DateFormat, Select } from '..'
+import { createDateValidation, getMonthMaxDay } from '../__utils/utils'
+import { defaultMax, defaultMin, useCalendarOptions } from '../__hooks/useCalendarOptions'
+
+export interface DatePickerProps {
+  min?: DateFormat
+  max?: DateFormat
+  noDaySelect?: boolean
+  noYearSelect?: boolean
+  disabled?: boolean
+  required?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  value: DateFormat
+  onChange: (e: DateFormat) => void
+}
+
+export const DateInput = ({
+  min = defaultMin,
+  max = defaultMax,
+  disabled,
+  value,
+  noDaySelect,
+  noYearSelect,
+  onChange,
+  required,
+  size
+}: DatePickerProps) => {
+  const validateDate = useMemo(() => {
+    return createDateValidation({ min, max })
+  }, [min, max])
+
+  useEffect(() => {
+    const changed = validateDate(value)
+
+    if (changed) {
+      onChange(changed)
+    }
+  }, [validateDate, value])
+
+  const { years, months, days } = useCalendarOptions({ min, max, now: value })
+
+  const handleDateChange = (source: 'year' | 'month' | 'day', val: number) => {
+    const nextValue = { ...value }
+
+    nextValue[source] = val
+
+    const max = getMonthMaxDay(nextValue.month, nextValue.year)
+    nextValue.day = nextValue.day > max ? max : nextValue.day
+
+    onChange(nextValue)
+  }
+
+  return (
+    <div className="data-input">
+      {!noYearSelect && years.length > 0 && (
+        <Select
+          placeholder="Год"
+          options={years}
+          onChange={(e) => handleDateChange('year', e || 0)}
+          value={value.year}
+          required={required}
+          disabled={disabled}
+          size={size}
+          minimalOptions
+          matchTarget="min-width"
+        />
+      )}
+      <Select
+        placeholder="Месяц"
+        className="w-full"
+        options={months}
+        onChange={(e) => handleDateChange('month', e || 0)}
+        value={value.month}
+        disabled={disabled}
+        required={required}
+        size={size}
+        minimalOptions
+        matchTarget="min-width"
+      />
+      {!noDaySelect && (
+        <Select
+          placeholder="День"
+          options={days}
+          disabled={disabled || days.length === 0}
+          onChange={(e) => handleDateChange('day', e || 0)}
+          value={value.day}
+          required={required}
+          size={size}
+          minimalOptions
+          matchTarget="min-width"
+        />
+      )}
+    </div>
+  )
+}