@codezee/sixtify-brahma 0.1.1

package/packages/shared-components/src/Toast/Toaster.styled.tsx

@@ -0,0 +1,76 @@
+import { Box, styled, type CSSObject } from "@mui/material";
+import { ToastContainer, type ToastContainerProps } from "react-toastify";
+
+export const ToasterStyled = styled(ToastContainer)<ToastContainerProps>(({
+  theme: {
+    palette: {
+      app: { color },
+    },
+  },
+}) => {
+  const toastBody: CSSObject = {
+    "& .Toastify__toast-container": {
+      padding: "0px",
+    },
+
+    "& .Toastify__toast": {
+      padding: "0px",
+      inlineSize: "400px",
+      marginLeft: "-80px",
+      borderRadius: "8px",
+      border: `2px solid ${color.iron[700]}`,
+    },
+
+    "& .Toastify__toast-body": {
+      padding: "0px",
+    },
+  };
+
+  const toastSuccess: CSSObject = {
+    "& .Toastify__toast-theme--light.Toastify__toast--success": {
+      "& .Toastify__toast-body": {
+        borderInlineStart: `6px solid ${color.darkMint[900]}`,
+      },
+    },
+  };
+
+  const toastError: CSSObject = {
+    "& .Toastify__toast-theme--light.Toastify__toast--error": {
+      "& .Toastify__toast-body": {
+        borderInlineStart: `6px solid ${color.red[900]}`,
+      },
+    },
+  };
+
+  const toastWarning: CSSObject = {
+    "& .Toastify__toast-theme--light.Toastify__toast--warning": {
+      "& .Toastify__toast-body": {
+        borderInlineStart: `6px solid ${color.darkOrange[900]}`,
+      },
+    },
+  };
+
+  const toastInfo: CSSObject = {
+    "& .Toastify__toast-theme--light.Toastify__toast--info": {
+      "& .Toastify__toast-body": {
+        borderInlineStart: `6px solid ${color.slate[900]}`,
+      },
+    },
+  };
+
+  return {
+    ...toastBody,
+    ...toastSuccess,
+    ...toastError,
+    ...toastWarning,
+    ...toastInfo,
+  };
+});
+
+export const HoverBox = styled(Box)(({ theme }) => ({
+  color: theme.palette.app.color.slate[900],
+
+  "&:hover": {
+    color: theme.palette.app.color.butterflyBlue[900],
+  },
+}));

package/packages/shared-components/src/Toast/Toaster.tsx

@@ -0,0 +1,21 @@
+import { Slide } from "react-toastify";
+
+import { ToasterStyled } from "./Toaster.styled";
+
+export const Toaster = () => {
+  return (
+    <ToasterStyled
+      position="top-right"
+      autoClose={5000}
+      hideProgressBar
+      newestOnTop
+      closeButton={false}
+      closeOnClick={false}
+      rtl={false}
+      draggable
+      pauseOnHover
+      transition={Slide}
+      limit={5}
+    />
+  );
+};

package/packages/shared-components/src/Toast/index.ts

@@ -0,0 +1,3 @@
+export { Toaster } from "./Toaster";
+
+export { toasts } from "./toasts";

package/packages/shared-components/src/Toast/toasts.tsx

@@ -0,0 +1,28 @@
+import { toast as reactToast, type ToastOptions } from "react-toastify";
+import { Toast } from "./Toast";
+import type { ToastArgs, ToastsTypeFunctions, ToastType } from "./types";
+
+// eslint-disable-next-line sonarjs/function-return-type
+function createToast(
+  { title, description, href, linkText }: ToastArgs,
+  type: ToastType,
+  options?: ToastOptions
+) {
+  return reactToast(
+    <Toast
+      title={title}
+      description={description}
+      href={href}
+      linkText={linkText}
+      type={type}
+    />,
+    { ...options, icon: false, type }
+  );
+}
+
+export const toasts: ToastsTypeFunctions = {
+  info: (toast, options?) => createToast(toast, "info", options),
+  success: (toast, options?) => createToast(toast, "success", options),
+  warning: (toast, options?) => createToast(toast, "warning", options),
+  error: (toast, options?) => createToast(toast, "error", options),
+};

package/packages/shared-components/src/Toast/types.ts

@@ -0,0 +1,13 @@
+import type { ToastOptions, TypeOptions } from "react-toastify";
+
+export type ToastType = Exclude<TypeOptions, "default">;
+export type ToastBody = { title: string; description?: string };
+export type ToastLink = { href?: string; linkText?: string };
+export type ToastArgs = ToastBody & ToastLink;
+
+export type ToastsTypeFunctions = {
+  [K in ToastType]: (
+    _toast: ToastArgs,
+    _options?: Omit<ToastOptions, "type">
+  ) => string | number;
+};

package/packages/shared-components/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,36 @@
+import type { TooltipProps as MuiTooltipProps } from "@mui/material";
+import { Box, Tooltip as MuiTooltip, Typography } from "@mui/material";
+import { ReactNode, type PropsWithChildren } from "react";
+
+type TooltipProps = PropsWithChildren<{
+  toolTipLabel: ReactNode;
+  placement?: MuiTooltipProps["placement"];
+}>;
+
+export const Tooltip = ({
+  toolTipLabel,
+  children,
+  placement = "top-start",
+  ...rest
+}: TooltipProps) => {
+  return (
+    <MuiTooltip arrow placement={placement} title={toolTipLabel} {...rest}>
+      {typeof children === "string" ? (
+        <Typography
+          variant="body2"
+          fontWeight={500}
+          sx={{
+            maxWidth: "150px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {children}
+        </Typography>
+      ) : (
+        <Box>{children}</Box>
+      )}
+    </MuiTooltip>
+  );
+};

package/packages/shared-components/src/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/packages/shared-components/src/UserProfileMenu/UserProfileMenu.styled.tsx

@@ -0,0 +1,37 @@
+import { IconButton, Menu, menuClasses, type CSSObject } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+export const MenuStyled = styled(Menu)(({ theme }) => {
+  const style: CSSObject = {
+    [`& .${menuClasses.paper}`]: {
+      boxShadow: theme.palette.app.paperBoxShadow,
+      minWidth: "29rem",
+      width: "auto",
+      margin: "0 0.5rem",
+      borderRadius: "8px",
+      overflow: "visible",
+      "& .MuiList-root": {
+        padding: "0",
+        overflow: "visible",
+      },
+    },
+  };
+
+  return style;
+});
+
+export const IconButtonStyled = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== "isOpened",
+})<{ isOpened?: boolean }>(({ theme, isOpened }) => {
+  const { color } = theme.palette.app;
+
+  const style: CSSObject = {
+    paddingInline: "0.2rem 0.8rem",
+    paddingBlock: "0.2rem",
+    borderRadius: "20px",
+    background: isOpened ? color.butterflyBlue[500] : color.slate[800],
+    border: `1px solid ${isOpened ? color.butterflyBlue[900] : color.iron[700]}`,
+  };
+
+  return style;
+});

package/packages/shared-components/src/UserProfileMenu/UserProfileMenu.tsx

@@ -0,0 +1,107 @@
+import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
+import type { MenuProps } from "@mui/material";
+import {
+  Avatar,
+  Box,
+  Divider,
+  Menu,
+  MenuItem,
+  Stack,
+  Typography,
+} from "@mui/material";
+import _isFunction from "lodash/isFunction";
+import {
+  useState,
+  type CSSProperties,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import { IconButtonStyled } from "./UserProfileMenu.styled";
+
+export type UserProfileMenuProps = Omit<MenuProps, "open" | "closeMenu"> & {
+  userDetails: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+  menuItems: {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    divider?: boolean;
+    sx?: CSSProperties;
+    onClick?: () => void;
+  }[];
+};
+
+export function UserProfileMenu({
+  userDetails,
+  menuItems,
+}: UserProfileMenuProps) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Stack alignItems="center">
+      <IconButtonStyled size="small" onClick={handleClick} isOpened={open}>
+        <Stack direction="row" alignItems="center" gap={1} color="black">
+          <Avatar src={userDetails.avatar} />
+          <Typography>{userDetails.name}</Typography>
+          {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
+        </Stack>
+      </IconButtonStyled>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        sx={{
+          "& .MuiPaper-root": {
+            marginTop: "5px",
+            width: "290px",
+          },
+        }}
+      >
+        {menuItems.map(
+          ({ divider = false, onClick, icon, label, sx = {}, key }) => {
+            return (
+              <Box key={`${key}_container`}>
+                {divider && <Divider />}
+
+                <MenuItem
+                  onClick={() => {
+                    if (_isFunction(onClick)) {
+                      onClick();
+                    }
+                  }}
+                >
+                  {(icon || label) && (
+                    <Stack
+                      gap="1.2rem"
+                      alignItems="center"
+                      width="100%"
+                      flexDirection="row"
+                      sx={{ ...sx }}
+                    >
+                      {icon}
+                      {label && <Typography>{label}</Typography>}
+                    </Stack>
+                  )}
+                </MenuItem>
+              </Box>
+            );
+          }
+        )}
+      </Menu>
+    </Stack>
+  );
+}

package/packages/shared-components/src/UserProfileMenu/index.ts

@@ -0,0 +1 @@
+export * from "./UserProfileMenu";

package/packages/shared-components/src/index.ts

@@ -0,0 +1,24 @@
+export * from "./Actions";
+export * from "./AgGrid";
+export * from "./AppBar";
+export * from "./Breadcrumbs";
+export * from "./Button";
+export * from "./Card";
+export * from "./Chips";
+export * from "./Dialog";
+export * from "./Drawer";
+export * from "./FormFields";
+export * from "./Layouts";
+export * from "./Loader";
+export * from "./PadBox";
+export * from "./Svgs";
+export * from "./Tab";
+export * from "./Toast";
+export * from "./Tooltip";
+export * from "./UserProfileMenu";
+export * from "./utils";
+export * from "./Timeline";
+export * from "./Indicator";
+export * from "./FilterList";
+export * from "./Charts";
+export * from "./Stepper";

package/packages/shared-components/src/utils/colorVariant.ts

@@ -0,0 +1,142 @@
+import { useTheme } from "@mui/material";
+
+export type WorkDayType =
+  | "present"
+  | "holiday"
+  | "weekly_off"
+  | "working"
+  | "first_half_off"
+  | "second_half_off"
+  | "full_day_weekly_off"
+  | "first_half_weekly_off"
+  | "second_half_weekly_off"
+  | "paid_leave"
+  | "absent"
+  | "late_in_early_out"
+  | "unpaid_leave";
+
+export type WorkDayTypeShort =
+  | "P"
+  | "H"
+  | "WO"
+  | "HO"
+  | "HWO"
+  | "PL"
+  | "A"
+  | "LIEO"
+  | "UPL";
+
+export const serverityOptions: Record<WorkDayType, WorkDayTypeShort> = {
+  present: "P",
+  holiday: "H",
+  weekly_off: "WO",
+  working: "P",
+  first_half_off: "HO",
+  second_half_off: "HO",
+  full_day_weekly_off: "WO",
+  first_half_weekly_off: "HWO",
+  second_half_weekly_off: "HWO",
+  paid_leave: "PL",
+  absent: "A",
+  unpaid_leave: "UPL",
+  late_in_early_out: "LIEO",
+};
+
+export const getColorByVariant = (variant: WorkDayType, type = "dark") => {
+  const theme = useTheme();
+
+  const { darkMint, sapphireBlue, darkOrange, orchid, lipstickRed, deepAqua } =
+    theme.palette.app.color;
+
+  const index = type === "dark" ? 900 : 600;
+
+  switch (variant) {
+    case "present":
+      return darkMint[index];
+
+    case "working":
+      return darkMint[index];
+
+    case "holiday":
+      return sapphireBlue[index];
+
+    case "weekly_off":
+      return darkOrange[index];
+
+    case "full_day_weekly_off":
+      return darkOrange[index];
+
+    case "first_half_weekly_off":
+      return darkOrange[index];
+
+    case "second_half_weekly_off":
+      return darkOrange[index];
+
+    case "paid_leave":
+      return orchid[index];
+
+    case "absent":
+      return lipstickRed[index];
+
+    case "first_half_off":
+      return lipstickRed[index];
+
+    case "second_half_off":
+      return lipstickRed[index];
+
+    case "unpaid_leave":
+      return deepAqua[index];
+
+    case "late_in_early_out":
+      return lipstickRed[800];
+
+    default:
+      return lipstickRed[index];
+  }
+};
+
+export const getStatusLabel = (status: WorkDayType) => {
+  switch (status) {
+    case "present":
+      return "Present";
+
+    case "absent":
+      return "Absent";
+
+    case "weekly_off":
+      return "Weekly Off";
+
+    case "working":
+      return "Working";
+
+    case "holiday":
+      return "Holiday";
+
+    case "paid_leave":
+      return "Paid Leave";
+
+    case "unpaid_leave":
+      return "Unpaid Leave";
+
+    case "first_half_weekly_off":
+      return "First Half Weekly Off";
+
+    case "second_half_weekly_off":
+      return "Second Half Weekly Off";
+
+    case "first_half_off":
+      return "First Half Off";
+
+    case "second_half_off":
+      return "Second Half Off";
+
+    case "full_day_weekly_off":
+      return "Weekly Off";
+
+    case "late_in_early_out":
+      return "Late In/Early Out";
+
+    default:
+      return "Absent";
+  }
+};

package/packages/shared-components/src/utils/date.ts

@@ -0,0 +1,11 @@
+import { DateTime } from "luxon";
+
+export const dateFormat = (date: Date) => {
+  return DateTime.fromJSDate(date).toFormat("dd-MM-yyyy");
+};
+
+export const getTimeInHHmm = (date: string, format: string = "HH:mm") => {
+  const dateTime = DateTime.fromISO(date).toFormat(format);
+
+  return dateTime;
+};

package/packages/shared-components/src/utils/file.ts

@@ -0,0 +1,20 @@
+const SUPPORTED_FILE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-excel",
+];
+
+export const isFileSizeValid = (file: File, maxSizeMB: number) => {
+  const maxSizeInBytes = maxSizeMB * 1024 * 1024;
+
+  return file.size <= maxSizeInBytes;
+};
+
+export const isFileTypeValid = (file: File) => {
+  return SUPPORTED_FILE_TYPES.includes(file.type);
+};

package/packages/shared-components/src/utils/fileSizeValidate.ts

@@ -0,0 +1,5 @@
+export const isFileSizeValid = (file: File, maxSizeMB: number) => {
+  const maxSizeInBytes = maxSizeMB * 1024 * 1024;
+
+  return file.size <= maxSizeInBytes;
+};

package/packages/shared-components/src/utils/index.ts

@@ -0,0 +1,5 @@
+export * from "./theme/theme";
+
+export * from "./file";
+
+export * from "./theme/colorPaletteUI";

package/packages/shared-components/src/utils/theme/colorPalette.ts

@@ -0,0 +1,110 @@
+import type { Color } from "@mui/material";
+
+export type ColorShades = Partial<Color>;
+
+export type ColorPalette = {
+  lightSlateBlue: ColorShades;
+  lipstickRed: ColorShades;
+  darkOrange: ColorShades;
+  deepAqua: ColorShades;
+  sapphireBlue: ColorShades;
+  darkMint: ColorShades;
+  butterflyBlue: ColorShades;
+  orchid: ColorShades;
+  mirage: ColorShades;
+  iron: ColorShades;
+  slate: ColorShades;
+  red: ColorShades;
+  lightBlue: ColorShades;
+  black: ColorShades;
+};
+
+export const colorPalette: ColorPalette = {
+  iron: {
+    900: "hsla(0, 0%, 49%, 1)",
+    800: "hsla(0, 0%, 67%, 1)", // disabled color
+    700: "hsla(0, 0%, 85%, 1)",
+    600: "hsla(0, 0%, 100%, 1)", // white
+    500: "hsla(218, 15%, 59%, 1)",
+    400: "hsla(0, 0%, 18%, 1)",
+    300: "hsla(0, 0%, 0%, 0.35)", // shadow color
+  },
+  slate: {
+    900: "hsla(212, 19%, 37%, 1)", // info
+    800: "hsl(210, 20%, 96%)",
+    700: "hsl(193, 22%, 92%)",
+    600: "	hsl(0, 0%, 98%)",
+    500: "hsl(0, 0%, 49%)",
+  },
+  mirage: {
+    900: "hsla(224, 35%, 12%, 1)", // primary
+    800: "hsla(230, 90%, 3%, 0.08)",
+    700: "hsla(226, 34%, 15%, 1)",
+    600: "hsla(0, 0%, 22%, 0.7)",
+  },
+  lightSlateBlue: {
+    900: "hsla(234, 99%, 68%, 1)",
+    800: "hsla(234, 98%, 81%, 1)",
+    700: "hsla(233, 100%, 94%, 1)",
+    600: "hsla(236, 100%, 97%, 1)",
+  },
+  lipstickRed: {
+    900: "hsla(349, 90%, 41%, 1)",
+    800: "hsla(350, 63%, 64%, 1)",
+    700: "hsla(349, 66%, 87%, 1)",
+    600: "hsla(348, 100%, 95%, 1)",
+  },
+  darkOrange: {
+    900: "hsla(32, 100%, 52%, 1)", //warning
+    800: "hsla(32, 100%, 71%, 1)",
+    700: "hsla(33, 100%, 90%, 1)",
+    600: "hsla(33, 100%, 95%, 1)",
+  },
+  deepAqua: {
+    900: "hsla(183, 87%, 27%, 1)",
+    800: "hsla(184, 50%, 68%, 1)",
+    700: "hsla(183, 68%, 79%, 1)",
+    600: "hsla(183, 85%, 95%, 1)",
+  },
+  sapphireBlue: {
+    900: "hsla(223, 59%, 49%, 1)",
+    800: "hsla(223, 56%, 69%, 1)",
+    700: "hsla(222, 58%, 90%, 1)",
+    600: "hsla(223, 54%, 95%, 1)",
+    500: "hsl(216, 100%, 91%)",
+    400: "	hsl(217, 100%, 95%)",
+    300: "	hsl(193, 22%, 92%)",
+  },
+  darkMint: {
+    900: "hsla(136, 59%, 49%, 1)",
+    800: "hsla(136, 56%, 69%, 1)",
+    700: "hsla(136, 58%, 90%, 1)",
+    600: "hsla(133, 54%, 95%, 1)",
+  },
+  butterflyBlue: {
+    900: "hsla(203, 79%, 57%, 1)", //secondary
+    800: "hsla(204, 79%, 74%, 1)",
+    700: "hsl(204, 16%, 88%)",
+    600: "hsla(209, 83%, 91%, 1)",
+    500: "hsla(203, 82%, 96%, 1)",
+    400: "hsla(208, 25%, 66%, 1)", //primary.light
+    300: "hsla(207, 17%, 88%, 1)",
+  },
+  orchid: {
+    900: "hsla(295, 60%, 66%, 1)",
+    800: "hsla(295, 61%, 80%, 1)",
+    700: "hsla(297, 60%, 93%, 1)",
+    600: "hsla(295, 65%, 97%, 1)",
+  },
+  red: {
+    900: "hsla(0, 90%, 47%, 1)", //error
+    800: "hsla(0, 73%, 59%, 1)",
+  },
+  lightBlue: {
+    100: "hsla(193, 4%, 92%)",
+    50: "hsla(193, 0%, 100%)",
+  },
+  black: {
+    900: "hsl(0, 0%, 0%)",
+  },
+};