@campxdev/react-blueprint 1.1.5 → 1.1.7

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

@@ -11,6 +11,7 @@ import {
 } from "recharts";
 import {
   AxisLabelProps,
+  BaseAxisProps,
   CartesianGridProps,
   LegendProps,
   MarginProps,
@@ -26,12 +27,14 @@ export type BarChartProps = {
   dataKey: string;
   data: any[];
   bars: BarItem[];
-  barGap?: number;
-  barSize?: number;
+  domain?: any[];
+  barGap?: number | string;
+  barSize?: number | string;
   showToolTip?: boolean;
   showLegend?: boolean;
   cartesianGrid?: CartesianGridProps;
   axisLabelProps?: AxisLabelProps;
+  baseAxisProps?: BaseAxisProps;
   legendSx?: LegendProps;
   containerSx?: SxProps;
   margin?: MarginProps;
@@ -51,12 +54,14 @@ export const BarChart = ({
   margin,
   layout = "horizontal",
   dataKey,
+  domain = [0, "auto"],
   data,
   bars,
   barGap = 10,
   barSize = 20,
   showToolTip = true,
   showLegend = true,
+  baseAxisProps,
   cartesianGrid = { showCartesianGrid: false },
   axisLabelProps,
   legendSx,
@@ -68,7 +73,7 @@ export const BarChart = ({
   const theme = useTheme();
 
   return (
-    <Stack alignItems={"center"} sx={{ ...containerSx }}>
+    <Stack alignItems={"center"} sx={{ ...containerSx }} width={"fit-content"}>
       <Typography variant={"h5"} align={"center"} sx={{ ...titleSx }}>
         {title}
       </Typography>
@@ -86,12 +91,14 @@ export const BarChart = ({
         )}
         {showToolTip && (
           <Tooltip
+            cursor={{ fill: theme.palette.secondary.light, fillOpacity: "50%" }}
             itemStyle={{
-              color: theme.palette.text.primary,
+              color: theme.palette.text.secondary,
             }}
             contentStyle={{
-              color: theme.palette.text.secondary,
+              color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
+              borderColor: theme.palette.border.primary,
               borderRadius: "5px",
               padding: "5px 10px",
             }}
@@ -106,7 +113,10 @@ export const BarChart = ({
             <XAxis
               type="category"
               dataKey={dataKey}
-              stroke={theme.palette.primary.dark}
+              stroke={theme.palette.border.primary}
+              tick={{ fill: theme.palette.text.tertiary }}
+              angle={baseAxisProps?.xAxis?.angle}
+              tickMargin={baseAxisProps?.xAxis?.tickMargin}
             >
               <Label
                 {...xLabel}
@@ -114,7 +124,13 @@ export const BarChart = ({
                 style={{ fill: theme.palette.text.primary }}
               />
             </XAxis>
-            <YAxis type="number" stroke={theme.palette.primary.dark}>
+            <YAxis
+              type="number"
+              stroke={theme.palette.border.primary}
+              tick={{ fill: theme.palette.text.tertiary }}
+              tickMargin={baseAxisProps?.yAxis?.tickMargin}
+              domain={domain}
+            >
               {yLabel && (
                 <Label
                   offset={10}
@@ -129,7 +145,13 @@ export const BarChart = ({
           </>
         ) : (
           <>
-            <XAxis type="number" stroke={theme.palette.primary.dark}>
+            <XAxis
+              type="number"
+              stroke={theme.palette.border.primary}
+              tick={{ fill: theme.palette.text.tertiary }}
+              angle={baseAxisProps?.xAxis?.angle}
+              tickMargin={baseAxisProps?.xAxis?.tickMargin}
+            >
               <Label
                 {...xLabel}
                 dy={xLabel?.dy}
@@ -139,7 +161,9 @@ export const BarChart = ({
             <YAxis
               dataKey={dataKey}
               type="category"
-              stroke={theme.palette.primary.dark}
+              stroke={theme.palette.border.primary}
+              tick={{ fill: theme.palette.text.tertiary }}
+              tickMargin={baseAxisProps?.yAxis?.tickMargin}
             >
               {yLabel && (
                 <Label

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

@@ -74,11 +74,12 @@ export const LineChart = ({
         {showToolTip && (
           <Tooltip
             itemStyle={{
-              color: theme.palette.text.primary,
+              color: theme.palette.text.secondary,
             }}
             contentStyle={{
-              color: theme.palette.text.secondary,
+              color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
+              borderColor: theme.palette.border.primary,
               borderRadius: "5px",
               padding: "5px 10px",
             }}
@@ -90,7 +91,8 @@ export const LineChart = ({
           padding={"gap"}
           type="category"
           dataKey={dataKey}
-          stroke={theme.palette.primary.dark}
+          stroke={theme.palette.border.primary}
+          tick={{ fill: theme.palette.text.tertiary }}
         >
           <Label
             {...xLabel}
@@ -98,7 +100,11 @@ export const LineChart = ({
             style={{ fill: theme.palette.text.primary }}
           />
         </XAxis>
-        <YAxis type="number" stroke={theme.palette.primary.dark}>
+        <YAxis
+          type="number"
+          stroke={theme.palette.border.primary}
+          tick={{ fill: theme.palette.text.tertiary }}
+        >
           {yLabel && (
             <Label
               offset={10}

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

@@ -52,11 +52,12 @@ export const PieChart = ({
         {showToolTip && (
           <Tooltip
             itemStyle={{
-              color: theme.palette.text.primary,
+              color: theme.palette.text.secondary,
             }}
             contentStyle={{
-              color: theme.palette.text.secondary,
+              color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
+              borderColor: theme.palette.border.primary,
               borderRadius: "5px",
               padding: "5px 10px",
             }}

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

@@ -146,6 +146,7 @@ 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",
 }));

package/src/components/Charts/export.ts

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

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

@@ -30,6 +30,16 @@ export type LabelProps = {
   angle?: number;
 };
 
+export type BaseAxisProps = {
+  xAxis?: TickProps;
+  yAxis?: TickProps;
+};
+
+export type TickProps = {
+  angle?: number;
+  tickMargin?: number;
+};
+
 export type LegendProps = {
   width?: number;
   height?: number;
@@ -38,6 +48,6 @@ export type LegendProps = {
   verticalAlign?: VerticalAlignmentType;
   iconSize?: number;
   iconType?: IconType;
-  margin: MarginProps;
-  className: string;
+  margin?: MarginProps;
+  className?: string;
 };

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

@@ -1,55 +1,51 @@
-import { ExpandMore } from "@mui/icons-material";
 import {
-  AccordionDetails,
   Box,
   Accordion as MuiAccordion,
+  AccordionDetails as MuiAccordionDetails,
+  AccordionProps as MuiAccordionProps,
   AccordionSummary as MuiAccordionSummary,
-  SxProps,
-} from "@mui/material";
-import { ReactNode, SyntheticEvent, useState } from "react";
-import { Typography } from "../Typography/Typography";
+  Stack,
+} from '@mui/material';
+import { ReactNode } from 'react';
+import { Icons, Typography } from '../../export';
 
-interface AccordionProps {
-  data: AccordionItem[];
-  containerSx?: SxProps;
-}
-interface AccordionItem {
-  title: string | ReactNode;
-  content: string | ReactNode;
-}
-
-export const Accordion = ({ data, containerSx }: AccordionProps) => {
-  const [expanded, setExpanded] = useState<number | false>(false);
-
-  const handleChange =
-    (panel: number) => (event: SyntheticEvent, isExpanded: boolean) => {
-      setExpanded(isExpanded ? panel : false);
-    };
+export type AccordionProps = {
+  title: ReactNode;
+  content: ReactNode;
+  actions?: ReactNode;
+  index?: number;
+  expanded?: boolean | number;
+} & Omit<
+  MuiAccordionProps,
+  'children' | 'content' | 'title' | 'index' | 'expanded' | 'actions'
+>;
 
+export const Accordion = (props: AccordionProps) => {
+  const { index, expanded, title, content, actions, onChange, ...restProps } =
+    props;
   return (
-    <Box sx={{ ...containerSx }}>
-      {data?.map((item, index) => (
-        <MuiAccordion
-          key={index}
-          expanded={expanded === index}
-          onChange={handleChange(index)}
-        >
-          <MuiAccordionSummary expandIcon={<ExpandMore />}>
-            {typeof item?.title === "string" ? (
-              <Typography variant="subtitle2">{item?.title}</Typography>
-            ) : (
-              item?.title
-            )}
-          </MuiAccordionSummary>
-          <AccordionDetails>
-            {typeof item?.content === "string" ? (
-              <Typography variant="label1">{item?.content}</Typography>
-            ) : (
-              item?.content
-            )}
-          </AccordionDetails>
-        </MuiAccordion>
-      ))}
-    </Box>
+    <MuiAccordion
+      key={index}
+      expanded={typeof expanded == 'number' ? expanded === index : expanded}
+      {...restProps}
+    >
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <MuiAccordionSummary expandIcon={<Icons.AccordionArrow />}>
+          {typeof title === 'string' ? (
+            <Typography variant="subtitle2">{title}</Typography>
+          ) : (
+            title
+          )}
+        </MuiAccordionSummary>
+        <Box>{actions}</Box>
+      </Stack>
+      <MuiAccordionDetails>
+        {typeof content === 'string' ? (
+          <Typography variant="label1">{content}</Typography>
+        ) : (
+          content
+        )}
+      </MuiAccordionDetails>
+    </MuiAccordion>
   );
 };

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

@@ -0,0 +1,30 @@
+import { Box, SxProps } from '@mui/material';
+import { SyntheticEvent, useState } from 'react';
+import { Accordion, AccordionProps } from '../Accordion/Accordion';
+
+type AccordionGroupProps = {
+  data: AccordionProps[];
+  containerSx?: SxProps;
+};
+
+export const AccordionGroup = ({ data, containerSx }: AccordionGroupProps) => {
+  const [expanded, setExpanded] = useState<number | false>(false);
+
+  const handleChange =
+    (panel: number) => (event: SyntheticEvent, isExpanded: boolean) => {
+      setExpanded(isExpanded ? panel : false);
+    };
+
+  return (
+    <Box sx={{ ...containerSx }}>
+      {data?.map((itemProps, index) => (
+        <Accordion
+          {...itemProps}
+          expanded={expanded}
+          index={index}
+          onChange={handleChange(index)}
+        />
+      ))}
+    </Box>
+  );
+};

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

@@ -1,29 +1,24 @@
-import {
-  Avatar as MuiAvatar,
-  AvatarProps as MuiAvatarProps,
-  styled,
-  useTheme,
-} from "@mui/material";
-import { Typography } from "../Typography/Typography";
+import { Avatar as MuiAvatar, AvatarProps as MuiAvatarProps, styled, useTheme } from '@mui/material';
+import { Typography } from '../Typography/Typography';
 
 export type CircularAvatarProps = {
   text: string;
-} & Omit<MuiAvatarProps, "sx">;
+} & Omit<MuiAvatarProps, 'sx'>;
 
 export const CircularAvatar = ({ text, ...rest }: CircularAvatarProps) => {
   const stringAvatar = (text: string) => {
-    if (!text) return "";
+    if (!text) return '';
     return text
-      .split(" ")
+      .split(' ')
       ?.map((w) => w[0])
-      ?.join("")
+      ?.join('')
       .toUpperCase();
   };
   const theme = useTheme();
 
   const StyledCircularAvatar = styled(MuiAvatar)(({ theme }) => ({
-    height: "42px",
-    width: "42px",
+    height: '42px',
+    width: '42px',
   }));
 
   return (
@@ -36,35 +31,29 @@ export const CircularAvatar = ({ text, ...rest }: CircularAvatarProps) => {
 export type SquareAvatarProps = {
   text: string;
   onlyStartLetters: boolean;
-} & Omit<MuiAvatarProps, "sx">;
+} & 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 "";
+    if (!text) return '';
     return text
-      .split(" ")
+      .split(' ')
       ?.map((w) => w[0])
-      ?.join("")
+      ?.join('')
       .toUpperCase();
   };
 
   const StyledSquareAvatar = styled(MuiAvatar)(({ theme }) => ({
-    height: "150px",
-    width: "210px",
+    height: '150px',
+    width: '210px',
     backgroundColor: theme.palette.secondary.dark,
-    borderRadius: "5px",
-    border: "none",
+    borderRadius: '5px',
+    border: 'none',
   }));
 
   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,14 +1,16 @@
 import { ChevronRight, MoreHoriz } from "@mui/icons-material";
 
 import {
+  CardContent,
   Checkbox,
-  Stack,
-  Typography,
   Card as MuiCard,
+  Stack,
   SxProps,
-  CardContent,
+  Typography,
 } from "@mui/material";
+import { Variant } from "@mui/material/styles/createTypography";
 import { ReactNode } from "react";
+import { DropDownIcon, DropdownMenu } from "../../export";
 import {
   StyledButton,
   StyledCardActions,
@@ -19,7 +21,6 @@ import {
   StyledStack,
   StyledStatusText,
 } from "./styles";
-import { DropDownIcon, DropdownMenu } from "../../export";
 
 export interface CardProps {
   title: string;
@@ -34,14 +35,23 @@ export interface CardProps {
     {
       title: string;
       value: string;
-    },
+    }
   ];
+  titleProps?: {
+    variant: Variant;
+    sx?: SxProps;
+  };
+  captionProps?: {
+    variant: Variant;
+    sx?: SxProps;
+  };
   status?: string;
   imageSrc?: string;
   checkBox?: boolean;
   moreOptions?: boolean;
   menu?: Array<ReactNode>;
   icon?: ReactNode;
+  headerSx?: SxProps;
   statusSx?: SxProps;
   cardSx?: SxProps;
 }
@@ -56,7 +66,14 @@ export const Card = ({
   checkBox,
   statusSx,
   cardSx,
+  headerSx,
   moreOptions,
+  titleProps = {
+    variant: "subtitle2",
+  },
+  captionProps = {
+    variant: "caption",
+  },
   icon,
   menu = [],
 }: CardProps) => {
@@ -67,7 +84,7 @@ export const Card = ({
   return (
     <MuiCard sx={cardSx}>
       {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
-      <StyledHeader>
+      <StyledHeader sx={headerSx}>
         <Stack gap={"8px"} flexDirection={"row"}>
           {checkBox && (
             <StyledStack>
@@ -76,8 +93,12 @@ export const Card = ({
           )}
 
           <Stack justifyContent={"center"}>
-            <Typography variant="subtitle2">{title}</Typography>
-            <Typography variant="caption">{caption}</Typography>
+            <Typography variant={titleProps.variant} sx={titleProps.sx}>
+              {title}
+            </Typography>
+            <Typography variant={captionProps.variant} sx={captionProps.sx}>
+              {caption}
+            </Typography>
           </Stack>
         </Stack>
         <Stack flexDirection={"row"} gap={"12px"} alignItems={"center"}>

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

@@ -0,0 +1,91 @@
+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";
+  singleSelection?: boolean;
+  toggle?: boolean;
+}
+
+export default function Chips({
+  list = [],
+  selected: _selected,
+  onSelected,
+  direction = "row",
+  singleSelection = true,
+  toggle = false,
+}: ChipsProps) {
+  const [selected, setSelected] = useState<string | number | string[]>(
+    singleSelection ? "" : []
+  );
+
+  useEffect(() => {
+    setSelected(_selected);
+  }, [_selected]);
+
+  const handleChange = (value: string | number) => {
+    if (singleSelection) {
+      if (selected === value && !toggle) {
+        setSelected("");
+        onSelected("");
+      } else {
+        setSelected(value);
+        onSelected(value);
+      }
+    } else {
+      if (Array.isArray(selected)) {
+        const valueStr = value.toString();
+        const selectedStr = selected.map((item) => item.toString());
+
+        if (selectedStr.includes(valueStr)) {
+          const newSelected = selected.filter(
+            (item) => item.toString() !== valueStr
+          );
+          setSelected(newSelected);
+          onSelected(newSelected);
+        } else {
+          const newSelected = [...selected, value.toString()];
+          setSelected(newSelected);
+          onSelected(newSelected);
+        }
+      }
+    }
+  };
+
+  const isSelected = (value: string | number) =>
+    singleSelection
+      ? selected === value
+      : Array.isArray(selected) &&
+        selected.map((item) => item.toString()).includes(value.toString());
+
+  return (
+    <Stack gap="8px" direction={direction} flexWrap="wrap">
+      {list.map((item, index) => (
+        <StyledChip
+          key={index}
+          color="primary"
+          label={item.label}
+          clickable
+          variant={isSelected(item.value) ? "outlined" : "filled"}
+          onClick={() => handleChange(item.value)}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+  minWidth: "100px",
+  color: theme.palette.text.primary,
+  background: theme.palette.surface.grey,
+  "&.MuiButtonBase-root.MuiChip-filled": {
+    borderColor: theme.palette.primary.main,
+  },
+  height: "40px",
+  fontSize: "14px",
+  fontWeight: 500,
+  borderRadius: "20px",
+}));

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

@@ -1,9 +1,7 @@
-import {
-  DataGrid as MuiDataGrid,
-  DataGridProps as MuiDataGridProps,
-} from "@mui/x-data-grid";
-import { DataGridContainer } from "../styles";
-import { TablePagination } from "./TablePagination";
+import { Stack, styled } from '@mui/material';
+import { DataGrid as MuiDataGrid, DataGridProps as MuiDataGridProps } from '@mui/x-data-grid';
+import { DataGridContainer } from '../styles';
+import { TablePagination } from './TablePagination';
 
 export type DataTableProps = {
   limit?: number;
@@ -19,6 +17,9 @@ export const DataTable = (props: DataTableProps) => {
   return (
     <DataGridContainer>
       <MuiDataGrid
+        disableColumnFilter
+        disableColumnMenu
+        disableColumnSorting
         {...props}
         slots={{
           pagination: () => {
@@ -50,3 +51,10 @@ export const DataTable = (props: DataTableProps) => {
     </DataGridContainer>
   );
 };
+
+export const CellContainer = styled(Stack)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  flexDirection: 'row',
+}));

package/src/components/DataDisplay/export.ts

@@ -1,5 +1,6 @@
-export * from "./Accordion/Accordion";
-export * from "./Avatar/Avatar";
-export * from "./Card/Card";
-export * from "./DataTable/DataTable";
-export * from "./Typography/Typography";
+export * from './AccordionGroup/AccordionGroup';
+export * from './Avatar/Avatar';
+export * from './Card/Card';
+export * from './Chips/Chips';
+export * from './DataTable/DataTable';
+export * from './Typography/Typography';

package/src/components/DataDisplay/styles.tsx

@@ -1,7 +1,6 @@
-import { Box, styled } from "@mui/material";
+import { Box, styled } from '@mui/material';
 
 export const DataGridContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
-  width: "100%",
-  margin: "10px",
+  margin: '10px',
 }));