@campxdev/react-blueprint 1.8.5 → 1.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/components/DataDisplay/Accordion/Accordion.tsx

@@ -1,19 +1,20 @@
 import {
+  AccordionDetails,
+  AccordionSummary,
   Box,
-  Accordion as MuiAccordion,
-  AccordionDetails as MuiAccordionDetails,
   AccordionProps as MuiAccordionProps,
-  AccordionSummary as MuiAccordionSummary,
   Stack,
 } from '@mui/material';
 import { ReactNode } from 'react';
 import { Icons, Typography } from '../../export';
+import { StyledMuiAccordion } from './styles';
 
 export type AccordionProps = {
   title: ReactNode;
   content: ReactNode;
   actions?: ReactNode;
   index?: number;
+  errorKeys?: string[];
   expanded?: boolean | number;
 } & Omit<
   MuiAccordionProps,
@@ -25,29 +26,29 @@ export const Accordion = (props: AccordionProps) => {
     props;
 
   return (
-    <MuiAccordion
+    <StyledMuiAccordion
       key={index}
       onChange={onChange}
       expanded={typeof expanded == 'number' ? expanded === index : expanded}
       {...restProps}
     >
       <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <MuiAccordionSummary expandIcon={<Icons.AccordionArrow />}>
+        <AccordionSummary expandIcon={<Icons.AccordionArrow />}>
           {typeof title === 'string' ? (
             <Typography variant="subtitle2">{title}</Typography>
           ) : (
             title
           )}
-        </MuiAccordionSummary>
+        </AccordionSummary>
         <Box>{actions}</Box>
       </Stack>
-      <MuiAccordionDetails>
+      <AccordionDetails>
         {typeof content === 'string' ? (
           <Typography variant="label1">{content}</Typography>
         ) : (
           content
         )}
-      </MuiAccordionDetails>
-    </MuiAccordion>
+      </AccordionDetails>
+    </StyledMuiAccordion>
   );
 };

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

@@ -0,0 +1,10 @@
+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,14 +1,35 @@
-import { Box, SxProps } from '@mui/material';
-import { SyntheticEvent, useState } from 'react';
+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 }: AccordionGroupProps) => {
-  const [expanded, setExpanded] = useState<number | false>(false);
+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) => {
@@ -16,16 +37,16 @@ export const AccordionGroup = ({ data, containerSx }: AccordionGroupProps) => {
     };
 
   return (
-    <Box sx={{ ...containerSx }}>
+    <StyledAccordionContainer sx={{ ...containerSx }}>
       {data?.map((itemProps, index) => (
         <Accordion
           elevation={0}
-          {...itemProps}
           expanded={expanded}
+          {...itemProps}
           index={index}
           onChange={handleChange(index)}
         />
       ))}
-    </Box>
+    </StyledAccordionContainer>
   );
 };

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

@@ -0,0 +1,8 @@
+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/ActivityLogView.tsx

@@ -1,8 +1,9 @@
 import { TimelineContent, TimelineItem, TimelineSeparator } from '@mui/lab';
-import { Box, Stack, Typography, useTheme } from '@mui/material';
+import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
 import { format, isToday } from 'date-fns';
 import _ from 'lodash';
 import { useState } from 'react';
+import { AddSquare } from '../../Assets/Icons/IconComponents/AddSquare';
 import { Button, DatePicker, Spinner } from '../../export';
 import { EmptyIllustration } from '../EmptyIllustration/EmptyIllustration';
 import {
@@ -14,7 +15,6 @@ import {
 import {
   StyledActivityLogViewBox,
   StyledIconBox,
-  StyledSectionTitle,
   StyledSpinnerBox,
   StyledTimeline,
   StyledTimelineConnector,
@@ -24,8 +24,8 @@ import {
 export type ActivityAction = 'create' | 'update' | 'delete';
 
 export interface Activity {
-  userName: string;
-  action: ActivityAction;
+  userName?: string;
+  action?: ActivityAction;
   message: string;
   timestamp: string;
 }
@@ -40,6 +40,9 @@ interface ActivityLogProps {
   setFromDate: (date: Date | null) => void;
   setToDate: (date: Date | null) => void;
   isLoading: boolean;
+  hideLogFilter?: boolean;
+  timelineContentSx?: SxProps;
+  timelineSx?: SxProps;
 }
 
 const ActivityLogFilter = ({
@@ -115,6 +118,9 @@ export const ActivityLogView = ({
   setFromDate,
   setToDate,
   isLoading,
+  hideLogFilter = false,
+  timelineContentSx = {},
+  timelineSx = {},
 }: ActivityLogProps) => {
   const theme = useTheme();
   const lastItemRef = useIntersectionObserver(() => {
@@ -134,14 +140,14 @@ export const ActivityLogView = ({
   });
 
   const renderMessage = (activity: Activity) =>
-    activity.message.split('\n').map((part, index) => (
-      <Typography key={index} component="div">
-        {index === 0 && (
+    activity.message?.split('\n').map((part, index) => (
+      <Typography key={index} variant="body1" sx={{ fontWeight: 500 }}>
+        {index === 0 && activity.userName && (
           <span style={{ color: theme.palette.text.primary }}>
             {activity.userName}
           </span>
         )}{' '}
-        {part.split(/('[^']*')/g).map((text, idx) => {
+        {part?.split(/('[^']*')/g).map((text, idx) => {
           const isQuotedText = text.startsWith("'") && text.endsWith("'");
           return (
             <span
@@ -161,14 +167,16 @@ export const ActivityLogView = ({
 
   return (
     <StyledActivityLogViewBox className="scrollable-activity-log">
-      <ActivityLogFilter
-        fromDate={fromDate}
-        toDate={toDate}
-        setFromDate={setFromDate}
-        setToDate={setToDate}
-        fetchNextPage={fetchNextPage}
-        isLoading={isLoading}
-      />
+      {!hideLogFilter && (
+        <ActivityLogFilter
+          fromDate={fromDate}
+          toDate={toDate}
+          setFromDate={setFromDate}
+          setToDate={setToDate}
+          fetchNextPage={fetchNextPage}
+          isLoading={isLoading}
+        />
+      )}
 
       {loading ? (
         <StyledSpinnerBox>
@@ -179,8 +187,8 @@ export const ActivityLogView = ({
       ) : (
         Object.entries(groupedActivities).map(([section, activities]) => (
           <Box key={section}>
-            <StyledSectionTitle>{section}</StyledSectionTitle>
-            <StyledTimeline>
+            <Typography variant="caption">{section}</Typography>
+            <StyledTimeline sx={{ ...timelineSx }}>
               {activities.map((activity, index) => (
                 <TimelineItem
                   key={index}
@@ -189,7 +197,11 @@ export const ActivityLogView = ({
                   <TimelineSeparator>
                     <StyledTimelineDot>
                       <StyledIconBox>
-                        <ActivityIcon type={activity.action} />
+                        {activity.action ? (
+                          <ActivityIcon type={activity.action} />
+                        ) : (
+                          <AddSquare />
+                        )}
                       </StyledIconBox>
                     </StyledTimelineDot>
                     {index < activities.length - 1 && (
@@ -201,9 +213,12 @@ export const ActivityLogView = ({
                       display: 'flex',
                       justifyContent: 'space-between',
                       marginTop: 1,
+                      ...timelineContentSx,
                     }}
                   >
-                    <Typography>{renderMessage(activity)}</Typography>
+                    <Typography variant="body1" sx={{ fontWeight: 500 }}>
+                      {renderMessage(activity)}
+                    </Typography>
                     <Typography variant="caption">
                       {format(
                         convertUTCtoIST(activity.timestamp),

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

@@ -22,6 +22,8 @@ export const StyledTimeline = styled(Timeline)({
   [`& .${timelineItemClasses.root}:not(:first-of-type)`]: {
     marginTop: '0px',
   },
+  padding: 0,
+  margin: 0,
 });
 
 export const StyledTimelineDot = styled(TimelineDot)(({ theme }) => ({

package/src/components/DataDisplay/StatusCard/StatusCard.tsx

@@ -1,17 +1,24 @@
-import { Box, styled, Theme, useTheme } from '@mui/material';
-import { Typography } from '../../export';
+import { Box, styled, SxProps, Theme, useTheme } from '@mui/material';
+import { Typography, TypographyProps } from '../../export';
 
 export type StatusCardProps = {
   color: 'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink';
   text: string;
+  containerSx?: SxProps;
+  typographyVariant?: TypographyProps['variant'];
 };
 
-export const StatusCard = ({ color, text }: StatusCardProps) => {
+export const StatusCard = ({
+  color,
+  text,
+  containerSx = {},
+  typographyVariant = 'label2',
+}: StatusCardProps) => {
   const theme = useTheme();
   const { textColor, backgroundColor } = getStatusColor(color, theme);
   return (
-    <StatusContainer backgroundColor={backgroundColor}>
-      <Typography variant="label2" color={textColor}>
+    <StatusContainer backgroundColor={backgroundColor} sx={containerSx}>
+      <Typography variant={typographyVariant} color={textColor}>
         {text}
       </Typography>
     </StatusContainer>

package/src/components/Input/MultiCheckBox/MultiCheckBox.tsx

@@ -2,7 +2,7 @@ import { Stack, StackProps } from '@mui/material';
 import { ResponsiveStyleValue } from '@mui/system';
 import { ReactNode } from 'react';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-import { SingleCheckBox } from '../SingleCheckBox/SIngleCheckBox';
+import { SingleCheckBox } from '../SingleCheckBox/SingleCheckBox';
 
 export type MultiCheckboxProps = {
   containerProps?: StackProps;

package/src/components/Input/SingleCheckBox/{SIngleCheckBox.tsx → SingleCheckBox.tsx}

@@ -3,6 +3,7 @@ import {
   FormControlLabelProps,
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
+  SxProps,
   useTheme,
 } from '@mui/material';
 import { ReactNode } from 'react';

package/src/components/Input/SingleSelect/components/SingleFilter.tsx

@@ -97,6 +97,7 @@ export const SingleFilter = ({
           sx: {
             padding: '0px',
             width: '250px',
+            minWidth: 'max-content',
           },
         }}
         anchor={({ open }: { open: (e: any) => void }) => (
@@ -109,6 +110,10 @@ export const SingleFilter = ({
             sx={{
               gap: '1px',
               borderRadius: '20px',
+              textWrap: 'nowrap',
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              minWidth: 'max-content',
             }}
             variant="contained"
             background={

package/src/components/Input/export.ts

@@ -11,7 +11,7 @@ export * from './PasswordField/PasswordField';
 export * from './RadioGroup/RadioGroup';
 export * from './SearchBar/SearchBar';
 export * from './Select/Select';
-export * from './SingleCheckBox/SIngleCheckBox';
+export * from './SingleCheckBox/SingleCheckBox';
 export * from './SingleSelect/SingleSelect';
 export * from './Switch/Switch';
 export * from './TextField/TextField';

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -28,6 +28,7 @@ interface PageHeaderProps {
   actions?: ReactNode[];
   columns?: GridColDef[];
   searchText?: string;
+  defaultShowLabels?: string[];
 }
 
 const ViewTab = ({ title }: { title: string }) => {
@@ -59,13 +60,23 @@ export const PageHeader = ({
   uniqueId,
   actions = [],
   filterComponents = [],
+  defaultShowLabels = [],
   columns,
   viewsSlot = <Box></Box>,
   searchText = 'Search',
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
 
-  const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
+  const allFilterLabels = filterComponents.map(
+    (filter) => filter.props['label'] || 'Label Not Found',
+  );
+
+  const initialHiddenLabels = allFilterLabels.filter(
+    (label) => !defaultShowLabels.includes(label),
+  );
+
+  const [hiddenLabels, setHiddenLabels] =
+    useState<string[]>(initialHiddenLabels);
 
   const dispatch = useDispatch();
 
@@ -188,7 +199,7 @@ export const PageHeader = ({
               }
             }}
             handleReset={() => {
-              setHiddenLabels([]);
+              setHiddenLabels(initialHiddenLabels);
             }}
           />
         </Stack>

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -51,7 +51,7 @@ export const TabsContainer = ({
 
   useEffect(() => {
     setCurrentTab(tabs[currentTabIndex]?.key);
-  }, []);
+  }, [tabs, currentTabIndex]);
 
   return (
     <>

package/src/stories/Input/SingleCheckBox.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import {
   CheckboxProps,
   SingleCheckBox,
-} from '../../components/Input/SingleCheckBox/SIngleCheckBox';
+} from '../../components/Input/SingleCheckBox/SingleCheckBox';
 
 export default {
   title: 'Input/SingleCheckBox',

package/src/themes/commonTheme.ts

@@ -91,14 +91,11 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
-      // MuiAccordian: {
-      //   root: {},
-      // },
       MuiAccordionSummary: {
         styleOverrides: {
           root: {
             justifyContent: 'flex-start',
-            paddingLeft: '20px',
+            padding: '0px 16px',
             '&.Mui-expanded': {
               minHeight: '0px',
             },
@@ -118,6 +115,13 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiAccordionDetails: {
+        styleOverrides: {
+          root: {
+            padding: '0px 16px',
+          },
+        },
+      },
       MuiStepLabel: {
         styleOverrides: {
           root: {