@campxdev/react-blueprint 1.1.6 → 1.1.8

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

@@ -0,0 +1,79 @@
+import { Box, Dialog, DialogActions, styled } from '@mui/material';
+
+import { AnimatedGifs } from '../../../assets/images/gif';
+import { Button, Typography } from '../../export';
+
+export type ConfirmDialogType = 'confirm' | 'delete';
+
+export type ConfirmDialogProps = {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  type: ConfirmDialogType;
+};
+
+const StyledDialogContent = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    padding: '24px 16px',
+    display: 'flex',
+    height: '175px',
+  },
+}));
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  type,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <StyledDialog
+      keepMounted
+      maxWidth="sm"
+      transitionDuration={150}
+      open={isOpen}
+      onClose={onCancel}
+    >
+      <StyledDialogContent>
+        <Box>
+          <img
+            src={
+              type === 'delete'
+                ? AnimatedGifs.DeleteConfirmationAlert
+                : AnimatedGifs.ConfirmationAlert
+            }
+            alt="Animated GIF"
+            style={{ width: '80px' }}
+          />
+        </Box>
+        <Box>
+          <Typography variant="subtitle2">{title}</Typography>
+          <Typography variant="label1">{message}</Typography>
+        </Box>
+      </StyledDialogContent>
+      <DialogActions sx={{ gap: '16px' }}>
+        <Button onClick={onCancel} variant="text">
+          Cancel
+        </Button>
+        <Button
+          onClick={onConfirm}
+          variant="contained"
+          color={type === 'delete' ? 'error' : 'primary'}
+        >
+          {type === 'delete' ? 'Confirm Delete' : 'Confirm'}
+        </Button>
+      </DialogActions>
+    </StyledDialog>
+  );
+};

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} />
+  )
+}

package/src/components/Navigation/Sidebar/Components.tsx

@@ -0,0 +1,97 @@
+import { Box, Stack } from "@mui/material";
+import { useMemo } from "react";
+import { Icons, Tooltip, Typography } from "../../export";
+import {
+  DefaultButtonProps,
+  InternalMenuButtonProps,
+  SubMenuButtonProps,
+  TooltipIconProps,
+} from "./interfaces";
+import { createSidebarStyles } from "./styles";
+
+export const TooltipIcon = ({ name, icon }: TooltipIconProps) => {
+  return (
+    <Tooltip title={<Typography variant="label2">{name}</Typography>}>
+      {icon}
+    </Tooltip>
+  );
+};
+
+export const DefaultButton = ({
+  name,
+  icon,
+  collapsed,
+}: DefaultButtonProps) => {
+  const { StyledListItemButton, StyledListItemIcon } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed]
+  );
+
+  return (
+    <StyledListItemButton collapsed={collapsed}>
+      <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
+      <Typography variant="button1">{name}</Typography>
+    </StyledListItemButton>
+  );
+};
+
+export const InternalMenuButton = ({
+  name,
+  icon,
+  collapsed,
+}: InternalMenuButtonProps) => {
+  const { StyledListItemButton, StyledListItemIcon, HoverIcon } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed]
+  );
+
+  return (
+    <StyledListItemButton collapsed={collapsed}>
+      <Stack
+        width={"100%"}
+        direction="row"
+        alignItems={"center"}
+        justifyContent={"space-between"}
+      >
+        <Stack direction="row" alignItems={"center"}>
+          <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
+          <Typography variant="button1">{name}</Typography>
+        </Stack>
+        <HoverIcon display={"flex"} className="hoverIcon">
+          <Icons.RedoIcon size={18} />
+        </HoverIcon>
+      </Stack>
+    </StyledListItemButton>
+  );
+};
+
+export const SubMenuButton = ({
+  name,
+  icon,
+  expanded,
+  collapsed,
+}: SubMenuButtonProps) => {
+  const { StyledListItemButton, StyledListItemIcon } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed]
+  );
+
+  return (
+    <StyledListItemButton collapsed={collapsed}>
+      <Stack
+        width={"100%"}
+        direction="row"
+        alignItems={"center"}
+        justifyContent={"space-between"}
+      >
+        <Stack direction="row" alignItems={"center"}>
+          <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
+          <Typography variant="button1">{name}</Typography>
+        </Stack>
+        <Box display={"flex"}>
+          {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
+        </Box>
+      </Stack>
+    </StyledListItemButton>
+  );
+};