@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

package/src/components/Charts/ProgressCard/ProgressCard.tsx

@@ -1,270 +0,0 @@
-import { MoreVert } from '@mui/icons-material';
-import {
-  Box,
-  CardContent,
-  LinearProgress,
-  Card as MuiCard,
-  Stack,
-  styled,
-  SxProps,
-  Typography,
-} from '@mui/material';
-import { ReactNode } from 'react';
-import { DropDownIcon, DropdownMenu } from '../../export';
-
-interface StyledLinearProgressProps {
-  barColor?: string;
-}
-
-// Custom styled LinearProgress with color prop support
-const StyledLinearProgress = styled(LinearProgress, {
-  shouldForwardProp: (prop) => prop !== 'barColor',
-})<StyledLinearProgressProps>(({ theme, barColor }) => ({
-  height: 8,
-  borderRadius: 5,
-  backgroundColor: theme.palette.surface.grey,
-  '& .MuiLinearProgress-bar': {
-    borderRadius: 5,
-    backgroundColor: barColor || theme.palette.highlight.highlightGreen,
-  },
-}));
-
-// Status text styling
-const StyledStatusText = styled(Typography)(({ theme }) => ({
-  color: theme.palette.highlight.highlightBlue,
-  padding: '5px 10px',
-  backgroundColor: theme.palette.highlight.blueBackground,
-  borderRadius: '4px',
-}));
-
-export interface ProgressCardProps {
-  // Core data
-  title: string;
-  current: number;
-  total: number;
-  remaining?: number;
-  used?: number;
-  pending?: number;
-
-  // Progress bar color
-  progressBarColor?: string;
-
-  // Labels
-  remainingLabel?: string | ReactNode;
-  usedLabel?: string | ReactNode;
-  totalLabel?: string | ReactNode;
-  pendingLabel?: string | ReactNode;
-
-  // Visual elements
-  icon?: ReactNode;
-  moreOptions?: boolean;
-  menu?: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
-
-  // Style props
-  cardSx?: SxProps;
-  headerSx?: SxProps;
-  progressSx?: SxProps;
-  statsSx?: SxProps;
-  titleProps?: {
-    variant?: any;
-    sx?: SxProps;
-  };
-  remainingProps?: {
-    variant?: any;
-    sx?: SxProps;
-  };
-  usedProps?: {
-    variant?: any;
-    sx?: SxProps;
-  };
-  totalProps?: {
-    variant?: any;
-    sx?: SxProps;
-  };
-  pendingProps?: {
-    variant?: any;
-    sx?: SxProps;
-  };
-
-  // Card content
-  children?: ReactNode;
-
-  // Custom render functions
-  renderHeader?: (props: { title: string; remaining: number }) => ReactNode;
-  renderProgress?: (props: { current: number; total: number }) => ReactNode;
-  renderStats?: (props: { used: number; total: number }) => ReactNode;
-  renderPending?: (props: { pending: number }) => ReactNode;
-  renderFooter?: (props: { used: number; total: number }) => ReactNode;
-}
-
-export const ProgressCard = ({
-  // Core data
-  title = 'Casual Leave',
-  current = 4,
-  total = 12,
-  remaining = total - current,
-  used = current,
-  pending = 1,
-
-  // Progress bar color
-  progressBarColor = '#4CAF50', // Default to a green color
-
-  // Labels
-  remainingLabel,
-  usedLabel,
-  totalLabel,
-  pendingLabel,
-
-  // Visual elements
-  icon,
-  moreOptions = false,
-  menu = [],
-
-  // Style props
-  cardSx,
-  headerSx,
-  progressSx,
-  statsSx,
-  titleProps = {},
-  remainingProps = {},
-  usedProps = {},
-  totalProps = {},
-  pendingProps = {},
-
-  // Card content
-  children,
-
-  // Custom render functions
-  renderHeader,
-  renderProgress,
-  renderStats,
-  renderPending,
-  renderFooter,
-}: ProgressCardProps) => {
-  // Calculate progress percentage
-  const progressPercentage = (current / total) * 100;
-
-  // Default labels
-  const defaultRemainingLabel = `${remaining} left`;
-  const defaultUsedLabel = `${used} used`;
-  const defaultTotalLabel = `${total} total`;
-  const defaultPendingLabel = `${pending} pending`;
-
-  return (
-    <MuiCard
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        borderRadius: 2,
-        ...cardSx,
-      }}
-    >
-      <CardContent sx={{ padding: '12px' }}>
-        {/* Header with title and remaining */}
-        {renderHeader ? (
-          renderHeader({ title, remaining })
-        ) : (
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            mb={2}
-            gap={'8px'}
-            sx={headerSx}
-          >
-            <Stack direction="row" alignItems="center" spacing={1}>
-              {icon && <Box sx={{ mr: 1 }}>{icon}</Box>}
-              <Typography
-                variant="subtitle1"
-                color="text.secondary"
-                fontWeight={500}
-                {...titleProps}
-              >
-                {title}
-              </Typography>
-            </Stack>
-
-            <Stack direction="row" alignItems="center" spacing={1}>
-              <StyledStatusText variant="label2" {...remainingProps}>
-                {remainingLabel || defaultRemainingLabel}
-              </StyledStatusText>
-
-              {moreOptions && (
-                <DropdownMenu
-                  anchor={({ open }) => (
-                    <DropDownIcon
-                      handleClick={open}
-                      icon={{
-                        icon: <MoreVert />,
-                        iconProps: { color: 'default' },
-                        outlined: false,
-                      }}
-                    />
-                  )}
-                  menu={menu}
-                />
-              )}
-            </Stack>
-          </Stack>
-        )}
-
-        {/* Progress Bar */}
-        {renderProgress ? (
-          renderProgress({ current, total })
-        ) : (
-          <StyledLinearProgress
-            variant="determinate"
-            value={progressPercentage}
-            barColor={progressBarColor}
-            sx={{ mb: 1.5, ...progressSx }}
-          />
-        )}
-
-        {/* Stats */}
-        {renderStats ? (
-          renderStats({ used, total })
-        ) : (
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            sx={statsSx}
-          >
-            <Typography variant="body2" color="text.secondary" {...usedProps}>
-              {usedLabel || defaultUsedLabel}
-            </Typography>
-            <Typography variant="body2" color="text.secondary" {...totalProps}>
-              {totalLabel || defaultTotalLabel}
-            </Typography>
-          </Stack>
-        )}
-
-        {/* Pending Indicator */}
-        {pending > 0 &&
-          (renderPending ? (
-            renderPending({ pending })
-          ) : (
-            <Box sx={{ mt: 1.5 }}>
-              <StyledStatusText
-                variant="subtitle3"
-                color="primary"
-                fontWeight={600}
-                {...pendingProps}
-              >
-                {pendingLabel || defaultPendingLabel}
-              </StyledStatusText>
-            </Box>
-          ))}
-
-        {/* Children content */}
-        {children}
-
-        {/* Optional footer */}
-        {renderFooter && renderFooter({ used, total })}
-      </CardContent>
-    </MuiCard>
-  );
-};
-
-export default ProgressCard;

package/src/components/DataDisplay/Accordion/styles.ts

@@ -1,10 +0,0 @@
-import { Accordion as MuiAccordion, styled } from '@mui/material';
-
-export const StyledMuiAccordion = styled(MuiAccordion)(() => ({
-  '&:before': {
-    display: 'none',
-  },
-  '&.Mui-expanded': {
-    margin: '0px',
-  },
-}));

package/src/components/DataDisplay/AccordionGroup/AccordionGroup.tsx

@@ -1,52 +0,0 @@
-import { SxProps } from '@mui/material';
-import { SyntheticEvent, useEffect, useState } from 'react';
-import { Accordion, AccordionProps } from '../Accordion/Accordion';
-import { StyledAccordionContainer } from './styles';
-
-type AccordionGroupProps = {
-  data: AccordionProps[];
-  containerSx?: SxProps;
-  defaultExpandedIndex?: number;
-  errorField?: string;
-};
-
-export const AccordionGroup = ({
-  data,
-  containerSx,
-  defaultExpandedIndex,
-  errorField,
-}: AccordionGroupProps) => {
-  const [expanded, setExpanded] = useState<number | false>(
-    defaultExpandedIndex ?? false,
-  );
-
-  useEffect(() => {
-    if (errorField) {
-      const errorIndex = data.findIndex((item) =>
-        Array.isArray(item.errorKeys)
-          ? item.errorKeys.includes(errorField)
-          : false,
-      );
-      if (errorIndex !== -1) setExpanded(errorIndex);
-    }
-  }, [errorField, data]);
-
-  const handleChange =
-    (panel: number) => (event: SyntheticEvent, isExpanded: boolean) => {
-      setExpanded(isExpanded ? panel : false);
-    };
-
-  return (
-    <StyledAccordionContainer sx={{ ...containerSx }}>
-      {data?.map((itemProps, index) => (
-        <Accordion
-          elevation={0}
-          expanded={expanded}
-          {...itemProps}
-          index={index}
-          onChange={handleChange(index)}
-        />
-      ))}
-    </StyledAccordionContainer>
-  );
-};

package/src/components/DataDisplay/AccordionGroup/styles.ts

@@ -1,8 +0,0 @@
-import { Box, styled } from '@mui/material';
-
-export const StyledAccordionContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: '4px',
-  flexDirection: 'column',
-  backgroundColor: theme.palette.surface.defaultBackground,
-}));

package/src/components/DataDisplay/ActivityLogView/Icons.tsx

@@ -1,65 +0,0 @@
-export const DeleteIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      style={{ display: 'flex', alignItems: 'center' }}
-    >
-      <g clipPath="url(#clip0_2752_9015)">
-        <path
-          d="M10.7933 1.3335H5.20659C2.77992 1.3335 1.33325 2.78016 1.33325 5.20683V10.7868C1.33325 13.2202 2.77992 14.6668 5.20659 14.6668H10.7866C13.2133 14.6668 14.6599 13.2202 14.6599 10.7935V5.20683C14.6666 2.78016 13.2199 1.3335 10.7933 1.3335ZM10.6666 8.50016H5.33325C5.20064 8.50016 5.07347 8.44749 4.9797 8.35372C4.88593 8.25995 4.83325 8.13277 4.83325 8.00016C4.83325 7.86756 4.88593 7.74038 4.9797 7.64661C5.07347 7.55284 5.20064 7.50016 5.33325 7.50016H10.6666C10.7992 7.50016 10.9264 7.55284 11.0201 7.64661C11.1139 7.74038 11.1666 7.86756 11.1666 8.00016C11.1666 8.13277 11.1139 8.25995 11.0201 8.35372C10.9264 8.44749 10.7992 8.50016 10.6666 8.50016Z"
-          fill="#F2353C"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2752_9015">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-
-export const CreateIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-    >
-      <path
-        d="M10.793 1.3335H5.20632C2.77965 1.3335 1.33325 2.7799 1.33325 5.20656V10.7868C1.33325 13.2199 2.77965 14.6668 5.20632 14.6668H10.7866C13.2133 14.6668 14.6602 13.2204 14.6602 10.7938V5.20656C14.6666 2.7799 13.2197 1.3335 10.793 1.3335ZM10.6666 8.4999H8.49965V10.6668C8.49965 10.7994 8.44697 10.9266 8.35321 11.0204C8.25944 11.1142 8.13226 11.1668 7.99965 11.1668C7.86704 11.1668 7.73987 11.1142 7.6461 11.0204C7.55233 10.9266 7.49965 10.7994 7.49965 10.6668V8.4999H5.33325C5.20064 8.4999 5.07347 8.44722 4.9797 8.35345C4.88593 8.25968 4.83325 8.1325 4.83325 7.9999C4.83325 7.86729 4.88593 7.74011 4.9797 7.64634C5.07347 7.55257 5.20064 7.4999 5.33325 7.4999H7.49965V5.3335C7.49965 5.20089 7.55233 5.07371 7.6461 4.97994C7.73987 4.88617 7.86704 4.8335 7.99965 4.8335C8.13226 4.8335 8.25944 4.88617 8.35321 4.97994C8.44697 5.07371 8.49965 5.20089 8.49965 5.3335V7.4999H10.6666C10.7992 7.4999 10.9264 7.55257 11.0201 7.64634C11.1139 7.74011 11.1666 7.86729 11.1666 7.9999C11.1666 8.1325 11.1139 8.25968 11.0201 8.35345C10.9264 8.44722 10.7992 8.4999 10.6666 8.4999Z"
-        fill="#4BAABE"
-      />
-    </svg>
-  );
-};
-
-export const UpdateIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-    >
-      <g clipPath="url(#clip0_2752_9033)">
-        <path
-          d="M10.7933 1.3335H5.20659C2.77992 1.3335 1.33325 2.78016 1.33325 5.20683V10.7868C1.33325 13.2202 2.77992 14.6668 5.20659 14.6668H10.7866C13.2133 14.6668 14.6599 13.2202 14.6599 10.7935V5.20683C14.6666 2.78016 13.2199 1.3335 10.7933 1.3335ZM11.1866 6.46683L7.40659 10.2468C7.36025 10.2934 7.30519 10.3303 7.24456 10.3555C7.18392 10.3806 7.11891 10.3936 7.05325 10.3936C6.98759 10.3936 6.92258 10.3806 6.86195 10.3555C6.80131 10.3303 6.74625 10.2934 6.69992 10.2468L4.81325 8.36016C4.76413 8.31439 4.72473 8.25919 4.6974 8.19785C4.67007 8.13652 4.65538 8.07031 4.65419 8.00318C4.65301 7.93604 4.66536 7.86936 4.6905 7.8071C4.71565 7.74484 4.75308 7.68828 4.80056 7.6408C4.84804 7.59332 4.90459 7.5559 4.96685 7.53075C5.02911 7.5056 5.0958 7.49325 5.16293 7.49444C5.23007 7.49562 5.29628 7.51031 5.35761 7.53764C5.41894 7.56497 5.47414 7.60437 5.51992 7.6535L7.05325 9.18683L10.4799 5.76016C10.5747 5.67184 10.7001 5.62376 10.8296 5.62605C10.9591 5.62833 11.0827 5.68081 11.1743 5.77242C11.2659 5.86402 11.3184 5.98761 11.3207 6.11715C11.323 6.24668 11.2749 6.37205 11.1866 6.46683Z"
-          fill="#88B053"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2752_9033">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};

package/src/components/DataDisplay/ActivityLogView/styles.tsx

@@ -1,54 +0,0 @@
-import {
-  Timeline,
-  TimelineConnector,
-  TimelineDot,
-  timelineItemClasses,
-} from '@mui/lab';
-import { Box, styled, Typography } from '@mui/material';
-
-export const StyledSpinnerBox = styled(Box)({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-export const StyledSectionTitle = styled(Typography)(({ theme }) => ({
-  fontSize: '12px',
-  color: theme.palette.text.secondary,
-}));
-
-export const StyledTimeline = styled(Timeline)({
-  [`& .${timelineItemClasses.root}:before`]: { flex: 0, padding: 0 },
-  [`& .${timelineItemClasses.root}:not(:first-of-type)`]: {
-    marginTop: '0px',
-  },
-  padding: 0,
-  margin: 0,
-});
-
-export const StyledTimelineDot = styled(TimelineDot)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.defaultBackground,
-  boxShadow: 'none',
-  width: 30,
-  padding: 0,
-  paddingLeft: 5,
-  height: 30,
-}));
-
-export const StyledTimelineConnector = styled(TimelineConnector)(
-  ({ theme }) => ({
-    width: '1px',
-  }),
-);
-
-export const StyledActivityLogViewBox = styled(Box)({
-  '&::-webkit-scrollbar': { display: 'none' },
-  overflowY: 'auto',
-  maxHeight: '70vh',
-});
-
-export const StyledIconBox = styled(Box)({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});

package/src/components/DataDisplay/Card/styles.tsx

@@ -1,61 +0,0 @@
-import {
-  Button,
-  CardActions,
-  Divider,
-  IconButton,
-  Stack,
-  styled,
-  Typography,
-} from '@mui/material';
-
-export const StyledCardActions = styled(CardActions)(({ theme }) => ({
-  //${} add border color
-  borderTop: `1px solid ${theme.palette.border.primary}`,
-  padding: '0',
-}));
-
-export const StyledButton = styled(Button)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '100%',
-  padding: '8px 16px',
-}));
-
-export const StyledImage = styled('img')(({ theme }) => ({
-  height: '216px',
-  width: '400px',
-  objectFit: 'cover',
-}));
-
-export const StyledHeader = styled(Stack)(({ theme }) => ({
-  padding: '12px 16px',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}));
-
-export const StyledStack = styled(Stack)(({ theme }) => ({
-  width: '50px',
-  height: '50px',
-  backgroundColor: theme.palette.surface.grey,
-  borderRadius: '50%',
-  justifyContent: 'center',
-  alignItems: 'center',
-}));
-
-export const StyledStatusText = styled(Typography)(({ theme }) => ({
-  color: theme.palette.highlight.highlightBlue,
-  padding: '5px 10px',
-  backgroundColor: theme.palette.highlight.blueBackground,
-  borderRadius: '4px',
-}));
-
-export const StyledIcon = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.text.primary,
-}));
-
-export const StyledDivider = styled(Divider)(({ theme }) => ({
-  orientation: 'vertical',
-  border: '1px solid #CECECE',
-}));