@pezeshk-book/modules 0.2.5 → 0.2.7

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

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

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

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

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

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

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

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

package/data-table/icons/sort.tsx

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

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

package/data-table/simple/index.ts

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

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

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