@pezeshk-book/modules 0.2.4 → 0.2.6

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

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

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

@@ -0,0 +1,142 @@
+import { DaysProps } from './days.props';
+import DaysHead from '../days-head/days-head';
+import { Day } from '../day/day';
+import { chunk, fa, IDays, weekDayNames } from '../../config';
+import DateObject from 'react-date-object';
+import persian from 'react-date-object/calendars/persian';
+import gregorian from 'react-date-object/calendars/gregorian';
+import { Div, Divider, Text } from '@pezeshk-book/ui-kit';
+
+const boolDataset = (arg: boolean) => {
+  if (arg) {
+    return {
+      'data-disable': arg,
+    };
+  }
+  return null;
+};
+
+const Days = (props: DaysProps) => {
+  const {
+    days,
+    selected,
+    selectDateHandlers,
+    monthName,
+    disablePreviousMonths,
+    disableSubsequentMonths,
+    disablePreviousDays,
+    disableSubsequentDays,
+    increaseMonth,
+    decreaseMonth,
+    selectedDay,
+    year,
+    date,
+    dateFormat,
+    type,
+    holidays,
+    variant,
+    selectDateRangeHandlers,
+    rangeDate,
+    rangeDates,
+    size,
+    changeMonth,
+    changeYear,
+  } = props;
+
+  const handleDayClick = (day: IDays): void => {
+    selectDateHandlers(day);
+  };
+
+  const handleRangeClick = (day: IDays): void => {
+    if (rangeDate.start && !rangeDate.end && rangeDate.start.gregorianDate < day.gregorianDate) {
+      selectDateRangeHandlers({ start: rangeDate.start, end: day });
+    } else if (rangeDate.start && !rangeDate.end && rangeDate.start.gregorianDate > day.gregorianDate) {
+      selectDateRangeHandlers({ start: day, end: rangeDate.start });
+    } else {
+      selectDateRangeHandlers({ start: day, end: null });
+    }
+  };
+
+  const weeks = chunk(days, 7);
+  const dates = new DateObject({ date: date, calendar: type === 'gregorian' ? gregorian : persian }).format(dateFormat);
+  if (!days.length) {
+    return null;
+  }
+
+  const weekDays = size === 'huge' || size === 'large' ? weekDayNames[type].normal : weekDayNames[type].short;
+
+  return (
+    <Div className={'flex-1 flex-col self-center relative overflow-auto mx-1 bg-white'}>
+      <DaysHead
+        year={year}
+        monthName={monthName}
+        days={days}
+        date={date}
+        dateFormat={dateFormat}
+        disablePreviousMonths={disablePreviousMonths}
+        disableSubsequentMonths={disableSubsequentMonths}
+        increaseMonth={increaseMonth}
+        decreaseMonth={decreaseMonth}
+        changeMonth={changeMonth}
+        changeYear={changeYear}
+        type={type}
+        size={size}
+      />
+      <Div className={'flex-col items-center flex-1 gap-4'} data-testid="days-wrapper">
+        <Div dir={type === 'gregorian' ? 'ltr' : 'rtl'} className={'grid grid-cols-7 w-full'}>
+          {weekDays.map(name => (
+            <Text typography={'xs'} type={'regular'} color={'black'} key={name}>{name}</Text>
+          ))}
+        </Div>
+        <Divider color={'control'}/>
+        <Div className={'flex-col w-full gap-y-4'}>
+          {weeks.map((week, idx) => {
+            return (
+              <Div dir={type === 'gregorian' ? 'ltr' : 'rtl'} className={'grid grid-flow-col grid-cols-7 w-full'} data-testid="days" key={`rdp-weeks-${idx}`}>
+                {week.map((day: IDays, id: any) => {
+                  return (
+                    <Day
+                      key={type === 'gregorian' ? day.gregorianDate : day.jalaliDate}
+                      passedDay={disablePreviousDays && (type === 'gregorian' ? day.gregorianDate : day.jalaliDate) < dates}
+                      comingDay={disableSubsequentDays && (type === 'gregorian' ? day.gregorianDate : day.jalaliDate) > dates}
+                      holidays={holidays && holidays.indexOf(day.gregorianDate) !== -1}
+                      data-testid={`day-${idx * 7 + id + 1}`}
+                      data-fadate={`${type === 'gregorian' ? day.gregorianDate : day.jalaliDate}`}
+                      disabledDay={week.length === 7 && id === 6}
+                      selectedDay={selectedDay === (type === 'gregorian' ? day.gregorianDate : day.jalaliDate)}
+                      selected={
+                        variant === 'simple' ? (selected === day.jalaliDate || selected === day.gregorianDate)
+                          : (rangeDate.start?.jalaliDate === day.jalaliDate || rangeDate.start?.gregorianDate === day.gregorianDate) ||
+                          (rangeDate.end?.jalaliDate === day.jalaliDate || rangeDate.end?.gregorianDate === day.gregorianDate)
+                      }
+                      isRange={rangeDates.indexOf(day.gregorianDate) !== -1}
+                      startRange={type === 'jalali'
+                        ? rangeDate.start?.jalaliDate === day.jalaliDate || rangeDate.start?.gregorianDate === day.gregorianDate
+                        : rangeDate.end?.jalaliDate === day.jalaliDate || rangeDate.end?.gregorianDate === day.gregorianDate
+                      }
+                      endRange={type === 'jalali'
+                        ? rangeDate.end?.jalaliDate === day.jalaliDate || rangeDate.end?.gregorianDate === day.gregorianDate
+                        : rangeDate.start?.jalaliDate === day.jalaliDate || rangeDate.start?.gregorianDate === day.gregorianDate
+                      }
+                      handleDay={variant === 'simple' ? () => handleDayClick(day) : () => handleRangeClick(day)}
+                      size={size}
+                      {...boolDataset(day.disabled)}>
+                      {!day.disabled ? fa(day.day) : null}
+                    </Day>
+                  );
+                })}
+              </Div>
+            );
+          })}
+        </Div>
+      </Div>
+    </Div>
+  );
+};
+
+Days.defaultProps = {
+  monthName: '',
+  disableDays: [],
+};
+
+export default Days;

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

@@ -0,0 +1,27 @@
+export interface DaysHeadProps {
+  monthName: string;
+
+  increaseMonth?: () => void;
+
+  decreaseMonth?: () => void;
+
+  year: string;
+
+  disablePreviousMonths: boolean;
+
+  disableSubsequentMonths: boolean;
+
+  days: any;
+
+  date: string;
+
+  dateFormat: string;
+
+  type: 'gregorian' | 'jalali'
+
+  changeMonth: (monthIndex: number) => void
+
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'huge'
+
+  changeYear: (year: string) => void
+}

package/calendar/sub-components/days-head/days-head.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { DaysHeadProps } from './days-head.props';
+import { Button, Div, Text, Popper, PopperContent, PopperHandler, TextField } from '@pezeshk-book/ui-kit';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../icons';
+import DateObject from 'react-date-object';
+import persian from 'react-date-object/calendars/persian';
+import gregorian from 'react-date-object/calendars/gregorian';
+import { useState } from 'react';
+import classNames from '../../../utils/class-names';
+import { gregorianMonths, jalaliMonths } from '../../config/months';
+import { persianToEnglish } from '../../../utils/persian-to-english-number';
+
+const DaysHead = ({ decreaseMonth, increaseMonth, monthName, year, disablePreviousMonths, disableSubsequentMonths, days, date, dateFormat, type, changeMonth, size = 'medium', changeYear }: DaysHeadProps) => {
+  const [monthPopper, setMonthPopper] = useState<boolean>(false);
+  const [yearPopper, setYearPopper] = useState<boolean>(false);
+
+  const [selectedYear, setSelectedYear] = useState<string>('');
+
+  const handleMonthPoppers = () => {
+    setMonthPopper(!monthPopper);
+  };
+
+  const handleYearPoppers = () => {
+    setYearPopper(!yearPopper);
+  };
+
+  const handleSelectMonth = (value: number) => {
+    changeMonth(value);
+    handleMonthPoppers();
+  };
+
+  const handleYearValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedYear(e.target.value);
+  };
+
+  const handleChangeYear = () => {
+    changeYear(persianToEnglish(selectedYear));
+    handleYearPoppers();
+    handleMonthPoppers();
+  };
+
+  const comparedFromCurrentMonth = (amount: number): boolean => {
+    const sideDatesMonth = new DateObject({ date: date, calendar: type === 'gregorian' ? gregorian : persian }).add(amount, 'month').setDay(31).format(dateFormat);
+    const lastDaySideMonthCalendarShow = new DateObject(type === 'gregorian' ? { date: days.at(-1).gregorianDate, calendar: gregorian } : { date: days.at(-1).jalaliDate, calendar: persian }).add(amount, 'month').setDay(31).format(dateFormat);
+
+    return sideDatesMonth === lastDaySideMonthCalendarShow;
+  };
+
+  return (
+    <Div className={'justify-center items-center bg-white w-full self-center mb-5'}>
+      <Div className={'w-full items-center justify-between h-12'}>
+        <Button ariaLabel={'previousMonth'} variant={'text'} size={'small'} color={'control'} className={'flex items-center'} onClick={decreaseMonth} shape={'square'} disabled={disablePreviousMonths && comparedFromCurrentMonth(-1)}>
+          <Div className={'h-3 w-2.5 relative'}>
+            <ArrowRightIcon/>
+          </Div>
+        </Button>
+        <Div className={'flex items-center gap-2'}>
+          <Popper
+            handlePopper={handleMonthPoppers}
+            showPopper={monthPopper}
+            position={'bottom'}
+            className={'flex-1 z-20'}
+          >
+            <PopperHandler>
+              <Text className={'cursor-pointer'} color={'grey.900'} type={'bold'} typography={'lg'}>{monthName}</Text>
+            </PopperHandler>
+            <PopperContent className={'shadow-xl mr-10 md:mr-14'}>
+              <Div className={classNames(
+                'bg-white p-2 md:w-48 w-40 items-center justify-center',
+                size === 'medium' && 'w-56',
+                size === 'large' && 'w-64',
+                size === 'huge' && 'w-72',
+              )}>
+                {type === 'gregorian' ? (
+                  <Div className={'grid grid-cols-3 gap-8 justify-between'}>
+                    {gregorianMonths.map(month => (
+                      <Button className={'!px-0'} onClick={() => handleSelectMonth(month.value)} variant={'text'} size={size}>{month.name}</Button>
+                    ))}
+                  </Div>
+                ) : (
+                  <Div className={'grid grid-cols-3 gap-2'}>
+                    {jalaliMonths.map(month => (
+                      <Button className={'!px-0'} onClick={() => handleSelectMonth(month.value)} variant={'text'} size={size}>{month.name}</Button>
+                    ))}
+                  </Div>
+                )}
+              </Div>
+            </PopperContent>
+          </Popper>
+          <Popper
+            handlePopper={handleYearPoppers}
+            showPopper={yearPopper}
+            position={'bottom'}
+            className={'flex-1 z-20'}
+          >
+            <PopperHandler>
+              <Text className={'cursor-pointer'} color={'grey.900'} type={'bold'} typography={'lg'}>{year}</Text>
+            </PopperHandler>
+            <PopperContent className={'shadow-xl md:ml-10 ml-8 rounded-lg'}>
+              <Div className={classNames(
+                'bg-white px-2 py-8 md:w-48 w-40 items-center justify-center flex-col gap-4 rounded-lg',
+                size === 'medium' && 'w-56',
+                size === 'large' && 'w-64',
+                size === 'huge' && 'w-72',
+              )}>
+                <TextField value={selectedYear} onChange={handleYearValue} label={'سال'} size={size === 'tiny' || size === 'small' ? 'tiny' : 'medium'} />
+                <Button onClick={handleChangeYear} size={size === 'tiny' || size === 'small' ? 'tiny' : 'medium'}>برو به سال</Button>
+              </Div>
+            </PopperContent>
+          </Popper>
+        </Div>
+        <Button ariaLabel={'nextMonth'} variant={'text'} size={'small'} color={'control'} className={'flex items-center'} onClick={increaseMonth} shape={'square'} disabled={disableSubsequentMonths && comparedFromCurrentMonth(1)}>
+          <Div className={'h-3 w-2.5 relative'}>
+            <ArrowLeftIcon/>
+          </Div>
+        </Button>
+      </Div>
+    </Div>
+  );
+};
+
+export default DaysHead;

package/countdown-timer/countdown.props.ts

@@ -0,0 +1,18 @@
+import { TextProps } from '@pezeshk-book/ui-kit/text/text.props';
+
+export interface CountdownProps {
+
+  sec: number
+
+  parentCallback?: any
+
+  reset?: boolean
+
+  variant?: 'contained' | 'outlined'
+
+  className?: string
+
+  textProps?: Omit<TextProps, 'children'>
+
+  initialColor?: 'primary' | 'success'
+}

package/countdown-timer/countdown.tsx

@@ -0,0 +1,78 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { CountdownProps } from './countdown.props';
+import { classNames, Div, Text } from '@pezeshk-book/ui-kit';
+
+const CountDown = ({ sec, parentCallback, reset, variant = 'contained', className, textProps, initialColor = 'primary' }: CountdownProps) => {
+  const [timerSec, setTimerSec] = useState<number>(sec);
+  const [timerMin, setTimerMin] = useState<number>(0);
+  const [timerHour, setTimerHour] = useState<number>(0);
+  const [color, setColor] = useState<'success' | 'warning' | 'danger' | 'primary'>(initialColor);
+
+  useEffect(() => {
+    if (sec >= 3600) {
+      setTimerHour(Math.floor(sec / 3600));
+      setTimerMin(Math.floor((sec % 3600) / 60));
+      setTimerSec(Math.floor((sec % 3600) % 60));
+    } else {
+      setTimerMin(Math.floor(sec / 60));
+      setTimerSec(Math.floor(sec % 60));
+    }
+  }, [reset]);
+
+  const id = useRef(null);
+  const clear = () => {
+    // @ts-ignore
+    clearInterval(id.current);
+  };
+
+  useEffect(() => {
+    // @ts-ignore
+    id.current = setInterval(() => {
+      setTimerSec((time) => time - 1);
+    }, 1000);
+    return () => clear();
+  }, [reset]);
+
+  useEffect(() => {
+    if (timerSec === 0 && timerMin === 0 && timerHour === 0) {
+      parentCallback(true);
+      clear();
+    } else if (timerSec === -1 && timerMin !== 0) {
+      setTimerSec(59);
+      setTimerMin((time) => time - 1);
+    } else if (timerSec === -1 && timerMin === 0 && timerHour !== 0) {
+      setTimerSec(59);
+      setTimerMin(59);
+      setTimerHour((time) => time - 1);
+    }
+    const remainingTime = (timerSec + timerMin * 60 + timerHour * 3600);
+    setColor((remainingTime <= (sec / 10) ? 'danger' : (remainingTime <= (sec * 30 / 100) ? 'warning' : initialColor)));
+  }, [timerSec]);
+
+  return (
+    <Div dir={'rtl'} className={classNames(
+      'items-center justify-center h-full rounded',
+      variant === 'contained' ? 'bg-primary' : 'bg-transparent',
+      className,
+    )}>
+      <Text typography={'base'} color={variant === 'contained' ? 'white' : color} {...textProps}>
+        {timerSec < 10 ? '0' + timerSec : timerSec}
+      </Text>
+      <Text className={'mx-1'} typography={'base'} color={variant === 'contained' ? 'white' : color} {...textProps}>:</Text>
+      <Text typography={'base'} color={variant === 'contained' ? 'white' : color} {...textProps}>
+        {timerMin < 10 ? '0' + timerMin : timerMin}
+      </Text>
+      {sec >= 3600
+        ? <>
+          <Text className={'mx-1'} typography={'base'} color={variant === 'contained' ? 'white' : color} {...textProps}>:</Text>
+          <Text typography={'base'} color={variant === 'contained' ? 'white' : color} {...textProps}>
+            {timerHour < 10 ? '0' + timerHour : timerHour}
+          </Text>
+        </> : null
+      }
+    </Div>
+  );
+};
+
+export default CountDown;

package/countdown-timer/index.ts

@@ -0,0 +1,3 @@
+import CountDown from './countdown';
+
+export default CountDown;

package/data-table/data-table.props.ts

@@ -0,0 +1,7 @@
+import { DefaultDataTableProps } from './default/default-data-table.props';
+import { SimpleDataTableProps } from './simple/simple-data-table.props';
+
+export type TableVariant = 'simple' | 'default';
+export type DataTableProps<T extends TableVariant> = T extends 'simple' ?
+  { variant: 'simple' } & SimpleDataTableProps :
+  { variant: 'default' } & DefaultDataTableProps;

package/data-table/data-table.tsx

@@ -0,0 +1,15 @@
+import { DataTableProps, TableVariant } from './data-table.props';
+import DefaultDataTable from './default';
+import SimpleDataTable from './simple';
+import { DefaultDataTableProps } from './default/default-data-table.props';
+import { SimpleDataTableProps } from './simple/simple-data-table.props';
+
+const DataTable = <T extends TableVariant>(props: DataTableProps<T>) => {
+  if (props.variant === 'default') {
+    return <DefaultDataTable {...(props as DefaultDataTableProps)} />;
+  }
+
+  return <SimpleDataTable {...(props as SimpleDataTableProps)} />;
+};
+
+export default DataTable;

package/data-table/default/default-data-table.props.ts

@@ -0,0 +1,47 @@
+import { ColumnDef } from '@tanstack/react-table';
+
+export interface DefaultDataTableProps {
+  data: Array<any>
+
+  header: any
+
+  column: Array<ColumnDef<any>>
+
+  mobileColumns?: Array<string>
+
+  expandable?: boolean
+
+  expandedComponent?: any
+
+  serverSideSorting?: (sort: any) => void
+
+  isLoading?: boolean
+
+  getCurrentPage: (n: number) => void
+
+  lastPage: number
+
+  perPage: number
+
+  currentPage: number
+
+  total: number
+
+  nextPage: any
+
+  previousPage: any
+
+  getLimit?: (event: string) => void
+
+  columnOrder?: boolean
+
+  updateData?: (value: string, info?: string | object) => void
+
+  select?: boolean
+
+  selectedRows?: (rows: Array<ColumnDef<any>>) => void
+
+  expandAll?: boolean
+
+  visitedRows?: Array<number>
+}