@campxdev/react-blueprint 0.1.15 → 0.1.17

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

@@ -4,52 +4,101 @@ import { Meta } from "@storybook/react";
 // Make sure your TextField import is correct
 
 import { SingleSelect, SingleSelectProps } from "./SingleSelect";
-
+const topFilms = [
+  { label: "The Shawshank Redemption", value: 1994 },
+  { label: "The Godfather", value: 1972 },
+  { label: "The Godfather: Part II", value: 1974 },
+  { label: "The Dark Knight", value: 2008 },
+  { label: "12 Angry Men", value: 1957 },
+  { label: "Schindler's List", value: 1993 },
+  { label: "Pulp Fiction", value: 1994 },
+  {
+    label: "The Lord of the Rings: The Return of the King",
+    value: 2003,
+  },
+  { label: "The Good, the Bad and the Ugly", value: 1966 },
+  { label: "Fight Club", value: 1999 },
+  {
+    label: "The Lord of the Rings: The Fellowship of the Ring",
+    value: 2001,
+  },
+  {
+    label: "Star Wars: Episode V - The Empire Strikes Back",
+    value: 1980,
+  },
+  { label: "Forrest Gump", value: 1994 },
+  { label: "Inception", value: 2010 },
+  {
+    label: "The Lord of the Rings: The Two Towers",
+    value: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", value: 1975 },
+  { label: "Goodfellas", value: 1990 },
+  { label: "The Matrix", value: 1999 },
+  { label: "Seven Samurai", value: 1954 },
+  {
+    label: "Star Wars: Episode IV - A New Hope",
+    value: 1977,
+  },
+  { label: "City of God", value: 2002 },
+  { label: "Se7en", value: 1995 },
+  { label: "The Silence of the Lambs", value: 1991 },
+  { label: "It's a Wonderful Life", value: 1946 },
+  { label: "Life Is Beautiful", value: 1997 },
+  { label: "The Usual Suspects", value: 1995 },
+  { label: "Léon: The Professional", value: 1994 },
+  { label: "Spirited Away", value: 2001 },
+  { label: "Saving Private Ryan", value: 1998 },
+  { label: "Once Upon a Time in the West", value: 1968 },
+  { label: "American History X", value: 1998 },
+  { label: "Interstellar", value: 2014 },
+];
 // Define the default export with Meta type including the component type
 export default {
   title: "Input/SingleSelect",
   component: SingleSelect,
-  tags: ["autodocs"],
-  argTypes: {},
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label of the field",
+    },
+    required: {
+      control: "boolean",
+      description: "Required property of the field",
+    },
+    optionsApiEndPoint: {
+      control: "text",
+      description: "API end point for options",
+    },
+    useCampxAxios: {
+      control: "boolean",
+      description: "Boolean to use campx axios",
+    },
+  },
 } as Meta<typeof SingleSelect>;
 
-// Define stories directly as objects with render function
-export const Primary = {
-  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
-  args: {},
-};
-
-export const Disabled = {
+export const Default = {
   render: (args: SingleSelectProps) => <SingleSelect {...args} />,
-  args: {},
+  args: {
+    required: true,
+    label: "Single Select",
+    options: topFilms,
+  },
 };
-
-export const WithValue = {
-  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
-  args: {},
-};
-
-export const InputWithPlaceholder = {
-  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
-  args: {},
-};
-
-export const ErrorInput = {
-  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
-  args: {},
-};
-
-export const SuccessInput = {
-  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
-  args: {},
-};
-
-export const WarningInput = {
+export const Primary = {
   render: (args: SingleSelectProps) => <SingleSelect {...args} />,
-  args: {},
+  args: {
+    options: topFilms,
+    label: "Single Select",
+    required: false,
+  },
 };
 
-export const PassowrdInput = {
+export const WithAPIEndPoint = {
   render: (args: SingleSelectProps) => <SingleSelect {...args} />,
-  args: {},
+  args: {
+    optionsApiEndPoint: "dropdowns/classrooms",
+    label: "Select Classroom",
+    required: false,
+  },
 };

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

@@ -1,6 +1,5 @@
 import {
   Box,
-  CircularProgress,
   Autocomplete as MuiAutocomplete,
   Paper,
   TextField,
@@ -9,6 +8,7 @@ import axios from "axios";
 import { useReducer } from "react";
 import { campxAxios } from "../../../utils/campxAxios";
 import { Typography } from "../../Typography/Typography";
+import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
 import { FetchingOptionsLoader } from "../components/FetchingOptionsLoader";
 import { OptionContainer } from "../styles";
 
@@ -20,60 +20,12 @@ function sleep(duration: number): Promise<void> {
   });
 }
 
-const topFilms = [
-  { label: "The Shawshank Redemption", value: 1994 },
-  { label: "The Godfather", value: 1972 },
-  { label: "The Godfather: Part II", value: 1974 },
-  { label: "The Dark Knight", value: 2008 },
-  { label: "12 Angry Men", value: 1957 },
-  { label: "Schindler's List", value: 1993 },
-  { label: "Pulp Fiction", value: 1994 },
-  {
-    label: "The Lord of the Rings: The Return of the King",
-    value: 2003,
-  },
-  { label: "The Good, the Bad and the Ugly", value: 1966 },
-  { label: "Fight Club", value: 1999 },
-  {
-    label: "The Lord of the Rings: The Fellowship of the Ring",
-    value: 2001,
-  },
-  {
-    label: "Star Wars: Episode V - The Empire Strikes Back",
-    value: 1980,
-  },
-  { label: "Forrest Gump", value: 1994 },
-  { label: "Inception", value: 2010 },
-  {
-    label: "The Lord of the Rings: The Two Towers",
-    value: 2002,
-  },
-  { label: "One Flew Over the Cuckoo's Nest", value: 1975 },
-  { label: "Goodfellas", value: 1990 },
-  { label: "The Matrix", value: 1999 },
-  { label: "Seven Samurai", value: 1954 },
-  {
-    label: "Star Wars: Episode IV - A New Hope",
-    value: 1977,
-  },
-  { label: "City of God", value: 2002 },
-  { label: "Se7en", value: 1995 },
-  { label: "The Silence of the Lambs", value: 1991 },
-  { label: "It's a Wonderful Life", value: 1946 },
-  { label: "Life Is Beautiful", value: 1997 },
-  { label: "The Usual Suspects", value: 1995 },
-  { label: "Léon: The Professional", value: 1994 },
-  { label: "Spirited Away", value: 2001 },
-  { label: "Saving Private Ryan", value: 1998 },
-  { label: "Once Upon a Time in the West", value: 1968 },
-  { label: "American History X", value: 1998 },
-  { label: "Interstellar", value: 2014 },
-];
-
 export interface SingleSelectProps {
   options?: { label: string; subLabel?: string; value: any }[];
   optionsApiEndPoint?: string;
   useCampxAxios: boolean;
+  required?: boolean;
+  label?: string;
 }
 
 enum SingleSelectActionsTypes {
@@ -107,6 +59,13 @@ const singleSelectReducer = (
     case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
       return { ...state, ...stateChanges };
     }
+    case SingleSelectActionsTypes.SET_INTERNAL_OPTIONS: {
+      return {
+        ...state,
+        internalOptions: stateChanges.internalOptions,
+        loadingInternalOptions: false,
+      };
+    }
     default:
       return { ...state, ...stateChanges };
   }
@@ -116,11 +75,13 @@ export const SingleSelect = ({
   options,
   optionsApiEndPoint,
   useCampxAxios = true,
+  required = false,
+  label,
 }: SingleSelectProps) => {
   const [state, dispatch] = useReducer(singleSelectReducer, {
     open: false,
     loadingInternalOptions: false,
-    internalOptions: options ?? topFilms,
+    internalOptions: options ?? [],
   });
   const { open, loadingInternalOptions, internalOptions } = state;
 
@@ -138,7 +99,7 @@ export const SingleSelect = ({
         const options = await internalAxios
           .get(optionsApiEndPoint, {
             params: {
-              limit: 10,
+              limit: 100,
               offset: 0,
             },
           })
@@ -147,7 +108,6 @@ export const SingleSelect = ({
           actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
           stateChanges: {
             internalOptions: options,
-            loadingInternalOptions: false,
           },
         });
       } catch (e) {
@@ -168,21 +128,9 @@ export const SingleSelect = ({
     <MuiAutocomplete
       open={open}
       renderInput={(params) => (
-        <TextField
-          {...params}
-          label="Asynchronous"
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {loadingInternalOptions ? (
-                  <CircularProgress color="inherit" size={20} />
-                ) : null}
-                {params.InputProps.endAdornment}
-              </>
-            ),
-          }}
-        />
+        <LabelWrapper label={label} required={required}>
+          <TextField {...params} />
+        </LabelWrapper>
       )}
       PaperComponent={(props) => (
         <Paper {...props}>

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

@@ -1,10 +1,9 @@
 import {
   TextField as MuiTextField,
   TextFieldProps as MuiTextFieldProps,
-  Stack,
   StackProps,
 } from "@mui/material";
-import Label from "../Label/Label";
+import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
 
 export type TextFieldProps = {
   containerProps?: StackProps;
@@ -20,9 +19,14 @@ export const TextField = ({
   ...rest
 }: TextFieldProps) => {
   return (
-    <Stack margin="15px 20px" {...containerProps}>
-      <Label label={label} required={required} name={name} />
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
       <MuiTextField
+        required={required}
         id={name}
         value={value}
         label={label}
@@ -30,6 +34,6 @@ export const TextField = ({
         onChange={onChange}
         {...rest}
       />
-    </Stack>
+    </LabelWrapper>
   );
 };

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

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

package/src/components/Input/styles.tsx

@@ -1,6 +1,14 @@
-import { Box, styled } from "@mui/material";
+import { Box, Stack, styled } from "@mui/material";
 
 export const OptionContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
+  borderBottom: `1px solid ${theme.palette.secondary.main}`,
+  width: "100%",
+  padding: "5px 0px",
+}));
+
+export const FetchingOptionsLoaderContainer = styled(Stack)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  maxHeight: "32px",
 }));

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

@@ -1,7 +1,7 @@
 import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { CareerIcon, ExamResultIcon } from "../../../assets/images/icons";
-import { MenuItemButton } from "../../DropDownMenu/MenuItemButton";
+import { DropdownMenuItem } from "../../DropDownMenu/DropdownMenuItem";
+import { Icons } from "../../export";
 import { AppHeader, AppHeaderProps } from "./AppHeader";
 import { AppsMenu } from "./AppsMenu";
 
@@ -124,10 +124,10 @@ export const WithActions: Story = {
     ),
     actions: [
       <IconButton>
-        <CareerIcon />
+        <Icons.CareerIcon />
       </IconButton>,
       <IconButton>
-        <ExamResultIcon />
+        <Icons.ExamResultIcon />
       </IconButton>,
     ],
     userBoxActions: [
@@ -192,7 +192,7 @@ export const WithClogWheel: Story = {
       { label: "Action 2", onClick: () => alert("Action 2 clicked") },
     ],
     cogWheelMenu: [
-      <MenuItemButton
+      <DropdownMenuItem
         label={"Student Payments"}
         onClick={() => {
           window.open("/payment", "_blank");

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

@@ -1,9 +1,9 @@
 import AppsOutageIcon from "@mui/icons-material/AppsOutage";
 import { Box, IconButton, Link, Menu, Typography, styled } from "@mui/material";
 import { useState } from "react";
-import { AppsIcon } from "../../../assets/images/icons";
 import { applications } from "../../../utils/applications";
 import { institutionKey, urlTenantKey } from "../../../utils/constants";
+import { Icons } from "../../export";
 
 export const AppsMenu = ({ apps }: { apps: string[] }) => {
   const [anchorEl, setAnchorEl] = useState<any>(null);
@@ -23,7 +23,7 @@ export const AppsMenu = ({ apps }: { apps: string[] }) => {
   return (
     <>
       <StyledIconButton onClick={handleClick}>
-        <AppsIcon />
+        <Icons.AppsIcon />
       </StyledIconButton>
       <Menu
         transitionDuration={150}

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

@@ -1,7 +1,7 @@
 import { Divider, IconButton } from "@mui/material";
 import { ReactNode } from "react";
-import { ClogWheelIcon } from "../../../../assets/images/icons";
-import { DropDownMenu } from "../../../DropDownMenu/DropDownMenu";
+import { DropdownMenu } from "../../../DropDownMenu/DropDownMenu";
+import { Icons } from "../../../export";
 // import { clogWheel } from "../../../../assets/images";
 // import DropDownButton from "../../../DropDownButton/DropDownButton";
 
@@ -17,10 +17,10 @@ const CogWheelMenu = ({ menu }: { menu: ReactNode[] }) => {
         />
       </div>
 
-      <DropDownMenu
+      <DropdownMenu
         anchor={({ open }) => (
           <IconButton color="secondary" onClick={open}>
-            <ClogWheelIcon />
+            <Icons.ClogWheelIcon />
           </IconButton>
         )}
         menu={menu}

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

@@ -2,7 +2,7 @@ import { Divider, IconButton, Stack } from "@mui/material";
 import { ReactNode } from "react";
 // import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
 // import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
-import { HelpIcon } from "../../../../assets/images/icons";
+import { Icons } from "../../../export";
 import CogWheelMenu from "./CogWheelMenu";
 import UserBox from "./UserBox";
 
@@ -35,7 +35,7 @@ const HeaderActions = ({
         href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
         target="_blank"
       >
-        <HelpIcon />
+        <Icons.HelpIcon />
       </IconButton>
 
       {actions.map((action, index) => (

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

@@ -1,7 +1,8 @@
-import { Stack, Typography } from "@mui/material";
+import { Stack, Typography, useTheme } from "@mui/material";
 import { ReactNode } from "react";
-import { DropDownMenu } from "../../../DropDownMenu/DropDownMenu";
-import { MenuItemButton } from "../../../DropDownMenu/MenuItemButton";
+import { DropdownMenu } from "../../../DropDownMenu/DropDownMenu";
+import { DropdownMenuItem } from "../../../DropDownMenu/DropdownMenuItem";
+import { Icons } from "../../../export";
 import { StyledAvatar, StyledTypography } from "../styles/styles";
 // import {
 //   activeDevices,
@@ -44,15 +45,23 @@ export default function UserBox({
   profileUrl?: string;
   profileSx?: any;
 }) {
+  const theme = useTheme();
+
   return (
-    <DropDownMenu
+    <DropdownMenu
       anchor={({ open }) => (
         <StyledAvatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
           {getStartingLetters(fullName)}
         </StyledAvatar>
       )}
+      menuListProps={{
+        sx: {
+          width: "300px",
+          borderRadius: "5px",
+        },
+      }}
       menu={[
-        <MenuItemButton
+        <DropdownMenuItem
           label={
             <Stack gap={0.5}>
               <StyledTypography variant="subtitle3">Account</StyledTypography>
@@ -67,24 +76,30 @@ export default function UserBox({
               </Stack>
             </Stack>
           }
-          onClick={function (): void {
-            throw new Error("Function not implemented.");
-          }}
+          onClick={() => alert("Action 1 clicked")}
         />,
-        <MenuItemButton
+        <DropdownMenuItem
           label={
             <Stack gap={0.5}>
-              <Typography variant="subtitle3">Account</Typography>
-              <Stack>
-                <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
-                  {getStartingLetters(fullName)}
-                </StyledAvatar>
-              </Stack>
+              <Typography variant="subtitle3">Active Devices</Typography>
+            </Stack>
+          }
+          onClick={() => alert("Action 1 clicked")}
+        />,
+        <DropdownMenuItem
+          label={
+            <Stack
+              gap={0.5}
+              direction={"row"}
+              justifyContent={"space-between"}
+              width={"100%"}
+            >
+              <Typography variant="subtitle3">Logout</Typography>
+
+              <Icons.LogoutIcon hoverColor={theme.palette.highlight.main} />
             </Stack>
           }
-          onClick={function (): void {
-            throw new Error("Function not implemented.");
-          }}
+          onClick={() => alert("Action 1 clicked")}
         />,
       ]}
     />

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

@@ -1,7 +1,7 @@
 import { Button, Stack } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { DashBoardIcon } from "../../../assets/images/icons";
 import DialogButton from "../../Modals/DialogButton";
+import { Icons } from "../../export";
 import { PageContent } from "../PageContent/PageContent";
 import { SideNavigation } from "../SideNavigation/SideNavigation";
 import { LayoutWrapper, LayoutWrapperProps } from "./LayoutWrapper";
@@ -19,12 +19,37 @@ const meta: Meta<typeof LayoutWrapperStory> = {
   title: "Layout/LayoutWrapper",
   component: LayoutWrapperStory,
   tags: ["autodocs"],
-  // argTypes: {
-  //   menu: {
-  //     control: "object",
-  //     description: "Menu items to be displayed in the side navigation.",
-  //   },
-  // },
+  argTypes: {
+    title: {
+      control: "text",
+      description: "The title of the component",
+      type: { name: "string", required: false },
+    },
+    actionButtons: {
+      control: "object",
+      description: "Array of React nodes for action buttons",
+      // type: { name: "ReactNode[]", required: false },
+    },
+    children: {
+      control: "object",
+      description: "The content of the component",
+    },
+    sideBar: {
+      control: false,
+      description:
+        "A function that returns a ReactNode, with props for open and handleClick",
+      type: {
+        name: "function",
+        required: true,
+      },
+    },
+
+    // menu: {
+    //   control: "object",
+    //   description:
+    //     "Menu configuration object, which may include items or other menu-related settings.",
+    // },
+  },
 };
 
 export default meta;
@@ -39,7 +64,7 @@ export const Primary: Story = {
         open={open}
         handleDrawer={handleClick}
         menu={[
-          { name: "Tickets", path: "/home", icon: DashBoardIcon },
+          { name: "Tickets", path: "/home", icon: Icons.DashBoardIcon },
           { name: "Item 2", path: "/item2" },
         ]}
       />

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

@@ -2,8 +2,8 @@ import { Box, IconButton, Stack, Typography } from "@mui/material";
 
 import MenuIcon from "@mui/icons-material/Menu";
 import { ReactNode, useState } from "react";
-import { LeftIcon, RightIcon } from "../../../assets/images/icons";
 import { activeStore } from "../../../store/activeStore";
+import { Icons } from "../../export";
 import { Main, StyledLayoutContainer, StyledMainContainer } from "./styles";
 
 export interface LayoutWrapperProps {
@@ -50,9 +50,9 @@ export const LayoutWrapper = ({
                 onMouseLeave={() => setIsHovered(false)}
               >
                 {open && isHovered ? (
-                  <LeftIcon />
+                  <Icons.LeftIcon />
                 ) : !open && isHovered ? (
-                  <RightIcon />
+                  <Icons.RightIcon />
                 ) : (
                   <MenuIcon />
                 )}

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

@@ -40,7 +40,7 @@ export const Main = styled("main", {
 export const StyledLayoutContainer = styled(Box)(({ theme }) => ({
   width: "100%",
   position: "fixed",
-  top: "70px",
+  top: "80px",
   backgroundColor: theme.palette.background.default,
 }));
 

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "../../export";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof PageContent> = {
+  title: "Layout/PageContent",
+  component: PageContent,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: "object",
+      description: "The content of the component",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageContent>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: any) => <PageContent {...args} />,
+  args: {
+    children: <>Tickets</>,
+  },
+};

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

@@ -21,6 +21,12 @@ export const StyledContainer = styled(Box)(({ theme }) => ({
   marginTop: "10px",
 }));
 
-export const PageContent = ({ children }: { children: React.ReactNode }) => {
-  return <StyledContainer> {children}</StyledContainer>;
+export const PageContent = ({
+  children,
+  sx,
+}: {
+  children: React.ReactNode;
+  sx?: any;
+}) => {
+  return <StyledContainer sx={sx}> {children}</StyledContainer>;
 };