@companix/uikit 0.0.1

package/src/DatePicker/Calendar.scss

@@ -0,0 +1,125 @@
+@use '../mixins.scss';
+
+.calendar {
+  @include mixins.use-styles(calendar);
+
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mixins.use-styles(calendar, header);
+  }
+
+  &-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    outline: none;
+    cursor: pointer;
+
+    @include mixins.use-styles(calendar, navigation);
+    @include mixins.use-size(calendar, navigation, size);
+
+    &[data-side='left'] {
+      left: 0;
+    }
+
+    &[data-side='right'] {
+      right: 0;
+    }
+
+    &:hover {
+      @include mixins.use-styles(calendar, navigation, hover);
+    }
+
+    &:active {
+      @include mixins.use-styles(calendar, navigation, active);
+    }
+
+    svg {
+      @include mixins.use-size(calendar, navigation, icon, size);
+    }
+  }
+
+  &-pickers {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &-names {
+    display: flex;
+  }
+
+  &-name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mixins.use-styles(calendar, name);
+  }
+
+  &-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  &-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    @include mixins.use-styles(calendar, day);
+
+    &:not([data-disabled]) {
+      cursor: pointer;
+
+      &:hover {
+        @include mixins.use-styles(calendar, day, hover);
+      }
+
+      &[data-active] {
+        @include mixins.use-styles(calendar, day, active);
+      }
+
+      &[data-selected] {
+        @include mixins.use-styles(calendar, day, selected);
+
+        .calendar-day-number::after {
+          background-color: #ffffff;
+        }
+      }
+
+      &[data-void] {
+        background-color: unset;
+        cursor: default;
+      }
+    }
+
+    &[data-disabled] {
+      @include mixins.use-styles(calendar, day, disabled);
+    }
+
+    &[data-today] {
+      .calendar-day-number {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          height: 2px;
+          border-radius: 10px;
+          content: '';
+          display: block;
+          width: 100%;
+          bottom: 0px;
+          right: 0;
+          background-color: #529ef4;
+        }
+      }
+    }
+  }
+}

package/src/DatePicker/Calendar.tsx

@@ -0,0 +1,157 @@
+import {
+  createVoids,
+  dateToFormat,
+  getDayIndex,
+  getFirstDay,
+  getMonthMaxDay,
+  weeks
+} from '../__utils/utils'
+import { CalendarHeader } from './CalendarHeader'
+import { useCalendar } from '../__hooks/useCalendar'
+import { attr } from '@companix/utils-browser'
+import { isSameDate } from '../__libs/calendar'
+import { useLayoutEffect } from 'react'
+
+export interface CalendarProps {
+  /**
+   * Текущая выбранная дата.
+   */
+  value?: Date | null
+  /**
+   * Запрещает выбор даты в прошлом.
+   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.
+   */
+  disablePast?: boolean
+  /**
+   * Запрещает выбор даты в будущем.
+   * Применяется, если не задано `shouldDisableDate`.
+   */
+  disableFuture?: boolean
+  /**
+   * Включает выбор времени.
+   */
+  enableTime?: boolean
+  /**
+   * Отключает селекторы выбора месяца/года.
+   */
+  disablePickers?: boolean
+  /**
+   * Показывать дни соседних месяцев.
+   */
+  showNeighboringMonth?: boolean
+  /**
+   * Обработчик изменения выбранной даты.
+   */
+  onChange?: (value: Date) => void
+  /**
+   * Функция для проверки запрета выбора даты.
+   */
+  shouldDisableDate?: (value: Date) => boolean
+  /**
+   * Дата отображаемого месяца.
+   * При использовании обновление даты должно происходить вне компонента.
+   */
+  viewDate?: Date
+  /**
+   * Минимальные дата и время, которые можно выбрать.
+   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.
+   */
+  minDateTime?: Date
+  /**
+   * Максимальные дата и время, которые можно выбрать.
+   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.
+   */
+  maxDateTime?: Date
+}
+
+export const Calendar = ({ disablePickers, value, onChange, ...props }: CalendarProps) => {
+  const {
+    viewDate,
+    setViewDate,
+    setNextMonth,
+    setPrevMonth,
+    isMonthDisabled,
+    isYearDisabled,
+    isDayDisabled
+  } = useCalendar(props)
+
+  useLayoutEffect(() => {
+    if (value) {
+      setViewDate(value)
+    }
+  }, [value])
+
+  const date = dateToFormat(viewDate)
+
+  const monthIndex = viewDate.getMonth()
+  const year = viewDate.getFullYear()
+  const now = new Date()
+
+  return (
+    <div className="calendar">
+      <CalendarHeader
+        viewDate={viewDate}
+        onChange={setViewDate}
+        onNextMonth={setNextMonth}
+        onPrevMonth={setPrevMonth}
+        disablePickers={disablePickers}
+        isMonthDisabled={isMonthDisabled}
+        isYearDisabled={isYearDisabled}
+      />
+      <div className="calendar-names">
+        {weeks.map((name, i) => (
+          <div className="calendar-name" key={`week-name-${i}`}>
+            {name}
+          </div>
+        ))}
+      </div>
+      <div className="calendar-days">
+        {createVoids(getDayIndex(getFirstDay(date.month, date.year))).map((n, i) => (
+          <div className="calendar-day" data-void key={`void-${n}-${i}`} />
+        ))}
+        {createVoids(getMonthMaxDay(date.month, date.year)).map((n, i) => {
+          const date = new Date(year, monthIndex, i + 1)
+
+          return (
+            <CalendarDay
+              day={i + 1}
+              key={`date-${n}-${year}-${monthIndex}-${i}`}
+              disabled={isDayDisabled(date)}
+              selected={Boolean(value && isSameDate(value, date))}
+              today={isSameDate(date, now)}
+              onSelect={() => onChange?.(date)}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+interface CalendarDayProps {
+  day: number
+  disabled?: boolean
+  selected?: boolean
+  today?: boolean
+  onSelect?: () => void
+}
+
+const CalendarDay = ({ day, disabled, selected, today, onSelect }: CalendarDayProps) => {
+  const handleClick = () => {
+    if (!disabled) {
+      onSelect?.()
+    }
+  }
+
+  return (
+    <div
+      className="calendar-day"
+      data-disabled={attr(disabled)}
+      data-selected={attr(selected)}
+      data-today={attr(today)}
+      onClick={handleClick}
+    >
+      <span className="calendar-day-number">{day}</span>
+    </div>
+  )
+}

package/src/DatePicker/CalendarHeader.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useMemo } from 'react'
+import { Option, Select } from '..'
+import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../__utils/utils'
+import { Icon } from '../Icon'
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { setMonth, setYear } from '../__libs/calendar'
+
+export interface CalendarHeaderProps {
+  /**
+   * Отображаемая дата.
+   */
+  viewDate: Date
+  /**
+   * Отключает селекторы выбора месяца/года.
+   */
+  disablePickers?: boolean
+  /**
+   * Функция для проверки блокировки месяца.
+   */
+  isMonthDisabled?: (monthNumber: number, year?: number) => boolean
+  /**
+   * Функция для проверки блокировки года.
+   */
+  isYearDisabled?: (yearNumber: number) => boolean
+  /**
+   * Обработчик изменения отображаемой даты.
+   */
+  onChange: (viewDate: Date) => void
+  /**
+   * Нажатие на кнопку переключения на следующий месяц.
+   */
+  onNextMonth?: () => void
+  /**
+   * Нажатие на кнопку переключения на предыдущий месяц.
+   */
+  onPrevMonth?: () => void
+}
+
+export const CalendarHeader = ({
+  viewDate,
+  onChange,
+  isMonthDisabled,
+  isYearDisabled,
+  onNextMonth,
+  onPrevMonth
+}: CalendarHeaderProps) => {
+  const currentYear = viewDate.getFullYear()
+  const currentMonth = viewDate.getMonth()
+  const locale = 'ru'
+
+  // handlers
+
+  const onMonthsChange = useCallback(
+    (newValue: number) => {
+      onChange(setMonth(viewDate, newValue))
+    },
+    [onChange, viewDate]
+  )
+
+  const onYearChange = useCallback(
+    (newValue: number) => {
+      onChange(setYear(viewDate, newValue))
+    },
+    [onChange, viewDate]
+  )
+
+  // options
+
+  const months = useMemo((): Option<number>[] => {
+    return getMonths(locale).map((option) => ({
+      ...option,
+      className: 'capitalize',
+      disabled: isMonthDisabled && isMonthDisabled(option.value)
+    }))
+  }, [locale, isMonthDisabled])
+
+  const years = useMemo((): Option<number>[] => {
+    return getYears(currentYear, 100).map((option) => ({
+      ...option,
+      disabled: isYearDisabled && isYearDisabled(option.value)
+    }))
+  }, [currentYear, isYearDisabled])
+
+  // disable
+
+  let nextMonthHidden = currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR
+
+  if (isMonthDisabled && !nextMonthHidden) {
+    nextMonthHidden = isMonthDisabled(
+      currentMonth === 11 ? 0 : currentMonth + 1,
+      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear
+    )
+  }
+
+  let prevMonthHidden = currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR
+
+  if (isMonthDisabled && !prevMonthHidden) {
+    prevMonthHidden = isMonthDisabled(
+      currentMonth === 0 ? 11 : currentMonth - 1,
+      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear
+    )
+  }
+
+  return (
+    <div className="calendar-header">
+      {!prevMonthHidden && (
+        <button className="calendar-navigation" data-side="left" onClick={onPrevMonth}>
+          <Icon icon={faChevronLeft} />
+        </button>
+      )}
+      <div className="calendar-pickers">
+        <Select
+          fill
+          options={years}
+          size="sm"
+          value={currentYear}
+          minimalOptions
+          matchTarget="min-width"
+          onChange={(value) => onYearChange(value || 0)}
+        />
+        <Select
+          fill
+          options={months}
+          size="sm"
+          className="capitalize"
+          value={currentMonth}
+          minimalOptions
+          matchTarget="min-width"
+          onChange={(value) => onMonthsChange(value || 0)}
+        />
+      </div>
+      {!nextMonthHidden && (
+        <button className="calendar-navigation" data-side="right" onClick={onNextMonth}>
+          <Icon icon={faChevronRight} />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/DatePicker/index.tsx

@@ -0,0 +1,177 @@
+import { Popover } from '..'
+import { Form, FormProps } from '../Form'
+import { faChevronDown, faClose } from '@fortawesome/free-solid-svg-icons'
+import { Icon } from '../Icon'
+import { useRef, useState } from 'react'
+import { Calendar, CalendarProps } from './Calendar'
+import { useDayDisableCheker } from '../__libs/calendar'
+import { formatTime, getNum } from '@companix/utils-js'
+
+interface DatePickerProps
+  extends Omit<CalendarProps, 'onChange'>,
+    Omit<FormProps, 'value' | 'onChange' | 'rightElement'> {
+  onChange?: (value: Date | null) => void
+  placeholder?: string
+  clearButton?: boolean
+  clearButtonIcon?: boolean
+  children?: React.ReactNode
+  minimalOptions?: boolean
+}
+
+const createInputValue = (value: Date | null, char: string = '-'): string => {
+  if (value) {
+    const day = formatTime(value.getDate())
+    const month = formatTime(value.getMonth() + 1)
+    const year = value.getFullYear()
+
+    return [day, month, year].join(char)
+  }
+
+  return ''
+}
+
+const inputToDate = (input: string, char: string = '-'): Date | null => {
+  const values = input.split(char)
+
+  if (values.length === 3) {
+    const [day, month, year] = [getNum(values[0]), getNum(values[1]), getNum(values[2])]
+
+    if (day && month && year) {
+      const date = new Date(year, month - 1, day)
+
+      if (date.getFullYear() === year && date.getDate() === day && date.getMonth() === month - 1) {
+        return date
+      }
+    }
+  }
+
+  return null
+}
+
+export const DatePicker = (props: DatePickerProps) => {
+  const {
+    minimalOptions,
+    clearButton,
+    clearButtonIcon,
+    children,
+    disabled,
+    // calendar props
+    value,
+
+    enableTime,
+    disablePickers,
+    showNeighboringMonth,
+    onChange,
+    shouldDisableDate,
+    viewDate,
+    disablePast,
+    disableFuture,
+    minDateTime,
+    maxDateTime,
+    // input props
+    ...inputProps
+  } = props
+
+  const [inputValue, setInputValue] = useState(() => {
+    return createInputValue(value ?? null)
+  })
+
+  const popoverRef = useRef<HTMLDivElement>(null)
+
+  const isDayDisabled = useDayDisableCheker({
+    disableFuture,
+    disablePast,
+    shouldDisableDate,
+    minDateTime,
+    maxDateTime
+  })
+
+  const handleRootClick = (event: React.MouseEvent) => {
+    if (disabled) return
+
+    // Предотвращаем закрытие Popover при клике на форму
+    if (popoverRef.current && popoverRef.current.getAttribute('data-state') === 'open') {
+      event.preventDefault()
+    }
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+
+    setInputValue('')
+    onChange?.(null)
+  }
+
+  const handleInputChange = (value: string) => {
+    setInputValue(value)
+
+    const date = inputToDate(value)
+
+    if (date && !isDayDisabled(date)) {
+      onChange?.(date)
+    }
+  }
+
+  const handleInputBlur = () => {
+    const date = inputToDate(inputValue)
+
+    if (!date || isDayDisabled(date)) {
+      setInputValue(createInputValue(value ?? null))
+    }
+  }
+
+  const handleCalendarChange = (value: Date) => {
+    onChange?.(value)
+    setInputValue(createInputValue(value))
+  }
+
+  return (
+    <Popover
+      minimal
+      ref={popoverRef}
+      sideOffset={0}
+      onOpenAutoFocus={(e) => e.preventDefault()}
+      onCloseAutoFocus={(e) => e.preventDefault()}
+      disabled={disabled}
+      content={() => (
+        <Calendar
+          value={value}
+          disablePast={disablePast}
+          disableFuture={disableFuture}
+          enableTime={enableTime}
+          disablePickers={disablePickers}
+          showNeighboringMonth={showNeighboringMonth}
+          onChange={handleCalendarChange}
+          shouldDisableDate={shouldDisableDate}
+          viewDate={viewDate}
+          minDateTime={minDateTime}
+          maxDateTime={maxDateTime}
+        />
+      )}
+    >
+      <Form
+        {...inputProps}
+        value={inputValue}
+        disabled={disabled}
+        onClick={handleRootClick}
+        onValueChange={handleInputChange}
+        onBlur={handleInputBlur}
+        mask={'99-99-9999'}
+        rightElement={
+          <>
+            {clearButton && isInputDefined(inputValue) && (
+              <button className="select-close-button" onClick={handleClear}>
+                {clearButtonIcon ?? <Icon className="select-close-icon" icon={faClose} size="xxxs" />}
+              </button>
+            )}
+            <Icon className="expand-icon select-expand" icon={faChevronDown} size="xxxs" />
+          </>
+        }
+      />
+    </Popover>
+  )
+}
+
+const isInputDefined = (value: string) => {
+  return value.trim().replaceAll('-', '').replaceAll('_', '')
+}

package/src/Dialog/Dialog.scss

@@ -0,0 +1,25 @@
+@use '../mixins.scss';
+
+.dialog {
+  &-container {
+    @include mixins.use-styles(dialog, container);
+  }
+
+  &-overlay {
+    @include mixins.use-styles(dialog, overlay);
+  }
+
+  @include mixins.use-styles(dialog);
+}
+
+.dialog-container {
+  @each $size, $v in (xxs, xs, s, m, l, xl, xxl, full) {
+    &[data-size='#{$size}'] {
+      @include mixins.use-styles(dialog, size, $size, container);
+
+      .dialog {
+        @include mixins.use-styles(dialog, size, $size);
+      }
+    }
+  }
+}

package/src/Dialog/Popup.scss

@@ -0,0 +1,55 @@
+@use '../mixins.scss';
+
+.popup {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  z-index: 1000;
+  outline: none;
+  pointer-events: auto;
+  position: relative;
+  width: 100%;
+
+  @include mixins.use-styles(popup);
+
+  &-overlay {
+    inset: 0;
+    overflow: auto;
+    position: fixed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: none;
+    z-index: 9999;
+
+    @include mixins.use-styles(popup, overlay);
+
+    &[data-state='open'] {
+      @include mixins.use-styles(popup, overlay, in);
+    }
+
+    &[data-state='closed'] {
+      @include mixins.use-styles(popup, overlay, out);
+    }
+  }
+
+  &-container {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none !important;
+    outline: none;
+
+    &[data-state='open'] {
+      @include mixins.use-styles(popup, in);
+    }
+
+    &[data-state='closed'] {
+      @include mixins.use-styles(popup, out);
+    }
+  }
+}

package/src/Dialog/index.tsx

@@ -0,0 +1,31 @@
+import cn from 'classnames'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+
+export interface DialogProps {
+  open: boolean
+  onOpenChange: (value: boolean) => void
+  children: React.ReactNode
+  size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'full'
+  className?: string
+}
+
+export const Dialog = ({ size = 's', open, onOpenChange, children, className }: DialogProps) => {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="popup-overlay dialog-overlay" />
+        <DialogPrimitive.Content className="popup-container dialog-container" data-size={size}>
+          <div className={cn('popup dialog', className)}>
+            <VisuallyHidden>
+              <DialogPrimitive.Title />
+            </VisuallyHidden>
+            {children}
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
+
+Dialog.Close = DialogPrimitive.Close