@redneckz/wildless-cms-uni-blocks 0.14.17 → 0.14.19

package/mobile/src/ui-kit/BaseFiltration/useHotFilters.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import type { BlockDef } from '../../model/ContentPageDef';
+import { type BlockDef } from '../../model/ContentPageDef';
 import { Badge } from '../Badge/Badge';
-import type { TabItemBase } from '../TabsControl/TabItem';
-import type { TabsControlProps } from '../TabsControl/TabsControlProps';
+import { type TabItemBase } from '../TabsControl/TabItem';
+import { type TabsControlProps } from '../TabsControl/TabsControlProps';
 import { getBadgeCount } from './getBadgeCount';
-import { HotFilterBase } from './HotFilterBase';
+import { type HotFilterBase } from './HotFilterBase';
 import { hotFilterRecordCmp } from './hotFilterRecordCmp';
 
 const EMPTY_ARR = [];

package/mobile/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
-import type { HeadlineVersion } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { VNode } from '../../model/VNode';
+import { type HeadlineVersion } from '../../model/HeadlineType';
+import { type UniBlockProps } from '../../model/JSXBlock';
+import { type VNode } from '../../model/VNode';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { renderButtonsSection } from '../Button/renderButtonsSection';
@@ -10,8 +10,8 @@ import { Img } from '../Img/Img';
 import { List } from '../List/List';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
-import type { TextAlign } from '../Text/TextProps';
-import type { BaseProductTileContent } from './BaseProductTileContent';
+import { type TextAlign } from '../Text/TextProps';
+import { type BaseProductTileContent } from './BaseProductTileContent';
 
 interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {}
 

package/mobile/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,12 +1,12 @@
-import type { Align } from '../../model/Align';
-import type { BulletsProps } from '../../model/Bullets';
-import type { HeadlineProps, LabelProps } from '../../model/HeadlineType';
-import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
-import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
-import type { ImageContent } from '../Img/ImgProps';
-import type { ListContent } from '../List/ListContent';
-import type { RichTextProps } from '../RichText/RichTextProps';
-import type { TagsContent } from '../Tags/TagsContent';
+import { type Align } from '../../model/Align';
+import { type BulletsProps } from '../../model/Bullets';
+import { type HeadlineProps, type LabelProps } from '../../model/HeadlineType';
+import { type BenefitsListContent } from '../BenefitsList/BenefitsListContent';
+import { type ButtonsSectionContent } from '../Button/ButtonsSectionContent';
+import { type ImageContent } from '../Img/ImgProps';
+import { type ListContent } from '../List/ListContent';
+import { type RichTextProps } from '../RichText/RichTextProps';
+import { type TagsContent } from '../Tags/TagsContent';
 
 /** @title Доп. настройки картинки */
 export interface TileImageOptions {

package/mobile/src/ui-kit/BaseTile/BaseTile.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Align } from '../../model/Align';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { VNode } from '../../model/VNode';
+import { type Align } from '../../model/Align';
+import { type UniBlockProps } from '../../model/JSXBlock';
+import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 
 interface BaseTileProps extends UniBlockProps {

package/mobile/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconVersion } from '../../model/IconVersion';
+import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
-import type { ComplexBenefitContent } from './BenefitItemContent';
+import { type ComplexBenefitContent } from './BenefitItemContent';
 import { renderBenefitIcon } from './renderBenefitIcon';
 import { renderBenefitText } from './renderBenefitText';
 

package/mobile/src/ui-kit/BenefitItem/BenefitItemContent.ts

@@ -1,7 +1,7 @@
-import type { DefaultListItemType } from '../../model/DefaultListItemType';
-import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
-import type { IconProps } from '../../model/Picture';
-import type { RichTextItem } from '../../model/RichTextItem';
+import { type DefaultListItemType } from '../../model/DefaultListItemType';
+import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
+import { type IconProps } from '../../model/Picture';
+import { type RichTextItem } from '../../model/RichTextItem';
 
 export type BenefitItemContent = LabelProps & DescriptionProps & IconProps;
 

package/mobile/src/ui-kit/BenefitItem/renderBenefitIcon.tsx

@@ -1,5 +1,5 @@
-import type { IconVersion } from '../../model/IconVersion';
-import type { Picture } from '../../model/Picture';
+import { type IconVersion } from '../../model/IconVersion';
+import { type Picture } from '../../model/Picture';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 

package/mobile/src/ui-kit/BenefitItem/renderBenefitText.tsx

@@ -1,5 +1,5 @@
 import { RichText } from '../RichText/RichText';
-import type { ComplexBenefitContent } from './BenefitItemContent';
+import { type ComplexBenefitContent } from './BenefitItemContent';
 import { renderBenefitDescription } from './renderBenefitDescription';
 import { renderBenefitLabel } from './renderBenefitLabel';
 

package/mobile/src/ui-kit/BenefitsList/BenefitsList.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BenefitsListProps } from './BenefitsListProps';
+import { type BenefitsListProps } from './BenefitsListProps';
 import { DefaultBenefitsList } from './DefaultBenefitsList';
 import { TabularBenefitsList } from './TabularBenefitsList';
 

package/mobile/src/ui-kit/BenefitsList/BenefitsListContent.ts

@@ -1,5 +1,5 @@
-import type { IconVersion } from '../../model/IconVersion';
-import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
+import { type IconVersion } from '../../model/IconVersion';
+import { type ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
 
 /**
  * @title Список преимуществ

package/mobile/src/ui-kit/BenefitsList/BenefitsListProps.ts

@@ -1,4 +1,4 @@
-import type { BenefitsListContent } from './BenefitsListContent';
+import { type BenefitsListContent } from './BenefitsListContent';
 
 export interface BenefitsListProps extends BenefitsListContent {
   className?: string;

package/mobile/src/ui-kit/BenefitsList/DefaultBenefitsList.tsx

@@ -2,8 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 import { deviation } from '../../utils/deviation';
 import { style } from '../../utils/style';
 import { BenefitItem } from '../BenefitItem/BenefitItem';
-import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
-import type { BenefitsListProps } from './BenefitsListProps';
+import { type ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
+import { type BenefitsListProps } from './BenefitsListProps';
 
 const MAX_BENEFITS_LEN_DEVIATION = 16;
 

package/mobile/src/ui-kit/BenefitsList/TabularBenefitsList.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { renderBenefitText } from '../BenefitItem/renderBenefitText';
-import type { BenefitsListProps } from './BenefitsListProps';
+import { type BenefitsListProps } from './BenefitsListProps';
 
 export const TabularBenefitsList = JSX<BenefitsListProps>(({ className, benefits }) =>
   benefits?.length ? (

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../EventBus/defaultEventBus';
-import type { BlockVersion } from '../model/BlockVersion';
-import type { UniBlockProps } from '../model/JSXBlock';
+import { type BlockVersion } from '../model/BlockVersion';
+import { type UniBlockProps } from '../model/JSXBlock';
 import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
 import { style } from '../utils/style';
 

package/mobile/src/ui-kit/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../hooks/useLink';
-import type { LinkProps } from '../model/LinkProps';
+import { type LinkProps } from '../model/LinkProps';
 
 export interface BreadcrumbProps extends LinkProps {
   className?: string;

package/mobile/src/ui-kit/Button/ArrowButton.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
-import type { ButtonProps } from './ButtonProps';
+import { type ButtonProps } from './ButtonProps';
 
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button

package/mobile/src/ui-kit/Button/Button.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { ButtonInner } from './ButtonInner';
+import { type ButtonProps } from './ButtonProps';
 import { getDisabledButtonClasses } from './getDisabledButtonClasses';
 import { getRegularButtonClasses } from './getRegularButtonClasses';
-import type { ButtonProps } from './ButtonProps';
 
 export const Button = JSX<ButtonProps>(({ disabled, children, ...rest }) => {
   const link = useLink();

package/mobile/src/ui-kit/Button/ButtonContent.ts

@@ -1,6 +1,6 @@
-import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { LinkProps } from '../../model/LinkProps';
-import type { Picture } from '../../model/Picture';
+import { type ButtonVersion } from '../../model/ButtonVersion';
+import { type LinkProps } from '../../model/LinkProps';
+import { type Picture } from '../../model/Picture';
 
 export interface ButtonCommonContent extends LinkProps {
   version?: ButtonVersion;

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { iconStyleMap } from './buttonClassNameConstants';
-import type { ButtonContent } from './ButtonContent';
-import type { ButtonProps } from './ButtonProps';
+import { type ButtonContent } from './ButtonContent';
+import { type ButtonProps } from './ButtonProps';
 
 export const ButtonInner = JSX<ButtonProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -1,6 +1,6 @@
-import type { VNode } from '../../model/VNode';
-import type { PreventableEvent } from '../PreventableEvent';
-import type { ButtonContent } from './ButtonContent';
+import { type VNode } from '../../model/VNode';
+import { type PreventableEvent } from '../PreventableEvent';
+import { type ButtonContent } from './ButtonContent';
 
 /**
  * @title Кнопка

package/mobile/src/ui-kit/Button/ButtonsSectionContent.ts

@@ -1,4 +1,4 @@
-import type { ButtonContent } from './ButtonContent';
+import { type ButtonContent } from './ButtonContent';
 
 export interface ButtonsSectionContent {
   /**

package/mobile/src/ui-kit/Button/GetButtonClassParams.ts

@@ -1,4 +1,4 @@
-import type { ButtonVersion } from '../../model/ButtonVersion';
+import { type ButtonVersion } from '../../model/ButtonVersion';
 
 export type GetButtonClassParams = {
   className?: string;

package/mobile/src/ui-kit/Button/LikeButton.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { SVGPathOptions } from '../SVG';
+import { type SVGPathOptions } from '../SVG';
 
 export interface LikeButtonProps {
   className?: string;

package/mobile/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -1,4 +1,4 @@
-import type { ButtonVersion } from '../../model/ButtonVersion';
+import { type ButtonVersion } from '../../model/ButtonVersion';
 
 export const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',

package/mobile/src/ui-kit/Button/getDisabledButtonClasses.ts

@@ -1,5 +1,5 @@
-import type { GetButtonClassParams } from './GetButtonClassParams';
 import { buttonDisabledStyleMap, buttonStyle } from './buttonClassNameConstants';
+import { type GetButtonClassParams } from './GetButtonClassParams';
 
 export const getDisabledButtonClasses = ({
   className,

package/mobile/src/ui-kit/Button/getRegularButtonClasses.ts

@@ -1,5 +1,5 @@
 import { buttonStyle, buttonStyleMap } from './buttonClassNameConstants';
-import type { GetButtonClassParams } from './GetButtonClassParams';
+import { type GetButtonClassParams } from './GetButtonClassParams';
 
 export const getRegularButtonClasses = ({
   className,

package/mobile/src/ui-kit/Button/renderButtonsSection.tsx

@@ -1,8 +1,8 @@
-import type { Picture } from '../../model/Picture';
+import { type Picture } from '../../model/Picture';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
-import type { ButtonContent } from './ButtonContent';
+import { type ButtonContent } from './ButtonContent';
 
 interface ButtonsSectionOptions {
   className?: string;

package/mobile/src/ui-kit/Checkbox/Checkbox.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import type { PreventableEvent } from '../PreventableEvent';
+import { type PreventableEvent } from '../PreventableEvent';
 import { SVG } from '../SVG';
-import { Text } from '../../ui-kit/Text/Text';
-import type { CheckboxProps } from './CheckboxProps';
+import { type CheckboxProps } from './CheckboxProps';
 
 const CHECK_PATHS = [
   {

package/mobile/src/ui-kit/CookiePopup/CookiePopup.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useDebouncedEffect } from '@redneckz/uni-jsx/lib/hooks/useDebouncedEffect';
-import type { LinkCommonProps } from '../../model/LinkProps';
+import { type LinkCommonProps } from '../../model/LinkProps';
 import { style } from '../../utils/style';
 import { CloseButton } from '../DialogManager/CloseButton';
 import { LinkWrapper } from '../LinkWrapper/LinkWrapper';

package/mobile/src/ui-kit/CurrencyInput/CurrencyInput.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { NumberInput, NumberInputProps } from '../NumberInput/NumberInput';
+import { NumberInput, type NumberInputProps } from '../NumberInput/NumberInput';
 import { Text } from '../Text/Text';
 
 export const CurrencyInput = JSX<NumberInputProps>((props) => (

package/mobile/src/ui-kit/DatePicker/Calendar.tsx

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { noop } from '../../utils/noop';
+import { renderCalendarCells } from './renderCalendarCells';
+
+const WEEK_DAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+
+interface CalendarProps {
+  today?: Date;
+  currentMonth: number;
+  currentYear: number;
+  min?: Date;
+  max?: Date;
+  onDateSelect?: (date: Date) => void;
+}
+
+export const Calendar = JSX<CalendarProps>(
+  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
+    const handleDateClick = useCallback((date: Date) => onDateSelect(date), []);
+
+    const { firstDayOfWeek, totalDays } = useMemo(
+      () => ({
+        firstDayOfWeek: new Date(currentYear, currentMonth, 1).getDay() - 1,
+        totalDays: new Date(currentYear, currentMonth + 1, 0).getDate(),
+      }),
+      [currentYear, currentMonth],
+    );
+
+    return (
+      <table className="mx-auto">
+        <thead className="text-gray font-light">
+          <tr>
+            {WEEK_DAYS.map((day, index) => (
+              <th key={String(index)} className="p-s">
+                {day}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {renderCalendarCells({
+            firstDayOfWeek,
+            today,
+            totalDays,
+            currentYear,
+            currentMonth,
+            min,
+            max,
+            onDateClick: handleDateClick,
+          })}
+        </tbody>
+      </table>
+    );
+  },
+);

package/mobile/src/ui-kit/DatePicker/DatePicker.tsx

@@ -0,0 +1,113 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type LabelProps } from '../../model/HeadlineType';
+import { type IconVersion } from '../../model/IconVersion';
+import { formatDate } from '../../utils/formatDate';
+import { style } from '../../utils/style';
+import { type ControlProps } from '../ControlProps';
+import { Icon } from '../Icon/Icon';
+import { type IconName } from '../Icon/IconProps';
+import { Paragraph } from '../Paragraph/Paragraph';
+import { Select } from '../Select/Select';
+import { Text } from '../Text/Text';
+import { Calendar } from './Calendar';
+import { months } from './months';
+import { useDatePickerManager } from './useDatePickerManager';
+
+const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; height: string } = {
+  name: 'ArrowUpIcon',
+  iconVersion: 'black',
+  width: '24',
+  height: '24',
+};
+
+const SELECT_PROPS: { className: string; iconVersion: IconVersion; isBorder: boolean } = {
+  className: 'min-w-32',
+  iconVersion: 'black',
+  isBorder: false,
+};
+
+const formStyle =
+  'flex justify-between px-m py-s border border-gray rounded-md cursor-pointer ' +
+  'hover:border-black active:border-black focus:border-black';
+
+interface DatePickerProps extends ControlProps<Date>, LabelProps {
+  className?: string;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+export const DatePicker = JSX<DatePickerProps>(
+  ({ className = '', label = '', value, minDate, maxDate, onChange }) => {
+    const [showCalendar, { setValue }] = useBool(false);
+    const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
+    const [selectedYear, setSelectedYear] = useState(
+      value?.getFullYear() || new Date().getFullYear(),
+    );
+
+    const {
+      handlePrevMonth,
+      handleNextMonth,
+      handleSelectMonth,
+      handleSelectYear,
+      monthsOptions,
+      yearsOptions,
+      handleChangeVisibleCalendar,
+      ref,
+    } = useDatePickerManager({
+      onYearSelect: setSelectedYear,
+      onMonthSelect: setSelectedMonth,
+      onShowCalendar: setValue,
+      selectedYear,
+      selectedMonth,
+      showCalendar,
+    });
+
+    return (
+      <div className={style(className, 'relative')} ref={ref}>
+        <Text size="text-m">{label}</Text>
+        {renderDatePickerForm(handleChangeVisibleCalendar, value)}
+        {showCalendar ? (
+          <div className="absolute bg-white z-10 select-none">
+            <div className="flex gap-s">
+              <div className="my-auto" onClick={handlePrevMonth}>
+                <Icon {...ICON_PROPS} className="-rotate-90 cursor-pointer" />
+              </div>
+              <Select
+                onChange={handleSelectMonth}
+                value={{ key: months[selectedMonth] }}
+                options={monthsOptions}
+                {...SELECT_PROPS}
+              />
+              <Select
+                onChange={handleSelectYear}
+                value={{ key: String(selectedYear) }}
+                options={yearsOptions}
+                {...SELECT_PROPS}
+              />
+              <div className="my-auto" onClick={handleNextMonth}>
+                <Icon {...ICON_PROPS} className="rotate-90 cursor-pointer" />
+              </div>
+            </div>
+            <Calendar
+              today={value}
+              currentMonth={selectedMonth}
+              currentYear={selectedYear}
+              onDateSelect={onChange}
+              min={minDate}
+              max={maxDate}
+            />
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+const renderDatePickerForm = (handleChangeVisibleCalendar: () => void, value: Date | undefined) => (
+  <div onClick={handleChangeVisibleCalendar} className={formStyle}>
+    <Paragraph>{value && formatDate(value)}</Paragraph>
+    <Icon {...ICON_PROPS} name="Calendar2Icon" />
+  </div>
+);

package/mobile/src/ui-kit/DatePicker/getYears.ts

@@ -0,0 +1,4 @@
+const START_YEAR = 1970;
+
+export const getYears = () =>
+  Array.from({ length: new Date().getFullYear() - START_YEAR + 1 }, (_, i) => START_YEAR + i);

package/mobile/src/ui-kit/DatePicker/months.ts

@@ -0,0 +1,14 @@
+export const months = [
+  'Январь',
+  'Февраль',
+  'Март',
+  'Апрель',
+  'Май',
+  'Июнь',
+  'Июль',
+  'Август',
+  'Сентябрь',
+  'Октябрь',
+  'Ноябрь',
+  'Декабрь',
+];

package/mobile/src/ui-kit/DatePicker/renderCalendarCells.tsx

@@ -0,0 +1,76 @@
+import { type VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
+
+const DAY_COUNT = 6;
+const WEEK_COUNT = 7;
+
+interface RenderCalendarCellsParams {
+  firstDayOfWeek: number;
+  today: Date | undefined;
+  totalDays: number;
+  currentYear: number;
+  currentMonth: number;
+  min?: Date | undefined;
+  max?: Date | undefined;
+  onDateClick: (date: Date) => void;
+}
+
+export const renderCalendarCells = ({
+  today,
+  firstDayOfWeek,
+  totalDays,
+  currentMonth,
+  currentYear,
+  min,
+  max,
+  onDateClick,
+}: RenderCalendarCellsParams) => {
+  const calendarCells: VNode = [];
+  let dayCounter = 1;
+
+  for (let i = 0; i < DAY_COUNT; i++) {
+    const rowCells: VNode = [];
+
+    for (let j = 0; j < WEEK_COUNT; j++) {
+      if (i === 0 && j < firstDayOfWeek) {
+        rowCells.push(<td key={`empty-${j}`}></td>);
+      } else if (dayCounter > totalDays) {
+        rowCells.push(<td key={`empty-${j}`}></td>);
+      } else {
+        const currentDate = new Date(currentYear, currentMonth, dayCounter);
+        const isToday = checkIsToday(currentDate, today);
+        const isDisabled = checkIsDisabled(currentDate, min, max);
+
+        rowCells.push(
+          <td key={`day-${dayCounter}`}>
+            <div
+              className={getDayStyles(isToday, isDisabled)}
+              onClick={() => !isDisabled && onDateClick(currentDate)}
+            >
+              {dayCounter}
+            </div>
+          </td>,
+        );
+
+        dayCounter++;
+      }
+    }
+
+    calendarCells.push(<tr key={`row-${i}`}>{rowCells}</tr>);
+  }
+
+  return calendarCells;
+};
+
+const checkIsToday = (currentDate: Date, today: Date | undefined) =>
+  today && currentDate.toDateString() === today.toDateString();
+
+const checkIsDisabled = (currentDate: Date, min: Date | undefined, max: Date | undefined) =>
+  (min && currentDate.getTime() < min.getTime()) || (max && currentDate.getTime() > max.getTime());
+
+const getDayStyles = (isToday: boolean | undefined, isDisabled: boolean | undefined) =>
+  style(
+    'p-s text-center rounded-md border',
+    isToday ? '' : 'border-transparent hover:bg-gray',
+    isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer',
+  );