ctms-common-components 1.0.1

package/src/components/custom-Table/index.jsx

@@ -0,0 +1,340 @@
+/* eslint-disable no-return-assign */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
+import React, {
+  useEffect, useState, useMemo, useRef
+} from 'react';
+import {
+
+  Table,
+
+  TableRow as Tr,
+
+  TableCell as Td,
+
+  CircularProgress,
+
+  Box,
+  Typography
+
+} from '@mui/material';
+import { debounce } from 'lodash-es';
+
+import Pagination from '../Pagination';
+import AdvancedTableHead from './AdvancedTableHead';
+import AdvancedTableBody from './AdvancedTableBody';
+
+const DEFAULT_ITEMS_PER_PAGE = 10;
+const AdvancedTable = ({
+  columns = [],
+  tableData = [],
+  pagination = true,
+  scrollPagination = false,
+  itemsPerPage: defaultItemsPerPage = DEFAULT_ITEMS_PER_PAGE,
+  fetchData,
+  totalPages = 1,
+  onRowClick = () => {},
+  onRowCheck = () => {},
+  onRowRadioSelected = () => {},
+  rowDisabled = [],
+  rowDisabledOptionKey = '',
+  rowValues = () => {},
+  footer = [],
+  sortHandler = () => {},
+  paginationPosition = 'end',
+  tableSize = 'md',
+  isExpandable = false,
+  activeRows = [],
+  tableName,
+  leftActions,
+  rightActions
+}) => {
+  const [page, setPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(defaultItemsPerPage);
+  const [filterValues, setFilterValues] = useState({});
+  const [filteredData, setFilteredData] = useState(tableData);
+  const [loading, setLoading] = useState(false);
+  const [sortConfig, setSortConfig] = useState({ field: '', direction: '' });
+  const [radioSelectedIndex, setRadioSelectedIndex] = useState(null);
+  const [selectedRows, setSelectedRows] = useState(new Set());
+  const [expandedRows, setExpandedRows] = useState([]);
+
+  const headerRefs = useRef({});
+  const cellRefs = useRef({});
+  const [columnWidths, setColumnWidths] = useState({});
+
+  const paginatedData = useMemo(() => {
+    if (!pagination || scrollPagination) return filteredData;
+    const start = (page - 1) * rowsPerPage;
+    return filteredData.slice(start, start + rowsPerPage);
+  }, [filteredData, page, rowsPerPage, pagination, scrollPagination]);
+
+  const checkedItems = paginatedData.map((row) => Array.from(selectedRows).some((item) => JSON.stringify(item) === JSON.stringify(row)));
+
+  useEffect(() => {
+    const widths = {};
+    columns.forEach((col) => {
+      const headerWidth = headerRefs.current[col.field]?.offsetWidth || 0;
+      const cellWidth = cellRefs.current[col.field]?.offsetWidth || 0;
+      widths[col.field] = Math.max(headerWidth, cellWidth);
+    });
+    setColumnWidths(widths);
+  }, [columns, tableData]);
+
+  const handleFilterChange = debounce((filters) => {
+    let tempData = [...tableData];
+    Object.entries(filters).forEach(([field, { type, value }]) => {
+      if (!value) return;
+      tempData = tempData.filter((row) => {
+        const rowVal = row[field];
+        if (type === 'text') return rowVal?.toString().toLowerCase().includes(value.toLowerCase());
+        if (type === 'select') return rowVal === value;
+        if (type === 'date') return rowVal?.startsWith(value);
+        return true;
+      });
+    });
+    setFilteredData(tempData);
+  }, 300);
+
+  const onFilterInput = (field, type, value) => {
+    const updatedFilters = {
+      ...filterValues,
+      [field]: {
+        ...(filterValues[field] || {}),
+        type,
+        value,
+        visible: true
+      }
+    };
+    setFilterValues(updatedFilters);
+    handleFilterChange(updatedFilters);
+  };
+
+  useEffect(() => {
+    setFilteredData(tableData);
+    setSelectedRows(new Set(activeRows));
+  }, [tableData]);
+
+  useEffect(() => {
+    if (!scrollPagination || page >= totalPages || !fetchData) return;
+    const fetch = async () => {
+      setLoading(true);
+      try {
+        await fetchData(page);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetch();
+  }, [scrollPagination, page, totalPages, fetchData]);
+
+  const handleScroll = (e) => {
+    if (
+      scrollPagination
+      && e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 5
+      && page < totalPages
+      && !loading
+    ) {
+      setPage((prev) => prev + 1);
+    }
+  };
+
+  const handleSort = (field) => {
+    const direction = sortConfig.field === field && sortConfig.direction === 'asc' ? 'desc' : 'asc';
+    setSortConfig({ field, direction });
+    sortHandler({ field, direction });
+  };
+
+  const handleIndividualCheck = (e, index, row) => {
+    const newSet = new Set(selectedRows);
+
+    if (e.target.checked) {
+      newSet.add(row);
+    } else {
+      Array.from(newSet).forEach((item) => {
+        if (JSON.stringify(item) === JSON.stringify(row)) {
+          newSet.delete(item);
+        }
+      });
+    }
+
+    setSelectedRows(newSet);
+
+    if (onRowCheck) {
+      onRowCheck({
+        elementCheck: e.target.checked,
+        selectedRow: row,
+        selectedRows: Array.from(newSet)
+      });
+    }
+  };
+
+  const handleAllCheck = () => {
+    const allChecked = checkedItems.every(Boolean);
+    const newSet = new Set(selectedRows);
+
+    tableData.forEach((row) => {
+      if (!allChecked) {
+        newSet.add(row);
+      } else {
+        Array.from(newSet).forEach((item) => {
+          if (JSON.stringify(item) === JSON.stringify(row)) {
+            newSet.delete(item);
+          }
+        });
+      }
+    });
+
+    setSelectedRows(newSet);
+
+    onRowCheck({
+      elementCheck: !allChecked,
+      selectedRow: null,
+      selectedRows: Array.from(newSet)
+    });
+  };
+
+  const handleRadioSelect = (index, row) => {
+    setRadioSelectedIndex(index);
+    onRowRadioSelected(row);
+  };
+
+  const radioSelected = (index) => index === radioSelectedIndex;
+
+  return (
+    <Box
+      sx={{
+        border: '1px solid #E5E7EB',
+        borderRadius: 2,
+        overflow: 'hidden',
+        backgroundColor: '#fff'
+      }}
+    >
+      <Box
+        onScroll={handleScroll}
+        sx={{
+          overflowX: 'auto',
+          overflowY: scrollPagination ? 'auto' : 'visible',
+          maxHeight: scrollPagination ? 400 : 'unset'
+        }}
+      >
+        {
+  tableName && (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        px: 2,
+        py: 1.5,
+        borderBottom: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
+      {/* Left Section */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
+        {leftActions}
+
+        <Typography variant="h6" fontWeight={600}>
+          {tableName}
+        </Typography>
+      </Box>
+
+      {/* Right Section */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
+        {rightActions}
+      </Box>
+    </Box>
+  )
+}
+        <Table
+          stickyHeader
+          size={tableSize}
+          sx={{
+            minWidth: '100%',
+            tableLayout: 'fixed',
+            borderCollapse: 'separate',
+            borderSpacing: 0
+          }}
+        >
+          <AdvancedTableHead
+            columns={columns}
+            columnWidths={columnWidths}
+            checkedItems={checkedItems}
+            handleAllCheck={handleAllCheck}
+            sortConfig={sortConfig}
+            handleSort={handleSort}
+            filterValues={filterValues}
+            setFilterValues={setFilterValues}
+            onFilterInput={onFilterInput}
+            headerRefs={headerRefs}
+          />
+
+          <AdvancedTableBody
+            paginatedData={paginatedData}
+            columns={columns}
+            checkedItems={checkedItems}
+            handleIndividualCheck={handleIndividualCheck}
+            handleRadioSelect={handleRadioSelect}
+            radioSelected={radioSelected}
+            rowDisabled={rowDisabled}
+            rowDisabledOptionKey={rowDisabledOptionKey}
+            rowValues={rowValues}
+            onRowClick={onRowClick}
+            columnWidths={columnWidths}
+            expandedRows={expandedRows}
+            setExpandedRows={setExpandedRows}
+          />
+        </Table>
+      </Box>
+
+      {loading && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            py: 2
+          }}
+        >
+          <CircularProgress size={24} />
+        </Box>
+      )}
+
+      {!scrollPagination && pagination && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: paginationPosition || 'flex-end',
+            p: 2
+          }}
+        >
+          <Pagination
+            currentPage={page}
+            itemsPerPage={rowsPerPage}
+            totalItems={tableData?.length || 0}
+            handlePageChange={(newPage) => setPage(newPage)}
+            handleRowsPerPageChange={(newLimit) => {
+              setRowsPerPage(newLimit);
+              setPage(1);
+            }}
+            rowsPerPageOptions={[5, 10, 25, 50]}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default AdvancedTable;

package/src/components/index.js

@@ -0,0 +1,7 @@
+export * as Pagination from './Pagination';
+export * as PoojaCard from './PoojaCard';
+export * as StatusCard from './StatusCard';
+export * as TokenCard from './TokenCard';
+export * as AdvancedTable from './custom-Table';
+export * as MoreActions from './more-actions';
+export { Button as CustomButton } from './Button';

package/src/components/more-actions/MenuStyles.js

@@ -0,0 +1,54 @@
+import colors from '../../theme/foundations/colors';
+
+const component = {};
+
+const style = {
+  '.menu-btn + div div': {
+    boxShadow: '0px 25px 33px 0px rgba(0, 0, 0, 0.19)',
+    padding: '15px',
+    borderRadius: '11px',
+    outline: 0,
+    border: 0
+  },
+  '.menu-btn + div > div::after': {
+    content: "''",
+    position: 'absolute',
+    width: '22px',
+    height: '22px',
+    borderRadius: '5px',
+    background: colors.white,
+    right: '-10px',
+    top: '50%',
+    transform: 'translateY(-120%) rotate(45deg)',
+    zIndex: '0'
+  },
+  '.menu-btn + div div button': {
+    padding: '10px 12px',
+    borderRadius: '8px',
+    color: colors.gray[800],
+    position: 'relative',
+    fontSize: '14px',
+    fontWeight: 500,
+    lineHeight: '14px',
+    transition: 'all 150ms ease-in-out',
+    ':hover': {
+      background: `${colors.primary[500]} !important`,
+      color: colors.white
+    },
+    ':focus': {
+      background: colors.white
+    }
+  },
+  '.menu-btn + div div button:not(:last-of-type):after': {
+    content: "''",
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    height: '1px',
+    left: 0,
+    right: 0,
+    background: colors.gray[100]
+  }
+};
+
+export default { component, style };

package/src/components/more-actions/index.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  Menu, MenuButton, MenuList, MenuItem
+}from '@emotion/react';
+import { ActionIcon } from '../../assets/components';
+
+const MoreActions = (props) => {
+  const { actionData, rowData } = props;
+
+  return actionData.length === 1 ? (
+    <Menu>
+      {actionData.map(({
+        onClick: onItemClick, label, icon, id
+      }) => (
+        <MenuButton
+          key={label}
+          as="button"
+          onClick={() => {
+            onItemClick(rowData || id);
+          }}
+        >
+          {icon}
+        </MenuButton>
+      ))}
+    </Menu>
+  ) : (
+    <Menu placement="left">
+      <MenuButton as="button" className="menu-btn">
+        <ActionIcon />
+      </MenuButton>
+      <MenuList>
+        {actionData.map(({
+          onClick: onItemClick, label, icon, id
+        }) => (
+          <MenuItem
+            key={label}
+            as="button"
+            onClick={() => {
+              onItemClick(rowData || id);
+            }}
+          >
+            {icon} {label}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default MoreActions;

package/src/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(
+  <React.StrictMode>
+      <App />
+  </React.StrictMode>
+);

package/src/lib.js

@@ -0,0 +1,133 @@
+export {
+  ThemeProvider,
+  createTheme,
+  styled
+} from '@mui/material/styles';
+
+export {
+  Accordion,
+  AccordionActions,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  AlertTitle,
+  AppBar,
+  Autocomplete,
+  Avatar,
+  AvatarGroup,
+  Backdrop,
+  Badge,
+  BottomNavigation,
+  BottomNavigationAction,
+  Box,
+  Breadcrumbs,
+  Button,
+  ButtonBase,
+  ButtonGroup,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  Collapse,
+  Container,
+  CssBaseline,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Divider,
+  Drawer,
+  Fab,
+  Fade,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  FormLabel,
+  Grid,
+  IconButton,
+  ImageList,
+  ImageListItem,
+  Input,
+  InputAdornment,
+  InputBase,
+  InputLabel,
+  LinearProgress,
+  Link,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuList,
+  Modal,
+  Pagination,
+  Paper,
+  Popover,
+  Portal,
+  Radio,
+  RadioGroup,
+  Rating,
+  Select,
+  Skeleton,
+  Slide,
+  Slider,
+  Snackbar,
+  Stack,
+  Step,
+  StepButton,
+  StepConnector,
+  StepContent,
+  StepLabel,
+  Stepper,
+  SvgIcon,
+  Switch,
+  Tab,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TableHead,
+  TablePagination,
+  TableRow,
+  Tabs,
+  TextField,
+  Toolbar,
+  Tooltip,
+  Typography,
+  useMediaQuery
+} from '@mui/material';
+
+export * from '@mui/icons-material';
+
+export { motion, AnimatePresence } from 'framer-motion';
+
+export {
+  debounce,
+  throttle,
+  cloneDeep,
+  merge,
+  uniq,
+  groupBy
+} from 'lodash-es';
+
+
+export {
+  PoojaCard,
+  MoreActions,
+  AdvancedTable,
+  TokenCard,
+  StatusCard,
+  CustomButton
+} from './components'
+
+

package/src/stories/AdvancedTable.stories.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Button } from '@mui/material';
+
+import AdvancedTable from '../components/custom-Table';
+
+export default {
+  title: 'Components/AdvancedTable',
+  component: AdvancedTable
+};
+
+const mockColumns = [
+  {
+    header: 'Select',
+    type: 'multi-select',
+    alignment: 'center',
+    width: '20'
+  },
+  {
+    header: 'Expandable',
+    type: 'isExpandable',
+    alignment: 'start',
+    width: '10%'
+  },
+  {
+    field: 'id',
+    header: 'ID',
+    sort: true,
+    alignment: 'center',
+    filterType: 'text'
+  },
+  {
+    field: 'name',
+    header: 'Name',
+    sort: true,
+    alignment: 'center',
+    filterType: 'text'
+  },
+  {
+    field: 'status',
+    header: 'Status',
+    filterType: 'select',
+    alignment: 'center',
+    options: ['Active', 'Inactive']
+  },
+  {
+    field: 'date',
+    header: 'Date',
+    alignment: 'center',
+    filterType: 'date'
+  },
+  {
+    header: 'List',
+    field: 'list2',
+    alignment: 'center',
+    isExpandable: true,
+    width: '30%'
+  }
+];
+
+const mockData = Array.from({ length: 15 }).map((_, i) => ({
+  id: i + 1,
+  name: `User ${i + 1}`,
+  status: i % 2 === 0 ? 'Active' : 'Inactive',
+  date: `2024-07-${String(i + 1).padStart(2, '0')}`,
+  list2: [
+    'Sale of Agricultural Implements',
+    'Machineries',
+    'Acupuncture Clinic'
+  ]
+}));
+
+const Template = (args) => <AdvancedTable {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  columns: mockColumns,
+  tableData: mockData,
+  pagination: true,
+  scrollPagination: false,
+
+  tableName: 'Orders',
+
+  rightActions: (
+    <>
+      <Button variant="outlined">
+        Export
+      </Button>
+
+      <Button variant="contained">
+        Add Order
+      </Button>
+    </>
+  ),
+
+  footer: [
+    {
+      field: 'name',
+      alignment: 'center',
+      value: 'Total Users'
+    },
+    {
+      field: 'id',
+      alignment: 'center',
+      value: mockData.length.toString()
+    }
+  ]
+};