@campxdev/react-blueprint 1.1.5 → 1.1.7

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/DeleteButton.tsx

@@ -0,0 +1,10 @@
+import { ButtonProps, IconButton } from "@mui/material";
+import { Icons } from "../../../export";
+
+export function DeleteButton({ disabled, ...props }: ButtonProps) {
+  return (
+    <IconButton {...props}>
+      <Icons.DeleteIcon />
+    </IconButton>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { ButtonProps, IconButton } from "@mui/material";
+import { Icons } from "../../../export";
+
+export function EditButton({ disabled, ...props }: ButtonProps) {
+  return (
+    <IconButton {...props}>
+      <Icons.EditIcon />
+    </IconButton>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { ButtonProps, IconButton } from "@mui/material";
+import { Icons } from "../../../export";
+
+export function RedirectButton({ disabled, ...props }: ButtonProps) {
+  return (
+    <IconButton {...props}>
+      <Icons.RedirectIcon />
+    </IconButton>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { ButtonProps, IconButton } from "@mui/material";
+import { Icons } from "../../../export";
+
+export function ViewButton({ disabled, ...props }: ButtonProps) {
+  return (
+    <IconButton {...props}>
+      <Icons.ViewIcon />
+    </IconButton>
+  );
+}

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

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

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

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

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

@@ -1,18 +1,13 @@
-import {
-  Box,
-  Autocomplete as MuiAutocomplete,
-  Paper,
-  PaperProps,
-} from "@mui/material";
-import axios from "axios";
-import _ from "lodash";
-import { useEffect, useReducer } from "react";
-import { campxAxios } from "../../../utils/campxAxios";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Spinner } from "../../Feedback/Spinner/Spinner";
-import { TextField } from "../TextField/TextField";
-import { FetchingOptionsLoader } from "../components/FetchingOptionsLoader";
-import { OptionContainer } from "../styles";
+import { axios as campxAxios } from '@campxdev/campx-web-utils';
+import { BaseSelectProps, Box, Autocomplete as MuiAutocomplete, Paper, PaperProps } from '@mui/material';
+import axios from 'axios';
+import _ from 'lodash';
+import { useEffect, useReducer } from 'react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Spinner } from '../../Feedback/Spinner/Spinner';
+import { TextField } from '../TextField/TextField';
+import { FetchingOptionsLoader } from '../components/FetchingOptionsLoader';
+import { OptionContainer } from '../styles';
 
 function sleep(duration: number): Promise<void> {
   return new Promise<void>((resolve) => {
@@ -28,9 +23,13 @@ export type SingleSelectProps = {
   useCampxAxios: boolean;
   required?: boolean;
   label?: string;
+  name?: string;
   value?: any;
   getValue?: (option: any) => any;
-};
+  onChange: (value: any) => void;
+  error?: any;
+  helperText?: string;
+} & BaseSelectProps;
 
 const CustomPaper = (props: PaperProps) => (
   <Paper {...props}>
@@ -40,24 +39,18 @@ const CustomPaper = (props: PaperProps) => (
 );
 
 enum SingleSelectActionsTypes {
-  OPEN = "open",
-  CLOSE = "close",
-  LOAD_INTERNAL_OPTIONS_START = "load_internal_options_start",
-  LOAD_INTERNAL_OPTIONS_END = "load_internal_options_end",
-  LOAD_INITIAL_INTERNAL_OPTIONS_START = "load_initial_internal_options_start",
-  LOAD_INITIAL_INTERNAL_OPTIONS_END = "load_initial_internal_options_end",
-  SET_NETWORK_ERROR = "set_network_error",
-  SET_INTERNAL_OPTIONS = "set_internal_options",
-  APPEND_INTERNAL_OPTIONS = "append_internal_options",
-  CHANGE_HAS_MORE_FLAG = "change_has_more_flag",
+  OPEN = 'open',
+  CLOSE = 'close',
+  LOAD_INTERNAL_OPTIONS_START = 'load_internal_options_start',
+  LOAD_INTERNAL_OPTIONS_END = 'load_internal_options_end',
+  LOAD_INITIAL_INTERNAL_OPTIONS_START = 'load_initial_internal_options_start',
+  LOAD_INITIAL_INTERNAL_OPTIONS_END = 'load_initial_internal_options_end',
+  SET_NETWORK_ERROR = 'set_network_error',
+  SET_INTERNAL_OPTIONS = 'set_internal_options',
+  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 };
@@ -118,8 +111,13 @@ export const SingleSelect = ({
   useCampxAxios = true,
   required = false,
   label,
+  name,
   getValue,
   value,
+  onChange,
+  error,
+  helperText,
+  ...restProps
 }: SingleSelectProps) => {
   const generateOptionsMap = (options: any[]) => {
     return _.keyBy(options ?? [], getValue ? getValue : (o) => o.value);
@@ -135,15 +133,7 @@ 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;
 
@@ -188,17 +178,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,
       });
       const newOptions = await internalAxios
-        .get(optionsApiEndPoint ?? "", {
+        .get(optionsApiEndPoint ?? '', {
           params: {
             limit: limit,
             offset: offset + 10,
@@ -226,7 +211,7 @@ export const SingleSelect = ({
       actionType: SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_START,
     });
     try {
-      const res = await internalAxios.get(optionsApiEndPoint ?? "", {
+      const res = await internalAxios.get(optionsApiEndPoint ?? '', {
         params: { limit, offset, selectedValue: value },
       });
       dispatch({
@@ -249,32 +234,36 @@ export const SingleSelect = ({
     if (value && optionsApiEndPoint) {
       fetchInitialOptions().finally(() => {
         dispatch({
-          actionType:
-            SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_END,
+          actionType: SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_END,
         });
       });
     }
   }, []);
 
   if (loadingInitialInternalOptions) {
-    console.log("Rendered Loading");
     return (
       <TextField
         label={label}
+        name={name}
         required={required}
         InputProps={{
           endAdornment: <Spinner />,
         }}
+        error={error}
+        helperText={helperText}
       />
     );
   }
   return (
     <MuiAutocomplete
+      onChange={(e, value) => {
+        onChange(getValue ? getValue(value) : value?.value);
+      }}
       open={open}
       autoFocus={true}
       value={state.internalOptionsMap[value]}
       renderInput={(params) => (
-        <TextField {...params} label={label} required={required} />
+        <TextField {...params} label={label} required={required} name={name} error={error} helperText={helperText} />
       )}
       PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {

package/src/components/Input/{Chips/Chips.tsx → Tags/Tags.tsx}

@@ -1,24 +1,24 @@
-import { Chip, styled } from "@mui/material";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons } from "../../export";
+import { Chip, styled } from '@mui/material';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Icons } from '../../export';
 
-const ChipList = styled("ul")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  flexWrap: "wrap",
-  listStyle: "none",
+const TagList = styled('ul')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  flexWrap: 'wrap',
+  listStyle: 'none',
 }));
 
-export type ChipsProps = {
-  chips: { label: string; value: any }[];
+export type TagsProps = {
+  tags: { label: string; value: any }[];
   onClick?: (clickedChip: any) => void;
   onDelete?: (deletedChip: any) => void;
 };
 
-export const Chips = ({ chips, onClick, onDelete }: ChipsProps) => {
+export const Tags = ({ tags, onClick, onDelete }: TagsProps) => {
   return (
-    <ChipList>
-      {chips.map(({ label, value }) => (
+    <TagList>
+      {tags.map(({ label, value }) => (
         <Chip
           label={<Typography variant="body2">{label}</Typography>}
           onClick={
@@ -38,6 +38,6 @@ export const Chips = ({ chips, onClick, onDelete }: ChipsProps) => {
           deleteIcon={<Icons.CrossIcon />}
         />
       ))}
-    </ChipList>
+    </TagList>
   );
 };

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

@@ -0,0 +1,39 @@
+import { PickerValidDate } from '@mui/x-date-pickers';
+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> = {
+  format?: 'hh:mm a' | 'HH:mm' | 'HH:mm:ss a' | 'HH:mm:ss';
+  views?: ('hours' | 'minutes' | 'seconds')[];
+  helperText?: string;
+  placeholder?: string;
+  required?: boolean;
+  containerProps?: any;
+} & MuiTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
+
+export const TimePicker = <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>({
+  label,
+  name,
+  value,
+  format = 'hh:mm a',
+  views = ['hours', 'minutes'],
+  helperText,
+  placeholder = '',
+  required = false,
+  containerProps,
+  ...rest
+}: TimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
+  return (
+    <LabelWrapper label={label} required={required} name={name} containerProps={containerProps}>
+      <MuiTimePicker
+        defaultValue={value}
+        format={format}
+        views={views}
+        slotProps={{
+          textField: { placeholder, helperText },
+        }}
+        {...rest}
+      />
+    </LabelWrapper>
+  );
+};

package/src/components/Input/export.ts

@@ -1,8 +1,13 @@
-export * from "./Button/Button";
-export * from "./MultiCheckBox/MultiCheckBox";
-export * from "./PasswordField/PasswordField";
-export * from "./SearchBar/SearchBar";
-export * from "./SingleCheckBox/SIngleCheckBox";
-export * from "./SingleSelect/SingleSelect";
-export * from "./Switch/Switch";
-export * from "./TextField/TextField";
+export * from './Button/Button';
+export * from './DatePicker/DatePicker';
+export * from './FormActions/FormActions';
+export * from './FormControlWrapper/FormControlWrapper';
+export * from './IconButtons/IconButtons';
+export * from './MultiCheckBox/MultiCheckBox';
+export * from './PasswordField/PasswordField';
+export * from './SearchBar/SearchBar';
+export * from './SingleCheckBox/SIngleCheckBox';
+export * from './SingleSelect/SingleSelect';
+export * from './Switch/Switch';
+export * from './TextField/TextField';
+export * from './TimePicker/TimePicker';

package/src/components/Layout/PageContent/PageContent.tsx

@@ -0,0 +1,16 @@
+import { Box, BoxProps, styled } from '@mui/material';
+
+const StyledPageContent = styled(Box)(({ theme }) => ({
+  padding: '1rem',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '10px',
+  overflowY: 'auto',
+  backgroundColor: theme.palette.surface.paperBackground,
+  height: '100%',
+}));
+
+export function PageContent(props: BoxProps) {
+  return <StyledPageContent {...props}>{props.children}</StyledPageContent>;
+}

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -0,0 +1,46 @@
+import { Box, styled, Typography } from '@mui/material';
+import { ReactNode } from 'react';
+import { Breadcrumbs } from '../../Navigation/Breadcrumbs/Breadcrumbs';
+
+interface BreadCrumbsLink {
+  name: string | ReactNode;
+  to: string;
+}
+interface PageHeaderProps {
+  title?: string | ReactNode;
+  actions?: ReactNode;
+  links?: BreadCrumbsLink[];
+}
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  minHeight: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: '0',
+  flexWrap: 'wrap',
+  '& .actions': {
+    display: 'flex',
+    gap: '1rem',
+    alignItems: 'center',
+    marginLeft: 'auto',
+    '& .MuiButton-root': {
+      height: '40px',
+    },
+  },
+}));
+
+export default function PageHeader({ title, actions, links }: PageHeaderProps) {
+  return (
+    <StyledBox>
+      <>
+        {links && links.length > 0 ? (
+          <Breadcrumbs links={links} />
+        ) : (
+          <>{typeof title === 'string' ? <Typography variant="subtitle2">{title}</Typography> : title}</>
+        )}
+      </>
+      <Box className="actions">{actions}</Box>
+    </StyledBox>
+  );
+}

package/src/components/Navigation/DropDownMenu/DropDownButton.tsx

@@ -1,8 +1,8 @@
-import { KeyboardArrowDown } from "@mui/icons-material";
-import { Button, ButtonProps } from "../../Input/Button/Button";
+import { KeyboardArrowDown } from '@mui/icons-material'
+import { Button, ButtonProps } from '../../Input/Button/Button'
 
 export const DropDownButton = (props: ButtonProps) => {
   return (
-    <Button {...props} variant="outlined" endIcon={<KeyboardArrowDown />} />
-  );
-};
+    <Button variant="outlined" endIcon={<KeyboardArrowDown />} {...props} />
+  )
+}