@campxdev/react-blueprint 0.1.5 → 0.1.7

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.5",
-  "main":"./export.ts",
+  "version": "0.1.7",
+  "main": "./export.ts",
   "private": false,
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/material": "^5.14.11",
+    "@mui/icons-material": "^5.15.18",
+    "@mui/material": "^5.15.18",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -22,7 +22,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
-    "typescript": "^4.4.2",
+    "typescript": "^5.3.3",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
@@ -54,7 +54,6 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@types/js-cookie": "^3.0.5",
     "@chromatic-com/storybook": "^1.4.0",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
@@ -66,6 +65,7 @@
     "@storybook/react": "^8.1.1",
     "@storybook/react-webpack5": "^8.1.1",
     "@storybook/test": "^8.1.1",
+    "@types/js-cookie": "^3.0.5",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
     "storybook": "^8.1.1",

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

@@ -2,8 +2,8 @@ import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
 import { CareerIcon, ExamResultIcon } from "../../../assets/images/icons";
 import { MenuItemButton } from "../../DropDownMenu/MenuItemButton";
-import AppHeader, { AppHeaderProps } from "./AppHeader";
-import AppsMenu from "./AppsMenu";
+import { AppHeader, AppHeaderProps } from "./AppHeader";
+import { AppsMenu } from "./AppsMenu";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof AppHeader> = {

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

@@ -1,6 +1,6 @@
 import { Stack } from "@mui/material";
 import { ReactNode } from "react";
-import AppLogo from "./AppLogo";
+import { AppLogo } from "./AppLogo";
 import HeaderActions from "./HeaderActions/HeaderActions";
 import {
   StyledActionBox,
@@ -27,7 +27,7 @@ export interface AppHeaderProps {
   profileSx?: any;
 }
 
-const AppHeader = ({
+export const AppHeader = ({
   actions = [],
   appsMenu,
   clientLogo,
@@ -66,5 +66,3 @@ const AppHeader = ({
     </StyledHeader>
   );
 };
-
-export default AppHeader;

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

@@ -13,7 +13,7 @@ export interface AppLogoProps {
   imageSx?: any;
 }
 
-const AppLogo = ({ clientLogo, imageSx }: AppLogoProps) => {
+export const AppLogo = ({ clientLogo, imageSx }: AppLogoProps) => {
   const originSubdomain =
     window.location.host.split(".")?.slice(-3)[0] ?? "ums";
   const currentApp: string =
@@ -49,5 +49,3 @@ const AppLogo = ({ clientLogo, imageSx }: AppLogoProps) => {
     </StyledRouterLink>
   );
 };
-
-export default AppLogo;

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

@@ -25,7 +25,6 @@ export const AppsMenu = ({ apps }: { apps: string[] }) => {
       <StyledIconButton onClick={handleClick}>
         <AppsIcon />
       </StyledIconButton>
-
       <Menu
         transitionDuration={150}
         elevation={2}
@@ -109,9 +108,7 @@ const MenuItem = ({ item }: any) => {
   );
 };
 
-export default AppsMenu;
-
-export const StyledIconButton = styled(IconButton)(({ theme }) => ({
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
   padding: "18px",
   backgroundColor: "black",
   display: "flex",
@@ -123,12 +120,12 @@ export const StyledIconButton = styled(IconButton)(({ theme }) => ({
   border: `1px solid ${theme.palette.background.default}`,
 }));
 
-export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
+const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
   cursor: "pointer",
   padding: "5px 0px",
 }));
 
-export const StyledMenuItem = styled(Box)({
+const StyledMenuItem = styled(Box)({
   height: "68px",
   width: "380px",
   padding: "40px 20px",
@@ -141,7 +138,7 @@ export const StyledMenuItem = styled(Box)({
   gap: "20px",
 });
 
-export const StyledImageBox = styled(Box)(() => ({
+const StyledImageBox = styled(Box)(() => ({
   height: "40px",
   width: "40px",
   boxShadow: "0px 5px 5px 0px rgba(48, 62, 99,0.1) ",
@@ -151,7 +148,7 @@ export const StyledImageBox = styled(Box)(() => ({
   borderRadius: "5px",
 }));
 
-export const StyledNoAppContainer = styled(Box)({
+const StyledNoAppContainer = styled(Box)({
   width: "300px",
   height: "300px",
   display: "flex",

package/src/components/Modals/DialogButton.stories.tsx

@@ -0,0 +1,160 @@
+import { Box, Button } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react/*";
+import DialogButton, { DialogButtonProps } from "./DialogButton";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof DialogButton> = {
+  title: "Navigation/DialogButton",
+  component: DialogButton,
+  tags: ["autodocs"],
+  argTypes: {
+    anchor: {
+      description:
+        "A function that returns a React node used as the dropdown anchor. It provides a method to open the dialog.",
+      control: "object",
+    },
+    content: {
+      description:
+        "A function that returns a React node used as the dialog content. It provides a method to close the dialog.",
+      control: "object",
+    },
+    dialogProps: {
+      description:
+        "Props to pass to the MUI Dialog component. Allows customization of the dialog's appearance and behavior.",
+      control: "object",
+    },
+    title: {
+      description:
+        "The title of the dialog. This can be a string or a React node.",
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DialogButton>;
+
+export const WithMaxWidthXs: Story = {
+  render: (args: DialogButtonProps) => <DialogButton {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <Button color="primary" variant="contained" onClick={open}>
+        DialogButton
+      </Button>
+    ),
+    content: ({ close }: { close: (e: any) => void }) => (
+      <>
+        <Box
+          sx={{
+            height: "100px",
+            width: "100px",
+          }}
+        ></Box>
+      </>
+    ),
+    dialogProps: {
+      maxWidth: "xs",
+    },
+    title: "Add Title Name",
+  },
+};
+
+export const WithMaxWidthSm: Story = {
+  render: (args: DialogButtonProps) => <DialogButton {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <Button color="primary" variant="contained" onClick={open}>
+        DialogButton
+      </Button>
+    ),
+    content: ({ close }: { close: (e: any) => void }) => (
+      <>
+        <Box
+          sx={{
+            height: "500px",
+            width: "100px",
+          }}
+        ></Box>
+      </>
+    ),
+    dialogProps: {
+      maxWidth: "sm",
+    },
+    title: "Add Title Name",
+  },
+};
+
+export const WithMaxWidthMd: Story = {
+  render: (args: DialogButtonProps) => <DialogButton {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <Button color="primary" variant="contained" onClick={open}>
+        DialogButton
+      </Button>
+    ),
+    content: ({ close }: { close: (e: any) => void }) => (
+      <>
+        <Box
+          sx={{
+            height: "500px",
+            width: "100px",
+          }}
+        ></Box>
+      </>
+    ),
+    dialogProps: {
+      maxWidth: "md",
+    },
+    title: "Add Title Name",
+  },
+};
+
+export const WithMaxWidthLg: Story = {
+  render: (args: DialogButtonProps) => <DialogButton {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <Button color="primary" variant="contained" onClick={open}>
+        DialogButton
+      </Button>
+    ),
+    content: ({ close }: { close: (e: any) => void }) => (
+      <>
+        <Box
+          sx={{
+            height: "500px",
+            width: "100px",
+          }}
+        ></Box>
+      </>
+    ),
+    dialogProps: {
+      maxWidth: "lg",
+    },
+    title: "Add Title Name",
+  },
+};
+
+export const WithMaxWidthXl: Story = {
+  render: (args: DialogButtonProps) => <DialogButton {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <Button color="primary" variant="contained" onClick={open}>
+        DialogButton
+      </Button>
+    ),
+    content: ({ close }: { close: (e: any) => void }) => (
+      <>
+        <Box
+          sx={{
+            height: "500px",
+            width: "100px",
+          }}
+        ></Box>
+      </>
+    ),
+    dialogProps: {
+      maxWidth: "xl",
+    },
+    title: "Add Title Name",
+  },
+};

package/src/components/Modals/DialogButton.tsx

@@ -0,0 +1,116 @@
+import { Close } from "@mui/icons-material";
+import {
+  Box,
+  Dialog,
+  DialogProps,
+  DialogTitle,
+  Grow,
+  IconButton,
+  styled,
+} from "@mui/material";
+import { TransitionProps } from "@mui/material/transitions";
+import { ReactNode, forwardRef, useState } from "react";
+
+const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: "60px",
+  backgroundColor: theme.palette.grey[200],
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "25px 20px 15px 20px",
+}));
+
+export const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement;
+  },
+  ref: React.Ref<unknown>
+) {
+  return <Grow timeout={1000} ref={ref} {...props} />;
+});
+
+export interface DialogButtonProps {
+  anchor: (props: { open: () => void }) => ReactNode;
+  content: (props: { close: () => void }) => ReactNode;
+  title: string;
+  dialogProps?: Omit<DialogProps, "open">;
+  onDialogClose?: () => void;
+}
+
+export default function DialogButton({
+  content,
+  title,
+  dialogProps,
+  onDialogClose,
+  anchor,
+}: DialogButtonProps) {
+  const [open, setOpen] = useState(false);
+
+  const onClose = () => {
+    onDialogClose && onDialogClose();
+    setOpen(false);
+  };
+
+  const onOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <>
+      {anchor({
+        open: onOpen,
+      })}
+      <CustomDialog
+        open={open}
+        content={content}
+        dialogProps={dialogProps}
+        onClose={onClose}
+        title={title}
+      />
+    </>
+  );
+}
+
+interface CustomDialogProps {
+  content: (props: { close: () => void }) => ReactNode;
+  title?: string;
+  onClose: () => void;
+  open: boolean;
+  dialogProps?: Omit<DialogProps, "open">;
+}
+
+export const CustomDialog = ({
+  onClose,
+  dialogProps,
+  title,
+  content,
+  open,
+}: CustomDialogProps) => {
+  const props = {
+    PaperProps: {
+      ...dialogProps?.PaperProps,
+    },
+    onClose: onClose,
+    open: open,
+    transitionDuration: 140,
+    TransitionComponent: Transition,
+    sx: {
+      ...dialogProps?.sx,
+    },
+    ...dialogProps,
+  };
+
+  return (
+    <Dialog {...props}>
+      {title && (
+        <StyledDialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <IconButton onClick={onClose} sx={{ color: "black" }}>
+            <Close />
+          </IconButton>
+        </StyledDialogHeader>
+      )}
+      <Box sx={{ padding: "20px" }}>{content({ close: onClose })}</Box>
+    </Dialog>
+  );
+};

package/src/components/export.ts

@@ -4,3 +4,6 @@ export * from "./Input/Button/Button";
 export * from "./Input/SingleSelect/SingleSelect";
 export * from "./Input/Switch/Switch";
 export * from "./Input/TextField/TextField";
+export * from "./Layout/Header/AppHeader";
+export * from "./Layout/Header/AppLogo";
+export * from "./Layout/Header/AppsMenu";

package/src/themes/commonTheme.ts

@@ -18,6 +18,10 @@ export enum Theme {
 export const getCommonTheme = (mode: Theme) => {
   const ColorTokens = mode == Theme.DARK ? DarkColorTokens : LightColorTokens;
   return {
+    borders: {
+      primary: `1px solid ${ColorTokens.grey.main}`,
+      grayLight: `1px solid ${ColorTokens.grey.main}`,
+    },
     typography: {
       fontFamily: ["Heebo", "Poppins", "sans-serif"].join(","),
     },
@@ -34,6 +38,36 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+
+      MuiDialogTitle: {
+        styleOverrides: {
+          root: {
+            fontFamily: "poppins",
+            fontWeight: 400,
+            fontSize: "16px",
+            padding: 0,
+          },
+          paper: {
+            elevation: 2,
+            borderRadius: "10px",
+          },
+        },
+      },
+      MuiDialog: {
+        styleOverrides: {
+          root: {
+            fullWidth: true,
+          },
+          paper: {
+            color: ColorTokens.background.default,
+            borderRadius: "5px",
+            width: "100%",
+            maxHeight: "calc(100vh - 64px)",
+            overflow: "auto",
+            boxShadow: "none",
+          },
+        },
+      },
       MuiMenu: {
         styleOverrides: {
           list: {