@pezeshk-book/modules 0.2.5 → 0.2.6

package/.eslintrc.json

@@ -0,0 +1,133 @@
+{
+  "plugins": [
+    "react-hooks"
+  ],
+  "root": true,
+  "rules": {
+    "react-hooks/rules-of-hooks": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "@next/next/no-img-element": "off",
+
+    "quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
+    "object-curly-spacing": ["error", "always"],
+    "semi": ["error", "always", {"omitLastInOneLineClassBody": true}],
+    "semi-style": ["error", "last"],
+    "comma-dangle": ["error", "always-multiline"],
+    "arrow-spacing": ["error", { "before": true, "after": true }],
+    "block-spacing": ["error", "always"],
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": ["error", { "properties": "never" }],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "comma-style": ["error", "last"],
+    "constructor-super": "error",
+    "curly": ["error"],
+    "dot-location": ["error", "property"],
+
+
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "func-call-spacing": [2, "never"],
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "keyword-spacing": [2, { "before": true, "after": true }],
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "new-parens": 2,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-class-assign": 2,
+    "no-cond-assign": 2,
+    "no-const-assign": 2,
+    "no-constant-condition": [2, { "checkLoops": false }],
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-dupe-args": 2,
+    "no-dupe-class-members": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-duplicate-imports": 2,
+    "no-empty-character-class": 2,
+    "no-empty-pattern": 2,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-parens": [2, "functions"],
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-global-assign": 2,
+    "no-implied-eval": 2,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
+    "no-lone-blocks": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-symbol": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-path-concat": 2,
+    "no-proto": 2,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-return-assign": [2, "except-parens"],
+    "no-self-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow-restricted-names": 2,
+    "no-sparse-arrays": 2,
+    "no-tabs": 2,
+    "no-template-curly-in-string": 2,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-unexpected-multiline": 2,
+    "no-unmodified-loop-condition": 2,
+    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+    "no-unreachable": 2,
+    "no-unsafe-finally": 2,
+    "no-unsafe-negation": 2,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-useless-call": 2,
+    "no-useless-computed-key": 2,
+    "no-useless-constructor": 2,
+    "no-useless-escape": 2,
+    "no-useless-rename": 2,
+    "no-whitespace-before-property": 2,
+    "no-with": 2,
+    "object-property-newline": [2, { "allowMultiplePropertiesPerLine": true }],
+    "one-var": [2, { "initialized": "never" }],
+    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": [2, "never"],
+    "rest-spread-spacing": [2, "never"],
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "space-before-blocks": [2, "always"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "template-curly-spacing": [2, "never"],
+    "unicode-bom": [2, "never"],
+    "use-isnan": 2,
+    "valid-typeof": 2,
+    "wrap-iife": [2, "any", { "functionPrototypeMethods": true }],
+    "yield-star-spacing": [2, "both"],
+    "yoda": [2, "never"]
+  },
+  "extends": [
+    "react-app"
+  ]
+}

package/calendar/calendar.props.ts

@@ -0,0 +1,25 @@
+export interface CalendarProps {
+  dateFormat?: string
+
+  selectedDate?: string | Date;
+
+  disablePreviousMonths?: boolean;
+
+  disableSubsequentMonths?: boolean;
+
+  disablePreviousDays?: boolean;
+
+  disableSubsequentDays?: boolean;
+
+  onChange: (e: any) => void;
+
+  selected?: string | Date
+
+  type?: 'gregorian' | 'jalali'
+
+  holidays?: Array<string>
+
+  variant?: 'range' | 'simple'
+
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'huge'
+}

package/calendar/calendar.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useState } from 'react';
+import Days from './sub-components/days/days';
+import { daysInMonthEn, daysInMonthFa, IDays } from './config';
+import { CalendarProps } from './calendar.props';
+import formatDate from './shared/formatDate';
+import { Div } from '@pezeshk-book/ui-kit';
+import DateObject from 'react-date-object';
+import persian from 'react-date-object/calendars/persian';
+import persianFa from 'react-date-object/locales/persian_fa';
+import createDateRange from './config/create-date-range';
+
+interface IState {
+  value: any
+  initialValue?: any
+  cloneDays: any
+  monthName: string
+  month: number | string
+  year: string
+  days: IDays[]
+}
+
+const Calender = (props: CalendarProps) => {
+  const {
+    dateFormat = 'YYYY-MM-DD',
+    selectedDate = new Date(),
+    disablePreviousMonths = false,
+    disableSubsequentMonths = false,
+    disablePreviousDays = false,
+    disableSubsequentDays = false,
+    selected,
+    onChange,
+    type = 'jalali',
+    holidays,
+    variant = 'simple',
+    size = 'medium',
+  } = props;
+
+  const date = new DateObject({ date: selectedDate });
+  const [datepicker, setDatepicker] = useState<IState>({
+    value: formatDate(selectedDate, dateFormat, type),
+    cloneDays: date,
+    monthName: '',
+    month: '',
+    year: '',
+    days: [],
+  });
+  const [dateRangePicker, setDateRangePicker] = useState<{start: any, end: any}>({
+    start: null,
+    end: null,
+  });
+  const [rangeDates, setRangeDates] = useState<Array<string>>([]);
+  const [holidayList, setHolidayList] = useState<Array<string>>();
+
+  useEffect(() => {
+    const { monthName, month, days, year } = type === 'gregorian' ? daysInMonthEn(datepicker.cloneDays, dateFormat) : daysInMonthFa(datepicker.cloneDays, dateFormat);
+    setDatepicker({
+      ...datepicker,
+      year: year,
+      monthName: monthName,
+      month: month,
+      days: days,
+      initialValue: null,
+    });
+  }, [type]);
+
+  useEffect(() => {
+    if (holidays && holidays.length) {
+      const holidaysFormatList = holidays.map((item) => new DateObject(item).format(dateFormat));
+      setHolidayList(holidaysFormatList);
+    }
+  }, [holidays, dateFormat]);
+
+  const changeMonths = (amount: number, changeType: 'inc' | 'select'): void => {
+    setDatepicker(prevState => {
+      const updatedCloneDays = changeType === 'inc' ? prevState.cloneDays.add(amount, 'month') : prevState.cloneDays.setMonth(amount);
+      const { monthName, month, days, year } = type === 'gregorian' ? daysInMonthEn(updatedCloneDays, dateFormat) : daysInMonthFa(updatedCloneDays, dateFormat);
+
+      return {
+        ...prevState,
+        year,
+        monthName,
+        month,
+        days,
+        cloneDays: updatedCloneDays,
+      };
+    });
+  };
+
+  const changeYear = (selectedYear: string): void => {
+    setDatepicker(prevState => {
+      const updatedCloneDays = prevState.cloneDays.setYear(parseInt(selectedYear));
+      const { monthName, month, days, year } = type === 'gregorian' ? daysInMonthEn(updatedCloneDays, dateFormat) : daysInMonthFa(updatedCloneDays, dateFormat);
+
+      return {
+        ...prevState,
+        year,
+        monthName,
+        month,
+        days,
+        cloneDays: updatedCloneDays,
+      };
+    });
+  };
+
+  const selectDay = (e: React.SyntheticEvent<EventTarget>) => {
+    const faDate = (e.target as HTMLHtmlElement).dataset.jalaliDate;
+    setDatepicker({
+      ...datepicker,
+      value: faDate,
+    });
+  };
+
+  const daysEventListeners = () => {
+    return {
+      onClick: selectDay,
+    };
+  };
+
+  const selectDateHandler = (day: any): void => {
+    const clickedDate = new DateObject({ date: day.gregorianDate, calendar: persian, locale: persianFa });
+    const jalaliDate = new DateObject({ date: day.jalaliDate, calendar: persian }).format(dateFormat);
+    const gregorianDate = new DateObject({ date: day.gregorianDate }).format(dateFormat);
+    onChange({ calendarDate: clickedDate, gregorianDate, jalaliDate });
+  };
+
+  const selectDateRangeHandler = ({ start, end } : {start: any, end: any}): void => {
+    setDateRangePicker({ start: start, end: end });
+
+    const clickedStartDate = new DateObject({ date: start?.gregorianDate, calendar: persian, locale: persianFa });
+    const jalaliStartDate = new DateObject({ date: start?.jalaliDate, calendar: persian }).format(dateFormat);
+    const gregorianStartDate = new DateObject({ date: start?.gregorianDate }).format(dateFormat);
+
+    const clickedEndDate = new DateObject({ date: end?.gregorianDate, calendar: persian, locale: persianFa });
+    const jalaliEndDate = new DateObject({ date: end?.jalaliDate, calendar: persian }).format(dateFormat);
+    const gregorianEndDate = new DateObject({ date: end?.gregorianDate }).format(dateFormat);
+
+    onChange({
+      start: start ? { calendarDate: clickedStartDate, gregorianStartDate, jalaliStartDate } : null,
+      end: end ? { calendarDate: clickedEndDate, gregorianEndDate, jalaliEndDate } : null,
+    });
+
+    if (start && end) {
+      const range = createDateRange({ startDate: start.gregorianDate, stopDate: end.gregorianDate });
+      setRangeDates(range);
+    } else {
+      setRangeDates([]);
+    }
+  };
+
+  return (
+    <Div dir={'rtl'} className={'items-center flex flex-col justify-center bg-white rounded py-4 !w-full'}>
+      <Days
+        days={datepicker.days}
+        monthName={datepicker.monthName}
+        year={datepicker.year}
+        selectedDay={datepicker.value}
+        disablePreviousMonths={disablePreviousMonths}
+        disableSubsequentMonths={disableSubsequentMonths}
+        disablePreviousDays={disablePreviousDays}
+        disableSubsequentDays={disableSubsequentDays}
+        daysEventListeners={daysEventListeners}
+        selectDateHandlers={selectDateHandler}
+        selectDateRangeHandlers={selectDateRangeHandler}
+        selected={new DateObject({ date: selected }).format(dateFormat)}
+        date={date}
+        increaseMonth={() => changeMonths(1, 'inc')}
+        decreaseMonth={() => changeMonths(-1, 'inc')}
+        changeMonth={(monthIndex : number) => changeMonths(monthIndex, 'select')}
+        isDatePicker={true}
+        dateFormat={dateFormat}
+        type={type}
+        holidays={holidayList}
+        variant={variant}
+        rangeDate={dateRangePicker}
+        rangeDates={rangeDates}
+        size={size}
+        changeYear={changeYear}
+      />
+    </Div>
+  );
+};
+
+export default Calender;

package/calendar/config/chunk.ts

@@ -0,0 +1,42 @@
+function slice(array: [], start: number, end: number) {
+  let length = array == null ? 0 : array.length;
+  if (!length) {
+    return [];
+  }
+  start = start == null ? 0 : start;
+  end = end === undefined ? length : end;
+
+  if (start < 0) {
+    start = -start > length ? 0 : length + start;
+  }
+  end = end > length ? length : end;
+  if (end < 0) {
+    end += length;
+  }
+  // @ts-ignore
+  length = start > end ? 0 : (end - start) >>> 0;
+  start >>>= 0;
+
+  let index = -1;
+  const result = new Array(length);
+  while (++index < length) {
+    result[index] = array[index + start];
+  }
+  return result;
+}
+
+export function chunk(array: any, size: any) {
+  size = Math.max(size, 0);
+  const length = array == null ? 0 : array.length;
+  if (!length || size < 1) {
+    return [];
+  }
+  let index = 0;
+  let resIndex = 0;
+  const result = new Array(Math.ceil(length / size));
+
+  while (index < length) {
+    result[resIndex++] = slice(array, index, (index += size));
+  }
+  return result;
+}

package/calendar/config/create-date-range.ts

@@ -0,0 +1,14 @@
+import DateObject from 'react-date-object';
+
+const createDateRange = ({ startDate, stopDate } : {startDate: string, stopDate: string}): Array<string> => {
+  const dateArray = [];
+  let start = new DateObject(startDate);
+  const end = new DateObject(stopDate);
+  while (start <= end) {
+    dateArray.push( new DateObject(start).format('YYYY-MM-DD') );
+    start = new DateObject(start).add(1, 'days');
+  }
+  return dateArray;
+};
+
+export default createDateRange;

package/calendar/config/days-in-month.en.ts

@@ -0,0 +1,47 @@
+import persian from 'react-date-object/calendars/persian';
+import gregorianEn from 'react-date-object/locales/gregorian_en';
+import DateObject from 'react-date-object';
+import gregorian from 'react-date-object/calendars/gregorian';
+
+export interface IDays {
+  day: number;
+  gregorianDate: string;
+  jalaliDate: string;
+  disabled: boolean;
+}
+
+export interface IDaysInMonth {
+  days: IDays[];
+  monthName: string;
+  month: number;
+  today?: string;
+  year: string
+}
+
+export const daysInMonthEn = (date: any, dateFormat: string): IDaysInMonth => {
+  date.calendar = gregorian;
+  date.locale = gregorianEn;
+  const monthName = date.month.name;
+  const { month, year } = date;
+  const firstDayWeekDay = new DateObject({ date: `${year} ${month} 1`, calendar: gregorian }).weekDay.number;
+  // Calculate the number of empty cells needed before the first day of the month
+  const emptyCellsCount = (firstDayWeekDay + 7) % 7;
+  const lastDayOfPreviousMonth = new DateObject({date: `${year} ${month - 1} 31`, calendar: gregorian});
+  // Calculate the empty days from the previous month
+  const emptyDays = [...Array(emptyCellsCount)].map((_, i) => lastDayOfPreviousMonth.month.length - emptyCellsCount + i + 1);
+  // Create an array of day objects for the current month
+  const currentMonthDays = Array.from({ length: date.month.length }, (_, i) => {
+    const dayNumber = i + 1;
+    const gregorianDate = new DateObject({ date: (`${year} ${month} ${dayNumber}`), calendar: gregorian }).format(dateFormat);
+    const jalaliDate = new DateObject({ date: (`${year} ${month} ${dayNumber}`), calendar: gregorian }).convert(persian).format(dateFormat);
+    return { day: dayNumber, gregorianDate, jalaliDate, disabled: false };
+  });
+  const allDays = [...emptyDays.map((day) => ({
+    day,
+    gregorianDate: new DateObject({date: (`${year} ${month} ${day}`), calendar: gregorian}).format(dateFormat),
+    jalaliDate: new DateObject({date: (`${year} ${month} ${day}`), calendar: gregorian}).convert(persian).format(dateFormat),
+    disabled: true
+  })), ...currentMonthDays];
+
+  return { monthName, month, days: allDays, year };
+};

package/calendar/config/days-in-month.fa.ts

@@ -0,0 +1,37 @@
+import persian from 'react-date-object/calendars/persian';
+import persianFa from 'react-date-object/locales/persian_fa';
+import DateObject from 'react-date-object';
+import gregorian from 'react-date-object/calendars/gregorian';
+import { IDaysInMonth } from './days-in-month.en';
+export const daysInMonthFa = (date: any, dateFormat: string): IDaysInMonth => {
+  date.calendar = persian;
+  date.locale = persianFa;
+  const monthName = date.month.name;
+  const { month, year } = date;
+  const firstDayWeekDay = new DateObject({ date: `${year} ${month} 1`, calendar: persian }).weekDay.number;
+
+  // Calculate the number of empty cells needed before the first day of the month
+  const emptyCellsCount = (firstDayWeekDay + 6) % 7;
+
+  const lastDayOfPreviousMonth = new DateObject({ date: `${year} ${month - 1} 31`, calendar: persian });
+
+  // Calculate the empty days from the previous month
+  const emptyDays = [...Array(emptyCellsCount)].map((_, i) => lastDayOfPreviousMonth.month.length - emptyCellsCount + i + 1);
+
+  // Create an array of day objects for the current month
+  const currentMonthDays = Array.from({ length: date.month.length }, (_, i) => {
+    const dayNumber = i + 1;
+    const gregorianDate = new DateObject({ date: (`${year} ${month} ${dayNumber}`), calendar: persian }).convert(gregorian).format(dateFormat);
+    const jalaliDate = new DateObject({ date: (`${year} ${month} ${dayNumber}`), calendar: persian }).format(dateFormat);
+    return { day: dayNumber, gregorianDate, jalaliDate, disabled: false };
+  });
+
+  const allDays = [...emptyDays.map((day) => ({
+    day,
+    gregorianDate: new DateObject({ date: (`${year} ${month} ${day}`), calendar: persian }).convert(gregorian).format(dateFormat),
+    jalaliDate: new DateObject({ date: (`${year} ${month} ${day}`), calendar: persian }).format(dateFormat),
+    disabled: true,
+  })), ...currentMonthDays];
+
+  return { monthName, month, days: allDays, year };
+};

package/calendar/config/index.ts

@@ -0,0 +1,16 @@
+import { fa, weekDayNames } from './week-day';
+import { chunk } from './chunk';
+import { daysInMonthEn, IDays, IDaysInMonth } from './days-in-month.en';
+import { daysInMonthFa } from './days-in-month.fa';
+
+export {
+  daysInMonthEn,
+  daysInMonthFa,
+  fa,
+  weekDayNames,
+  chunk,
+};
+export type {
+  IDaysInMonth,
+  IDays,
+};

package/calendar/config/months.ts

@@ -0,0 +1,29 @@
+export const jalaliMonths = [
+  { name: 'فروردین', value: 1 },
+  { name: 'اردیبهشت', value: 2 },
+  { name: 'خرداد', value: 3 },
+  { name: 'تیر', value: 4 },
+  { name: 'مرداد', value: 5 },
+  { name: 'شهریور', value: 6 },
+  { name: 'مهر', value: 7 },
+  { name: 'آبان', value: 8 },
+  { name: 'آذر', value: 9 },
+  { name: 'دی', value: 10 },
+  { name: 'بهمن', value: 11 },
+  { name: 'اسفند', value: 12 },
+];
+
+export const gregorianMonths = [
+  { name: 'Jan', value: 1 },
+  { name: 'Feb', value: 2 },
+  { name: 'Mar', value: 3 },
+  { name: 'Apr', value: 4 },
+  { name: 'May', value: 5 },
+  { name: 'Jun', value: 6 },
+  { name: 'Jul', value: 7 },
+  { name: 'Aug', value: 8 },
+  { name: 'Sep', value: 9 },
+  { name: 'Oct', value: 10 },
+  { name: 'Nov', value: 11 },
+  { name: 'Dec', value: 12 },
+];

package/calendar/config/week-day.ts

@@ -0,0 +1,19 @@
+export const fa = (n: any) => {
+  if (process.env.NODE_ENV === 'test') {
+    return n;
+  }
+  return Number(n).toLocaleString('fa', {
+    useGrouping: false,
+  });
+};
+
+export const weekDayNames = {
+  jalali: {
+    normal: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه'],
+    short: ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'],
+  },
+  gregorian: {
+    normal: ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
+    short: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+  },
+};

package/calendar/icons/arrow-left-icon.tsx

@@ -0,0 +1,14 @@
+const ArrowLeftIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="12" viewBox="0 0 6 12">
+      <path
+        fill={'currentColor'}
+        transform="rotate(-90 6 6)"
+        data-name="Path 28691"
+        d="M5.29.253a1.121 1.121 0 0 1 1.419 0l5 4.28a.775.775 0 0 1 0 1.215 1.126 1.126 0 0 1-1.419 0L6 2.068l-4.287 3.68a1.126 1.126 0 0 1-1.419 0 .775.775 0 0 1 0-1.215z"
+      />
+    </svg>
+  );
+};
+
+export default ArrowLeftIcon;

package/calendar/icons/arrow-right-icon.tsx

@@ -0,0 +1,14 @@
+const ArrowRightIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="12" viewBox="0 0 6 12">
+      <path
+        fill={'currentColor'}
+        transform="rotate(-90 6 6)"
+        data-name="Path 28692"
+        d="M5.29 5.747a1.121 1.121 0 0 0 1.419 0l5-4.28a.775.775 0 0 0 0-1.215 1.126 1.126 0 0 0-1.419 0L6 3.932 1.713.252a1.126 1.126 0 0 0-1.419 0 .775.775 0 0 0 0 1.215z"
+      />
+    </svg>
+  );
+};
+
+export default ArrowRightIcon;

package/calendar/icons/index.ts

@@ -0,0 +1,7 @@
+import ArrowLeftIcon from './arrow-left-icon';
+import ArrowRightIcon from './arrow-right-icon';
+
+export {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+};

package/calendar/index.ts

@@ -0,0 +1,3 @@
+import Calendar from './calendar';
+
+export default Calendar;

package/calendar/shared/formatDate.tsx

@@ -0,0 +1,12 @@
+import DateObject from 'react-date-object';
+import persian from 'react-date-object/calendars/persian';
+import gregorian from 'react-date-object/calendars/gregorian';
+
+export default function formatDate(data: Date | number | string, format: string = 'YYYY-MM-DD', type: 'gregorian' | 'jalali') {
+  if (data) {
+    const date = new DateObject(data);
+    date.calendar = type === 'gregorian' ? gregorian : persian;
+    return date.format(format);
+  }
+  return null;
+}

package/calendar/sub-components/day/day.props.ts

@@ -0,0 +1,27 @@
+export interface DayProps {
+  isSelecting?: boolean;
+
+  selectedDay?: boolean;
+
+  selected: boolean;
+
+  handleDay: ((event: string) => void);
+
+  children: any;
+
+  disabledDay?: boolean;
+
+  holidays?: boolean;
+
+  passedDay?: boolean;
+
+  comingDay?: boolean;
+
+  isRange?: boolean
+
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'huge'
+
+  startRange?: boolean
+
+  endRange?: boolean
+}

package/calendar/sub-components/day/day.tsx

@@ -0,0 +1,31 @@
+import { DayProps } from './day.props';
+import classNames from '../../../utils/class-names';
+import { Button, Div } from '@pezeshk-book/ui-kit';
+
+export const Day = (props: DayProps) => {
+  const { children, disabledDay, holidays, passedDay, comingDay, selectedDay, selected, handleDay, isRange, startRange, endRange } = props;
+
+  if (!children) {
+    return <Div {...props}/>;
+  }
+
+  const color = passedDay ? 'control' : selected ? 'primary' : isRange ? 'slate' : selectedDay ? 'primary' : (disabledDay || holidays ? 'danger' : 'inherit');
+  const variant = selected ? 'filled' : (isRange ? 'outlined' : 'text');
+  return (
+    <Button
+      disabled={comingDay || passedDay}
+      variant={variant}
+      rounded={isRange ? 'none' : 'medium'}
+      size={'medium'}
+      shape={'square'}
+      color={color}
+      className={classNames(
+        isRange ? 'border-l-0 border-r-0 border-dashed' : '',
+        startRange && isRange ? 'rounded-r-lg rounded-l-none' : '',
+        endRange && isRange ? 'rounded-l-lg rounded-r-none' : '',
+      )}
+      onClick={handleDay}
+      {...props}
+    />
+  );
+};