@campxdev/react-blueprint 1.9.6 → 2.0.1

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

@@ -1,187 +0,0 @@
-import {
-  AutocompleteCloseReason,
-  Box,
-  InputAdornment,
-  Autocomplete as MuiAutocomplete,
-  Paper,
-  Stack,
-} from '@mui/material';
-import { debounce } from 'lodash';
-import { SyntheticEvent, useMemo } from 'react';
-import { Typography } from '../../../DataDisplay/Typography/Typography';
-import { Icons, SingleSelectProps, Spinner } from '../../../export';
-import { TextField } from '../../TextField/TextField';
-import { SingleSelectState } from '../singleSelectReducer';
-import { OptionsLoader } from './OptionsLoader';
-
-declare module '@mui/material/Autocomplete' {
-  interface AutocompletePaperSlotPropsOverrides {
-    loadingOptions: boolean;
-    isSearch: boolean;
-  }
-}
-
-const CustomPaper = (props: any) => (
-  <Paper
-    {...props}
-    sx={{
-      boxShadow: 'none',
-      borderRadius: '0px 0px 4px 4px',
-    }}
-  >
-    {props.children}
-    {props.loadingOptions ? <OptionsLoader isSearch={props.isSearch} /> : <></>}
-  </Paper>
-);
-
-export type SingleInputProps = {
-  onChange: (value: any) => void;
-  searchDb: (searchValue: string) => Promise<void>;
-  handleOpen: (event: SyntheticEvent) => Promise<void>;
-  handleClose: (event: SyntheticEvent, reason: AutocompleteCloseReason) => void;
-  handleScroll: (event: any) => Promise<void>;
-  state: SingleSelectState;
-} & SingleSelectProps;
-
-export const SingleInput = ({
-  required = false,
-  optionsApiEndPoint,
-  label,
-  name,
-  getValue,
-  value,
-  onChange,
-  error,
-  helperText,
-  dbLabelProps = {
-    labelKey: '',
-    useLabelStartCase: false,
-    useSubLabelStartCase: false,
-  },
-  searchDb,
-  handleOpen,
-  handleClose,
-  handleScroll,
-  state,
-  disableClear = false,
-  ...restProps
-}: SingleInputProps) => {
-  const {
-    open,
-    loadingInitialInternalOptions,
-    internalOptions,
-    loadingInternalOptions,
-  } = state;
-
-  const debouncedSendRequest = useMemo(() => {
-    return debounce((searchValue) => {
-      if (optionsApiEndPoint) searchDb(searchValue);
-    }, 300);
-  }, [searchDb]);
-
-  const handleSearch = async (e: any) => {
-    if (e) {
-      const searchValue = e.target.value;
-      debouncedSendRequest(searchValue);
-    }
-  };
-
-  if (loadingInitialInternalOptions) {
-    return (
-      <TextField
-        label={label}
-        name={name}
-        required={required}
-        InputProps={{
-          endAdornment: <Spinner />,
-        }}
-        error={error}
-        helperText={helperText}
-      />
-    );
-  }
-
-  return (
-    <MuiAutocomplete
-      {...restProps}
-      disableClearable
-      forcePopupIcon={false}
-      onChange={(e, value) => {
-        onChange(getValue ? getValue(value) : value?.value);
-      }}
-      onInputCapture={handleSearch}
-      open={open}
-      autoFocus={false}
-      filterOptions={(options, state) => {
-        if (optionsApiEndPoint) {
-          return options;
-        }
-        return options.filter((option) =>
-          option.label.toLowerCase().includes(state.inputValue.toLowerCase()),
-        );
-      }}
-      value={state.internalOptionsMap[value]}
-      PaperComponent={CustomPaper}
-      renderOption={(props, option: any) => {
-        return (
-          <Box component="li" {...props} margin="4px 0px" key={option.value}>
-            <Stack>
-              <Typography variant="subtitle3">{option.label}</Typography>
-              <Typography variant="caption">{option?.subLabel}</Typography>
-            </Stack>
-          </Box>
-        );
-      }}
-      ListboxProps={{
-        ...restProps.ListboxProps,
-        onScroll: handleScroll,
-      }}
-      slotProps={{
-        ...restProps.slotProps,
-        paper: {
-          ...restProps.slotProps?.paper,
-          loadingOptions: loadingInternalOptions,
-          isSearch: !!state.search,
-        },
-      }}
-      onOpen={handleOpen}
-      onClose={handleClose}
-      options={internalOptions}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label={label}
-          required={required}
-          name={name}
-          error={error}
-          helperText={helperText}
-          fullWidth
-          slotProps={{
-            input: {
-              ...params.InputProps,
-              sx: {
-                paddingRight: '18px',
-              },
-              endAdornment: (
-                <InputAdornment position="end">
-                  <Icons.DownArrow
-                    disabled={params.disabled}
-                    onClick={
-                      params.disabled
-                        ? () => {}
-                        : open
-                        ? (e) => {
-                            handleClose(e, 'escape');
-                          }
-                        : handleOpen
-                    }
-                  />
-                </InputAdornment>
-              ),
-            },
-          }}
-        />
-      )}
-    />
-  );
-};

package/src/components/Input/SingleSelect/singleSelectReducer.ts

@@ -1,125 +0,0 @@
-import { Reducer } from 'react';
-
-export enum SingleSelectActionsTypes {
-  OPEN = 'open',
-  CLOSE = 'close',
-  LOAD_INTERNAL_OPTIONS_START = 'load_internal_options_start',
-  LOAD_INTERNAL_OPTIONS_END = 'load_internal_options_end',
-  LOAD_SELECTED_OPTIONS_START = 'load_selected_options_start',
-  LOAD_SELECTED_OPTIONS_END = 'load_selected_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',
-  SET_SEARCH = 'set_search',
-  CLEAR_SEARCH = 'clear_search',
-}
-
-export type Option = {
-  label: string;
-  subLabel?: string;
-  value: any;
-};
-
-export type SingleSelectState = {
-  open: boolean;
-  loadingInternalOptions: boolean;
-  loadingInitialInternalOptions: boolean;
-  internalOptions: Option[];
-  internalOptionsMap: { [x: string]: Option };
-  limit: number;
-  offset: number;
-  hasMore: boolean;
-  search: string | null;
-  error?: any;
-};
-
-export type SingleSelectAction = {
-  actionType: SingleSelectActionsTypes;
-  stateChanges?: Partial<SingleSelectState> & {
-    persistOffset?: boolean;
-    newOptions?: Option[];
-  };
-};
-
-export const singleSelectReducer: Reducer<
-  SingleSelectState,
-  SingleSelectAction
-> = (state: SingleSelectState, action: SingleSelectAction) => {
-  const { actionType, stateChanges } = action;
-  switch (actionType) {
-    case SingleSelectActionsTypes.OPEN: {
-      return { ...state, open: true };
-    }
-    case SingleSelectActionsTypes.CLOSE: {
-      return {
-        ...state,
-        open: false,
-        loadingInternalOptions: false,
-      };
-    }
-    case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START: {
-      return { ...state, loadingInternalOptions: true };
-    }
-    case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END: {
-      return { ...state, loadingInternalOptions: false };
-    }
-    case SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START: {
-      return { ...state, loadingInitialInternalOptions: true };
-    }
-    case SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_END: {
-      return { ...state, loadingInitialInternalOptions: false };
-    }
-    case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
-      return { ...state, ...stateChanges };
-    }
-    case SingleSelectActionsTypes.SET_SEARCH: {
-      return {
-        ...state,
-        search: stateChanges?.search ?? null,
-        hasMore: true,
-      };
-    }
-    case SingleSelectActionsTypes.CLEAR_SEARCH: {
-      return {
-        ...state,
-        search: null,
-        offset: 0,
-        internalOptions: stateChanges?.internalOptions ?? [],
-        internalOptionsMap: stateChanges?.internalOptionsMap ?? {},
-      };
-    }
-    case SingleSelectActionsTypes.SET_INTERNAL_OPTIONS: {
-      return {
-        ...state,
-        internalOptions: stateChanges?.internalOptions ?? [],
-        internalOptionsMap: stateChanges?.internalOptionsMap ?? {},
-        loadingInternalOptions: false,
-      };
-    }
-    case SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS: {
-      return {
-        ...state,
-        internalOptions: [
-          ...state.internalOptions,
-          ...(stateChanges?.newOptions ?? []),
-        ],
-        internalOptionsMap: {
-          ...state.internalOptionsMap,
-          ...stateChanges?.internalOptionsMap,
-        },
-        loadingInternalOptions: false,
-        limit: state.limit,
-        offset: state.offset + (stateChanges?.persistOffset ? 0 : 10),
-      };
-    }
-    case SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG: {
-      return {
-        ...state,
-        hasMore: !state.hasMore,
-      };
-    }
-    default:
-      return { ...state, ...stateChanges };
-  }
-};

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

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

package/src/components/Input/Tags/Tags.tsx

@@ -1,36 +0,0 @@
-import { Chip, styled } from '@mui/material';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
-
-const TagList = styled('ul')(({ theme }) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  flexWrap: 'wrap',
-  listStyle: 'none',
-}));
-
-export type TagsProps = {
-  tags: { label: string; value: any }[];
-  onDelete?: (deletedChip: any) => void;
-};
-
-export const Tags = ({ tags, onDelete }: TagsProps) => {
-  return (
-    <TagList>
-      {tags.map(({ label, value }) => (
-        <Chip
-          key={value} // Add a key to ensure unique identification for each Chip
-          label={<Typography variant="body2">{label}</Typography>}
-          onDelete={
-            onDelete
-              ? (e) => {
-                  onDelete(value);
-                }
-              : undefined
-          }
-          deleteIcon={<Icons.CrossIcon />}
-        />
-      ))}
-    </TagList>
-  );
-};

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

@@ -1,46 +0,0 @@
-import {
-  TextField as MuiTextField,
-  TextFieldProps as MuiTextFieldProps,
-  StackProps,
-} from '@mui/material';
-import { Typography } from '../../export';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-
-export type TextFieldProps = {
-  containerProps?: StackProps;
-  description?: string;
-} & MuiTextFieldProps;
-
-export const TextField = ({
-  name,
-  label,
-  value,
-  onChange,
-  required = false,
-  containerProps,
-  description,
-  ...rest
-}: TextFieldProps) => {
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={{
-        ...(rest.fullWidth && { width: '100%' }),
-        ...containerProps,
-      }}
-    >
-      <MuiTextField
-        required={required}
-        id={name}
-        value={value}
-        label={label}
-        name={name}
-        onChange={onChange}
-        {...rest}
-      />
-      <Typography variant="caption">{description}</Typography>
-    </LabelWrapper>
-  );
-};

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

@@ -1,53 +0,0 @@
-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 = 'Select Time',
-  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/styles.tsx

@@ -1,14 +0,0 @@
-import { Box, Stack, styled } from '@mui/material';
-
-export const FilterOptionContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  borderBottom: `1px solid ${theme.palette.secondary.main}`,
-  width: '100%',
-}));
-
-export const FooterContainer = styled(Stack)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.defaultBackground,
-  borderRadius: '4px',
-  height: '40px',
-}));

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

@@ -1,65 +0,0 @@
-import { Stack, SxProps, useMediaQuery, useTheme } from '@mui/material';
-import { ReactNode } from 'react';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import UserBox from './AppHeaderActions/UserBox';
-import { StyledHeader } from './styles/styles';
-
-export type AppHeaderProps = {
-  actions?: ReactNode[];
-  profileActions?: ReactNode[];
-  appsMenu?: ReactNode;
-  clientLogoUrl?: string;
-  clientName?: string;
-  userFullName: string;
-  designation?: string;
-  collapsed: boolean;
-  institutionsData?: any[];
-  profileSx?: any;
-  onLogoutClick?: any;
-  showActiveDevices?: boolean;
-  headerSx?: SxProps;
-};
-
-export const AppHeader = ({
-  actions = [],
-  profileActions = [],
-  profileSx = {},
-  clientLogoUrl,
-  onLogoutClick,
-  designation = '',
-  clientName,
-  userFullName,
-  collapsed,
-  institutionsData,
-  showActiveDevices = true,
-  headerSx,
-}: AppHeaderProps) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-
-  return (
-    <StyledHeader
-      collapsed={collapsed}
-      className="appHeader"
-      headerSx={headerSx}
-    >
-      <Typography variant={isSmallScreen ? 'subtitle3' : 'subtitle2'}>
-        {clientName}
-      </Typography>
-
-      <Stack alignItems={'center'} gap={'12px'} flexDirection={'row'}>
-        {actions.map((action) => action)}
-
-        <UserBox
-          fullName={userFullName}
-          actions={profileActions}
-          institutionsData={institutionsData}
-          profileSx={profileSx}
-          designation={designation}
-          showActiveDevices={showActiveDevices}
-          onLogoutClick={onLogoutClick}
-        />
-      </Stack>
-    </StyledHeader>
-  );
-};

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

@@ -1,32 +0,0 @@
-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";
-
-const CogWheelMenu = ({ menu }: { menu: ReactNode[] }) => {
-  return (
-    <>
-      <div>
-        <Divider
-          orientation="vertical"
-          variant="middle"
-          flexItem
-          sx={{ height: '20px' }}
-        />
-      </div>
-
-      <DropdownMenu
-        anchor={({ open }) => (
-          <IconButton color="secondary" onClick={open}>
-            <Icons.ClogWheelIcon />
-          </IconButton>
-        )}
-        menu={menu}
-      />
-    </>
-  );
-};
-
-export default CogWheelMenu;

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

@@ -1,100 +0,0 @@
-import { Box, Stack, TextField, Typography, styled } from '@mui/material';
-import Cookies from 'js-cookie';
-import { useState } from 'react';
-import { isDevelopment } from '../../../../utils/constants';
-import Image from '../../../Image/Image';
-
-const SwitchInstitution = ({ close, institutions }: any) => {
-  const [searchText, setSearchText] = useState<string>('');
-
-  const filteredInstitutions = institutions?.filter((item: any) =>
-    item.name.toLowerCase().includes(searchText.toLowerCase()),
-  );
-
-  return (
-    <Box sx={{ padding: '20px' }}>
-      <Stack>
-        <Typography variant="subtitle3" textAlign={'center'}>
-          Select an Institution
-        </Typography>
-
-        <TextField
-          label="Search Institution"
-          variant="outlined"
-          value={searchText}
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-          }}
-          fullWidth
-          onChange={(e) => setSearchText(e.target.value)}
-        />
-      </Stack>
-      <StyledInstitutionContainer>
-        {filteredInstitutions?.map((item: any, index: number) => (
-          <InstitutionCard institution={item} key={index} />
-        ))}
-      </StyledInstitutionContainer>
-    </Box>
-  );
-};
-
-const InstitutionCard = ({ institution }: any) => {
-  const handleClick = () => {
-    if (isDevelopment) {
-      Cookies.set('campx_institution', institution?.code);
-    } else {
-    }
-
-    window.location.replace(`${window.location.origin}/${institution?.code}`);
-  };
-
-  return (
-    <StyledInstitutionCard onClick={handleClick}>
-      <Image
-        alt="logo"
-        height={'100px'}
-        width="100%"
-        src={institution?.imageSquare?.url}
-      />
-      <Typography variant="body2">{institution?.name}</Typography>
-    </StyledInstitutionCard>
-  );
-};
-
-const StyledInstitutionCard = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '20px',
-  padding: '14px',
-  border: '1px solid black',
-  borderRadius: '10px',
-  cursor: 'pointer',
-  width: '200px',
-  flexShrink: 0,
-}));
-
-export const StyledInstitutionContainer = styled(Box)(({ theme }) => ({
-  marginTop: '20px',
-  display: 'flex',
-  justifyContent: 'center',
-  padding: '20px',
-  flexWrap: 'wrap',
-  gap: '20px',
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.5em',
-    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-  },
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: 'rgba(0, 0, 0, 0.2)',
-    borderRadius: '3px',
-
-    '&:hover': {
-      background: 'rgba(0, 0, 0, 0.3)',
-    },
-  },
-}));
-
-export default SwitchInstitution;