@campxdev/react-blueprint 0.1.24 → 0.1.25

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

@@ -6,6 +6,7 @@ import {
   StackProps,
 } from "@mui/material";
 import { ReactNode } from "react";
+import { Typography } from "../../DataDisplay/Typography/Typography";
 import { Icons } from "../../export";
 import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
 
@@ -47,7 +48,7 @@ export const RadioGroup = ({
                 disabled={disabled || item.disabled}
               />
             }
-            label={item.label}
+            label={<Typography variant="body2">{item.label}</Typography>}
           />
         ))}
       </MuiRadioGroup>

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

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { SearchBar } from "./SearchBar";
+
+const meta: Meta<typeof SearchBar> = {
+  title: "Input/SearchBar",
+  component: SearchBar,
+  argTypes: {
+    placeholder: {
+      description: "The placeholder text",
+    },
+    label: {
+      description: "Can be a ReactNode or String",
+    },
+    value: {
+      description: "Current value of the search input.",
+    },
+    onSearch: {
+      description: "Function to handle search",
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof SearchBar>;
+
+export const Primary: Story = {
+  args: {
+    onSearch: (value: string) => console.log(value),
+  },
+};
+
+export const WithPlaceHolder: Story = {
+  args: {
+    ...Primary.args,
+    placeholder: "Search By Name/Email",
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    ...Primary.args,
+    label: "Searching Students",
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    ...WithLabel.args,
+    value: "Chrome",
+  },
+};

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

@@ -0,0 +1,48 @@
+import { Search } from "@mui/icons-material";
+import { InputAdornment } from "@mui/material";
+import { debounce } from "lodash";
+import { ReactNode, useMemo, useState } from "react";
+import { TextField, TextFieldProps } from "../TextField/TextField";
+
+export type SearchBarProps = {
+  placeholder?: string;
+  label?: string | ReactNode;
+  value?: string;
+  onSearch: (value: string) => void;
+} & TextFieldProps;
+
+export const SearchBar = ({
+  placeholder = "Search",
+  label,
+  value = "",
+  onSearch,
+  ...rest
+}: SearchBarProps) => {
+  const [search, setSearch] = useState(value);
+
+  const debouncedSendRequest = useMemo(() => {
+    return debounce(onSearch, 300);
+  }, [onSearch]);
+
+  const handleChange = (e: any) => {
+    setSearch(e.target.value);
+    debouncedSendRequest(e.target.value);
+  };
+
+  return (
+    <TextField
+      placeholder={placeholder}
+      label={label}
+      value={search}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Search />
+          </InputAdornment>
+        ),
+      }}
+      {...rest}
+      onChange={handleChange}
+    />
+  );
+};

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

@@ -2,8 +2,10 @@ import {
   FormControlLabel,
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
+  useTheme,
 } from "@mui/material";
 import { ReactNode } from "react";
+import { Typography } from "../../DataDisplay/Typography/Typography";
 import { Icons } from "../../export";
 
 export type CheckboxProps = {
@@ -14,8 +16,10 @@ export const SingleCheckBox = ({
   checked,
   label,
   onChange,
+  required,
   ...rest
 }: CheckboxProps) => {
+  const theme = useTheme();
   return (
     <FormControlLabel
       control={
@@ -27,7 +31,16 @@ export const SingleCheckBox = ({
           {...rest}
         />
       }
-      label={label}
+      label={
+        <Typography variant="body2">
+          {label}
+          {required && (
+            <span style={{ color: `${theme.palette.highlight.main}` }}>
+              {" *"}
+            </span>
+          )}
+        </Typography>
+      }
     />
   );
 };

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

@@ -17,7 +17,6 @@ const SingleCheckBoxStory: StoryFn<CheckboxProps> = (args) => {
       {...args}
       value={value}
       onChange={(event: any) => {
-        console.log(value, "ll");
         setValue(event.target.value);
       }}
     />

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

@@ -82,7 +82,6 @@ export const Default = {
   args: {
     required: true,
     label: "Single Select",
-    options: topFilms,
   },
 };
 export const Primary = {
@@ -102,3 +101,23 @@ export const WithAPIEndPoint = {
     required: false,
   },
 };
+
+export const SingleSelectWithValue = {
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
+  args: {
+    label: "Select Select",
+    options: topFilms,
+    required: true,
+    value: 1994,
+  },
+};
+
+export const SingleSelectWithValueAndApi = {
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
+  args: {
+    optionsApiEndPoint: "dropdowns/classrooms",
+    label: "Select Classroom",
+    required: true,
+    value: 1,
+  },
+};

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

@@ -3,13 +3,14 @@ import {
   Autocomplete as MuiAutocomplete,
   Paper,
   PaperProps,
-  TextField,
 } from "@mui/material";
 import axios from "axios";
-import { useReducer } from "react";
+import _ from "lodash";
+import { useEffect, useReducer } from "react";
 import { campxAxios } from "../../../utils/campxAxios";
 import { Typography } from "../../DataDisplay/Typography/Typography";
-import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
+import { Spinner } from "../../Feedback/Spinner/Spinner";
+import { TextField } from "../TextField/TextField";
 import { FetchingOptionsLoader } from "../components/FetchingOptionsLoader";
 import { OptionContainer } from "../styles";
 
@@ -21,13 +22,15 @@ function sleep(duration: number): Promise<void> {
   });
 }
 
-export interface SingleSelectProps {
-  options?: { label: string; subLabel?: string; value: any }[];
+export type SingleSelectProps = {
+  options?: { label: string; subLabel?: string; value: any }[] | any[];
   optionsApiEndPoint?: string;
   useCampxAxios: boolean;
   required?: boolean;
   label?: string;
-}
+  value?: any;
+  getValue?: (option: any) => any;
+};
 
 const CustomPaper = (props: PaperProps) => (
   <Paper {...props}>
@@ -41,6 +44,8 @@ enum SingleSelectActionsTypes {
   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",
@@ -66,6 +71,12 @@ const singleSelectReducer = (
     case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END: {
       return { ...state, loadingInternalOptions: false };
     }
+    case SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_START: {
+      return { ...state, loadingInitialInternalOptions: true };
+    }
+    case SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_END: {
+      return { ...state, loadingInitialInternalOptions: false };
+    }
     case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
       return { ...state, ...stateChanges };
     }
@@ -73,6 +84,7 @@ const singleSelectReducer = (
       return {
         ...state,
         internalOptions: stateChanges.internalOptions,
+        internalOptionsMap: stateChanges.internalOptionsMap,
         loadingInternalOptions: false,
       };
     }
@@ -80,6 +92,10 @@ const singleSelectReducer = (
       return {
         ...state,
         internalOptions: [...state.internalOptions, ...stateChanges.newOptions],
+        internalOptionsMap: {
+          ...state.internalOptionsMap,
+          ...stateChanges.internalOptionsMap,
+        },
         loadingInternalOptions: false,
         limit: state.limit,
         offset: state.offset + 10,
@@ -102,11 +118,19 @@ export const SingleSelect = ({
   useCampxAxios = true,
   required = false,
   label,
+  getValue,
+  value,
 }: SingleSelectProps) => {
+  const generateOptionsMap = (options: any[]) => {
+    return _.keyBy(options ?? [], getValue ? getValue : (o) => o.value);
+  };
+
   const [state, dispatch] = useReducer(singleSelectReducer, {
     open: false,
     loadingInternalOptions: false,
+    loadingInitialInternalOptions: false,
     internalOptions: options ?? [],
+    internalOptionsMap: generateOptionsMap(options ?? []),
     limit: 10,
     offset: 0,
     hasMore: true,
@@ -114,6 +138,7 @@ export const SingleSelect = ({
   const {
     open,
     loadingInternalOptions,
+    loadingInitialInternalOptions,
     internalOptions,
     limit,
     offset,
@@ -144,6 +169,7 @@ export const SingleSelect = ({
           actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
           stateChanges: {
             internalOptions: options,
+            internalOptionsMap: generateOptionsMap(options),
           },
         });
       } catch (e) {
@@ -165,7 +191,8 @@ export const SingleSelect = ({
     if (
       listboxNode.scrollTop + listboxNode.clientHeight >=
         listboxNode.scrollHeight - 1 &&
-      hasMore
+      hasMore &&
+      optionsApiEndPoint
     ) {
       dispatch({
         actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
@@ -188,19 +215,67 @@ export const SingleSelect = ({
         actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
         stateChanges: {
           newOptions: newOptions,
+          internalOptionsMap: generateOptionsMap(newOptions),
         },
       });
     }
   };
 
+  const fetchInitialOptions = async () => {
+    dispatch({
+      actionType: SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_START,
+    });
+    try {
+      const res = await internalAxios.get(optionsApiEndPoint ?? "", {
+        params: { limit, offset, selectedValue: value },
+      });
+      dispatch({
+        actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
+        stateChanges: {
+          internalOptions: res.data,
+          internalOptionsMap: generateOptionsMap(res.data),
+        },
+      });
+      await sleep(1000);
+    } catch (e) {
+      dispatch({
+        actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
+        stateChanges: { error: e },
+      });
+    }
+  };
+
+  useEffect(() => {
+    console.log("useEffect");
+    if (value && optionsApiEndPoint) {
+      fetchInitialOptions().finally(() => {
+        dispatch({
+          actionType:
+            SingleSelectActionsTypes.LOAD_INITIAL_INTERNAL_OPTIONS_END,
+        });
+      });
+    }
+  }, []);
+
+  if (loadingInitialInternalOptions) {
+    console.log("Rendered Loading");
+    return (
+      <TextField
+        label={label}
+        required={required}
+        InputProps={{
+          endAdornment: <Spinner />,
+        }}
+      />
+    );
+  }
   return (
     <MuiAutocomplete
       open={open}
-      autoHighlight={true}
+      autoFocus={true}
+      value={state.internalOptionsMap[value]}
       renderInput={(params) => (
-        <LabelWrapper label={label} required={required}>
-          <TextField {...params} />
-        </LabelWrapper>
+        <TextField {...params} label={label} required={required} />
       )}
       PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {

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

@@ -3,6 +3,9 @@ import { Meta } from "@storybook/react";
 
 // Make sure your TextField import is correct
 import { TextField, TextFieldProps } from "./TextField";
+import { ToolTipContent, Tooltip } from "../../Feedback/Tooltip/Tooltip";
+import { InputAdornment as MuiInputAdornment } from "@mui/material";
+import { InfoIcon } from "../../Icons/IconComponents/InfoIcon";
 
 // Define the default export with Meta type including the component type
 export default {
@@ -133,3 +136,20 @@ export const PassowrdInput = {
     helperText: "Password should be alpha-numeric with special character",
   },
 };
+
+export const InfoInput = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Info",
+    required: true,
+    InputProps: {
+      endAdornment: (
+        <MuiInputAdornment position="end">
+          <Tooltip title={<ToolTipContent message={"This is the info tooltip !! This is the info tooltip !! This is the info tooltip !!"} />}>
+            <InfoIcon />
+          </Tooltip>
+        </MuiInputAdornment>
+      ),
+    },
+  },
+};

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

@@ -1,5 +1,5 @@
 import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Spinner } from "../../FeedBack/Spinner/Spinner";
+import { Spinner } from "../../Feedback/Spinner/Spinner";
 import { FetchingOptionsLoaderContainer } from "../styles";
 
 export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
@@ -11,4 +11,4 @@ export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
       </FetchingOptionsLoaderContainer>
     )
   );
-};
+};

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

@@ -4,6 +4,7 @@ import { DropdownMenuItem } from "../../Navigation/DropDownMenu/DropdownMenuItem
 import { Icons } from "../../export";
 import { AppHeader, AppHeaderProps } from "./AppHeader";
 import { AppsMenu } from "./AppsMenu";
+import HelpButton from "../../Input/HelpButton/HelpButton";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof AppHeader> = {
@@ -129,6 +130,7 @@ export const WithActions: Story = {
       <IconButton>
         <Icons.ExamResultIcon />
       </IconButton>,
+      <HelpButton />,
     ],
     userBoxActions: [
       { label: "Action 1", onClick: () => alert("Action 1 clicked") },
@@ -137,7 +139,6 @@ export const WithActions: Story = {
   },
 };
 
-// Story with custom header actions
 export const WithCustomHeaderActions: Story = {
   render: (args: AppHeaderProps) => <AppHeader {...args} />,
   args: {

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

@@ -10,11 +10,11 @@ import {
 
 export interface AppHeaderProps {
   actions?: ReactNode[];
-  appsMenu: ReactNode;
-  clientLogo: string;
+  appsMenu?: ReactNode;
+  clientLogo?: string;
   cogWheelMenu?: ReactNode[];
   customHeaderActions?: ReactNode;
-  fullName: string;
+  fullName?: string;
   designation?: string;
   profileUrl?: string;
   userBoxActions?: {
@@ -48,7 +48,7 @@ export const AppHeader = ({
       <StyledContainer sx={containerSx}>
         <Stack alignItems={"center"} gap={"10px"} flexDirection={"row"}>
           {appsMenu}
-          <AppLogo clientLogo={clientLogo} imageSx={imageSx} />
+          <AppLogo clientLogo={clientLogo ?? ""} imageSx={imageSx} />
         </Stack>
         <StyledActionBox>
           {customHeaderActions ? (
@@ -56,10 +56,10 @@ export const AppHeader = ({
           ) : (
             <HeaderActions
               cogWheelMenu={cogWheelMenu}
-              fullName={fullName}
+              fullName={fullName ?? ""}
               designation={designation}
               userBoxActions={userBoxActions}
-              profileUrl={profileUrl}
+              profileUrl={profileUrl ?? ""}
               actions={actions}
               profileSx={profileSx}
             />

package/src/components/Layout/Header/HeaderActions/HeaderActions.tsx

@@ -1,8 +1,5 @@
-import { Divider, IconButton, Stack } from "@mui/material";
+import { Divider, Stack } from "@mui/material";
 import { ReactNode } from "react";
-// import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
-// import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
-import { Icons } from "../../../export";
 import CogWheelMenu from "./CogWheelMenu";
 import UserBox from "./UserBox";
 
@@ -17,7 +14,7 @@ export interface HeaderActionsProps {
   }[];
   profileUrl: string | undefined;
   actions?: ReactNode[];
-  profileSx?: any;
+  profileSx?: any; // Making HelpButton prop optional
 }
 
 const HeaderActions = ({
@@ -30,28 +27,24 @@ const HeaderActions = ({
   profileSx = {},
 }: HeaderActionsProps) => {
   return (
-    <Stack direction="row" gap={1} alignItems={"center"}>
-      <IconButton
-        href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
-        target="_blank"
-      >
-        <Icons.HelpIcon />
-      </IconButton>
-
+    <Stack direction="row" gap={1} alignItems="center">
+      {/* Render other actions */}
       {actions.map((action, index) => (
         <>
-          <div>
-            <Divider
-              orientation="vertical"
-              variant="middle"
-              flexItem
-              sx={{ height: "20px" }}
-            />
-          </div>
           {action}
+          <Divider
+            orientation="vertical"
+            variant="middle"
+            flexItem
+            sx={{ height: "20px" }}
+          />
         </>
       ))}
+
+      {/* Render cogWheelMenu if provided */}
       {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+
+      {/* Render UserBox */}
       <UserBox
         fullName={fullName}
         designation={designation}

package/src/components/Layout/LayoutWrapper/LayoutWrapper.stories.tsx

@@ -1,6 +1,6 @@
 import { Button, Stack } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import DialogButton from "../../Modals/DialogButton";
+import DialogButton from "../../Navigation/DialogButton/DialogButton";
 import { Icons } from "../../export";
 import { PageContent } from "../PageContent/PageContent";
 import { SideNavigation } from "../SideNavigation/SideNavigation";

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

@@ -50,17 +50,10 @@ export const Primary: Story = {
       <DropdownMenuItem
         icon={<Icons.HelpIcon />}
         label={"Register"}
-        onClick={() => {
-          console.log("hi");
-        }}
+        onClick={() => {}}
       />,
 
-      <DropdownMenuItem
-        label={"Active Devices"}
-        onClick={() => {
-          console.log("hi");
-        }}
-      />,
+      <DropdownMenuItem label={"Active Devices"} onClick={() => {}} />,
     ],
     menuListProps: {
       sx: { width: "20px" },
@@ -94,9 +87,7 @@ export const WithButtonLoading: Story = {
       <DropdownMenuItem
         icon={<Icons.HelpIcon />}
         label={"Register"}
-        onClick={() => {
-          console.log("hi");
-        }}
+        onClick={() => {}}
       />,
     ],
   },

package/src/components/export.ts

@@ -10,4 +10,6 @@ export * from "./Layout/LayoutWrapper/LayoutWrapper";
 export * from "./Layout/PageContent/PageContent";
 export * from "./Layout/SideNavigation/SideNavigation";
 export * from "./Navigation/DropDownMenu/DropDownButton";
+export * from "./Navigation/DropDownMenu/DropDownIcon";
 export * from "./Navigation/DropDownMenu/DropDownMenu";
+export * from "./Navigation/DropDownMenu/DropdownMenuItem";

package/src/themes/colorTokens.ts

@@ -21,10 +21,10 @@ export const LightColorTokens = {
     main: "#88B053",
   },
   error: {
-    main: "F2353C",
+    main: "#F2353C",
   },
   warning: {
-    main: "ED9035",
+    main: "#ED9035",
   },
   info: {
     main: "#4BAABE",
@@ -60,10 +60,10 @@ export const DarkColorTokens = {
     main: "#88B053",
   },
   error: {
-    main: "F2353C",
+    main: "#F2353C",
   },
   warning: {
-    main: "ED9035",
+    main: "#ED9035",
   },
   info: {
     main: "#4BAABE",