@pezeshk-book/modules 0.2.8 → 0.2.10

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
-}

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

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

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

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

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

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

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

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

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

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

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