@campxdev/react-blueprint 0.1.21 → 0.1.23

package/src/components/Icons/IconComponents/UncheckedRadioIcon.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from "@mui/material";
+
+export const UnCheckedRadioIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="Rectangle_23803"
+        data-name="Rectangle 23803"
+        fill="#f8f8f8"
+        stroke="rgba(18,18,18,0.1)"
+        stroke-width="1"
+      >
+        <rect width="20" height="20" rx="10" stroke="none" />
+        <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="none" />
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/export.ts

@@ -1,30 +1,55 @@
+import { ActiveDevicesIcon } from "./IconComponents/ActiveDevicesIcon";
 import { AppsIcon } from "./IconComponents/AppsIcon";
 import { CareerIcon } from "./IconComponents/CareerIcon";
+import { CheckedCheckboxIcon } from "./IconComponents/CheckedCheckBoxIcon";
+import { CheckedRadioIcon } from "./IconComponents/CheckedRadioIcon";
 import { ClogWheelIcon } from "./IconComponents/ClogWheelIcon";
 import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
+import { DeviceIcon } from "./IconComponents/DeviceIcon";
 import { ExamResultIcon } from "./IconComponents/ExamResultIcon";
 import { ExportIcon } from "./IconComponents/ExportIcon";
 import { FilterIcon } from "./IconComponents/FilterIcon";
 import { HelpIcon } from "./IconComponents/HelpIcon";
 import { HomeIcon } from "./IconComponents/HomeIcon";
+import { InfoIcon } from "./IconComponents/InfoIcon";
+
+import { InstitutionsIcon } from "./IconComponents/InstitutionsIcon";
 import { LeftIcon } from "./IconComponents/LeftIcon";
+import { LocationIcon } from "./IconComponents/LocationIcon";
 import { LogoutIcon } from "./IconComponents/LogoutIcon";
+import { NavigationIcon } from "./IconComponents/NavigationIcon";
 import { NotificationIcon } from "./IconComponents/NotificationIcon";
+import { ProfileIcon } from "./IconComponents/ProfileIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
+import { TooltipIcon } from "./IconComponents/TooltipIcon";
+import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
+import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
 export const Icons = {
-  AppsIcon: AppsIcon,
-  CareerIcon: CareerIcon,
-  ClogWheelIcon: ClogWheelIcon,
-  DashBoardIcon: DashBoardIcon,
-  HelpIcon: HelpIcon,
-  HomeIcon: HomeIcon,
-  LeftIcon: LeftIcon,
-  ExamResultIcon: ExamResultIcon,
-  NotificationIcon: NotificationIcon,
-  RightIcon: RightIcon,
-  LogoutIcon: LogoutIcon,
-  TicketsIcon: TicketsIcon,
-  FilterIcon: FilterIcon,
-  ExportIcon: ExportIcon,
+  AppsIcon,
+  CareerIcon,
+  ClogWheelIcon,
+  DashBoardIcon,
+  HelpIcon,
+  HomeIcon,
+  LeftIcon,
+  ExamResultIcon,
+  NotificationIcon,
+  RightIcon,
+  LogoutIcon,
+  TicketsIcon,
+  FilterIcon,
+  ExportIcon,
+  ProfileIcon,
+  InstitutionsIcon,
+  ActiveDevicesIcon,
+  NavigationIcon,
+  UnCheckedCheckboxIcon,
+  CheckedCheckboxIcon,
+  UnCheckedRadioIcon,
+  CheckedRadioIcon,
+  TooltipIcon,
+  InfoIcon,
+  LocationIcon,
+  DeviceIcon,
 };

package/src/components/Input/Button/Button.tsx

@@ -4,7 +4,7 @@ import {
 } from "@mui/material";
 import "./ButtonLoader.css";
 
-export type ButtonProps = { loading: boolean } & MuiButtonProps;
+export type ButtonProps = { loading?: boolean } & MuiButtonProps;
 
 export const Button = ({ loading = false, ...props }: ButtonProps) => {
   return (

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

@@ -0,0 +1,46 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { useState } from "react";
+import { MultiCheckBox, MultiCheckboxProps } from "./MultiCheckBox";
+
+export default {
+  title: "Input/MultiCheckBox",
+  component: MultiCheckBox,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof MultiCheckBox>;
+
+const MultiCheckBoxStory: StoryFn<MultiCheckboxProps> = (args) => {
+  const [defaultValues, setDefaultValues] = useState(args.values || []);
+  return (
+    <MultiCheckBox
+      {...args}
+      values={defaultValues}
+      onChange={(values: any) => {
+        setDefaultValues(values);
+      }}
+    />
+  );
+};
+
+export const Default = MultiCheckBoxStory.bind({});
+Default.args = {
+  label: "First Name",
+  name: "firstName",
+  options: [
+    {
+      label: "Option 1",
+      value: "value1",
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+    },
+  ],
+  required: true,
+  direction: "row",
+  values: ["value2"],
+};

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

@@ -0,0 +1,59 @@
+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"
+  >;
+  values: any[];
+  onChange: (values: any[]) => void;
+  required: boolean;
+  name: string;
+};
+
+export const MultiCheckBox = ({
+  name,
+  options,
+  required = false,
+  containerProps,
+  label,
+  direction,
+  values = [],
+  onChange = () => {},
+  ...rest
+}: MultiCheckboxProps) => {
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
+      <Stack direction={direction}>
+        {options?.length != 0 &&
+          options?.map((item, index) => (
+            <SingleCheckBox
+              key={index}
+              name={name}
+              checked={values?.includes(item.value)}
+              label={item.label}
+              onChange={(event) => {
+                if (event.target.checked) {
+                  onChange([...values, item.value]);
+                } else {
+                  onChange(values.filter((val) => val !== item.value));
+                }
+              }}
+              {...rest}
+            />
+          ))}
+      </Stack>
+    </LabelWrapper>
+  );
+};

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

@@ -0,0 +1,43 @@
+// Import React and other necessary elements
+
+import { Meta } from "@storybook/react";
+import { RadioGroup, RadioGroupProps } from "./RadioGroup";
+
+// Define the default export with Meta type including the component type
+export default {
+  title: "Input/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof RadioGroup>;
+
+// Define stories directly as objects with render function
+export const Default = {
+  render: (args: RadioGroupProps) => <RadioGroup {...args} />,
+  args: {
+    label: "Radio",
+    options: [
+      {
+        label: "Option 1",
+        value: "1",
+      },
+      {
+        label: "Option 2",
+        value: "2",
+      },
+      {
+        label: "Option 3",
+        value: "3",
+      },
+      {
+        label: "Option 4",
+        value: "4",
+      },
+    ],
+    onChange: (event: any, value: any) => {
+      console.log(event.target.checked, value);
+    },
+    row: true,
+    defaultValue: "3",
+  },
+};

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

@@ -0,0 +1,56 @@
+import {
+  FormControlLabel,
+  RadioGroup as MuiRadioGroup,
+  RadioGroupProps as MuiRadioGroupProps,
+  Radio,
+  StackProps,
+} from "@mui/material";
+import { ReactNode } from "react";
+import { Icons } from "../../export";
+import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
+
+export type RadioGroupProps = {
+  containerProps?: StackProps;
+  options: Array<{ label: ReactNode; value: any; disabled?: boolean }>;
+  label: string;
+  required: boolean;
+  name: string;
+  disabled: boolean;
+} & MuiRadioGroupProps;
+
+export const RadioGroup = ({
+  label,
+  required,
+  options,
+  name,
+  containerProps,
+  disabled,
+  onChange,
+  ...rest
+}: RadioGroupProps) => {
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
+      <MuiRadioGroup onChange={onChange} name={name} {...rest}>
+        {options?.map((item, index) => (
+          <FormControlLabel
+            key={index}
+            value={item.value}
+            control={
+              <Radio
+                checkedIcon={<Icons.CheckedRadioIcon />}
+                icon={<Icons.UnCheckedRadioIcon />}
+                disabled={disabled || item.disabled}
+              />
+            }
+            label={item.label}
+          />
+        ))}
+      </MuiRadioGroup>
+    </LabelWrapper>
+  );
+};

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

@@ -0,0 +1,33 @@
+import {
+  FormControlLabel,
+  Checkbox as MuiCheckbox,
+  CheckboxProps as MuiCheckboxProps,
+} from "@mui/material";
+import { ReactNode } from "react";
+import { Icons } from "../../export";
+
+export type CheckboxProps = {
+  label: ReactNode;
+} & MuiCheckboxProps;
+
+export const SingleCheckBox = ({
+  checked,
+  label,
+  onChange,
+  ...rest
+}: CheckboxProps) => {
+  return (
+    <FormControlLabel
+      control={
+        <MuiCheckbox
+          checked={checked}
+          checkedIcon={<Icons.CheckedCheckboxIcon />}
+          icon={<Icons.UnCheckedCheckboxIcon />}
+          onChange={onChange}
+          {...rest}
+        />
+      }
+      label={label}
+    />
+  );
+};

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

@@ -0,0 +1,33 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { useState } from "react";
+
+import { CheckboxProps, SingleCheckBox } from "./SIngleCheckBox";
+
+export default {
+  title: "Input/SingleCheckBox",
+  component: SingleCheckBox,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof SingleCheckBox>;
+
+const SingleCheckBoxStory: StoryFn<CheckboxProps> = (args) => {
+  const [value, setValue] = useState(args.value);
+  return (
+    <SingleCheckBox
+      {...args}
+      value={value}
+      onChange={(event: any) => {
+        console.log(value, "ll");
+        setValue(event.target.value);
+      }}
+    />
+  );
+};
+
+export const Default = SingleCheckBoxStory.bind({});
+Default.args = {
+  label: "First Name",
+  required: true,
+  value: "ok",
+  onChange: (event: any) => {},
+};

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

@@ -6,9 +6,9 @@ import {
   TextField,
 } from "@mui/material";
 import axios from "axios";
-import { useReducer, useRef } from "react";
+import { useReducer } from "react";
 import { campxAxios } from "../../../utils/campxAxios";
-import { Typography } from "../../Typography/Typography";
+import { Typography } from "../../DataDisplay/Typography/Typography";
 import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
 import { FetchingOptionsLoader } from "../components/FetchingOptionsLoader";
 import { OptionContainer } from "../styles";
@@ -29,6 +29,13 @@ export interface SingleSelectProps {
   label?: string;
 }
 
+const CustomPaper = (props: PaperProps) => (
+  <Paper {...props}>
+    {props.children}
+    <FetchingOptionsLoader loading={!!props.square} />
+  </Paper>
+);
+
 enum SingleSelectActionsTypes {
   OPEN = "open",
   CLOSE = "close",
@@ -37,6 +44,7 @@ enum SingleSelectActionsTypes {
   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,
@@ -73,6 +81,14 @@ const singleSelectReducer = (
         ...state,
         internalOptions: [...state.internalOptions, ...stateChanges.newOptions],
         loadingInternalOptions: false,
+        limit: state.limit,
+        offset: state.offset + 10,
+      };
+    }
+    case SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG: {
+      return {
+        ...state,
+        hasMore: !state.hasMore,
       };
     }
     default:
@@ -80,13 +96,6 @@ const singleSelectReducer = (
   }
 };
 
-const PaperComponent = (props: PaperProps, loadingInternalOptions: boolean) => (
-  <Paper {...props}>
-    {props.children}
-    <FetchingOptionsLoader loading={loadingInternalOptions} />
-  </Paper>
-);
-
 export const SingleSelect = ({
   options,
   optionsApiEndPoint,
@@ -98,9 +107,18 @@ export const SingleSelect = ({
     open: false,
     loadingInternalOptions: false,
     internalOptions: options ?? [],
+    limit: 10,
+    offset: 0,
+    hasMore: true,
   });
-  const { open, loadingInternalOptions, internalOptions } = state;
-  const listboxRef = useRef(null);
+  const {
+    open,
+    loadingInternalOptions,
+    internalOptions,
+    limit,
+    offset,
+    hasMore,
+  } = state;
 
   const internalAxios = useCampxAxios ? campxAxios : axios;
 
@@ -108,7 +126,7 @@ export const SingleSelect = ({
     dispatch({
       actionType: SingleSelectActionsTypes.OPEN,
     });
-    if (optionsApiEndPoint) {
+    if (optionsApiEndPoint && !internalOptions.length) {
       try {
         dispatch({
           actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
@@ -116,11 +134,12 @@ export const SingleSelect = ({
         const options = await internalAxios
           .get(optionsApiEndPoint, {
             params: {
-              limit: 100,
-              offset: 0,
+              limit,
+              offset,
             },
           })
           .then((res) => res.data);
+        await sleep(700);
         dispatch({
           actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
           stateChanges: {
@@ -143,20 +162,32 @@ export const SingleSelect = ({
 
   const handleScroll = async (event: any) => {
     const listboxNode = event.currentTarget;
-
-    console.log(
-      listboxNode.scrollTop + listboxNode.clientHeight,
-      listboxNode.scrollHeight
-    );
     if (
       listboxNode.scrollTop + listboxNode.clientHeight >=
-      listboxNode.scrollHeight - 100
+        listboxNode.scrollHeight - 1 &&
+      hasMore
     ) {
-      console.log("dispatched");
+      dispatch({
+        actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
+      });
+      const newOptions = await internalAxios
+        .get(optionsApiEndPoint ?? "", {
+          params: {
+            limit: limit,
+            offset: offset + 10,
+          },
+        })
+        .then((res) => res.data);
+      if (newOptions.length < 10) {
+        dispatch({
+          actionType: SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG,
+        });
+      }
+      await sleep(700);
       dispatch({
         actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
         stateChanges: {
-          newOptions: internalOptions,
+          newOptions: newOptions,
         },
       });
     }
@@ -171,7 +202,7 @@ export const SingleSelect = ({
           <TextField {...params} />
         </LabelWrapper>
       )}
-      PaperComponent={(props) => PaperComponent(props, loadingInternalOptions)}
+      PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {
         return (
           <Box component="li" {...props}>
@@ -184,7 +215,11 @@ export const SingleSelect = ({
       }}
       ListboxProps={{
         onScroll: handleScroll,
-        ref: listboxRef,
+      }}
+      slotProps={{
+        paper: {
+          square: loadingInternalOptions,
+        },
       }}
       onOpen={handleOpen}
       onClose={() => {

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

@@ -1,22 +1,14 @@
-import { motion } from "framer-motion";
-import { Spinner } from "../../Layout/Spinner/Spinner";
-import { Typography } from "../../Typography/Typography";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Spinner } from "../../FeedBack/Spinner/Spinner";
 import { FetchingOptionsLoaderContainer } from "../styles";
 
 export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
   return (
-    <motion.div
-      initial={{ display: loading ? "visible" : "none" }}
-      animate={{
-        display: loading ? "visible" : "none",
-        opacity: loading ? 1 : 0,
-      }}
-      transition={{ delay: loading ? 1 : 0 }}
-    >
+    loading && (
       <FetchingOptionsLoaderContainer direction="row" alignItems="center">
         <Spinner />
         <Typography variant="caption">Fetching Options</Typography>
       </FetchingOptionsLoaderContainer>
-    </motion.div>
+    )
   );
-};
+};

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

@@ -1,6 +1,6 @@
 import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { DropdownMenuItem } from "../../DropDownMenu/DropdownMenuItem";
+import { DropdownMenuItem } from "../../Navigation/DropDownMenu/DropdownMenuItem";
 import { Icons } from "../../export";
 import { AppHeader, AppHeaderProps } from "./AppHeader";
 import { AppsMenu } from "./AppsMenu";

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

@@ -17,7 +17,7 @@ export interface AppHeaderProps {
   fullName: string;
   designation?: string;
   profileUrl?: string;
-  userBoxActions: {
+  userBoxActions?: {
     label: ReactNode;
     icon?: ReactNode;
     onClick: any;

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

@@ -1,6 +1,6 @@
 import { Divider, IconButton } from "@mui/material";
 import { ReactNode } from "react";
-import { DropdownMenu } from "../../../DropDownMenu/DropDownMenu";
+import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
 import { Icons } from "../../../export";
 // import { clogWheel } from "../../../../assets/images";
 // import DropDownButton from "../../../DropDownButton/DropDownButton";

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

@@ -1,7 +1,7 @@
 import { Stack, Typography, useTheme } from "@mui/material";
 import { ReactNode } from "react";
-import { DropdownMenu } from "../../../DropDownMenu/DropDownMenu";
-import { DropdownMenuItem } from "../../../DropDownMenu/DropdownMenuItem";
+import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
+import { DropdownMenuItem } from "../../../Navigation/DropDownMenu/DropdownMenuItem";
 import { Icons } from "../../../export";
 import { StyledAvatar, StyledTypography } from "../styles/styles";
 // import {
@@ -63,16 +63,25 @@ export default function UserBox({
       menu={[
         <DropdownMenuItem
           label={
-            <Stack gap={0.5}>
+            <Stack gap={0.5} sx={{ width: "100%" }}>
               <StyledTypography variant="subtitle3">Account</StyledTypography>
-              <Stack direction={"row"} gap={1}>
-                <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
-                  {getStartingLetters(fullName)}
-                </StyledAvatar>
-                <Stack>
-                  <Typography variant="subtitle3">{fullName}</Typography>
-                  <Typography variant="caption">{designation}</Typography>
+              <Stack
+                direction={"row"}
+                alignItems={"center"}
+                justifyContent={"space-between"}
+              >
+                <Stack direction={"row"} gap={1}>
+                  <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
+                    {getStartingLetters(fullName)}
+                  </StyledAvatar>
+                  <Stack direction={"row"} justifyContent={"space-between"}>
+                    <Stack>
+                      <Typography variant="subtitle3">{fullName}</Typography>
+                      <Typography variant="caption">{designation}</Typography>
+                    </Stack>
+                  </Stack>
                 </Stack>
+                <Icons.NavigationIcon />
               </Stack>
             </Stack>
           }

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

@@ -33,7 +33,7 @@ export const Main = styled("main", {
     borderRadius: "3px",
   },
   "@media (max-width: 1024px)": {
-    marginLeft: 0,
+    marginLeft: "-50px",
   },
 }));
 

package/src/components/Layout/SideNavigation/SideNavigation.tsx

@@ -2,7 +2,7 @@ import { ListItemIcon, Stack } from "@mui/material";
 import { ReactNode } from "react";
 import { useMatch, useResolvedPath } from "react-router-dom";
 import { activeStore } from "../../../store/activeStore";
-import { Typography } from "../../Typography/Typography";
+import { Typography } from "../../DataDisplay/Typography/Typography";
 import { Icons } from "../../export";
 import {
   StyledBox,

package/src/components/{DropDownMenu → Navigation/DropDownMenu}/DropDownButton.tsx

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