@campxdev/react-blueprint 1.1.6 → 1.1.8

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/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',
 }));

package/src/components/Feedback/Snackbar/Snackbar.tsx

@@ -6,6 +6,7 @@ import {
   Stack,
   useTheme,
 } from "@mui/material";
+import { capitalize } from "lodash";
 import { Typography } from "../../DataDisplay/Typography/Typography";
 import { Icons } from "../../export";
 
@@ -50,13 +51,13 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
   const getIcon = (variant: Severity) => {
     switch (variant) {
       case "success":
-        return <Icons.SuccessFilledIcon />;
+        return <Icons.SuccessFilledIcon size={20} />;
       case "error":
-        return <Icons.AlertFilledIcon />;
+        return <Icons.AlertFilledIcon size={20} />;
       case "info":
-        return <Icons.InfoFilledIcon />;
+        return <Icons.InfoFilledIcon size={20} />;
       case "warning":
-        return <Icons.WarningFilledIcon />;
+        return <Icons.WarningFilledIcon size={20} />;
     }
   };
 
@@ -93,7 +94,7 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
             <Box sx={{ marginTop: "2px" }}>{getIcon(props.severity)}</Box>
             <Stack direction={"column"}>
               <Typography variant="subtitle2">
-                {props.severity.toUpperCase()}
+                {capitalize(props.severity)}
               </Typography>
               <Typography variant="body2">{props.message}</Typography>
             </Stack>

package/src/components/Input/DatePicker/DatePicker.tsx

@@ -0,0 +1,58 @@
+import { StackProps } from '@mui/material';
+import { PickersShortcutsItem, PickerValidDate } from '@mui/x-date-pickers';
+import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { format as DateFnsFormat } from 'date-fns';
+import { Icons } from '../../Assets/Icons/Icons';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+
+type DatePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = {
+  format?: 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
+  views?: ('year' | 'month' | 'day')[];
+  helperText?: string;
+  placeholder?: string;
+  shortcutsItems?: PickersShortcutsItem<any>[];
+  required?: boolean;
+  containerProps?: StackProps;
+  openPickerIcon?: React.ElementType;
+} & MuiDatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
+
+export const DatePicker = <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>({
+  label,
+  name,
+  value,
+  required = false,
+  format = 'dd/MM/yyyy',
+  views = ['year', 'month', 'day'],
+  helperText,
+  placeholder = '',
+  shortcutsItems = [],
+  openPickerIcon: Icon = Icons.NoteIcon,
+  containerProps,
+  ...rest
+}: DatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
+  return (
+    <LabelWrapper label={label} required={required} name={name} containerProps={containerProps}>
+      <MuiDatePicker
+        format={format}
+        views={views}
+        defaultValue={value}
+        slotProps={{
+          textField: {
+            helperText,
+            placeholder,
+          },
+          shortcuts: {
+            items: shortcutsItems,
+          },
+        }}
+        slots={{
+          openPickerIcon: Icon,
+        }}
+        dayOfWeekFormatter={(day: any) => {
+          return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
+        }}
+        {...rest}
+      />
+    </LabelWrapper>
+  );
+};

package/src/components/Input/FormActions/FormActions.tsx

@@ -0,0 +1,49 @@
+import { ButtonProps, Stack, StackProps, useTheme } from '@mui/material';
+import { Button } from '../export';
+
+export interface ButtonConfig {
+  title: string;
+  onClick?: () => void;
+  show?: boolean;
+  variant?: ButtonProps['variant'];
+  loading?: boolean;
+}
+
+export interface FormActionsProps {
+  submitButtonProps?: ButtonConfig;
+  cancelButtonProps?: ButtonConfig;
+  stackProps?: StackProps;
+  showTopBorder?: boolean;
+}
+
+function FormActions({ submitButtonProps, cancelButtonProps, stackProps, showTopBorder = false }: FormActionsProps) {
+  const theme = useTheme();
+  const defaultSubmitProps: ButtonConfig = {
+    title: 'Submit',
+    show: true,
+    variant: 'contained',
+    ...submitButtonProps,
+  };
+
+  const defaultCancelProps: ButtonConfig = {
+    title: 'Cancel',
+    show: true,
+    variant: 'text',
+    ...cancelButtonProps,
+  };
+
+  return (
+    <Stack
+      direction="row"
+      padding={2}
+      gap={2.5}
+      borderTop={showTopBorder ? `1px solid ${theme.palette.border.primary}` : 'none'}
+      {...stackProps}
+    >
+      {defaultSubmitProps.show && <Button {...defaultSubmitProps}>{defaultSubmitProps.title}</Button>}
+      {defaultCancelProps.show && <Button {...defaultCancelProps}>{defaultCancelProps.title}</Button>}
+    </Stack>
+  );
+}
+
+export default FormActions;

package/src/components/Input/FormControlWrapper/FormControlWrapper.tsx

@@ -0,0 +1,70 @@
+import { TextFieldProps } from '@mui/material/TextField';
+import React, { ReactElement, ReactNode, isValidElement } from 'react';
+import { Control, Controller } from 'react-hook-form';
+import FormActions, { FormActionsProps } from '../FormActions/FormActions';
+
+interface FormControlWrapperProps {
+  control: Control<any>;
+  children: ReactNode;
+  formActionProps?: FormActionsProps;
+}
+
+type FormElementProps = {
+  checked?: boolean;
+  loading?: boolean;
+} & TextFieldProps;
+
+type ControlledElementProps = {
+  name: string;
+  error?: boolean;
+  helperText?: ReactNode;
+  children?: ReactNode;
+  [key: string]: any;
+} & TextFieldProps;
+
+export function FormControlWrapper({ control, children, formActionProps }: FormControlWrapperProps) {
+  const wrapWithController = (element: ReactElement<any>): ReactElement<any> => {
+    if (!isValidElement(element)) return element;
+
+    const { name, children: childElements, ...restProps } = element.props as ControlledElementProps;
+
+    if (name) {
+      return (
+        <Controller
+          name={name}
+          control={control}
+          render={({ field, fieldState: { error } }) => {
+            const additionalProps =
+              element.type === 'input' && restProps.type === 'checkbox' ? { checked: field.value } : { value: field.value };
+            return React.cloneElement(element, {
+              ...restProps,
+              ...field,
+              ...additionalProps,
+              error: !!error,
+              helperText: error ? error.message : null,
+              children: childElements,
+            } as FormElementProps);
+          }}
+        />
+      );
+    }
+
+    if (childElements) {
+      const wrappedChildren: ReactNode = React.Children.map(childElements as any, wrapWithController);
+      return React.cloneElement(element, {
+        ...restProps,
+        children: wrappedChildren,
+      } as FormElementProps);
+    }
+
+    return element;
+  };
+
+  return (
+    <>
+      {React.Children.map(children as any, wrapWithController) || null}
+
+      {formActionProps && <FormActions {...formActionProps} showTopBorder />}
+    </>
+  );
+}

package/src/components/Input/IconButtons/IconButtons.tsx

@@ -1,7 +1,7 @@
-import { DeleteButton } from "./IconButtons/DeleteButton";
-import { EditButton } from "./IconButtons/EditButton";
-import { RedirectButton } from "./IconButtons/RedirectButton";
-import { ViewButton } from "./IconButtons/ViewButton";
+import { DeleteButton } from './IconButtons/DeleteButton';
+import { EditButton } from './IconButtons/EditButton';
+import { RedirectButton } from './IconButtons/RedirectButton';
+import { ViewButton } from './IconButtons/ViewButton';
 
 export const IconButtons = {
   DeleteButton,

package/src/components/Input/LabelWrapper/LabelWrapper.tsx

@@ -16,7 +16,7 @@ export const LabelWrapper = ({
 }) => {
   const theme = useTheme();
   return (
-    <Stack {...containerProps}>
+    <Stack margin={" 8px 12px"} {...containerProps}>
       {typeof label === "string" ? (
         <Typography htmlFor={name} component="label" variant="label1">
           {label}