@companix/uikit 0.0.2 → 0.0.4

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/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'

package/src/types.ts

@@ -1,14 +0,0 @@
-export interface Option<T> {
-  title: string
-  value: T
-  icon?: React.ReactNode
-  label?: string
-  disabled?: boolean
-  className?: string
-}
-
-export interface DateFormat {
-  month: number
-  year: number
-  day: number
-}

package/tailwind.config.js

@@ -1,91 +0,0 @@
-export default {
-  content: ['./index.html', './playground/*.{js,jsx,ts,tsx}', './playground/**/*.{js,jsx,ts,tsx}'],
-  corePlugins: {
-    preflight: false
-  },
-  theme: {
-    borderRadius: {
-      none: '0px',
-      sm: '3px',
-      DEFAULT: '4px',
-      md: '6px',
-      lg: '8px',
-      xl: '12px',
-      full: '9999px'
-    },
-    zIndex: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      0: '0',
-      10: '10',
-      20: '20',
-      30: '30',
-      40: '40'
-    },
-    fontSize: {
-      xs: ['12px', { lineHeight: '14px' }],
-      sm: ['14px', { lineHeight: '16.5px' }],
-      base: ['16px', { lineHeight: '19px' }],
-      lg: ['18px', { lineHeight: '21.5px' }],
-      xl: ['20px', { lineHeight: '23.5px' }],
-      '2xl': ['22px', { lineHeight: '26px' }],
-      '3xl': ['24px', { lineHeight: '28px' }]
-    },
-    spacing: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      3: '3px',
-      4: '4px',
-      5: '5px',
-      6: '6px',
-      7: '7px',
-      8: '8px',
-      9: '9px',
-      10: '10px',
-      11: '11px',
-      12: '12px',
-      13: '13px',
-      14: '14px',
-      15: '15px',
-      16: '16px',
-      17: '17px',
-      18: '18px',
-      19: '19px',
-      20: '20px',
-      21: '21px',
-      22: '22px',
-      23: '23px',
-      24: '24px',
-      25: '25px',
-      26: '26px',
-      27: '27px',
-      28: '28px',
-      29: '29px',
-      30: '30px',
-      31: '31px',
-      32: '32px',
-      33: '33px',
-      34: '34px',
-      35: '35px',
-      36: '36px',
-      37: '37px',
-      38: '38px',
-      39: '39px',
-      40: '40px',
-      44: '44px',
-      48: '48px',
-      52: '52px',
-      56: '56px',
-      60: '60px',
-      64: '64px',
-      72: '72px',
-      80: '80px',
-      96: '96px'
-    }
-  },
-  plugins: []
-}

package/themes/classic/animations.scss

@@ -1,179 +0,0 @@
-@keyframes popoverScaleIn {
-  from {
-    transform: scale(0.3);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-// out
-
-@keyframes popoverScaleOut {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(0.3);
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes checkboxIn {
-  from {
-    transform: translateY(-5px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes checkboxOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-5px);
-  }
-}
-
-@keyframes checkboxInColor {
-  from {
-    color: transparent;
-  }
-  to {
-    color: #242429;
-  }
-}
-
-@keyframes checkboxOutColor {
-  from {
-    color: #242429;
-  }
-  to {
-    color: transparent;
-  }
-}
-
-// radio-mark
-
-@keyframes markScaleIn {
-  from {
-    transform: scale(0.1);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes markScaleOut {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(0.1);
-  }
-}
-
-// dialog
-
-@keyframes dialogIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dialogOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
-
-// drawer
-
-@keyframes slideFromBottom {
-  from {
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideToBottom {
-  to {
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-@keyframes slideFromTop {
-  from {
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideToTop {
-  to {
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-@keyframes slideFromLeft {
-  from {
-    transform: translate3d(-100%, 0, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideToLeft {
-  to {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-@keyframes slideFromRight {
-  from {
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideToRight {
-  to {
-    transform: translate3d(100%, 0, 0);
-  }
-}