@companix/uikit 0.0.1 → 0.0.3

package/src/Countdown/index.tsx

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

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

package/src/DateInput/index.tsx

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

package/src/DatePicker/Calendar.scss

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

@@ -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>
-  )
-}