@pezeshk-book/modules 0.2.7 → 0.2.9

package/calendar/calendar.tsx

@@ -1,185 +0,0 @@
-'use client';
-
-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

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

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

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

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

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

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

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

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

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

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

package/calendar/index.ts

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

package/calendar/shared/formatDate.tsx

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

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

@@ -1,31 +0,0 @@
-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}
-    />
-  );
-};

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

@@ -1,51 +0,0 @@
-export interface DaysProps {
-  days: Array<object>;
-
-  monthName: string;
-
-  selectedDay: string;
-
-  disablePreviousMonths: boolean;
-
-  disableSubsequentMonths: boolean;
-
-  disablePreviousDays: boolean;
-
-  disableSubsequentDays: boolean;
-
-  daysEventListeners: any;
-
-  increaseMonth: () => void;
-
-  decreaseMonth: () => void;
-
-  isDatePicker: boolean;
-
-  selected: string | Date | undefined;
-
-  selectDateHandlers: any;
-
-  year: string;
-
-  date: any;
-
-  dateFormat: string;
-
-  type: 'gregorian' | 'jalali'
-
-  holidays?: Array<string>
-
-  variant: 'simple' | 'range'
-
-  selectDateRangeHandlers: any
-
-  rangeDate: any
-
-  rangeDates: Array<string>
-
-  size?: 'tiny' | 'small' | 'medium' | 'large' | 'huge'
-
-  changeMonth: (monthIndex: number) => void
-
-  changeYear: (year: string) => void
-}