@campxdev/react-blueprint 1.1.8 → 1.1.10

package/src/components/Charts/BarChart/BarChart.tsx

@@ -1,4 +1,4 @@
-import { Stack, SxProps, Typography, useTheme } from "@mui/material";
+import { Stack, SxProps, Typography, useTheme } from '@mui/material';
 import {
   Bar,
   CartesianGrid,
@@ -8,15 +8,15 @@ import {
   Tooltip,
   XAxis,
   YAxis,
-} from "recharts";
+} from 'recharts';
 import {
   AxisLabelProps,
   BaseAxisProps,
   CartesianGridProps,
   LegendProps,
   MarginProps,
-} from "../types/types";
-import { LayoutType } from "recharts/types/util/types";
+} from '../types/types';
+import { LayoutType } from 'recharts/types/util/types';
 
 export type BarChartProps = {
   title?: string;
@@ -47,14 +47,14 @@ type BarItem = {
 };
 
 export const BarChart = ({
-  title = "Bar Chart",
+  title = 'Bar Chart',
   titleSx,
   width = 700,
   height = 500,
   margin,
-  layout = "horizontal",
+  layout = 'horizontal',
   dataKey,
-  domain = [0, "auto"],
+  domain = [0, 'auto'],
   data,
   bars,
   barGap = 10,
@@ -68,20 +68,20 @@ export const BarChart = ({
   containerSx,
 }: BarChartProps) => {
   const { showCartesianGrid, size } = cartesianGrid;
-  const isVerticalLayout = layout === "vertical";
+  const isVerticalLayout = layout === 'vertical';
   const { xLabel, yLabel } = axisLabelProps ?? {};
   const theme = useTheme();
 
   return (
-    <Stack alignItems={"center"} sx={{ ...containerSx }} width={"fit-content"}>
-      <Typography variant={"h5"} align={"center"} sx={{ ...titleSx }}>
+    <Stack alignItems={'center'} sx={{ ...containerSx }} width={'fit-content'}>
+      <Typography variant={'h5'} align={'center'} sx={{ ...titleSx }}>
         {title}
       </Typography>
       <ReBarChart
         width={width}
         height={height}
         margin={margin}
-        layout={isVerticalLayout ? "horizontal" : "vertical"}
+        layout={isVerticalLayout ? 'horizontal' : 'vertical'}
         data={data}
         barGap={barGap}
         barSize={barSize}
@@ -91,7 +91,7 @@ export const BarChart = ({
         )}
         {showToolTip && (
           <Tooltip
-            cursor={{ fill: theme.palette.secondary.light, fillOpacity: "50%" }}
+            cursor={{ fill: theme.palette.secondary.light, fillOpacity: '50%' }}
             itemStyle={{
               color: theme.palette.text.secondary,
             }}
@@ -99,15 +99,13 @@ export const BarChart = ({
               color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
               borderColor: theme.palette.border.primary,
-              borderRadius: "5px",
-              padding: "5px 10px",
+              borderRadius: '5px',
+              padding: '5px 10px',
             }}
           />
         )}
         {showLegend && <Legend {...legendSx} />}
-        {bars?.map((item, index) => (
-          <Bar key={index} {...item} />
-        ))}
+        {bars?.map((item, index) => <Bar key={index} {...item} />)}
         {isVerticalLayout ? (
           <>
             <XAxis
@@ -134,7 +132,7 @@ export const BarChart = ({
               {yLabel && (
                 <Label
                   offset={10}
-                  position={"insideLeft"}
+                  position={'insideLeft'}
                   {...yLabel}
                   angle={yLabel.angle ?? -90}
                   dx={yLabel?.dx}
@@ -168,7 +166,7 @@ export const BarChart = ({
               {yLabel && (
                 <Label
                   offset={10}
-                  position={"insideLeft"}
+                  position={'insideLeft'}
                   {...yLabel}
                   angle={yLabel.angle ?? -90}
                   dx={yLabel?.dx}

package/src/components/Charts/LineChart/LineChart.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack, SxProps, Typography, useTheme } from "@mui/material";
+import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
 import {
   Bar,
   CartesianGrid,
@@ -9,14 +9,14 @@ import {
   Tooltip,
   XAxis,
   YAxis,
-} from "recharts";
+} from 'recharts';
 import {
   AxisLabelProps,
   CartesianGridProps,
   LegendProps,
   MarginProps,
-} from "../types/types";
-import { CurveType } from "recharts/types/shape/Curve";
+} from '../types/types';
+import { CurveType } from 'recharts/types/shape/Curve';
 
 export type LineChartProps = {
   title?: string;
@@ -43,7 +43,7 @@ type LineItem = {
 };
 
 export const LineChart = ({
-  title = "Line Chart",
+  title = 'Line Chart',
   titleSx,
   width = 700,
   height = 500,
@@ -63,8 +63,8 @@ export const LineChart = ({
   const theme = useTheme();
 
   return (
-    <Stack alignItems={"center"} sx={containerSx}>
-      <Typography variant={"h5"} align={"center"} sx={titleSx}>
+    <Stack alignItems={'center'} sx={containerSx}>
+      <Typography variant={'h5'} align={'center'} sx={titleSx}>
         {title}
       </Typography>
       <ReLineChart width={width} height={height} margin={margin} data={data}>
@@ -80,15 +80,15 @@ export const LineChart = ({
               color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
               borderColor: theme.palette.border.primary,
-              borderRadius: "5px",
-              padding: "5px 10px",
+              borderRadius: '5px',
+              padding: '5px 10px',
             }}
           />
         )}
         {showLegend && <Legend {...legendSx} />}
 
         <XAxis
-          padding={"gap"}
+          padding={'gap'}
           type="category"
           dataKey={dataKey}
           stroke={theme.palette.border.primary}
@@ -108,7 +108,7 @@ export const LineChart = ({
           {yLabel && (
             <Label
               offset={10}
-              position={"insideLeft"}
+              position={'insideLeft'}
               {...yLabel}
               angle={yLabel.angle ?? -90}
               dx={yLabel?.dx}
@@ -116,9 +116,7 @@ export const LineChart = ({
             />
           )}
         </YAxis>
-        {lines?.map((item, index) => (
-          <Line key={index} {...item} />
-        ))}
+        {lines?.map((item, index) => <Line key={index} {...item} />)}
       </ReLineChart>
     </Stack>
   );

package/src/components/Charts/PieChart/PieChart.tsx

@@ -1,6 +1,6 @@
-import { Stack, SxProps, Typography, useTheme } from "@mui/material";
-import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from "recharts";
-import { LegendProps, MarginProps } from "../types/types";
+import { Stack, SxProps, Typography, useTheme } from '@mui/material';
+import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from 'recharts';
+import { LegendProps, MarginProps } from '../types/types';
 
 export type PieChartProps = {
   title?: string;
@@ -29,7 +29,7 @@ type PieProps = {
 };
 
 export const PieChart = ({
-  title = "Pie Chart",
+  title = 'Pie Chart',
   titleSx,
   margin,
   width = 500,
@@ -58,13 +58,13 @@ export const PieChart = ({
               color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
               borderColor: theme.palette.border.primary,
-              borderRadius: "5px",
-              padding: "5px 10px",
+              borderRadius: '5px',
+              padding: '5px 10px',
             }}
           />
         )}
         {showLegend && <Legend {...legendSx} />}
-        <Pie {...pie1} cx={pie1?.cx ?? "50%"} cy={pie1?.cy ?? "50%"}>
+        <Pie {...pie1} cx={pie1?.cx ?? '50%'} cy={pie1?.cy ?? '50%'}>
           {pie1?.data.map((entry, index) => (
             <Cell
               key={`cell-${index}`}
@@ -77,7 +77,7 @@ export const PieChart = ({
           ))}
         </Pie>
         {pie2 && (
-          <Pie {...pie2} cx={pie2?.cx ?? "50%"} cy={pie2?.cy ?? "50%"}>
+          <Pie {...pie2} cx={pie2?.cx ?? '50%'} cy={pie2?.cy ?? '50%'}>
             {pie2?.data.map((entry, index) => (
               <Cell
                 key={`cell-${index}`}

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -5,10 +5,10 @@ import {
   SxProps,
   Typography,
   useTheme,
-} from "@mui/material";
-import { Treemap as ReTreeMap, Tooltip } from "recharts";
-import { AnimationTiming } from "recharts/types/util/types";
-import { MarginProps } from "../types/types";
+} from '@mui/material';
+import { Treemap as ReTreeMap, Tooltip } from 'recharts';
+import { AnimationTiming } from 'recharts/types/util/types';
+import { MarginProps } from '../types/types';
 
 interface TreeMapProps {
   title?: string;
@@ -30,25 +30,25 @@ interface TreeMapProps {
 }
 
 const TreeMap = ({
-  title = "Tree Map",
+  title = 'Tree Map',
   titleSx,
   data,
   dataKey,
   width = 400,
   height = 200,
   aspectRatio,
-  fill = "#F8C12D",
-  stroke = "#fff",
+  fill = '#F8C12D',
+  stroke = '#fff',
   colors,
   showToolTip = true,
-  animationEasing = "linear",
+  animationEasing = 'linear',
   isAnimationActive = false,
   treeMapStyle,
   containerSx,
 }: TreeMapProps) => {
   return (
-    <Stack alignItems={"center"} sx={{ ...containerSx }}>
-      <Typography variant={"h5"} align={"center"} sx={{ ...titleSx }}>
+    <Stack alignItems={'center'} sx={{ ...containerSx }}>
+      <Typography variant={'h5'} align={'center'} sx={{ ...titleSx }}>
         {title}
       </Typography>
       <ReTreeMap
@@ -101,7 +101,7 @@ const CustomizedContent = (props: any) => {
               ? colors[
                   Math.floor((index / root.children.length) * colors.length)
                 ]
-              : "#ffffff00",
+              : '#ffffff00',
           stroke: theme.palette.surface.grey,
           strokeWidth: 2,
           strokeOpacity: 1,
@@ -132,9 +132,9 @@ const CustomTooltip = ({ active, payload }: any) => {
         <Typography variant="caption">
           <span>{`${payload[0].payload.name}`}</span>
           <span
-            style={{ fontWeight: "bold", color: theme.palette.text.primary }}
+            style={{ fontWeight: 'bold', color: theme.palette.text.primary }}
           >
-            {"\xa0\xa0" + `${payload[0].value}`}
+            {'\xa0\xa0' + `${payload[0].value}`}
           </span>
         </Typography>
       </StyledContainer>
@@ -147,6 +147,6 @@ const CustomTooltip = ({ active, payload }: any) => {
 export const StyledContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   borderColor: theme.palette.border.primary,
-  borderRadius: "5px",
-  padding: "5px 10px",
+  borderRadius: '5px',
+  padding: '5px 10px',
 }));

package/src/components/Charts/export.ts

@@ -1,4 +1,4 @@
-export * from "./BarChart/BarChart";
-export * from "./LineChart/LineChart";
-export * from "./TreeMap/TreeMap";
-export * from "./PieChart/PieChart";
+export * from './BarChart/BarChart';
+export * from './LineChart/LineChart';
+export * from './TreeMap/TreeMap';
+export * from './PieChart/PieChart';

package/src/components/Charts/types/types.ts

@@ -1,10 +1,10 @@
-import { SxProps } from "@mui/material";
+import { SxProps } from '@mui/material';
 import {
   HorizontalAlignmentType,
   IconType,
   VerticalAlignmentType,
-} from "recharts/types/component/DefaultLegendContent";
-import { LayoutType } from "recharts/types/util/types";
+} from 'recharts/types/component/DefaultLegendContent';
+import { LayoutType } from 'recharts/types/util/types';
 
 export type CartesianGridProps = {
   showCartesianGrid: boolean;

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

@@ -23,9 +23,11 @@ export type AccordionProps = {
 export const Accordion = (props: AccordionProps) => {
   const { index, expanded, title, content, actions, onChange, ...restProps } =
     props;
+
   return (
     <MuiAccordion
       key={index}
+      onChange={onChange}
       expanded={typeof expanded == 'number' ? expanded === index : expanded}
       {...restProps}
     >

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -1,4 +1,9 @@
-import { Avatar as MuiAvatar, AvatarProps as MuiAvatarProps, styled, useTheme } from '@mui/material';
+import {
+  Avatar as MuiAvatar,
+  AvatarProps as MuiAvatarProps,
+  styled,
+  useTheme,
+} from '@mui/material';
 import { Typography } from '../Typography/Typography';
 
 export type CircularAvatarProps = {
@@ -33,7 +38,11 @@ export type SquareAvatarProps = {
   onlyStartLetters: boolean;
 } & Omit<MuiAvatarProps, 'sx'>;
 
-export const SquareAvatar = ({ onlyStartLetters = false, text, ...rest }: SquareAvatarProps) => {
+export const SquareAvatar = ({
+  onlyStartLetters = false,
+  text,
+  ...rest
+}: SquareAvatarProps) => {
   const stringAvatar = (text: string) => {
     if (!text) return '';
     return text
@@ -53,7 +62,9 @@ export const SquareAvatar = ({ onlyStartLetters = false, text, ...rest }: Square
 
   return (
     <StyledSquareAvatar variant="square" {...rest}>
-      <Typography variant="h6">{onlyStartLetters ? stringAvatar(text) : text}</Typography>
+      <Typography variant="h6">
+        {onlyStartLetters ? stringAvatar(text) : text}
+      </Typography>
     </StyledSquareAvatar>
   );
 };

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

@@ -1,4 +1,4 @@
-import { ChevronRight, MoreHoriz } from "@mui/icons-material";
+import { ChevronRight, MoreHoriz } from '@mui/icons-material';
 
 import {
   CardContent,
@@ -7,10 +7,10 @@ import {
   Stack,
   SxProps,
   Typography,
-} from "@mui/material";
-import { Variant } from "@mui/material/styles/createTypography";
-import { ReactNode } from "react";
-import { DropDownIcon, DropdownMenu } from "../../export";
+} from '@mui/material';
+import { Variant } from '@mui/material/styles/createTypography';
+import { ReactNode } from 'react';
+import { DropDownIcon, DropdownMenu } from '../../export';
 import {
   StyledButton,
   StyledCardActions,
@@ -20,7 +20,7 @@ import {
   StyledImage,
   StyledStack,
   StyledStatusText,
-} from "./styles";
+} from './styles';
 
 export interface CardProps {
   title: string;
@@ -35,7 +35,7 @@ export interface CardProps {
     {
       title: string;
       value: string;
-    }
+    },
   ];
   titleProps?: {
     variant: Variant;
@@ -69,10 +69,10 @@ export const Card = ({
   headerSx,
   moreOptions,
   titleProps = {
-    variant: "subtitle2",
+    variant: 'subtitle2',
   },
   captionProps = {
-    variant: "caption",
+    variant: 'caption',
   },
   icon,
   menu = [],
@@ -85,14 +85,14 @@ export const Card = ({
     <MuiCard sx={cardSx}>
       {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
       <StyledHeader sx={headerSx}>
-        <Stack gap={"8px"} flexDirection={"row"}>
+        <Stack gap={'8px'} flexDirection={'row'}>
           {checkBox && (
             <StyledStack>
               <Checkbox />
             </StyledStack>
           )}
 
-          <Stack justifyContent={"center"}>
+          <Stack justifyContent={'center'}>
             <Typography variant={titleProps.variant} sx={titleProps.sx}>
               {title}
             </Typography>
@@ -101,10 +101,10 @@ export const Card = ({
             </Typography>
           </Stack>
         </Stack>
-        <Stack flexDirection={"row"} gap={"12px"} alignItems={"center"}>
+        <Stack flexDirection={'row'} gap={'12px'} alignItems={'center'}>
           {status && (
             <StyledStatusText variant="label2" sx={statusSx}>
-              {status}{" "}
+              {status}{' '}
             </StyledStatusText>
           )}
           {moreOptions && (
@@ -117,7 +117,7 @@ export const Card = ({
                       icon: (
                         <StyledIcon>{icon ? icon : <MoreHoriz />}</StyledIcon>
                       ),
-                      iconProps: { color: "secondary" },
+                      iconProps: { color: 'secondary' },
                       outlined: false,
                     }}
                   />
@@ -132,9 +132,9 @@ export const Card = ({
         <CardContent>
           <Stack
             sx={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "20px",
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: '20px',
             }}
           >
             {fields.map((field, index) => (
@@ -157,7 +157,7 @@ export const Card = ({
             onClick={handleClick}
             endIcon={footer?.endIcon ?? <ChevronRight />}
           >
-            {footer?.buttonText ?? "View"}
+            {footer?.buttonText ?? 'View'}
           </StyledButton>
         </StyledCardActions>
       )}

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

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

package/src/components/DataDisplay/Chips/Chips.tsx

@@ -1,11 +1,11 @@
-import { Chip, Stack, styled } from "@mui/material";
-import { ReactNode, useEffect, useState } from "react";
+import { Chip, Stack, styled } from '@mui/material';
+import { ReactNode, useEffect, useState } from 'react';
 
 interface ChipsProps {
   list: { label: string | ReactNode; value: string | number }[];
   selected: string[] | string | number;
   onSelected: (selected: string[] | string | number) => void;
-  direction?: "row" | "column";
+  direction?: 'row' | 'column';
   singleSelection?: boolean;
   toggle?: boolean;
 }
@@ -14,12 +14,12 @@ export default function Chips({
   list = [],
   selected: _selected,
   onSelected,
-  direction = "row",
+  direction = 'row',
   singleSelection = true,
   toggle = false,
 }: ChipsProps) {
   const [selected, setSelected] = useState<string | number | string[]>(
-    singleSelection ? "" : []
+    singleSelection ? '' : [],
   );
 
   useEffect(() => {
@@ -29,8 +29,8 @@ export default function Chips({
   const handleChange = (value: string | number) => {
     if (singleSelection) {
       if (selected === value && !toggle) {
-        setSelected("");
-        onSelected("");
+        setSelected('');
+        onSelected('');
       } else {
         setSelected(value);
         onSelected(value);
@@ -42,7 +42,7 @@ export default function Chips({
 
         if (selectedStr.includes(valueStr)) {
           const newSelected = selected.filter(
-            (item) => item.toString() !== valueStr
+            (item) => item.toString() !== valueStr,
           );
           setSelected(newSelected);
           onSelected(newSelected);
@@ -69,7 +69,7 @@ export default function Chips({
           color="primary"
           label={item.label}
           clickable
-          variant={isSelected(item.value) ? "outlined" : "filled"}
+          variant={isSelected(item.value) ? 'outlined' : 'filled'}
           onClick={() => handleChange(item.value)}
         />
       ))}
@@ -78,14 +78,14 @@ export default function Chips({
 }
 
 const StyledChip = styled(Chip)(({ theme }) => ({
-  minWidth: "100px",
+  minWidth: '100px',
   color: theme.palette.text.primary,
   background: theme.palette.surface.grey,
-  "&.MuiButtonBase-root.MuiChip-filled": {
+  '&.MuiButtonBase-root.MuiChip-filled': {
     borderColor: theme.palette.primary.main,
   },
-  height: "40px",
-  fontSize: "14px",
+  height: '40px',
+  fontSize: '14px',
   fontWeight: 500,
-  borderRadius: "20px",
+  borderRadius: '20px',
 }));

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -1,5 +1,8 @@
 import { Stack, styled } from '@mui/material';
-import { DataGrid as MuiDataGrid, DataGridProps as MuiDataGridProps } from '@mui/x-data-grid';
+import {
+  DataGrid as MuiDataGrid,
+  DataGridProps as MuiDataGridProps,
+} from '@mui/x-data-grid';
 import { DataGridContainer } from '../styles';
 import { TablePagination } from './TablePagination';