@campxdev/react-blueprint 1.1.8 → 1.1.10

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

@@ -1,12 +1,12 @@
 // HelpButton.tsx
-import React from "react";
-import { IconButton } from "@mui/material";
-import { Icons } from "../../export";
+import React from 'react';
+import { IconButton } from '@mui/material';
+import { Icons } from '../../export';
 
 const HelpButton = () => {
   return (
     <IconButton
-      href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
+      href={'https://campx.atlassian.net/servicedesk/customer/portal/2'}
       target="_blank"
     >
       <Icons.HelpIcon />

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

@@ -1,5 +1,5 @@
-import { ButtonProps, IconButton } from "@mui/material";
-import { Icons } from "../../../export";
+import { ButtonProps, IconButton } from '@mui/material';
+import { Icons } from '../../../export';
 
 export function DeleteButton({ disabled, ...props }: ButtonProps) {
   return (

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

@@ -1,5 +1,5 @@
-import { ButtonProps, IconButton } from "@mui/material";
-import { Icons } from "../../../export";
+import { ButtonProps, IconButton } from '@mui/material';
+import { Icons } from '../../../export';
 
 export function EditButton({ disabled, ...props }: ButtonProps) {
   return (

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

@@ -1,5 +1,5 @@
-import { ButtonProps, IconButton } from "@mui/material";
-import { Icons } from "../../../export";
+import { ButtonProps, IconButton } from '@mui/material';
+import { Icons } from '../../../export';
 
 export function RedirectButton({ disabled, ...props }: ButtonProps) {
   return (

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

@@ -1,5 +1,5 @@
-import { ButtonProps, IconButton } from "@mui/material";
-import { Icons } from "../../../export";
+import { ButtonProps, IconButton } from '@mui/material';
+import { Icons } from '../../../export';
 
 export function ViewButton({ disabled, ...props }: ButtonProps) {
   return (

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

@@ -1,5 +1,5 @@
-import { Stack, StackProps, Typography, useTheme } from "@mui/material";
-import { ReactNode } from "react";
+import { Stack, StackProps, Typography, useTheme } from '@mui/material';
+import { ReactNode } from 'react';
 
 export const LabelWrapper = ({
   required,
@@ -16,13 +16,13 @@ export const LabelWrapper = ({
 }) => {
   const theme = useTheme();
   return (
-    <Stack margin={" 8px 12px"} {...containerProps}>
-      {typeof label === "string" ? (
+    <Stack margin={' 8px 12px'} {...containerProps}>
+      {typeof label === 'string' ? (
         <Typography htmlFor={name} component="label" variant="label1">
           {label}
           {required && (
             <span style={{ color: `${theme.palette.tertiary.main}` }}>
-              {" *"}
+              {' *'}
             </span>
           )}
         </Typography>

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

@@ -1,15 +1,15 @@
-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 { Stack, StackProps } from '@mui/material';
+import { ResponsiveStyleValue } from '@mui/system';
+import { ReactNode } from 'react';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+import { SingleCheckBox } from '../SingleCheckBox/SIngleCheckBox';
 
 export type MultiCheckboxProps = {
   containerProps?: StackProps;
   options: Array<{ label: ReactNode; value: any }>;
   label: string;
   direction?: ResponsiveStyleValue<
-    "row" | "row-reverse" | "column" | "column-reverse"
+    'row' | 'row-reverse' | 'column' | 'column-reverse'
   >;
   values: any[];
   onChange: (values: any[]) => void;

package/src/components/Input/OtpInput/OtpInput.tsx

@@ -1,21 +1,21 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef } from 'react';
 
 interface OtpInputProps {
   length: number;
   onChangeOtp: (otp: string) => void;
 }
 
-const OtpInput = ({ length, onChangeOtp }:OtpInputProps) => {
-  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
+const OtpInput = ({ length, onChangeOtp }: OtpInputProps) => {
+  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));
   const inputRefs = useRef<HTMLInputElement[]>([]);
 
   const handleChange = (element: HTMLInputElement, index: number) => {
     const value = element.value;
-    if (/^[0-9]$/.test(value) || value === "") {
+    if (/^[0-9]$/.test(value) || value === '') {
       const newOtp = [...otp];
       newOtp[index] = value;
       setOtp(newOtp);
-      onChangeOtp(newOtp.join(""));
+      onChangeOtp(newOtp.join(''));
 
       if (value && index < length - 1) {
         inputRefs.current[index + 1].focus();
@@ -25,17 +25,17 @@ const OtpInput = ({ length, onChangeOtp }:OtpInputProps) => {
 
   const handleKeyDown = (
     event: React.KeyboardEvent<HTMLInputElement>,
-    index: number
+    index: number,
   ) => {
-    if (event.key === "Backspace" && !otp[index] && index > 0) {
+    if (event.key === 'Backspace' && !otp[index] && index > 0) {
       inputRefs.current[index - 1].focus();
     }
   };
 
   const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
     event.preventDefault();
-    const paste = event.clipboardData.getData("text");
-    const digits = paste.split("").filter((char) => /^[0-9]$/.test(char));
+    const paste = event.clipboardData.getData('text');
+    const digits = paste.split('').filter((char) => /^[0-9]$/.test(char));
 
     if (digits.length > 0) {
       const newOtp = [...otp];
@@ -50,30 +50,30 @@ const OtpInput = ({ length, onChangeOtp }:OtpInputProps) => {
       }
 
       setOtp(newOtp);
-      onChangeOtp(newOtp.join(""));
+      onChangeOtp(newOtp.join(''));
       inputRefs.current[Math.min(focusIndex + 1, length - 1)].focus();
     }
   };
 
   return (
-    <div style={{ display: "flex", gap: "10px" }}>
+    <div style={{ display: 'flex', gap: '10px' }}>
       {otp.map((value, index) => (
         <input
-        className="MuiOtpInput"
+          className="MuiOtpInput"
           key={index}
           ref={(el) => (inputRefs.current[index] = el!)}
           type="text"
-          value={value ? "•" : ""}
+          value={value ? '•' : ''}
           onChange={(e) => handleChange(e.target, index)}
           onKeyDown={(e) => handleKeyDown(e, index)}
           onPaste={handlePaste}
           data-index={index}
           maxLength={1}
           style={{
-            width: "40px",
-            height: "40px",
-            textAlign: "center",
-            fontSize: "20px",
+            width: '40px',
+            height: '40px',
+            textAlign: 'center',
+            fontSize: '20px',
           }}
         />
       ))}

package/src/components/Input/PasswordField/PasswordField.tsx

@@ -4,12 +4,12 @@ import {
   TextField as MuiTextField,
   TextFieldProps as MuiTextFieldProps,
   StackProps,
-} from "@mui/material";
-import { useState } from "react";
-import { VisibilityOffIcon } from "../../Assets/Icons/IconComponents/VisibiityOffIcon";
-import { VisibilityIcon } from "../../Assets/Icons/IconComponents/VisibilityIcon";
-import { Typography } from "../../export";
-import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
+} from '@mui/material';
+import { useState } from 'react';
+import { VisibilityOffIcon } from '../../Assets/Icons/IconComponents/VisibiityOffIcon';
+import { VisibilityIcon } from '../../Assets/Icons/IconComponents/VisibilityIcon';
+import { Typography } from '../../export';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
 export type PasswordFieldProps = {
   containerProps?: StackProps;
@@ -24,7 +24,7 @@ export const PasswordField = ({
   required = false,
   containerProps,
   description,
-  type = "text",
+  type = 'text',
   ...rest
 }: PasswordFieldProps) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -45,7 +45,7 @@ export const PasswordField = ({
         label={label}
         name={name}
         onChange={onChange}
-        type={!showPassword ? "password" : "text"}
+        type={!showPassword ? 'password' : 'text'}
         InputProps={{
           endAdornment: (
             <InputAdornment position="end">

package/src/components/Input/RadioGroup/RadioGroup.tsx

@@ -4,11 +4,11 @@ import {
   RadioGroupProps as MuiRadioGroupProps,
   Radio,
   StackProps,
-} from "@mui/material";
-import { ReactNode } from "react";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons } from "../../export";
-import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
+} from '@mui/material';
+import { ReactNode } from 'react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Icons } from '../../export';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
 export type RadioGroupProps = {
   containerProps?: StackProps;

package/src/components/Input/SearchBar/SearchBar.tsx

@@ -3,10 +3,10 @@ import {
   TextField,
   TextFieldProps,
   styled,
-} from "@mui/material";
-import { debounce } from "lodash";
-import { ReactNode, useMemo, useState } from "react";
-import { SearchIcon } from "../../Assets/Icons/IconComponents/SearchIcon";
+} from '@mui/material';
+import { debounce } from 'lodash';
+import { ReactNode, useMemo, useState } from 'react';
+import { SearchIcon } from '../../Assets/Icons/IconComponents/SearchIcon';
 
 export type SearchBarProps = {
   placeholder?: string;
@@ -16,9 +16,9 @@ export type SearchBarProps = {
 } & TextFieldProps;
 
 export const SearchBar = ({
-  placeholder = "Search by Name",
+  placeholder = 'Search by Name',
   label,
-  value = "",
+  value = '',
   onSearch,
   ...rest
 }: SearchBarProps) => {
@@ -55,27 +55,27 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   margin: 0,
   height: 40,
   backgroundColor: theme.palette.surface.grey,
-  ".MuiFormControl-root": {
+  '.MuiFormControl-root': {
     margin: 0,
-    height: "100%",
+    height: '100%',
   },
-  ".MuiOutlinedInput-root": {
-    height: "100%",
-    padding: "5px, 10px",
-    display: "flex",
-    alignItems: "center",
+  '.MuiOutlinedInput-root': {
+    height: '100%',
+    padding: '5px, 10px',
+    display: 'flex',
+    alignItems: 'center',
   },
-  ".MuiInputBase-input": {
-    height: "100%",
-    fontSize: "14px",
-    "&::placeholder": {
+  '.MuiInputBase-input': {
+    height: '100%',
+    fontSize: '14px',
+    '&::placeholder': {
       color: theme.palette.text.tertiary,
-      fontSize: "14px",
+      fontSize: '14px',
       opacity: 1,
     },
   },
-  ".MuiOutlinedInput-notchedOutline": {
-    height: "100%",
+  '.MuiOutlinedInput-notchedOutline': {
+    height: '100%',
     top: 0,
     borderColor: theme.palette.border.primary,
   },

package/src/components/Input/SingleCheckBox/SIngleCheckBox.tsx

@@ -3,10 +3,10 @@ import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
   useTheme,
-} from "@mui/material";
-import { ReactNode } from "react";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons } from "../../export";
+} from '@mui/material';
+import { ReactNode } from 'react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Icons } from '../../export';
 
 export type CheckboxProps = {
   label: ReactNode;
@@ -36,7 +36,7 @@ export const SingleCheckBox = ({
           {label}
           {required && (
             <span style={{ color: `${theme.palette.tertiary.main}` }}>
-              {" *"}
+              {' *'}
             </span>
           )}
         </Typography>

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

@@ -1,5 +1,11 @@
 import { axios as campxAxios } from '@campxdev/campx-web-utils';
-import { BaseSelectProps, Box, Autocomplete as MuiAutocomplete, Paper, PaperProps } from '@mui/material';
+import {
+  BaseSelectProps,
+  Box,
+  Autocomplete as MuiAutocomplete,
+  Paper,
+  PaperProps,
+} from '@mui/material';
 import axios from 'axios';
 import _ from 'lodash';
 import { useEffect, useReducer } from 'react';
@@ -50,7 +56,13 @@ enum SingleSelectActionsTypes {
   APPEND_INTERNAL_OPTIONS = 'append_internal_options',
   CHANGE_HAS_MORE_FLAG = 'change_has_more_flag',
 }
-const singleSelectReducer = (state: any, { actionType, stateChanges }: { actionType: SingleSelectActionsTypes; stateChanges?: any }) => {
+const singleSelectReducer = (
+  state: any,
+  {
+    actionType,
+    stateChanges,
+  }: { actionType: SingleSelectActionsTypes; stateChanges?: any },
+) => {
   switch (actionType) {
     case SingleSelectActionsTypes.OPEN: {
       return { ...state, open: true };
@@ -133,7 +145,15 @@ export const SingleSelect = ({
     offset: 0,
     hasMore: true,
   });
-  const { open, loadingInternalOptions, loadingInitialInternalOptions, internalOptions, limit, offset, hasMore } = state;
+  const {
+    open,
+    loadingInternalOptions,
+    loadingInitialInternalOptions,
+    internalOptions,
+    limit,
+    offset,
+    hasMore,
+  } = state;
 
   const internalAxios = useCampxAxios ? campxAxios : axios;
 
@@ -178,7 +198,12 @@ export const SingleSelect = ({
 
   const handleScroll = async (event: any) => {
     const listboxNode = event.currentTarget;
-    if (listboxNode.scrollTop + listboxNode.clientHeight >= listboxNode.scrollHeight - 1 && hasMore && optionsApiEndPoint) {
+    if (
+      listboxNode.scrollTop + listboxNode.clientHeight >=
+        listboxNode.scrollHeight - 1 &&
+      hasMore &&
+      optionsApiEndPoint
+    ) {
       dispatch({
         actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
       });
@@ -234,7 +259,8 @@ export const SingleSelect = ({
     if (value && optionsApiEndPoint) {
       fetchInitialOptions().finally(() => {
         dispatch({
-          actionType: SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_END,
+          actionType:
+            SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_END,
         });
       });
     }
@@ -263,7 +289,14 @@ export const SingleSelect = ({
       autoFocus={true}
       value={state.internalOptionsMap[value]}
       renderInput={(params) => (
-        <TextField {...params} label={label} required={required} name={name} error={error} helperText={helperText} />
+        <TextField
+          {...params}
+          label={label}
+          required={required}
+          name={name}
+          error={error}
+          helperText={helperText}
+        />
       )}
       PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {

package/src/components/Input/Switch/Switch.tsx

@@ -1,7 +1,7 @@
 import {
   Switch as MuiSwitch,
   SwitchProps as MuiSwitchProps,
-} from "@mui/material";
+} from '@mui/material';
 
 export type SwitchProps = {} & MuiSwitchProps;
 export const Switch = (props: SwitchProps) => {

package/src/components/Input/TextField/TextField.tsx

@@ -2,9 +2,9 @@ import {
   TextField as MuiTextField,
   TextFieldProps as MuiTextFieldProps,
   StackProps,
-} from "@mui/material";
-import { Typography } from "../../export";
-import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
+} from '@mui/material';
+import { Typography } from '../../export';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
 export type TextFieldProps = {
   containerProps?: StackProps;

package/src/components/Input/TimePicker/TimePicker.tsx

@@ -1,8 +1,14 @@
 import { PickerValidDate } from '@mui/x-date-pickers';
-import { TimePicker as MuiTimePicker, TimePickerProps as MuiTimePickerProps } from '@mui/x-date-pickers/TimePicker';
+import {
+  TimePicker as MuiTimePicker,
+  TimePickerProps as MuiTimePickerProps,
+} from '@mui/x-date-pickers/TimePicker';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
-type TimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = {
+type TimePickerProps<
+  TDate extends PickerValidDate,
+  TEnableAccessibleFieldDOMStructure extends boolean = false,
+> = {
   format?: 'hh:mm a' | 'HH:mm' | 'HH:mm:ss a' | 'HH:mm:ss';
   views?: ('hours' | 'minutes' | 'seconds')[];
   helperText?: string;
@@ -11,7 +17,10 @@ type TimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStr
   containerProps?: any;
 } & MuiTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
 
-export const TimePicker = <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>({
+export const TimePicker = <
+  TDate extends PickerValidDate,
+  TEnableAccessibleFieldDOMStructure extends boolean = false,
+>({
   label,
   name,
   value,
@@ -24,7 +33,12 @@ export const TimePicker = <TDate extends PickerValidDate, TEnableAccessibleField
   ...rest
 }: TimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
   return (
-    <LabelWrapper label={label} required={required} name={name} containerProps={containerProps}>
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
       <MuiTimePicker
         defaultValue={value}
         format={format}

package/src/components/Input/components/FetchingOptionsLoader.tsx

@@ -1,6 +1,6 @@
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Spinner } from "../../Feedback/Spinner/Spinner";
-import { FetchingOptionsLoaderContainer } from "../styles";
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Spinner } from '../../Feedback/Spinner/Spinner';
+import { FetchingOptionsLoaderContainer } from '../styles';
 
 export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
   return loading ? (

package/src/components/Input/styles.tsx

@@ -1,14 +1,14 @@
-import { Box, Stack, styled } from "@mui/material";
+import { Box, Stack, styled } from '@mui/material';
 
 export const OptionContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
+  display: 'flex',
+  flexDirection: 'column',
   borderBottom: `1px solid ${theme.palette.secondary.main}`,
-  width: "100%",
-  padding: "5px 0px",
+  width: '100%',
+  padding: '5px 0px',
 }));
 
 export const FetchingOptionsLoaderContainer = styled(Stack)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
-  maxHeight: "32px",
+  maxHeight: '32px',
 }));

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -1,11 +1,9 @@
-import { Stack } from "@mui/material";
-import { ReactNode } from "react";
-import { HelpIcon } from "../../Assets/Icons/IconComponents/HelpIcon";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { StyledIconButton } from "../../Navigation/DropDownMenu/styles";
-import UserBox from "./AppHeaderActions/UserBox";
-import { StyledHeader } from "./styles/styles";
-import { Button } from "../../export";
+import { Stack } from '@mui/material';
+import { ReactNode } from 'react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Button } from '../../export';
+import UserBox from './AppHeaderActions/UserBox';
+import { StyledHeader } from './styles/styles';
 
 export interface AppHeaderProps {
   actions?: ReactNode[];
@@ -24,7 +22,7 @@ export const AppHeader = ({
   actions = [],
   profileSx = {},
   clientLogoUrl,
-  designation = "",
+  designation = '',
   clientName,
   userFullName,
   collapsed,
@@ -33,8 +31,8 @@ export const AppHeader = ({
 }: AppHeaderProps) => {
   return (
     <StyledHeader collapsed={collapsed} className="appHeader">
-      <Typography variant={"subtitle2"}>{clientName}</Typography>
-      <Stack alignItems={"center"} gap={"12px"} flexDirection={"row"}>
+      <Typography variant={'subtitle2'}>{clientName}</Typography>
+      <Stack alignItems={'center'} gap={'12px'} flexDirection={'row'}>
         {/* <StyledIconButton>
           <a
             href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
@@ -53,7 +51,7 @@ export const AppHeader = ({
           <Typography
             variant="button"
             sx={{
-              fontWeight: "bold",
+              fontWeight: 'bold',
             }}
           >
             Report an Issue

package/src/components/Layout/AppHeader/AppHeaderActions/CogWheelMenu.tsx

@@ -1,7 +1,7 @@
-import { Divider, IconButton } from "@mui/material";
-import { ReactNode } from "react";
-import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
-import { Icons } from "../../../export";
+import { Divider, IconButton } from '@mui/material';
+import { ReactNode } from 'react';
+import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
+import { Icons } from '../../../export';
 // import { clogWheel } from "../../../../assets/images";
 // import DropDownButton from "../../../DropDownButton/DropDownButton";
 
@@ -13,7 +13,7 @@ const CogWheelMenu = ({ menu }: { menu: ReactNode[] }) => {
           orientation="vertical"
           variant="middle"
           flexItem
-          sx={{ height: "20px" }}
+          sx={{ height: '20px' }}
         />
       </div>
 

package/src/components/Layout/AppHeader/AppHeaderActions/HeaderActions.tsx

@@ -1,9 +1,9 @@
 // HeaderActions.tsx
 
-import { Divider, Stack } from "@mui/material";
-import { ReactNode } from "react";
-import CogWheelMenu from "./CogWheelMenu";
-import UserBox from "./UserBox";
+import { Divider, Stack } from '@mui/material';
+import { ReactNode } from 'react';
+import CogWheelMenu from './CogWheelMenu';
+import UserBox from './UserBox';
 
 export interface HeaderActionsProps {
   cogWheelMenu: ReactNode[];
@@ -27,7 +27,7 @@ const HeaderActions = ({
   fullName,
   designation,
   userBoxActions = [],
-  profileUrl = "",
+  profileUrl = '',
   actions = [],
   profileSx = {},
   avatar = {},
@@ -44,7 +44,7 @@ const HeaderActions = ({
             orientation="vertical"
             variant="middle"
             flexItem
-            sx={{ height: "20px" }}
+            sx={{ height: '20px' }}
           />
         </>
       ))}