@pezeshk-book/modules 0.2.8 → 0.2.10

package/data-table/default/default-data-table.tsx

@@ -1,427 +0,0 @@
-import { Fragment, useEffect, useState } from 'react';
-import { Button, Checkbox, classNames, Div, FormControlLabel, LoadingIndicator, Skeleton, Text } from '@pezeshk-book/ui-kit';
-import Pagination from '../../pagination';
-import { DefaultDataTableProps } from './default-data-table.props';
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getSortedRowModel,
-  RowData,
-  SortingState,
-  useReactTable,
-} from '@tanstack/react-table';
-import useWindowDimensions from '../hooks/use-window-dimensions';
-import { ArrowDownIcon, AddIcon, SortIcon } from '../icons';
-import { AnimatePresence, motion } from 'motion/react';
-
-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 DefaultDataTable = (
-  {
-    header,
-    data,
-    column,
-    mobileColumns,
-    expandable = false,
-    expandedComponent,
-    serverSideSorting,
-    isLoading = false,
-    getCurrentPage,
-    lastPage,
-    perPage,
-    currentPage,
-    total,
-    previousPage,
-    nextPage,
-    getLimit,
-    columnOrder = false,
-    updateData,
-    select,
-    selectedRows,
-    expandAll = false,
-    visitedRows = [],
-  }: DefaultDataTableProps) => {
-  const [rowSelection, setRowSelection] = useState({});
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [scrollPosition, setScrollPosition] = useState(0);
-  const [showGoTop, setShowGoTop] = useState(false);
-  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,
-    {
-      id: 'expander',
-      accessorKey: 'expander',
-      header: () => null,
-      cell: ({ row }) => {
-        return row.getCanExpand() ? (
-          <Button
-            className={'!p-0'}
-            variant={'text'}
-            size={'tiny'}
-            {...{
-              onClick: row.getToggleExpandedHandler(),
-              style: { cursor: 'pointer' },
-            }}
-          >
-            <ArrowDownIcon
-              className={classNames(
-                'transition-all duration-300',
-                row.getIsExpanded() ? 'rotate-180' : '')}
-            />
-          </Button>
-        ) : null;
-      },
-      enableSorting: false,
-    },
-  ];
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getRowCanExpand: () => true,
-    getExpandedRowModel: getExpandedRowModel(),
-    state: {
-      columnVisibility,
-      rowSelection,
-      sorting,
-    },
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    manualSorting: !!serverSideSorting,
-    meta: {
-      updateData: (value, info) => {
-        if (updateData) {
-          updateData(value, info);
-        }
-      },
-    },
-  });
-
-  useEffect(() => {
-    if (selectedRows) {
-      selectedRows(table.getSelectedRowModel().rows.map((row) => {
-        return row.original;
-      }));
-    }
-  }, [rowSelection]);
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleVisibleButton);
-  });
-
-  useEffect(() => {
-    if (serverSideSorting && sorting.length > 0) {
-      serverSideSorting(sorting);
-    }
-  }, [sorting]);
-
-  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, expander: expandable, select: select });
-    } else {
-      columns.forEach((value) => {
-        if (value.id) {
-          obj[value.id] = true;
-        }
-      });
-      setColumnVisibility({ ...obj, mobileExpander: false, expander: expandable, select: select });
-    }
-  }, [dimensions.width]);
-
-  useEffect(() => {
-    if (expandAll && dimensions.width < 640) {
-      setRowExpander(fillArray(perPage));
-    }
-    if (expandAll && dimensions.width >= 640) {
-      setRowExpander([]);
-    }
-  }, [expandAll, perPage, currentPage, dimensions.width]);
-
-  const handleVisibleButton = () => {
-    const position = window.scrollY;
-    setScrollPosition(position);
-
-    if (scrollPosition > 150) {
-      return setShowGoTop(true);
-    } else if (scrollPosition < 150) {
-      return setShowGoTop(false);
-    }
-  };
-
-  const handleScrollUp = () => {
-    window.scrollTo({ behavior: 'smooth', top: 0 });
-  };
-
-  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={'gap-0 md:gap-4 flex-col md:flex-row'}>
-        {columnOrder && table.getAllLeafColumns().map(column => {
-          if (column.id === 'mobileExpander' || column.id === 'expander') {
-            return null;
-          }
-          return (
-            <FormControlLabel key={column.id} className={'p-2'} label={header[column.id]}>
-              <Checkbox checked={column.getIsVisible()} onChange={column.getToggleVisibilityHandler()}/>
-            </FormControlLabel>
-          );
-        })}
-      </Div>
-      <Div className={'bg-white md: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-[9]'}>
-            {table.getHeaderGroups().map(headerGroup => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map(header => (
-                  <th
-                    className={'hover:cursor-pointer'}
-                    onClick={header.column.getToggleSortingHandler()}
-                    key={header.id}>
-                    <Div className={'justify-center items-center gap-1'}>
-                      {header.column.getCanSort() ? (
-                        <Div className={'text-control-800'}>
-                          <SortIcon direction={header.column.getIsSorted() as string}/>
-                        </Div>
-                      ) : null}
-                      <Text color={header.column.getIsSorted() ? 'primary' : '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(15)].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, index) => {
-                return (
-                  <Fragment key={row.id}>
-                    {/* @ts-ignore */}
-                    <AnimatePresence mode="wait">
-                      <motion.tr
-                        key={row ? row.id : 'empty'}
-                        initial={{ y: 100, opacity: 0 }}
-                        animate={{ y: 0, opacity: 1 }}
-                        exit={{ y: -100, opacity: 0 }}
-                        transition={{ duration: 0.5, delay: index * 0.01 }}
-                        className={classNames('h-16 hover:bg-primary-50',
-                          row.getIsSelected() && 'bg-slate-200',
-                          visitedRows?.indexOf(row.index) !== -1 ? 'bg-slate-100' : '')}>
-                        {row.getVisibleCells().map(cell => {
-                          return (
-                            <td className={'px-1'} key={cell.id}>
-                              <Div className={'flex-col items-center'}>
-                                {
-                                  flexRender(
-                                    cell.column.columnDef.cell,
-                                    cell.getContext(),
-                                  )
-                                }
-                              </Div>
-                            </td>
-                          );
-                        })}
-                      </motion.tr>
-                    </AnimatePresence>
-                    {/* @ts-ignore */}
-                    <AnimatePresence>
-                      {row.getIsExpanded() && (
-                        <motion.tr
-                          initial={{ height: 0, opacity: 0 }}
-                          animate={{ height: 'auto', opacity: 1 }}
-                          exit={{ height: 0, opacity: 0 }}
-                          transition={{ duration: 0.5, ease: 'easeInOut' }}
-                        >
-                          <td colSpan={row.getVisibleCells().length}>
-                            <motion.div
-                              initial={{ height: 0, opacity: 0 }}
-                              animate={{ height: row.getIsExpanded() ? 'auto' : 0, opacity: 1 }}
-                              exit={{ height: 0, opacity: 0 }}
-                              transition={{ duration: 0.5, ease: 'easeInOut' }}
-                              className={'flex flex-col overflow-hidden'}>
-                              {expandedComponent(row.original)}
-                            </motion.div>
-                          </td>
-                        </motion.tr>
-                      )}
-                    </AnimatePresence>
-                    {/* @ts-ignore */}
-                    <AnimatePresence>
-                      {rowExpander.indexOf(row.index) !== -1 && (
-                        <motion.tr
-                          initial={{ height: 0, opacity: 0 }}
-                          animate={{ height: 'auto', opacity: 1 }}
-                          exit={{ height: 0, opacity: 0 }}
-                          transition={{ duration: 0.5, ease: 'easeInOut' }}
-                          className={classNames('bg-primary-50')}>
-                          <td colSpan={row.getVisibleCells().length}>
-                            <motion.div
-                              initial={{ height: 0, opacity: 0 }}
-                              animate={{ height: row.getVisibleCells().length ? 'auto' : 0, opacity: 1 }}
-                              exit={{ height: 0, opacity: 0 }}
-                              transition={{ duration: 0.5, ease: 'easeInOut' }}
-                              className={'flex flex-col overflow-hidden'}>
-                              {row.getAllCells().map((mobileCell) => {
-                                if (!mobileCell.column.getIsVisible() && mobileCell.column.id !== 'expander') {
-                                  return (
-                                    <Div
-                                      key={mobileCell.id}
-                                      className={'gap-2 p-2 items-start'}>
-                                      {/*@ts-ignore*/}
-                                      <Text typography={'sm'} type={'bold'}>{header[mobileCell.column.id]}:</Text>
-                                      {flexRender(
-                                        mobileCell.column.columnDef.cell,
-                                        mobileCell.getContext(),
-                                      )}
-                                    </Div>
-                                  );
-                                }
-                                return null;
-                              })}
-                            </motion.div>
-                          </td>
-                        </motion.tr>
-                      )}
-                    </AnimatePresence>
-                  </Fragment>
-                );
-              })}
-            </tbody>
-          )}
-        </table>
-        <Button onClick={handleScrollUp} shape={'square'} rounded={'full'} className={classNames('rotate-180 sticky !p-0 bottom-1 self-center duration-500 transition',
-          showGoTop ? 'opacity-100 translate-y-0 !h-auto !min-h-12' : 'translate-y-full opacity-0 !h-0 !min-h-[0px]',
-        )}>
-          <ArrowDownIcon/>
-        </Button>
-        {!isLoading && data.length ? (
-          <Div className={'mt-4 bg-control-50 md:h-14 py-2 md:py-0 justify-center items-center rounded-b-xl flex-col'}>
-            <Pagination
-              color={'primary'}
-              variant={'filled'}
-              getCurrentPage={getCurrentPage}
-              isLoading={isLoading}
-              lastPage={lastPage}
-              perPage={perPage}
-              currentPage={currentPage}
-              total={total}
-              nextPage={nextPage}
-              previousPage={previousPage}
-              getLimit={getLimit}
-            />
-          </Div>
-        ) : null}
-      </Div>
-    </Div>
-  );
-};
-export default DefaultDataTable;
-

package/data-table/default/index.ts

@@ -1,3 +0,0 @@
-import DefaultDataTable from './default-data-table';
-
-export default DefaultDataTable;

package/data-table/hooks/use-window-dimensions.tsx

@@ -1,33 +0,0 @@
-'use clients';
-import { useState, useEffect } from 'react';
-import { useDebouncedCallback } from 'use-debounce';
-const useWindowDimensions = () => {
-  const [windowDimensions, setWindowDimensions] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  });
-
-  useEffect(() => {
-    setWindowDimensions({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-  }, []);
-
-  const handleResize = useDebouncedCallback(() => {
-    setWindowDimensions({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-  }, 500);
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return windowDimensions;
-};
-
-export default useWindowDimensions;

package/data-table/icons/add.tsx

@@ -1,10 +0,0 @@
-const AddIcon = ({ className }: {className?: string}) => {
-  return (
-    <svg className={className} width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <path d='M8 12H16' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
-      <path d='M12 16V8' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
-    </svg>
-  );
-};
-
-export default AddIcon;

package/data-table/icons/arrow-down.tsx

@@ -1,11 +0,0 @@
-const ArrowDownIcon = ({ fill = 'none', className = 'h-6 w-6' }: any) => {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill={fill} className={className} xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd"
-        d="M4.4107 6.91073C4.73614 6.5853 5.26378 6.5853 5.58922 6.91073L9.99996 11.3215L14.4107 6.91074C14.7361 6.5853 15.2638 6.5853 15.5892 6.91074C15.9147 7.23617 15.9147 7.76381 15.5892 8.08925L10.5892 13.0892C10.2638 13.4147 9.73614 13.4147 9.4107 13.0892L4.4107 8.08925C4.08527 7.76381 4.08527 7.23617 4.4107 6.91073Z"
-        fill="currentColor"/>
-    </svg>
-  );
-};
-
-export default ArrowDownIcon;

package/data-table/icons/index.ts

@@ -1,9 +0,0 @@
-import AddIcon from './add';
-import SortIcon from './sort';
-import ArrowDownIcon from './arrow-down';
-
-export {
-  AddIcon,
-  ArrowDownIcon,
-  SortIcon,
-};

package/data-table/icons/sort.tsx

@@ -1,16 +0,0 @@
-const SortIcon = ({ direction } : { direction: string }) => {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g>
-        <g>
-          <path d="M9.00999 20.5L3.98999 15.49" stroke={direction === 'desc' ? 'currentColor' : '#A8A8A8'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
-          <path d="M9.01001 3.5V20.5" stroke={direction === 'desc' ? 'currentColor' : '#A8A8A8'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
-          <path d="M14.99 3.5L20.01 8.51" stroke={direction === 'asc' ? 'currentColor' : '#A8A8A8'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
-          <path d="M14.99 20.5V3.5" stroke={direction === 'asc' ? 'currentColor' : '#A8A8A8'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
-        </g>
-      </g>
-    </svg>
-  );
-};
-
-export default SortIcon;

package/data-table/index.ts

@@ -1,3 +0,0 @@
-import DataTable from './data-table';
-
-export default DataTable;

package/data-table/simple/index.ts

@@ -1,3 +0,0 @@
-import SimpleDataTable from './simple-data-table';
-
-export default SimpleDataTable;

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

@@ -1,23 +0,0 @@
-import { ColumnDef } from '@tanstack/react-table';
-
-export interface SimpleDataTableProps {
-  data: Array<any>
-
-  header: any
-
-  column: Array<ColumnDef<any>>
-
-  mobileColumns?: Array<string>
-
-  isLoading?: boolean
-
-  updateData?: (value: string, info?: string | object) => void
-
-  select?: boolean
-
-  selectedRows?: (rows: Array<ColumnDef<any>>) => void
-
-  expandAll?: boolean
-
-  visitedRows?: Array<number>
-}