@companix/uikit 0.0.2 → 0.0.3

package/src/__hooks/useCalendarOptions-copy.ts

@@ -1,87 +0,0 @@
-import { DefaultMonths, getMonthMaxDay } from '../__utils/utils'
-import { range } from '@companix/utils-js'
-import { useMemo } from 'react'
-
-export const defaultMax = new Date(2050, 0, 1)
-export const defaultMin = new Date(1925, 0, 1)
-
-interface Options {
-  min?: Date
-  max?: Date
-  now: Date
-}
-
-const getDate = (date: Date) => {
-  return {
-    day: date.getDate(),
-    month: date.getMonth(),
-    year: date.getFullYear()
-  }
-}
-
-export const useCalendarOptions2 = ({ min = defaultMin, max = defaultMax, now }: Options) => {
-  const max_values = useMemo(() => getDate(max), [max])
-  const min_values = useMemo(() => getDate(min), [min])
-  const now_values = useMemo(() => getDate(now), [now])
-
-  const years = useMemo(() => {
-    return range(max_values.year, min_values.year).map((value) => ({
-      title: value.toString(),
-      value
-    }))
-  }, [max_values.year, min_values.year])
-
-  const months = useMemo(() => {
-    const options = DefaultMonths.map((name, index) => ({
-      title: name,
-      value: index
-    }))
-
-    if (min_values.month && now_values.year === min_values.year) {
-      const i = options.findIndex(({ value }) => value === min_values.month)
-      options.splice(0, i)
-    }
-
-    if (max_values.month && now_values.year === max_values.year) {
-      const i = options.findIndex(({ value }) => value === max_values.month)
-      options.splice(i + 1, options.length)
-    }
-
-    return options
-  }, [now_values.year, min_values.year, min_values.month, max_values.year, max_values.month])
-
-  const days = useMemo(() => {
-    if (now_values.month === 0) {
-      return []
-    }
-
-    const maxDays = getMonthMaxDay(now_values.month, now_values.year)
-
-    const options = Array.from({ length: maxDays }, (_, i) => ({
-      title: `${i + 1}`,
-      value: i + 1
-    }))
-
-    if (
-      min_values.day &&
-      now_values.month === min_values.month &&
-      now_values.year === min_values.year
-    ) {
-      const i = options.findIndex(({ value }) => value === min_values.day)
-      options.splice(0, i)
-    }
-
-    if (
-      max_values.day &&
-      now_values.month === max_values.month &&
-      now_values.year === max_values.year
-    ) {
-      const i = options.findIndex(({ value }) => value === max_values.day)
-      options.splice(i + 1, options.length)
-    }
-
-    return options
-  }, [now_values.month, now_values.year, min, max])
-
-  return { years, months, days }
-}

package/src/__hooks/useCalendarOptions.ts

@@ -1,68 +0,0 @@
-import { DefaultMonths, getMonthMaxDay } from '../__utils/utils'
-import { useMemo } from 'react'
-import { DateFormat } from '..'
-import { range } from '@companix/utils-js'
-
-export const defaultMax = { day: 31, month: 12, year: 2050 }
-export const defaultMin = { day: 1, month: 1, year: 1900 }
-
-interface Options {
-  min?: DateFormat
-  max?: DateFormat
-  now: DateFormat
-}
-
-export const useCalendarOptions = ({ min = defaultMin, max = defaultMax, now }: Options) => {
-  const years = useMemo(() => {
-    return range(max.year, min.year).map((value) => ({
-      title: value.toString(),
-      value
-    }))
-  }, [max.year, min.year])
-
-  const months = useMemo(() => {
-    const options = DefaultMonths.map((name, index) => ({
-      title: name,
-      value: index + 1
-    }))
-
-    if (min.month && now.year === min.year) {
-      const i = options.findIndex(({ value }) => value === min.month)
-      options.splice(0, i)
-    }
-
-    if (max.month && now.year === max.year) {
-      const i = options.findIndex(({ value }) => value === max.month)
-      options.splice(i + 1, options.length)
-    }
-
-    return options
-  }, [now.year, min.year, min.month, max.year, max.month])
-
-  const days = useMemo(() => {
-    if (now.month === 0) {
-      return []
-    }
-
-    const maxDays = getMonthMaxDay(now.month, now.year)
-
-    const options = Array.from({ length: maxDays }, (_, i) => ({
-      title: `${i + 1}`,
-      value: i + 1
-    }))
-
-    if (min.day && now.month === min.month && now.year === min.year) {
-      const i = options.findIndex(({ value }) => value === min.day)
-      options.splice(0, i)
-    }
-
-    if (max.day && now.month === max.month && now.year === max.year) {
-      const i = options.findIndex(({ value }) => value === max.day)
-      options.splice(i + 1, options.length)
-    }
-
-    return options
-  }, [now.month, now.year, min, max])
-
-  return { years, months, days }
-}

package/src/__libs/calendar.ts

@@ -1,175 +0,0 @@
-import { CalendarProps } from '../DatePicker/Calendar'
-import { useCallback, useMemo } from 'react'
-
-export function isSameDate(d1: Date, d2: Date): boolean {
-  return (
-    d1.getDate() === d2.getDate() &&
-    d1.getMonth() === d2.getMonth() &&
-    d1.getFullYear() === d2.getFullYear()
-  )
-}
-
-export const MONDAY = 1
-
-/**
- * Возвращает дату начала недели
- */
-export function startOfWeek(date: Date, { weekStartsOn = MONDAY }): Date {
-  const result = new Date(date)
-  const day = result.getDay()
-  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn
-
-  result.setDate(result.getDate() - diff)
-  result.setHours(0, 0, 0, 0)
-  return result
-}
-
-/**
- * Возвращает дату конца недели
- */
-export function endOfWeek(date: Date, { weekStartsOn = MONDAY }): Date {
-  const result = new Date(date)
-  const day = result.getDay()
-  const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn)
-
-  result.setDate(result.getDate() + diff)
-  result.setHours(23, 59, 59, 999)
-  return result
-}
-
-/**
- * Возвращает дату начала дня
- */
-export function startOfDay(date: Date): Date {
-  const result = new Date(date)
-  result.setHours(0, 0, 0, 0)
-  return result
-}
-
-/**
- * Возвращает дату конца дня
- */
-export function endOfDay(date: Date): Date {
-  const result = new Date(date)
-  result.setHours(23, 59, 59, 999)
-  return result
-}
-
-/**
- * Позволяет определить удовлетворяет ли исходная дата заданным ограничения `min` и/или `max`
- */
-export function isDayMinMaxRestricted(
-  day: Date,
-  options: { min?: Date; max?: Date; withTime?: boolean } = {}
-): boolean {
-  const { min, max, withTime = false } = options
-
-  if (!withTime && ((min && isSameDate(day, min)) || (max && isSameDate(day, max)))) {
-    return false
-  }
-
-  return Boolean((min && day < min) || (max && day > max))
-}
-
-export function addMonths(date: Date, amount: number): Date {
-  const result = new Date(date)
-
-  if (!amount) {
-    return result
-  }
-
-  const dayOfMonth = result.getDate()
-
-  const endOfDesiredMonth = new Date(date)
-  endOfDesiredMonth.setMonth(result.getMonth() + amount + 1, 0) // Конец месяца
-  const daysInMonth = endOfDesiredMonth.getDate()
-  if (dayOfMonth >= daysInMonth) {
-    // Если мы уже находимся в конце месяца, то это нужная дата
-    return endOfDesiredMonth
-  }
-
-  result.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth)
-  return result
-}
-
-export function subMonths(date: Date, amount: number): Date {
-  return addMonths(date, -amount)
-}
-
-// set
-
-function getDaysInMonth(date: Date): number {
-  const result = new Date(date)
-  const lastDayOfMonth = new Date(result)
-  lastDayOfMonth.setFullYear(result.getFullYear(), result.getMonth() + 1, 0)
-  lastDayOfMonth.setHours(0, 0, 0, 0)
-  return lastDayOfMonth.getDate()
-}
-
-export function setYear(date: Date, year: number): Date {
-  const result = new Date(date)
-  result.setFullYear(year)
-  return result
-}
-
-export function setMonth(date: Date, month: number): Date {
-  const result = new Date(date)
-  const year = result.getFullYear()
-  const day = result.getDate()
-
-  const midMonth = new Date(date)
-  midMonth.setFullYear(year, month, 15)
-  midMonth.setHours(0, 0, 0, 0)
-  const daysInMonth = getDaysInMonth(midMonth)
-
-  result.setMonth(month, Math.min(day, daysInMonth))
-  return result
-}
-
-// custom
-
-interface DisableOptions
-  extends Pick<
-    CalendarProps,
-    'disableFuture' | 'disablePast' | 'maxDateTime' | 'minDateTime' | 'shouldDisableDate'
-  > {}
-
-export const createDayDisableChecker = (options: DisableOptions) => {
-  const { disableFuture, disablePast, maxDateTime, minDateTime, shouldDisableDate } = options
-
-  return (day: Date, withTime?: boolean) => {
-    const now = new Date()
-
-    if (shouldDisableDate) {
-      return shouldDisableDate(day)
-    }
-
-    if (disableFuture) {
-      return startOfDay(day) > now
-    }
-
-    if (disablePast) {
-      return endOfDay(day) < now
-    }
-
-    if (minDateTime || maxDateTime) {
-      return isDayMinMaxRestricted(day, { min: minDateTime, max: maxDateTime, withTime })
-    }
-
-    return false
-  }
-}
-
-export const useDayDisableCheker = (options: DisableOptions) => {
-  const isDayDisabled = useMemo(() => {
-    return createDayDisableChecker(options)
-  }, [
-    options.disableFuture,
-    options.disablePast,
-    options.shouldDisableDate,
-    options.minDateTime,
-    options.maxDateTime
-  ])
-
-  return useCallback(isDayDisabled, [isDayDisabled])
-}

package/src/__utils/utils.ts

@@ -1,137 +0,0 @@
-import { clamp } from '@companix/utils-browser'
-import { DateFormat, Option } from '..'
-
-export const getMonthMaxDay = (month: number, year: number) => {
-  return new Date(year, month, 0).getDate()
-}
-
-export const getFirstDay = (month: number, year: number) => {
-  return new Date(year, month - 1, 1).getDay()
-}
-
-// 0 is Monday, 6 - is Sunday
-export const getDayIndex = (day: number) => {
-  return day === 0 ? 6 : day - 1
-}
-
-export const createVoids = (length: number) => {
-  return new Array(length).fill(0)
-}
-
-export const dateToFormat = (date: Date): DateFormat => {
-  return {
-    day: date.getDate(),
-    month: date.getMonth() + 1,
-    year: date.getFullYear()
-  }
-}
-
-export const createDateValidation = ({ min, max }: { min: DateFormat; max: DateFormat }) => {
-  return (value: DateFormat) => {
-    if (min.year === value.year) {
-      if (value.month !== 0 && value.month < min.month) {
-        value.month = 0
-        value.day = 0
-
-        return value
-      }
-
-      if (value.month === min.month && value.day < min.day && value.day !== 0) {
-        value.day = 0
-
-        return value
-      }
-    }
-
-    if (max.year === value.year) {
-      if (value.month !== 0 && value.month > max.month) {
-        value.month = 0
-        value.day = 0
-
-        return value
-      }
-
-      if (value.month === max.month && value.day > max.day && value.day !== 0) {
-        value.day = 0
-
-        return value
-      }
-    }
-  }
-}
-
-export const createRangeValidation = ({ min, max }: { min?: DateFormat; max?: DateFormat }) => {
-  const minTime = min ? new Date(formatToDate(min)).getTime() : 0
-  const maxTime = max ? new Date(formatToDate(max)).getTime() : Infinity
-
-  const getCurrentTime = (value: DateFormat) => {
-    return new Date(formatToDate(value)).getTime()
-  }
-
-  return {
-    isDateMinValid: (value: DateFormat) => {
-      return getCurrentTime(value) > minTime
-    },
-    isDateMaxValid: (value: DateFormat) => {
-      return getCurrentTime(value) < maxTime
-    },
-    isDateInRange: (value: DateFormat) => {
-      const current = getCurrentTime(value)
-
-      return current > minTime && current < maxTime
-    }
-  }
-}
-
-export const formatToDate = (format: DateFormat): Date => {
-  return new Date(format.year, format.month - 1, format.day)
-}
-
-export const weeks = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
-
-export const DefaultMonths = [
-  'Январь',
-  'Февраль',
-  'Март',
-  'Апрель',
-  'Май',
-  'Июнь',
-  'Июль',
-  'Август',
-  'Сентябрь',
-  'Октябрь',
-  'Ноябрь',
-  'Декабрь'
-]
-
-export const DEFAULT_MAX_YEAR = 9999
-export const DEFAULT_MIN_YEAR = 100
-
-export const getYears = (currentYear: number, range: number): Option<number>[] => {
-  const years: Option<number>[] = []
-
-  const minYear = clamp(currentYear - range, DEFAULT_MIN_YEAR, DEFAULT_MAX_YEAR)
-  const maxYear = clamp(currentYear + range, DEFAULT_MIN_YEAR, DEFAULT_MAX_YEAR)
-
-  for (let i = minYear; i <= maxYear; i++) {
-    years.push({ title: String(i).padStart(4, '0'), value: i })
-  }
-
-  return years
-}
-
-export const getMonths = (locale?: string): Option<number>[] => {
-  const months: Option<number>[] = []
-  const formatter = new Intl.DateTimeFormat(locale, {
-    month: 'long'
-  })
-
-  for (let i = 0; i < 12; i++) {
-    months.push({
-      title: formatter.format(new Date(2023, i, 15)),
-      value: i
-    })
-  }
-
-  return months
-}

package/src/css.scss

@@ -1,120 +0,0 @@
-$properties: (
-  // Layout
-  display,
-  position,
-  top,
-  right,
-  bottom,
-  left,
-  z-index,
-  float,
-  clear,
-  overflow,
-  overflow-x,
-  overflow-y,
-  visibility,
-  // Box model
-  box-sizing,
-  width,
-  min-width,
-  max-width,
-  height,
-  min-height,
-  max-height,
-  margin,
-  margin-top,
-  margin-right,
-  margin-bottom,
-  margin-left,
-  padding,
-  padding-top,
-  padding-right,
-  padding-bottom,
-  padding-left,
-  // Flexbox
-  flex,
-  flex-direction,
-  flex-wrap,
-  flex-grow,
-  flex-shrink,
-  flex-basis,
-  justify-content,
-  align-items,
-  align-content,
-  align-self,
-  gap,
-  row-gap,
-  column-gap,
-  // Grid
-  grid,
-  grid-template-columns,
-  grid-template-rows,
-  grid-template-areas,
-  grid-column,
-  grid-row,
-  grid-area,
-  // Typography
-  color,
-  font,
-  font-family,
-  font-size,
-  font-weight,
-  font-style,
-  font-stretch,
-  line-height,
-  letter-spacing,
-  text-align,
-  text-decoration,
-  text-transform,
-  text-overflow,
-  white-space,
-  word-break,
-  word-wrap,
-  // Background
-  background,
-  background-color,
-  background-image,
-  background-repeat,
-  background-position,
-  background-size,
-  // Border
-  border,
-  border-width,
-  border-style,
-  border-color,
-  border-radius,
-  border-top,
-  border-right,
-  border-bottom,
-  border-left,
-  // Effects
-  box-shadow,
-  opacity,
-  filter,
-  // Transform & animation
-  transform,
-  transform-origin,
-  transition,
-  transition-property,
-  transition-duration,
-  transition-timing-function,
-  transition-delay,
-  animation,
-  animation-name,
-  animation-duration,
-  animation-timing-function,
-  animation-delay,
-  animation-iteration-count,
-  animation-direction,
-  animation-fill-mode,
-  // Interaction
-  cursor,
-  pointer-events,
-  user-select,
-  // Misc
-  outline,
-  outline-offset,
-  resize,
-  object-fit,
-  object-position
-);

package/src/index.scss

@@ -1,22 +0,0 @@
-@use './Button/Button.scss';
-@use './Icon/icon.scss';
-@use './Popover/Popover.scss';
-@use './Tooltip/Tooltip.scss';
-@use './Checkbox/Checkbox.scss';
-@use './Radio/Radio.scss';
-@use './Tabs/Tabs.scss';
-@use './Toaster/Toaster.scss';
-@use './Dialog/Popup.scss';
-@use './Dialog/Dialog.scss';
-@use './DialogAlert/Alert.scss';
-@use './Drawer/Drawer.scss';
-@use './Form/Form.scss';
-@use './Select/Select.scss';
-@use './TextArea/TextArea.scss';
-@use './SelectTags/SelectTags.scss';
-@use './OptionItem/Option.scss';
-@use './DateInput/DateInput.scss';
-@use './DatePicker/DatePicker.scss';
-@use './DatePicker/Calendar.scss';
-@use './Form/Input.scss';
-@use './Switch/Switch.scss';

package/src/index.ts

@@ -1,36 +0,0 @@
-import './theme.scss'
-
-export { Button } from './Button'
-export { Spinner } from './Spinner'
-export { Scrollable } from './Scrollable'
-export { ImitateScroll } from './Scrollable/ImitateScroll'
-export { Popover } from './Popover'
-export { Tooltip } from './Tooltip'
-export { StepperInput } from './Stepper'
-export { Select } from './Select'
-export { Form } from './Form'
-export { OptionItem } from './OptionItem/OptionItem'
-export { NumberInput } from './NumberInput'
-export { OptionsList } from './OptionItem/OptionsList'
-export { ButtonGroup } from './ButtonGroup'
-export { Checkbox } from './Checkbox'
-export { Switch } from './Switch'
-export { Radio } from './Radio'
-export { Drawer } from './Drawer'
-export { Dialog } from './Dialog'
-export { AlertDialog } from './DialogAlert/Alert'
-export { LoadButton } from './LoadButton'
-export { Tabs } from './Tabs'
-export { Countdown } from './Countdown'
-export { TextArea } from './TextArea'
-export { SelectTags } from './SelectTags'
-export { DatePicker } from './DatePicker'
-export { FileOverlay } from './File'
-// hooks
-export * from './__hooks/use-local-storage'
-// agents
-export { createAlertAgent } from './DialogAlert'
-export { createToaster } from './Toaster'
-// types
-export * from './types'
-export type { Appearance } from './Button'