@companix/uikit 0.0.1

package/src/__libs/calendar.ts

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

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

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

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

@@ -0,0 +1,36 @@
+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/mixins.scss

@@ -0,0 +1,99 @@
+@use './theme.scss';
+@use './css.scss';
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+@mixin height($size) {
+  height: $size;
+  min-height: $size;
+  max-height: $size;
+}
+
+@mixin box($size) {
+  height: $size;
+  width: $size;
+  min-width: $size;
+}
+
+@mixin items-spacing($spacing) {
+  & > * {
+    margin-right: $spacing;
+  }
+
+  & > :last-child {
+    margin-right: 0;
+  }
+}
+
+@mixin truncate-text() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@function get-value($map, $keys...) {
+  $current: $map;
+
+  @each $key in $keys {
+    @if meta.type-of($current) != 'map' {
+      @return null;
+    }
+
+    $current: map.get($current, $key);
+
+    @if $current == null {
+      @return null;
+    }
+  }
+
+  @return $current;
+}
+
+@mixin set-style($property, $source, $keys...) {
+  $path: list.append($keys, $property);
+  $var-name: get-value($source, $path...);
+
+  @if $var-name != null {
+    @if meta.type-of($var-name) != 'map' {
+      #{$property}: $var-name;
+    }
+  }
+}
+
+@mixin use-styles($component, $keys...) {
+  $source: map.get(theme.$tokens, $component);
+
+  @each $property, $v in css.$properties {
+    @include set-style($property, $source, $keys...);
+  }
+}
+
+@mixin use-styles-debug($component, $keys...) {
+  $source: map.get(theme.$tokens, $component);
+
+  @debug $source;
+
+  @each $property, $v in css.$properties {
+    @include set-style($property, $source, $keys...);
+  }
+}
+
+@function get-var-name($component, $keys...) {
+  $source: map.get(theme.$tokens, $component);
+  $var-name: get-value($source, $keys...);
+
+  @return $var-name;
+}
+
+@mixin use-size($component, $keys...) {
+  $name: get-var-name($component, $keys...);
+
+  @if $name != null {
+    @if meta.type-of($name) != 'map' {
+      width: $name;
+      min-width: $name;
+      height: $name;
+    }
+  }
+}

package/src/theme.scss

@@ -0,0 +1,103 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:list';
+
+$button-appearances: ();
+
+$tokens: ();
+
+// changes
+@function str-split($string, $delimiter) {
+  $result: ();
+  $buffer: '';
+
+  @for $i from 1 through string.length($string) {
+    $char: string.slice($string, $i, $i);
+
+    @if ($char == $delimiter) {
+      $result: list.append($result, $buffer);
+      $buffer: '';
+    } @else {
+      $buffer: $buffer + $char;
+    }
+  }
+
+  $result: list.append($result, $buffer);
+
+  @return $result;
+}
+
+@function list-slice($list, $start, $end: list.length($list)) {
+  $new: ();
+
+  @for $i from $start through $end {
+    $new: list.append($new, list.nth($list, $i));
+  }
+
+  @return $new;
+}
+
+/// Добавляет значение в многоуровневую карту
+@function map-deep-set($map, $keys, $value) {
+  $current: $map;
+  $key: list.nth($keys, 1);
+
+  @if list.length($keys) == 1 {
+    @return map.merge(
+      $current,
+      (
+        $key: $value
+      )
+    );
+  }
+
+  $nested: map.get($current, $key);
+
+  @if $nested == null {
+    $nested: ();
+  }
+
+  $nested: map-deep-set($nested, list-slice($keys, 2), $value);
+
+  @return map.merge(
+    $current,
+    (
+      $key: $nested
+    )
+  );
+}
+
+@mixin use-button-properties($vars) {
+  @each $full-name, $v in $vars {
+    // Разбиваем путь: primary-default-enabled-background → ('primary', 'default', 'enabled', 'background')
+    $parts: str-split($full-name, '_');
+    // Создаём CSS переменную:
+    $css-var: string.unquote('var(--btn_#{$full-name})');
+    // Глубоко добавляем значение в структуру
+    $button-appearances: map-deep-set($button-appearances, $parts, $css-var) !global;
+  }
+}
+
+@mixin use-tokens($components) {
+  @each $component-name, $v in $components {
+    $component-vars: map.get($components, $component-name);
+
+    @each $path, $v in $component-vars {
+      $name: #{$component-name}_#{$path};
+      // Разбиваем путь: primary_default_enabled_background → ('primary', 'default', 'enabled', 'background')
+      $keys: str-split($name, '_');
+      // Создаём CSS переменную:
+      $css-var: string.unquote('var(--#{$name})');
+      // Глубоко добавляем значение в структуру
+      $tokens: map-deep-set($tokens, $keys, $css-var) !global;
+      // set scss var
+      --#{$name}: #{map.get($component-vars, $path)};
+    }
+  }
+}
+
+@mixin use-css-vars($prefix, $map) {
+  @each $name, $value in $map {
+    --#{$prefix}_#{$name}: #{$value};
+  }
+}

package/src/types.ts

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