@codezee/sixtify-brahma 0.2.2 → 0.2.3

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

@@ -1,76 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-export * from "./theme/theme";
-
-export * from "./file";
-
-export * from "./theme/colorPaletteUI";
-
-export * from "./colorVariant";
-
-export * from "./date";
-
-export * from "./urlToNestedObject";

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

@@ -1,110 +0,0 @@
-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%)",
-  },
-};