@companix/uikit 0.0.2 → 0.0.4

package/src/DatePicker/Calendar.tsx

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

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

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

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

package/src/DialogAlert/Alert.tsx

@@ -1,78 +0,0 @@
-import * as AlertPrimitive from '@radix-ui/react-alert-dialog'
-import { Button } from '..'
-import { InternButtonProps } from '../Button'
-import { RemoveListener } from '../Toaster/RemoveListener'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-
-interface ActionProps extends Omit<InternButtonProps, 'children'> {
-  onClick?: () => void
-}
-
-export interface AlertDialogProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (value: boolean) => void
-  onUnMounted?: () => void
-  icon?: React.ReactNode
-  title?: string
-  description?: string
-  confirm?: ActionProps
-  cancel?: ActionProps
-  cancelDefaultText?: string
-  disableCancel?: boolean
-}
-
-export const AlertDialog = ({
-  open,
-  defaultOpen,
-  onOpenChange,
-  onUnMounted,
-  icon,
-  title,
-  description,
-  cancelDefaultText,
-  cancel,
-  disableCancel,
-  confirm
-}: AlertDialogProps) => {
-  return (
-    <AlertPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      <RemoveListener callback={onUnMounted} />
-      <AlertPrimitive.Portal>
-        <AlertPrimitive.Overlay className="popup-overlay dialog-overlay" />
-        <AlertPrimitive.Content className="popup-container dialog-container">
-          <div className="popup alert">
-            <div className="alert-body">
-              {icon && <span className="alert-icon">{icon}</span>}
-              <div className="alert-content">
-                {title && <AlertPrimitive.Title className="alert-title">{title}</AlertPrimitive.Title>}
-                {!title && (
-                  <VisuallyHidden>
-                    <AlertPrimitive.Title />
-                  </VisuallyHidden>
-                )}
-                {description && (
-                  <AlertPrimitive.Description className="alert-description">
-                    {description}
-                  </AlertPrimitive.Description>
-                )}
-              </div>
-            </div>
-            <div className="alert-footer">
-              {!disableCancel && (cancel?.text || cancelDefaultText) && (
-                <AlertPrimitive.Cancel asChild>
-                  <Button appearance="neutral" {...cancel} text={cancel?.text ?? cancelDefaultText} />
-                </AlertPrimitive.Cancel>
-              )}
-              {confirm?.text && (
-                <AlertPrimitive.Action asChild>
-                  <Button appearance="negative" {...confirm} />
-                </AlertPrimitive.Action>
-              )}
-            </div>
-          </div>
-        </AlertPrimitive.Content>
-      </AlertPrimitive.Portal>
-    </AlertPrimitive.Root>
-  )
-}

package/src/DialogAlert/Viewport.tsx

@@ -1,52 +0,0 @@
-import { forwardRef, useImperativeHandle, useState } from 'react'
-import { InnerAlert } from '.'
-import { AlertDialog, AlertDialogProps } from './Alert'
-
-export interface ViewportRef {
-  showAlert: (alert: InnerAlert) => void
-}
-
-export interface AlertBaseProps extends Pick<AlertDialogProps, 'cancelDefaultText'> {}
-
-export const Viewport = forwardRef<ViewportRef, AlertBaseProps>((props, ref) => {
-  const [alerts, setAlerts] = useState<InnerAlert[]>([])
-
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        showAlert: (alert) => {
-          setAlerts((state) => [...state, alert])
-        }
-      }
-    },
-    []
-  )
-
-  const handleClose = (id: string) => {
-    setAlerts((state) => {
-      const nextState = [...state]
-      const index = nextState.findIndex((item) => item.id === id)
-
-      if (index !== -1) {
-        nextState.splice(index, 1)
-      }
-
-      return nextState
-    })
-  }
-
-  return (
-    <>
-      {alerts.map(({ id, ...alert }) => (
-        <AlertDialog
-          defaultOpen
-          onUnMounted={() => handleClose(id)}
-          key={`alert-${id}`}
-          {...props}
-          {...alert}
-        />
-      ))}
-    </>
-  )
-})

package/src/DialogAlert/index.tsx

@@ -1,37 +0,0 @@
-import { hash } from '@companix/utils-js'
-import { useMemo, useRef } from 'react'
-import { AlertDialogProps } from './Alert'
-import { AlertBaseProps, Viewport, ViewportRef } from './Viewport'
-
-export interface AlertOptions extends Omit<AlertDialogProps, 'open' | 'onOpenChange'> {}
-
-export interface InnerAlert extends AlertOptions {
-  id: string
-}
-
-export const createAlertAgent = (options: AlertBaseProps = {}) => {
-  const store = {
-    emit: (alert: InnerAlert) => {
-      console.error('uninitialized', alert)
-    }
-  }
-
-  return {
-    show: (value: Omit<InnerAlert, 'id'>) => {
-      store.emit({ ...value, id: hash() })
-    },
-    Viewport: () => {
-      const ref = useRef<ViewportRef>(null)
-
-      useMemo(() => {
-        store.emit = (value) => {
-          if (ref.current) {
-            ref.current.showAlert(value)
-          }
-        }
-      }, [])
-
-      return <Viewport ref={ref} {...options} />
-    }
-  }
-}