@campxdev/react-blueprint 1.1.8 → 1.1.9

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

@@ -2,12 +2,12 @@ import {
   Pagination as MuiPagination,
   PaginationProps as MuiPaginationProps,
   Stack,
-} from "@mui/material";
-import { DropdownMenuItem } from "../../Navigation/DropDownMenu/DropdownMenuItem";
+} from '@mui/material';
+import { DropdownMenuItem } from '../../Navigation/DropDownMenu/DropdownMenuItem';
 
-import { DropDownButton } from "../../Navigation/DropDownMenu/DropDownButton";
-import { DropdownMenu } from "../../Navigation/DropDownMenu/DropDownMenu";
-import { Typography } from "../Typography/Typography";
+import { DropDownButton } from '../../Navigation/DropDownMenu/DropDownButton';
+import { DropdownMenu } from '../../Navigation/DropDownMenu/DropDownMenu';
+import { Typography } from '../Typography/Typography';
 
 export type PaginationProps = {
   limit: number;
@@ -42,17 +42,17 @@ export const TablePagination = (props: PaginationProps) => {
           <DropDownButton
             loading={false}
             onClick={open}
-            sx={{ minWidth: "130px", padding: "10px 20px", maxHeight: "32px" }}
+            sx={{ minWidth: '130px', padding: '10px 20px', maxHeight: '32px' }}
           >
             {limit} / Page
           </DropDownButton>
         )}
         menuListProps={{
           sx: {
-            minWidth: "130px",
-            "& li": {
-              minHeight: "32px !important",
-              padding: "10px 20px",
+            minWidth: '130px',
+            '& li': {
+              minHeight: '32px !important',
+              padding: '10px 20px',
             },
           },
         }}

package/src/components/DataDisplay/SidePanel/SidePanel.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
 export interface SidePanelProps {
   children?: ReactNode;

package/src/components/DataDisplay/Typography/Typography.tsx

@@ -1,7 +1,7 @@
 import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
-} from "@mui/material";
+} from '@mui/material';
 
 export type TypographyProps = {} & MuiTypographyProps;
 

package/src/components/Feedback/Alert/Alert.tsx

@@ -1,20 +1,20 @@
-import { Alert as MuiAlert, AlertProps as MuiAlertProps } from "@mui/material";
-import { Icons } from "../../export";
+import { Alert as MuiAlert, AlertProps as MuiAlertProps } from '@mui/material';
+import { Icons } from '../../export';
 
 export type AlertProps = {
   message: string;
-  severity: MuiAlertProps["severity"];
+  severity: MuiAlertProps['severity'];
 } & MuiAlertProps;
 
-const getIcon = (severity: MuiAlertProps["severity"]) => {
+const getIcon = (severity: MuiAlertProps['severity']) => {
   switch (severity) {
-    case "success":
+    case 'success':
       return <Icons.SuccessFilledIcon size={20} />;
-    case "error":
+    case 'error':
       return <Icons.AlertFilledIcon size={20} />;
-    case "info":
+    case 'info':
       return <Icons.InfoFilledIcon size={20} />;
-    case "warning":
+    case 'warning':
       return <Icons.WarningFilledIcon size={20} />;
   }
 };

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

@@ -5,12 +5,12 @@ import {
   SnackbarProps as MuiSnackbarProps,
   Stack,
   useTheme,
-} from "@mui/material";
-import { capitalize } from "lodash";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons } from "../../export";
+} from '@mui/material';
+import { capitalize } from 'lodash';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Icons } from '../../export';
 
-export type Severity = "success" | "info" | "warning" | "error";
+export type Severity = 'success' | 'info' | 'warning' | 'error';
 
 export type SnackbarProps = {
   severity: Severity;
@@ -21,13 +21,13 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
   const theme = useTheme();
   const getColor = (variant: Severity) => {
     switch (variant) {
-      case "success":
+      case 'success':
         return theme.palette.highlight.highlightGreen;
-      case "error":
+      case 'error':
         return theme.palette.highlight.highlightRed;
-      case "info":
+      case 'info':
         return theme.palette.highlight.highlightBlue;
-      case "warning":
+      case 'warning':
         return theme.palette.highlight.highlightOrange;
       default:
         return theme.palette.highlight.highlightGreen;
@@ -35,13 +35,13 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
   };
   const getBackGroundColor = (variant: Severity) => {
     switch (variant) {
-      case "success":
+      case 'success':
         return theme.palette.highlight.greenBackground;
-      case "error":
+      case 'error':
         return theme.palette.highlight.redBackground;
-      case "info":
+      case 'info':
         return theme.palette.highlight.blueBackground;
-      case "warning":
+      case 'warning':
         return theme.palette.highlight.orangeBackground;
       default:
         return theme.palette.highlight.greenBackground;
@@ -50,20 +50,20 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
 
   const getIcon = (variant: Severity) => {
     switch (variant) {
-      case "success":
+      case 'success':
         return <Icons.SuccessFilledIcon size={20} />;
-      case "error":
+      case 'error':
         return <Icons.AlertFilledIcon size={20} />;
-      case "info":
+      case 'info':
         return <Icons.InfoFilledIcon size={20} />;
-      case "warning":
+      case 'warning':
         return <Icons.WarningFilledIcon size={20} />;
     }
   };
 
   const handleClose = (event: React.SyntheticEvent<any> | Event) => {
     if (props.onClose) {
-      props.onClose(event, "clickaway");
+      props.onClose(event, 'clickaway');
     }
   };
 
@@ -76,23 +76,23 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
         alignItems="flex-start"
         gap={1}
         sx={{
-          height: "90px",
-          width: "480px",
+          height: '90px',
+          width: '480px',
           backgroundColor: getBackGroundColor(props.severity),
         }}
       >
         <Box
           sx={{
-            width: "10px",
-            height: "100%",
+            width: '10px',
+            height: '100%',
             backgroundColor: getColor(props.severity),
-            borderRadius: "5px 0px 0px 5px",
+            borderRadius: '5px 0px 0px 5px',
           }}
         />
-        <Stack width="100%" height="100%" direction={"row"} alignItems="center">
+        <Stack width="100%" height="100%" direction={'row'} alignItems="center">
           <Stack direction="row" gap={1} justifyContent="space-evenly">
-            <Box sx={{ marginTop: "2px" }}>{getIcon(props.severity)}</Box>
-            <Stack direction={"column"}>
+            <Box sx={{ marginTop: '2px' }}>{getIcon(props.severity)}</Box>
+            <Stack direction={'column'}>
               <Typography variant="subtitle2">
                 {capitalize(props.severity)}
               </Typography>
@@ -101,7 +101,7 @@ export const Snackbar = ({ ...props }: SnackbarProps) => {
           </Stack>
         </Stack>
 
-        <IconButton sx={{ margin: "25px" }} onClick={handleClose}>
+        <IconButton sx={{ margin: '25px' }} onClick={handleClose}>
           <Icons.CrossIcon2 />
         </IconButton>
       </Stack>

package/src/components/Feedback/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
-import "./Spinner.css";
+import './Spinner.css';
 
 export const Spinner = () => {
   return <div className="spinner"></div>;
-};
+};

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -3,10 +3,10 @@ import {
   Tooltip as MuiTooltip,
   TooltipProps as MuiTooltipProps,
   Stack,
-} from "@mui/material";
-import { Children, ReactElement } from "react";
-import { BulbIcon } from "../../Assets/Icons/IconComponents/BulbIcon";
-import { Typography } from "../../DataDisplay/Typography/Typography";
+} from '@mui/material';
+import { Children, ReactElement } from 'react';
+import { BulbIcon } from '../../Assets/Icons/IconComponents/BulbIcon';
+import { Typography } from '../../DataDisplay/Typography/Typography';
 
 export type TooltipProps = {
   children: ReactElement | string;
@@ -14,7 +14,7 @@ export type TooltipProps = {
 export type TooltipContentProps = { message: string };
 
 export const Tooltip = ({
-  placement = "right",
+  placement = 'right',
   arrow = true,
   ...props
 }: TooltipProps) => {
@@ -32,7 +32,7 @@ export const Tooltip = ({
 
 export const ToolTipContent = ({ message }: TooltipContentProps) => {
   return (
-    <Stack gap={1} sx={{ margin: "5px" }}>
+    <Stack gap={1} sx={{ margin: '5px' }}>
       <Stack direction="row" gap={1}>
         <BulbIcon />
         <Typography variant="subtitle3">Note:</Typography>

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -1,26 +1,26 @@
-import { axios } from "@campxdev/campx-web-utils";
-import { Box, useTheme } from "@mui/material";
-import { ReactNode, useCallback, useEffect, useState } from "react";
-import ReactJoyride, { ACTIONS, CallBackProps, Step } from "react-joyride";
-import { Typography } from "../../DataDisplay/Typography/Typography";
+import { axios } from '@campxdev/campx-web-utils';
+import { Box, useTheme } from '@mui/material';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
+import ReactJoyride, { ACTIONS, CallBackProps, Step } from 'react-joyride';
+import { Typography } from '../../DataDisplay/Typography/Typography';
 
 export interface TutorialProps {
   steps: Step[];
   children?: ReactNode;
   tourName: string;
   showProgress?: boolean;
-  iconPosition?: "left" | "right";
+  iconPosition?: 'left' | 'right';
 }
 
 export const Tutorial = ({
   steps,
   children,
   tourName,
-  iconPosition = "right",
+  iconPosition = 'right',
   showProgress = true,
 }: TutorialProps) => {
   const [run, setRun] = useState(false);
-  const userTours = localStorage.getItem("userTours") || "[]";
+  const userTours = localStorage.getItem('userTours') || '[]';
   const theme = useTheme();
 
   const startTour = useCallback(() => {
@@ -45,22 +45,22 @@ export const Tutorial = ({
     // Check if the tour is skipped or completed
     if (
       action === ACTIONS.SKIP &&
-      lifecycle === "complete" &&
-      type === "tour:end"
+      lifecycle === 'complete' &&
+      type === 'tour:end'
     ) {
-      console.log("Tour is skipped");
+      console.log('Tour is skipped');
       reqData.skipped = true;
     } else if (action === ACTIONS.CLOSE) {
       setRun(false);
     } else if (action === ACTIONS.RESET) {
-      console.log("Tour is reset");
+      console.log('Tour is reset');
       reqData.completed = true;
     }
     console.log(reqData);
     if (reqData.skipped || reqData.completed) {
       setRun(false); // Stop the tour
       completeTour(reqData).catch((err) => {
-        console.error("Failed to mark tour as complete:", err);
+        console.error('Failed to mark tour as complete:', err);
       });
     }
   };
@@ -69,30 +69,30 @@ export const Tutorial = ({
     try {
       if (!userTours.includes(tourName)) {
         localStorage.setItem(
-          "userTours",
-          JSON.stringify([...JSON.parse(userTours), tourName])
+          'userTours',
+          JSON.stringify([...JSON.parse(userTours), tourName]),
         );
       }
-      await axios.post("/square/tours/complete", { ...reqData });
+      await axios.post('/square/tours/complete', { ...reqData });
     } catch (error) {
-      console.error("Error completing the tour:", error);
+      console.error('Error completing the tour:', error);
     }
   };
 
   return (
-    <div style={{ display: "flex", justifyContent: "flex-end" }}>
+    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
       <Box
         sx={{
           background: theme.palette.surface.grey,
-          padding: "20px 8px",
-          borderRadius: "12px 0px 0px 12px",
-          cursor: "pointer",
-          width: "40px",
-          textAlign: "center",
+          padding: '20px 8px',
+          borderRadius: '12px 0px 0px 12px',
+          cursor: 'pointer',
+          width: '40px',
+          textAlign: 'center',
         }}
         onClick={startTour}
       >
-        <Box sx={{ transform: "rotate(-90deg)", marginTop: "10px" }}>
+        <Box sx={{ transform: 'rotate(-90deg)', marginTop: '10px' }}>
           <Typography variant="subtitle2">Tour</Typography>
         </Box>
       </Box>
@@ -108,38 +108,38 @@ export const Tutorial = ({
         disableOverlayClose
         spotlightPadding={5}
         locale={{
-          last: "Got it",
-          next: "Next",
-          skip: "Skip",
-          back: "Previous",
+          last: 'Got it',
+          next: 'Next',
+          skip: 'Skip',
+          back: 'Previous',
         }}
         styles={{
           buttonNext: {
             backgroundColor: theme.palette.primary.main,
             color: theme.palette.secondary.light,
-            border: "none",
-            height: "28px",
-            width: "100px",
-            padding: "0px",
-            fontFamily: "Heebo, sans-serif",
+            border: 'none',
+            height: '28px',
+            width: '100px',
+            padding: '0px',
+            fontFamily: 'Heebo, sans-serif',
           },
           buttonBack: {
-            backgroundColor: "transparent",
-            color: "black",
-            borderRadius: "4px",
-            height: "28px",
-            width: "100px",
-            gap: "10px",
-            marginLeft: "5px",
-            padding: "0px",
-            border: "1px solid black",
-            fontFamily: "Heebo, sans-serif",
+            backgroundColor: 'transparent',
+            color: 'black',
+            borderRadius: '4px',
+            height: '28px',
+            width: '100px',
+            gap: '10px',
+            marginLeft: '5px',
+            padding: '0px',
+            border: '1px solid black',
+            fontFamily: 'Heebo, sans-serif',
           },
           tooltip: {
-            padding: "10px",
+            padding: '10px',
           },
           tooltipContainer: {
-            display: "flex",
+            display: 'flex',
             backgroundColor: theme.palette.surface.paperBackground,
           },
 

package/src/components/Feedback/export.ts

@@ -0,0 +1,5 @@
+export * from './Alert/Alert';
+export * from './Snackbar/Snackbar';
+export * from './Spinner/Spinner';
+export * from './Tooltip/Tooltip';
+export * from './Tutorial/Tutorial';

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box } from '@mui/material';
 // const brokenImage = require("./broken-image.png");
 
 interface ImageProps {
@@ -6,7 +6,7 @@ interface ImageProps {
   alt: string;
   height: string | number;
   width: string | number;
-  fit?: "cover" | "contain" | "fill";
+  fit?: 'cover' | 'contain' | 'fill';
   radius?: string | number;
   defaultImage?: any;
 }
@@ -16,8 +16,8 @@ export default function Image({
   alt,
   height,
   width,
-  fit = "contain",
-  radius = "10px",
+  fit = 'contain',
+  radius = '10px',
   defaultImage = null,
 }: ImageProps) {
   return (
@@ -25,10 +25,10 @@ export default function Image({
       sx={{
         height: height,
         width: width,
-        "& > img": {
+        '& > img': {
           borderRadius: radius,
-          width: "100%",
-          height: "100%",
+          width: '100%',
+          height: '100%',
           objectFit: fit,
         },
       }}
@@ -37,7 +37,7 @@ export default function Image({
         src={src || defaultImage}
         alt={alt}
         onError={(e: any) => {
-          e.target.src = defaultImage ? defaultImage : "";
+          e.target.src = defaultImage ? defaultImage : '';
         }}
       />
     </Box>

package/src/components/Input/Button/Button.tsx

@@ -1,8 +1,8 @@
 import {
   Button as MuiButton,
   ButtonProps as MuiButtonProps,
-} from "@mui/material";
-import "./ButtonLoader.css";
+} from '@mui/material';
+import './ButtonLoader.css';
 
 export type ButtonProps = { loading?: boolean } & MuiButtonProps;
 

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

@@ -1,11 +1,17 @@
 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 {
+  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> = {
+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;
@@ -16,7 +22,10 @@ type DatePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStr
   openPickerIcon?: React.ElementType;
 } & MuiDatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
 
-export const DatePicker = <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>({
+export const DatePicker = <
+  TDate extends PickerValidDate,
+  TEnableAccessibleFieldDOMStructure extends boolean = false,
+>({
   label,
   name,
   value,
@@ -31,7 +40,12 @@ export const DatePicker = <TDate extends PickerValidDate, TEnableAccessibleField
   ...rest
 }: DatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
   return (
-    <LabelWrapper label={label} required={required} name={name} containerProps={containerProps}>
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
       <MuiDatePicker
         format={format}
         views={views}

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

@@ -16,7 +16,12 @@ export interface FormActionsProps {
   showTopBorder?: boolean;
 }
 
-function FormActions({ submitButtonProps, cancelButtonProps, stackProps, showTopBorder = false }: FormActionsProps) {
+function FormActions({
+  submitButtonProps,
+  cancelButtonProps,
+  stackProps,
+  showTopBorder = false,
+}: FormActionsProps) {
   const theme = useTheme();
   const defaultSubmitProps: ButtonConfig = {
     title: 'Submit',
@@ -37,11 +42,17 @@ function FormActions({ submitButtonProps, cancelButtonProps, stackProps, showTop
       direction="row"
       padding={2}
       gap={2.5}
-      borderTop={showTopBorder ? `1px solid ${theme.palette.border.primary}` : 'none'}
+      borderTop={
+        showTopBorder ? `1px solid ${theme.palette.border.primary}` : 'none'
+      }
       {...stackProps}
     >
-      {defaultSubmitProps.show && <Button {...defaultSubmitProps}>{defaultSubmitProps.title}</Button>}
-      {defaultCancelProps.show && <Button {...defaultCancelProps}>{defaultCancelProps.title}</Button>}
+      {defaultSubmitProps.show && (
+        <Button {...defaultSubmitProps}>{defaultSubmitProps.title}</Button>
+      )}
+      {defaultCancelProps.show && (
+        <Button {...defaultCancelProps}>{defaultCancelProps.title}</Button>
+      )}
     </Stack>
   );
 }

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

@@ -22,11 +22,21 @@ type ControlledElementProps = {
   [key: string]: any;
 } & TextFieldProps;
 
-export function FormControlWrapper({ control, children, formActionProps }: FormControlWrapperProps) {
-  const wrapWithController = (element: ReactElement<any>): ReactElement<any> => {
+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;
+    const {
+      name,
+      children: childElements,
+      ...restProps
+    } = element.props as ControlledElementProps;
 
     if (name) {
       return (
@@ -35,7 +45,9 @@ export function FormControlWrapper({ control, children, formActionProps }: FormC
           control={control}
           render={({ field, fieldState: { error } }) => {
             const additionalProps =
-              element.type === 'input' && restProps.type === 'checkbox' ? { checked: field.value } : { value: field.value };
+              element.type === 'input' && restProps.type === 'checkbox'
+                ? { checked: field.value }
+                : { value: field.value };
             return React.cloneElement(element, {
               ...restProps,
               ...field,
@@ -50,7 +62,10 @@ export function FormControlWrapper({ control, children, formActionProps }: FormC
     }
 
     if (childElements) {
-      const wrappedChildren: ReactNode = React.Children.map(childElements as any, wrapWithController);
+      const wrappedChildren: ReactNode = React.Children.map(
+        childElements as any,
+        wrapWithController,
+      );
       return React.cloneElement(element, {
         ...restProps,
         children: wrappedChildren,

package/src/components/Input/HelpButton/HelpButton.stories.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import HelpButton from "./HelpButton";
+import React from 'react';
+import { Meta } from '@storybook/react';
+import HelpButton from './HelpButton';
 
 export default {
-  title: "Input/HelpButton",
+  title: 'Input/HelpButton',
   component: HelpButton,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     href: {
-      control: "text",
-      description: "The URL the button links to",
-      defaultValue: "https://example.com/help",
+      control: 'text',
+      description: 'The URL the button links to',
+      defaultValue: 'https://example.com/help',
     },
   },
 } as Meta<typeof HelpButton>;
 
 export const Default = (args: any) => <HelpButton {...args} />;
 Default.args = {
-  href: "https://example.com/help",
+  href: 'https://example.com/help',
 };