@campxdev/shared 1.8.13 → 1.8.14

package/src/components/StepsHeader/StepsHeader.tsx

@@ -1,115 +0,0 @@
-import { Done } from '@mui/icons-material'
-import { alpha, Box, styled, Typography } from '@mui/material'
-import { useEffect, useState } from 'react'
-
-export const StyledStepsContainer = styled(Box)(({ theme }) => ({
-  padding: '10px 0',
-  display: 'flex',
-  justifyContent: 'center',
-  gap: '10px',
-}))
-
-export const StyledStep = styled(Box, {
-  shouldForwardProp: (prop) =>
-    !['active', 'disableHover'].includes(prop as string),
-})<{ active: boolean; disableHover: boolean }>(
-  ({ theme, active, disableHover }) => ({
-    maxWidth: '130px',
-    position: 'relative',
-    display: 'grid',
-    gridTemplateRows: '50px 1fr',
-    placeItems: 'center',
-    gap: '10px',
-    cursor: disableHover ? 'default' : 'pointer',
-    padding: '6px',
-    borderRadius: '10px',
-    transition: 'background 0.3s ease',
-    '&:hover': {
-      background: disableHover ? 'none' : theme.palette.secondary.light,
-    },
-    '& .MuiTypography-root': {
-      color: alpha(theme.palette.secondary.main, active ? 1 : 0.6),
-      fontWeight: 'bold',
-      textAlign: 'center',
-    },
-    '& .connector': {
-      position: 'absolute',
-      top: '30%',
-      left: '50%',
-      width: '100%',
-      borderBottom: `1px dashed #1212128A`,
-    },
-    '&:last-of-type': {
-      '& .connector': {
-        display: 'none',
-      },
-    },
-  }),
-)
-
-export const StyledCircle = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active: boolean }>(({ theme, active }) => ({
-  height: '50px',
-  width: '50px',
-  borderRadius: '50%',
-  background: 'white',
-  zIndex: 30,
-  backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='gray' stroke-width='1.2' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  ...(active && {
-    border: `1px solid ${theme.palette.primary.main}`,
-    backgroundImage: 'none',
-  }),
-}))
-
-interface StepsHeaderProps {
-  steps: { step: number; label: string }[]
-  onChange: (step: number) => void
-  activeStep?: number
-  disableClick?: boolean
-}
-
-export default function StepsHeader({
-  steps,
-  onChange,
-  activeStep: _activeStep = 0,
-  disableClick = false,
-}: StepsHeaderProps) {
-  const [activeStep, setActiveStep] = useState(0)
-
-  const handleClick = (step) => {
-    setActiveStep(step)
-    onChange(step)
-  }
-
-  useEffect(() => {
-    setActiveStep(_activeStep)
-  }, [_activeStep])
-
-  return (
-    <StyledStepsContainer>
-      {steps?.map((item) => (
-        <StyledStep
-          active={activeStep > item?.step - 1}
-          disableHover={disableClick}
-          onClick={() => {
-            if (disableClick) return
-            handleClick(item.step)
-          }}
-          key={item?.step}
-        >
-          <StyledCircle active={activeStep > item?.step - 1}>
-            {activeStep > item?.step - 1 && <Done color="success" />}
-          </StyledCircle>
-          <Typography variant="body1" sx={{ fontSize: '13px' }}>
-            {item?.label}
-          </Typography>
-          <Box className="connector"></Box>
-        </StyledStep>
-      ))}
-    </StyledStepsContainer>
-  )
-}

package/src/components/StepsHeader/index.tsx

@@ -1 +0,0 @@
-export { default } from './StepsHeader'

package/src/components/StyledTableContainer.tsx

@@ -1,33 +0,0 @@
-import styled from 'styled-components'
-
-export const StyledTableContainer = styled.div`
-  /* background: white; */
-  margin-top: 10px;
-  border-radius: 16px;
-
-  table thead tr {
-    background-color: #efefef;
-  }
-
-  table,
-  td,
-  th {
-    border: 1px solid #bebebe;
-    padding: 8px;
-  }
-
-  table {
-    background: white;
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  @media print {
-    table,
-    td,
-    th {
-      border: 1px solid black;
-      padding: 8px;
-    }
-  }
-`

package/src/components/SwitchButton.tsx

@@ -1,41 +0,0 @@
-import { Box, styled, Switch, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-interface SwicthButtonProps {
-  label: ReactNode
-  checked: boolean
-  onChange: (v: any) => void
-  subtitle?: ReactNode
-}
-
-export default function SwitchButton({
-  label,
-  checked,
-  onChange,
-  subtitle,
-}: SwicthButtonProps) {
-  return (
-    <StyledBox>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <Typography variant="body1">{label}</Typography>
-        <Switch
-          checked={checked}
-          onChange={(e, checked) => onChange(checked)}
-        />
-      </Box>
-      {subtitle && <Typography variant="subtitle1">{subtitle}</Typography>}
-    </StyledBox>
-  )
-}
-
-const StyledBox = styled(Box)(({ theme }) => ({
-  '& > .MuiBox-root': {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '1rem',
-  },
-  '& > .MuiTypography-root': {
-    marginTop: '0.5rem',
-  },
-}))

package/src/components/Table.tsx

@@ -1,42 +0,0 @@
-import styled from 'styled-components'
-
-const secondaryColor = '#233659'
-const primaryColor = '#c02633'
-
-export const Table = styled.table`
-  background: white;
-  border: 1px solid #dfdfdf;
-  padding: ${(props: any) => props.cellPadding || '4px 8px'};
-  border-collapse: collapse;
-  box-shadow: 0 3px 15px rgb(39 59 128 / 20%);
-  thead {
-    background-color: ${secondaryColor};
-    color: white;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-  }
-
-  thead tr th {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-
-  tbody tr:hover {
-    background-color: #f9f9f9;
-  }
-
-  td {
-    /* border: 1px solid #dfdfdf; */
-    border: 1px solid #dfdfdf;
-  }
-
-  td,
-  th {
-    padding: ${(props: any) => props.cellPadding || '4px 8px'};
-  }
-
-  tbody tr:nth-child(even) {
-    /* background: #f4f4f4; */
-    /* background: #fafcff; */
-  }
-`

package/src/components/Tables/BasicTable/Table.tsx

@@ -1,198 +0,0 @@
-import {
-  alpha,
-  Box,
-  IconButton,
-  ListItemIcon,
-  styled,
-  Table as MuiTable,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-} from '@mui/material'
-import _ from 'lodash'
-import { useEffect, useState } from 'react'
-import Spinner from '../../Spinner'
-import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
-import NoRecordsFound from '../common/NoRecordsFound'
-import TableFooter from './TableFooter'
-
-export interface ColumnProps {
-  dataIndex: string
-  key: string
-  title: any
-  render?: (cellData: any, row: any, index: number) => any
-  textColor?: string
-  sort?: boolean
-  width?: string //pixels
-}
-
-interface TableProps {
-  columns: Array<ColumnProps>
-  rowKey?: string
-  dataSource?: any[]
-  loading?: boolean
-  onRowClick?: (row: any) => void
-  pagination?: {
-    page: number
-    limit: number
-    totalCount: number
-    onChange: (v: number) => void
-    onChangeLimit?: (v: number) => void
-  }
-  onSort?: (sort: any) => void
-  dense?: boolean
-}
-
-type Order = 'asc' | 'desc' | ''
-type Sort = {}
-
-export default function Table({
-  columns,
-  dataSource,
-  onRowClick,
-  pagination,
-  loading,
-  onSort,
-  dense = false,
-}: TableProps) {
-  const [sort, setSort] = useState<Sort>({})
-
-  const handleSortClick = (sortBykey) => {
-    setSort((prev) => {
-      if (prev[sortBykey]) {
-        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
-        if (prev[sortBykey] === 'asc') {
-          delete prev[sortBykey]
-          return { ...prev }
-        }
-      } else {
-        return {
-          ...prev,
-          [sortBykey]: 'desc',
-        }
-      }
-    })
-  }
-
-  useEffect(() => {
-    if (!onSort) return
-
-    onSort({
-      sortBy: Object.keys(sort).join(','),
-      sortOrder: Object.keys(sort)
-        .map((item) => sort[item])
-        .join(','),
-    })
-  }, [sort])
-
-  return (
-    <StyledTableContainer>
-      <>
-        <MuiTable>
-          <TableHead>
-            <TableRow>
-              {columns.map((col, index) => (
-                <TableCell
-                  key={index}
-                  sx={{
-                    ...(col?.width && {
-                      width: col?.width,
-                    }),
-                  }}
-                >
-                  <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
-                    {col.title}
-                  </Box>
-                  {col.sort && (
-                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
-                      <ListItemIcon>
-                        {sort[col.dataIndex] === 'asc' ? (
-                          <SortAscIcon />
-                        ) : sort[col.dataIndex] === 'desc' ? (
-                          <SortDescIcon />
-                        ) : (
-                          <SortIcon />
-                        )}
-                      </ListItemIcon>
-                    </IconButton>
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          {!loading ? (
-            <>
-              {dataSource?.length ? (
-                <TableBody>
-                  {dataSource?.map((row, index) => (
-                    <StyledTableRow
-                      canRowClick={!!onRowClick}
-                      hover={!!onRowClick}
-                      key={index}
-                      onClick={() => {
-                        return onRowClick && onRowClick(row)
-                      }}
-                    >
-                      {columns.map((col, colIndex) => (
-                        <TableCell
-                          sx={{
-                            color: col.textColor,
-                            padding: dense ? '10px' : '15px',
-                            font: 'avenir',
-                            fontSize: '14px',
-                          }}
-                          key={colIndex}
-                        >
-                          <>
-                            {col?.render
-                              ? col.render(row[col.dataIndex], row, index)
-                              : _.get(row, col.dataIndex)}
-                          </>
-                        </TableCell>
-                      ))}
-                    </StyledTableRow>
-                  ))}
-                </TableBody>
-              ) : (
-                <>
-                  <NoRecordsFound colLength={columns?.length} />
-                </>
-              )}
-            </>
-          ) : (
-            <Spinner />
-          )}
-        </MuiTable>
-      </>
-      <>
-        {pagination && (
-          <TableFooter
-            page={pagination.page + 1}
-            limit={pagination.limit}
-            totalCount={pagination.totalCount ?? 0}
-            handlePagination={pagination.onChange}
-            handlePageLimit={pagination.onChangeLimit}
-          />
-        )}
-      </>
-    </StyledTableContainer>
-  )
-}
-
-const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
-  width: '100%',
-  overflowX: 'auto',
-}))
-
-const StyledTableRow = styled(TableRow, {
-  shouldForwardProp: (prop) => prop !== 'canRowClick',
-})<{ canRowClick: boolean }>(({ canRowClick }) => ({
-  ...(canRowClick && {
-    cursor: 'pointer',
-    '&.MuiTableRow-hover:hover': {
-      backgroundColor: alpha('#f2f2f2', 0.4),
-    },
-  }),
-}))

package/src/components/Tables/BasicTable/TableFooter.tsx

@@ -1,86 +0,0 @@
-import { Box, Typography } from '@mui/material'
-import DropDownButton from '../../DropDownButton/DropDownButton'
-import { StyledPagination, StyledTableFooter } from '../common/styles'
-import TableStats from '../common/TableStats'
-
-interface TableFooterProps {
-  totalCount: number
-  limit: number
-  handlePagination: (v: number) => void
-  page: number
-  handlePageLimit?: (v: number) => void
-}
-
-export default function TableFooter({
-  totalCount,
-  limit,
-  handlePagination,
-  page,
-  handlePageLimit,
-}: TableFooterProps) {
-  const onChange = (v: number) => {
-    handlePagination(v)
-  }
-  return (
-    <StyledTableFooter>
-      <TableStats limit={limit} totalCount={totalCount} page={page} />
-      <StyledPagination
-        page={page}
-        count={Math.ceil(totalCount / limit)}
-        onChange={(e, v) => onChange(v)}
-        variant="outlined"
-        shape="rounded"
-      />
-      {handlePageLimit ? (
-        <LimitField handlePageLimit={handlePageLimit} limit={limit} />
-      ) : (
-        <Box></Box>
-      )}
-    </StyledTableFooter>
-  )
-}
-
-const LimitField = ({ handlePageLimit, limit }) => {
-  return (
-    <Box>
-      <DropDownButton
-        button={{
-          buttonProps: {
-            variant: 'outlined',
-            color: 'secondary',
-            sx: {
-              padding: '0px 10px',
-              color: '#121212',
-              fontSize: '13px',
-              border: '1px solid #1212121A',
-            },
-          },
-          label: `${limit} / page`,
-        }}
-        menu={[
-          {
-            label: 10,
-            onClick: () => handlePageLimit(10),
-          },
-
-          {
-            label: 20,
-            onClick: () => handlePageLimit(20),
-          },
-          {
-            label: 30,
-            onClick: () => handlePageLimit(30),
-          },
-          {
-            label: 50,
-            onClick: () => handlePageLimit(50),
-          },
-          {
-            label: 100,
-            onClick: () => handlePageLimit(100),
-          },
-        ]}
-      />
-    </Box>
-  )
-}

package/src/components/Tables/BasicTable/index.tsx

@@ -1 +0,0 @@
-export { default } from './Table'

package/src/components/Tables/ReactTable/BatchActionsHeader.tsx

@@ -1,58 +0,0 @@
-import { Box, Typography } from '@mui/material'
-import DropDownButton from '../../DropDownButton'
-import {
-  StyledActionIconButton,
-  StyledActionsRow,
-  StyledTableActionsHeader,
-} from '../common/styles'
-
-export default function BatchActionsHeader({
-  selectedRowIds,
-  actions,
-  clearSelection,
-}) {
-  const ids = Object?.keys(selectedRowIds)
-  const rowActions = actions?.filter((item) => !item?.dropdown)
-  const dropDownActions = actions?.filter((item) => item?.dropdown)
-
-  if (!ids?.length) return null
-  return (
-    <StyledTableActionsHeader>
-      <Typography variant="subtitle1">
-        Selected <span>{ids?.length}</span> rows
-      </Typography>
-      <RowActions actions={rowActions} ids={ids} clear={clearSelection} />
-      <DropDownActions
-        actions={dropDownActions}
-        ids={ids}
-        clear={clearSelection}
-      />
-    </StyledTableActionsHeader>
-  )
-}
-
-const RowActions = ({ actions, ids, clear }) => {
-  if (!actions?.length) return null
-
-  return (
-    <StyledActionsRow>
-      {actions?.map(({ component }, index) => (
-        <Box key={index}>{component(ids, clear)}</Box>
-      ))}
-    </StyledActionsRow>
-  )
-}
-const DropDownActions = ({ actions, ids, clear }) => {
-  if (!actions?.length) return null
-  return (
-    <DropDownButton
-      icon={{
-        icon: <StyledActionIconButton />,
-      }}
-      menu={actions?.map((action) => ({
-        ...action,
-        // onClick: () => action?.onClick(ids, clear),
-      }))}
-    />
-  )
-}