@pezeshk-book/modules 0.2.8 → 0.2.9

package/data-table/simple/simple-data-table.tsx

@@ -1,258 +0,0 @@
-import { Fragment, useEffect, useState } from 'react';
-import { ColumnDef, flexRender, getCoreRowModel, RowData, useReactTable } from '@tanstack/react-table';
-import useWindowDimensions from '../hooks/use-window-dimensions';
-import { Button, Checkbox, classNames, Div, LoadingIndicator, Skeleton, Text } from '@pezeshk-book/ui-kit';
-import { AddIcon } from '../icons';
-import { SimpleDataTableProps } from './simple-data-table.props';
-
-declare module '@tanstack/react-table' {
-  // eslint-disable-next-line no-unused-vars
-  interface TableMeta<TData extends RowData> {
-    updateData: (value: string, info?: string | object) => void
-  }
-}
-
-const fillArray = (n: number) => Array.from({ length: n + 1 }, (_, i) => i);
-
-const SimpleDataTable = ( { header,
-  data,
-  column,
-  mobileColumns,
-  isLoading = false,
-  updateData,
-  select,
-  selectedRows,
-  expandAll = false,
-  visitedRows = [],
-} : SimpleDataTableProps) => {
-  const [rowSelection, setRowSelection] = useState({});
-  const [columnVisibility, setColumnVisibility] = useState<any>({});
-  const [rowExpander, setRowExpander] = useState<Array<any>>([]);
-
-  const dimensions = useWindowDimensions();
-
-  const handleMobileExpander = (row: { index: number }) => {
-    if (rowExpander.indexOf(row.index) === -1) {
-      setRowExpander([...rowExpander, row.index]);
-    } else {
-      setRowExpander(value => value.filter(item => item !== row.index));
-    }
-  };
-
-  const columns: ColumnDef<any>[] = [
-    {
-      id: 'mobileExpander',
-      accessorKey: 'mobileExpander',
-      header: () => null,
-      cell: ({ row }) => {
-        return (
-          <Button
-            onClick={() => handleMobileExpander(row)}
-            startAdornment={
-              <AddIcon
-                className={classNames(
-                  'absolute transition-all duration-500',
-                  rowExpander.indexOf(row.index) !== -1 ? 'rotate-[225deg]' : '',
-                )}
-              />
-            }
-            variant={'text'}
-            size={'tiny'}
-            className={'!p-0'}
-          />
-        );
-      },
-      enableSorting: false,
-    },
-    {
-      id: 'select',
-      accessorKey: 'select',
-      header: ({ table }) => {
-        return select ? (
-          <Checkbox
-            size={'small'}
-            indeterminate={table.getIsSomeRowsSelected()}
-            checked={table.getIsAllRowsSelected()}
-            onChange={table.getToggleAllRowsSelectedHandler()}
-          />
-        ) : null;
-      },
-      cell: ({ row }) => {
-        return row.getCanSelect() && select ? (
-          <Checkbox
-            size={'small'}
-            onChange={row.getToggleSelectedHandler()}
-            checked={row.getIsSelected()}
-          />
-        ) : null;
-      },
-      enableSorting: false,
-    },
-    ...column,
-  ];
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    state: {
-      columnVisibility,
-      rowSelection,
-    },
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    meta: {
-      updateData: (value, info) => {
-        if (updateData) {
-          updateData(value, info);
-        }
-      },
-    },
-  });
-  useEffect(() => {
-    if (selectedRows) {
-      selectedRows(table.getSelectedRowModel().rows.map((row) => {
-        return row.original;
-      }));
-    }
-  }, [rowSelection]);
-  useEffect(() => {
-    const obj: any = {};
-    if (dimensions.width < 640) {
-      columns.forEach((value) => {
-        if (value.id) {
-          obj[value.id] = mobileColumns?.includes(value.id);
-        }
-      });
-      setColumnVisibility({ ...obj, mobileExpander: true, select: select });
-    } else {
-      columns.forEach((value) => {
-        if (value.id) {
-          obj[value.id] = true;
-        }
-      });
-      setColumnVisibility({ ...obj, mobileExpander: false, select: select });
-    }
-  }, [dimensions.width]);
-
-  useEffect(() => {
-    if (expandAll && dimensions.width < 640) {
-      setRowExpander(fillArray(data.length));
-    }
-    if (expandAll && dimensions.width >= 640) {
-      setRowExpander([]);
-    }
-  }, [expandAll, dimensions.width]);
-
-  return (
-    <Div className={'w-full flex-col relative'}>
-      {isLoading && data.length > 0 ? (
-        <Div className={'absolute bg-control bg-opacity-25 w-full h-full items-center justify-center z-50 rounded-xl'}>
-          <LoadingIndicator size={'huge'} color={'control'}/>
-        </Div>
-      ) : null}
-      <Div className={'bg-white border w-full border-control-300 border-opacity-50 p-2 rounded-xl max-w-full flex-col relative'}>
-        <table
-          className={'w-full table-auto'}>
-          <thead className={'bg-control-50 h-14 sticky top-0 z-10'}>
-            {table.getHeaderGroups().map(headerGroup => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map(header => (
-                  <th
-                    className={'hover:cursor-pointer'}
-                    key={header.id}>
-                    <Div className={'justify-center items-center gap-1'}>
-                      <Text color={'grey.800'} typography={'sm'} type={'bold'}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                      </Text>
-                    </Div>
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          {isLoading && !data.length ? (
-            <tbody>
-              {[...new Array(5)].map((_, index) => (
-                <tr key={`loadingItem_${index}`} className={'h-16'}>
-                  {table.getFlatHeaders().map(cell => {
-                    return (
-                      <td className={'px-1'} key={cell.id}>
-                        <Skeleton color={'control'} className={'!max-w-full !min-w-full'}/>
-                      </td>
-                    );
-                  })}
-                </tr>
-              ))}
-            </tbody>
-          ) : !isLoading && !data.length ? (
-            <tbody>
-              <tr className={'h-48'}>
-                <td colSpan={table.getFlatHeaders().length}>
-                  <Text typography={'lg'} type={'bold'}>اطلاعاتی برای نمایش وجود ندارد!</Text>
-                </td>
-              </tr>
-            </tbody>
-          ) : (
-            <tbody>
-              {table.getRowModel().rows.map((row) => {
-                return (
-                  <Fragment key={row.id}>
-                    <tr className={classNames('h-16 hover:bg-primary-50',
-                      row.getIsSelected() && 'bg-slate-200',
-                      visitedRows?.indexOf(row.index) !== -1 ? 'bg-slate-300' : '')}>
-                      {row.getVisibleCells().map(cell => {
-                        return (
-                          <td className={'px-1'} key={cell.id}>
-                            {isLoading ? (
-                              <Skeleton color={'control'} className={'!max-w-full !min-w-full'}/>
-                            ) : <Div className={'flex-col items-center'}>
-                              {
-                                flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext(),
-                                )
-                              }
-                            </Div>}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                    {rowExpander.indexOf(row.index) !== -1 && (
-                      <tr className={classNames('bg-primary-50')}>
-                        <td colSpan={row.getVisibleCells().length}>
-                          <Div className={'flex-col'}>
-                            {row.getAllCells().map((mobileCell) => {
-                              if (mobileCell.column.getIsVisible() || mobileCell.column.id === 'expander') {
-                                return null;
-                              }
-                              return (
-                                <Div key={mobileCell.id} className={'gap-2 p-2 items-start'}>
-                                  <Text typography={'sm'} type={'bold'}>{header[mobileCell.column.id]}:</Text>
-                                  {flexRender(
-                                    mobileCell.column.columnDef.cell,
-                                    mobileCell.getContext(),
-                                  )}
-                                </Div>
-                              );
-                            })}
-                          </Div>
-                        </td>
-                      </tr>
-                    )}
-                  </Fragment>
-                );
-              })}
-            </tbody>
-          )}
-        </table>
-      </Div>
-    </Div>
-  );
-};
-
-export default SimpleDataTable;

package/index.ts

@@ -1,13 +0,0 @@
-import Slider from './slider/slider';
-import Calendar from './calendar/calendar';
-import Pagination from './pagination/pagination';
-import CountDown from './countdown-timer/countdown';
-import DataTable from './data-table/data-table';
-
-export {
-  Slider,
-  Calendar,
-  Pagination,
-  CountDown,
-  DataTable,
-};

package/pagination/icons/arrow-Right.tsx

@@ -1,22 +0,0 @@
-const ArrowRight = ({ fill = 'none', className = 'h-3 w-3' }: {fill?: string, className?: string}) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="256"
-      height="256"
-      viewBox="0 0 256 256"
-      fill={fill}
-      className={className}
-    >
-      <path
-        fill={'currentColor'}
-        strokeMiterlimit="10"
-        strokeWidth="0"
-        d="M24.64 90L20.36 85.72 61.08 45 20.36 4.28 24.64 0 69.64 45z"
-        transform="matrix(2.81 0 0 2.81 1.407 1.407)"
-      />
-    </svg>
-  );
-};
-
-export default ArrowRight;

package/pagination/icons/arrow-left.tsx

@@ -1,22 +0,0 @@
-const ArrowLeft = ({ fill = 'none', className = 'h-3 w-3' }: {fill?: string, className?: string}) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="256"
-      height="256"
-      viewBox="0 0 256 256"
-      className={className}
-      fill={fill}
-    >
-      <path
-        fill={'currentColor'}
-        strokeMiterlimit="10"
-        strokeWidth="0"
-        d="M65.36 0L69.64 4.28 28.92 45 69.64 85.72 65.36 90 20.36 45z"
-        transform="matrix(2.81 0 0 2.81 1.407 1.407)"
-      />
-    </svg>
-  );
-};
-
-export default ArrowLeft;

package/pagination/icons/index.ts

@@ -1,7 +0,0 @@
-import ArrowLeft from './arrow-left';
-import ArrowRight from './arrow-Right';
-
-export {
-  ArrowRight,
-  ArrowLeft,
-};

package/pagination/index.ts

@@ -1,3 +0,0 @@
-import Pagination from './pagination';
-
-export default Pagination;

package/pagination/pagination.props.ts

@@ -1,33 +0,0 @@
-import { Colors } from '@pezeshk-book/ui-kit/types';
-
-export interface PaginationProps {
-  currentPage?: number
-
-  perPage: number
-
-  lastPage: number
-
-  getCurrentPage: (number: number) => void
-
-  getLimit?: (event: string) => void
-
-  previousPage?: () => void
-
-  nextPage?: () => void
-
-  isLoading: boolean
-
-  total?: number
-
-  hasLimit?: boolean
-
-  showTotal?: boolean
-
-  color?: Colors
-
-  variant?: 'outlined' | 'filled' | 'text'
-
-  rounded?: 'tiny' | 'small' | 'medium' | 'large' | 'huge' | 'full' | 'none'
-
-  type?: 'simple' | 'default'
-}

package/pagination/pagination.tsx

@@ -1,135 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Button, Div, Text, Select } from '@pezeshk-book/ui-kit';
-import { ArrowLeft, ArrowRight } from './icons';
-import { PaginationProps } from './pagination.props';
-import usePagination from './use-pagination';
-
-const Limits = [
-  {
-    id: '10',
-    count: 10,
-  },
-  {
-    id: '25',
-    count: 25,
-  },
-  {
-    id: '50',
-    count: 50,
-  },
-  {
-    id: '75',
-    count: 75,
-  },
-  {
-    id: '100',
-    count: 100,
-  },
-];
-export const Pagination = ({ isLoading, currentPage = 1, lastPage, getCurrentPage, previousPage, nextPage, perPage = 10, total = 0, getLimit, hasLimit = true, showTotal = true, color = 'control', variant = 'outlined', rounded = 'medium', type = 'default' }: PaginationProps) => {
-  const pageNumbers = usePagination(currentPage, lastPage, type);
-  const [limit, setLimit] = useState(perPage.toString());
-
-  useEffect(() => {
-    const position = Limits.find((value) => {
-      return perPage <= value.count;
-    });
-    setLimit(prevState => position?.id ? position?.id : prevState);
-  }, [perPage]);
-
-  const limitHandler = (event: string) => {
-    setLimit(event);
-    if (getLimit && hasLimit) {
-      getLimit(event);
-    }
-  };
-
-  return (
-    <Div className={'flex-col-reverse sm:flex-row w-full justify-between items-center gap-y-2 px-4'}>
-      <Div className={'flex justify-start items-center'}>
-        <Div className={'items-center gap-6 justify-start md:absolute'}>
-          {showTotal ? (
-            <Text color={'grey.500'} className={'text-ellipsis whitespace-nowrap'}>
-              {`نمایش ${(currentPage - 1) * parseInt(limit) + 1} تا ${lastPage === currentPage ? total : parseInt(limit) * currentPage} از ${total}`}
-            </Text>
-          ) : null}
-          {hasLimit ? (
-            <Div className={'w-20'}>
-              <Select
-                disabled={isLoading}
-                id={'id'}
-                size={'small'}
-                value={limit}
-                onChange={limitHandler}
-                text={'count'}
-                optionsList={Limits}
-                variant={'outlined'}
-                color={'control'}
-              />
-            </Div>
-          ) : null}
-        </Div>
-      </Div>
-      <ul dir={'ltr'} className={'flex flex-row gap-x-0.5 md:gap-x-2 items-center md:justify-start justify-center'}>
-        <li>
-          <Button
-            disabled={currentPage === 1 || isLoading}
-            variant={variant}
-            shape={'square'}
-            size={'small'}
-            onClick={previousPage}
-            ariaLabel={'previousPage'}
-            loading={isLoading}
-            color={color}
-            rounded={rounded}
-            className={'!px-0'}>
-            <ArrowLeft/>
-          </Button>
-        </li>
-        { type === 'default' ? pageNumbers.map((number) => {
-          return (
-            <li key={`pagination_${number}`}>
-              <Button
-                disabled={number === currentPage || number === '...' || isLoading}
-                variant={variant}
-                shape={'square'}
-                rounded={rounded}
-                size={'small'}
-                color={color}
-                className={'!px-0'}
-                ariaLabel={number.toString()}
-                onClick={() => getCurrentPage(+number)}>
-                {number}
-              </Button>
-            </li>
-          );
-        }) : null}
-        <li>
-          <Button
-            disabled={lastPage === currentPage || isLoading}
-            variant={variant}
-            shape={'square'}
-            size={'small'}
-            rounded={rounded}
-            onClick={nextPage}
-            ariaLabel={'nextPage'}
-            loading={isLoading}
-            color={color}
-            className={'!px-0'}>
-            <ArrowRight/>
-          </Button>
-        </li>
-        {type === 'simple' ? (
-          <Div className={'gap-2'}>
-            <Text typography={'sm'}>{currentPage} / {lastPage}</Text>
-            <Text typography={'sm'}>صفحه</Text>
-          </Div>
-        ) : null}
-      </ul>
-    </Div>
-  );
-};
-
-export default Pagination;

package/pagination/use-pagination.ts

@@ -1,49 +0,0 @@
-const usePagination = (currentPage: number, lastPage: number, type: 'simple' | 'default') => {
-  if (type === 'simple') {
-    return [];
-  }
-  let situation = 'NONE';
-  if (lastPage > 7) {
-    if ((currentPage <= 4)) {
-      situation = 'BEGINNING';
-    } else if (lastPage - currentPage <= 3) {
-      situation = 'END';
-    } else if (currentPage > 4 || lastPage - currentPage > 3) {
-      situation = 'MIDDLE';
-    }
-  }
-
-  const temp: Array<number | string> = [];
-
-  switch (situation) {
-    case 'BEGINNING': {
-      for (let i = 1; i <= 5; i++) {
-        temp.push(i);
-      }
-      temp.push('...', lastPage);
-      return temp;
-    }
-
-    case 'MIDDLE': {
-      temp.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', lastPage);
-      return temp;
-    }
-
-    case 'END': {
-      for (let i = lastPage; i > (lastPage - 5); i--) {
-        temp.push(i);
-      }
-      temp.push('...', 1);
-      return temp.reverse();
-    }
-
-    default : {
-      for (let i = 1; i <= lastPage; i++) {
-        temp.push(i);
-      }
-      return temp;
-    }
-  }
-};
-
-export default usePagination;

package/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

package/slider/index.ts

@@ -1,3 +0,0 @@
-import Slider from './slider';
-
-export default Slider;

package/slider/slider.props.ts

@@ -1,39 +0,0 @@
-import { Colors } from '@pezeshk-book/ui-kit/types';
-
-export interface SliderProps {
-  children: any
-
-  delay?: number
-
-  spaceBetween?: number
-
-  slides?: number
-
-  tabletSlides?: number
-
-  mobileSlides?: number
-
-  infiniteLoop?: boolean
-
-  pauseOnMouseOver?: boolean
-
-  autoMove?: boolean
-
-  indicator?: boolean
-
-  indicatorActiveColor?: Colors
-
-  navigation?: boolean
-
-  nextNavigation?: (onClick: any) => any
-
-  prevNavigation?: (onClick: any) => any
-
-  direction?: 'ltr' | 'rtl'
-
-  rows?: number
-
-  navigationColor?: Colors
-
-  indicatorClassName?: string
-}