@codezee/sixtify-brahma 0.2.6 → 0.2.8

package/packages/shared-components/src/Timeline/TimelineTrackSegments.tsx

@@ -1,130 +0,0 @@
-import { Box, Stack, Tooltip } from "@mui/material";
-import { DateTime } from "luxon";
-import { getColorByVariant } from "../utils/colorVariant";
-import { getTimeInHHmm } from "../utils/date";
-import { getArrowValue, type HighlightedInterval } from "./Timeline";
-
-type TimelineTrackSegmentsProps = {
-  totalDots: number;
-  intervals: HighlightedInterval[];
-  startTimeline: number;
-};
-
-export const TimelineTrackSegments = ({
-  totalDots,
-  intervals,
-  startTimeline,
-}: TimelineTrackSegmentsProps) => {
-  return (
-    <Box sx={{ position: "relative", width: "100%", height: 4 }}>
-      {intervals?.map((interval, index) => {
-        const inTime = getTimeInHHmm(interval.in_time);
-
-        const outTime = getTimeInHHmm(interval.out_time);
-
-        const intervalInTime = DateTime.fromISO(interval.in_time);
-
-        const intervalOutTime = DateTime.fromISO(interval.out_time);
-
-        const shiftHours = intervalOutTime
-          .diff(intervalInTime, ["hours", "minutes"])
-          .toFormat("hh:mm");
-
-        let in_time = getArrowValue(inTime);
-
-        in_time = in_time < startTimeline ? in_time + totalDots : in_time;
-
-        let out_time = getArrowValue(outTime);
-
-        out_time = out_time < in_time ? out_time + totalDots : out_time;
-
-        const isValidInTime = !isNaN(in_time);
-
-        const isValidOutTime = !isNaN(out_time);
-
-        let inTimeLabel = "";
-
-        let outTimeLabel = "";
-
-        if (isValidInTime) {
-          inTimeLabel = `In time : ${inTime} ${!isValidOutTime ? " / Missing punch" : ""}`;
-        }
-
-        if (isValidOutTime) {
-          outTimeLabel = `Out time : ${outTime}  ${!isValidInTime ? "/ Missing punch" : ""}`;
-        }
-
-        const startPercent =
-          (((in_time - startTimeline) % totalDots) / (totalDots - 1)) * 100;
-
-        const endPercent =
-          (((out_time - startTimeline) % totalDots) / (totalDots - 1)) * 100;
-
-        const labelText = `In/Out: ${getTimeInHHmm(interval.in_time)} - ${getTimeInHHmm(
-          interval.out_time
-        )} (${shiftHours})`;
-
-        const color = getColorByVariant(interval.status_type);
-
-        return (
-          // eslint-disable-next-line sonarjs/no-array-index-key
-          <Stack direction="row" key={index}>
-            {isValidInTime && (
-              <Tooltip arrow title={inTimeLabel} placement="top">
-                <Box
-                  sx={{
-                    height: 8,
-                    width: 8,
-                    position: "absolute",
-                    left: `${startPercent}%`,
-                    boxShadow: "none",
-                    backgroundColor: color,
-                    borderRadius: "50%",
-                    top: "15px",
-                    zIndex: 3,
-                    "&:focus, &:hover, &:active": {
-                      boxShadow: "none",
-                    },
-                  }}
-                />
-              </Tooltip>
-            )}
-            <Tooltip arrow title={labelText} placement="top">
-              <Box
-                sx={{
-                  position: "absolute",
-                  left: `${startPercent}%`,
-                  width: `${endPercent - startPercent}%`,
-                  height: 3.5,
-                  top: "17.5px",
-                  backgroundColor: color,
-                  zIndex: 2,
-                }}
-              />
-            </Tooltip>
-            {isValidOutTime && (
-              <Tooltip arrow title={outTimeLabel} placement="top">
-                <Box
-                  sx={{
-                    height: 8,
-                    width: 8,
-                    position: "absolute",
-                    right: `${100 - endPercent}%`,
-                    boxShadow: "none",
-                    backgroundColor: color,
-                    borderRadius: "50%",
-                    top: "15px",
-                    zIndex: 3,
-                    "&:focus, &:hover, &:active": {
-                      boxShadow: "none",
-                    },
-                  }}
-                />
-              </Tooltip>
-            )}
-          </Stack>
-        );
-      })}
-    </Box>
-  );
-};

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

@@ -1,2 +0,0 @@
-export * from "./AttendanceStatus";
-export * from "./Timeline";

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

@@ -1,59 +0,0 @@
-import {
-  AddCircleOutline,
-  CheckCircleOutline,
-  Close,
-  ErrorOutline,
-  HighlightOff,
-} from "@mui/icons-material";
-import { IconButton, Stack } from "@mui/material";
-import type { ReactNode } from "react";
-import { PadBox } from "../PadBox";
-import type { ToastBodyProps } from "./ToastBody";
-import { ToastBody } from "./ToastBody";
-import type { ToastFooterLinkProps } from "./ToastFooterLink";
-import { ToastFooterLink } from "./ToastFooterLink";
-import type { ToastType } from "./types";
-
-export type ToastProps = ToastBodyProps &
-  ToastFooterLinkProps & {
-    closeToast?: () => void;
-    type: ToastType;
-  };
-
-type ToastIcon = {
-  [K in ToastType]: ReactNode;
-};
-
-export const Toast = ({
-  closeToast,
-  type,
-  title,
-  description,
-  href,
-  linkText,
-}: ToastProps) => {
-  const toastIcons: ToastIcon = {
-    info: <AddCircleOutline color="info" fontSize="large" />,
-    success: <CheckCircleOutline color="success" fontSize="large" />,
-    warning: <ErrorOutline color="warning" fontSize="large" />,
-    error: <HighlightOff color="error" fontSize="large" />,
-  };
-
-  return (
-    <PadBox padding={{ p: "20px", pl: "16px" }}>
-      <Stack direction="row" gap="16px" alignItems="center">
-        {toastIcons[type]}
-
-        <Stack alignItems="flex-start" gap="1.2rem" flexGrow={1}>
-          <ToastBody title={title} description={description} />
-
-          {href && <ToastFooterLink href={href} linkText={linkText} />}
-        </Stack>
-
-        <IconButton onClick={closeToast} disableRipple>
-          <Close />
-        </IconButton>
-      </Stack>
-    </PadBox>
-  );
-};

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

@@ -1,26 +0,0 @@
-import { Stack, Typography, useTheme } from "@mui/material";
-import type { ToastBody as ToastBodyType } from "./types";
-
-export type ToastBodyProps = Readonly<ToastBodyType>;
-
-export function ToastBody({ title, description }: ToastBodyProps) {
-  const {
-    palette: {
-      app: { color },
-    },
-  } = useTheme();
-
-  return (
-    <Stack gap="4px">
-      <Typography fontWeight={500} color="black" variant="body1">
-        {title}
-      </Typography>
-
-      {description && (
-        <Typography color={color.slate[900]} variant="body2">
-          {description}
-        </Typography>
-      )}
-    </Stack>
-  );
-}

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

@@ -1,19 +0,0 @@
-import { Link, Typography } from "@mui/material";
-import { HoverBox } from "./Toaster.styled";
-import type { ToastLink } from "./types";
-
-export type ToastFooterLinkProps = Readonly<ToastLink>;
-
-export function ToastFooterLink({ href, linkText }: ToastFooterLinkProps) {
-  return (
-    <Link
-      href={href}
-      underline="none"
-      target={href?.startsWith("http") ? "_blank" : "_self"}
-    >
-      <HoverBox>
-        <Typography>{linkText ?? href}</Typography>
-      </HoverBox>
-    </Link>
-  );
-}

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 type { PropsWithChildren, ReactNode } 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,33 +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 }>(() => {
-  const style: CSSObject = {
-    paddingInline: "0.3rem",
-    paddingBlock: "0.2rem",
-    borderRadius: "8px",
-  };
-
-  return style;
-});

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

@@ -1,168 +0,0 @@
-import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
-import type { MenuProps } from "@mui/material";
-import {
-  Avatar,
-  Box,
-  Divider,
-  ListItemIcon,
-  Menu,
-  MenuItem,
-  Stack,
-  Typography,
-  useTheme,
-} 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 theme = useTheme();
-
-  const { iron } = theme.palette.app.color;
-
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <Box position="relative">
-      <Box sx={{ display: "flex", alignItems: "center", textAlign: "center" }}>
-        <IconButtonStyled
-          onClick={handleClick}
-          size="small"
-          sx={{ ml: 2 }}
-          aria-controls={open ? "account-menu" : undefined}
-          aria-haspopup="true"
-          aria-expanded={open ? "true" : undefined}
-        >
-          <Stack direction="row" alignItems="center" gap={1} color="black">
-            <Avatar
-              src={userDetails.avatar}
-              sx={{ border: `1px solid ${iron[700]}` }}
-            />
-            <Typography>{userDetails.name}</Typography>
-            {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-          </Stack>
-        </IconButtonStyled>
-      </Box>
-      <Menu
-        anchorEl={anchorEl}
-        id="account-menu"
-        open={open}
-        onClose={handleClose}
-        onClick={handleClose}
-        sx={{
-          "& .MuiPaper-root": {
-            width: "220px",
-          },
-        }}
-        slotProps={{
-          paper: {
-            elevation: 0,
-            sx: {
-              overflow: "visible",
-              filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-              mt: 1.5,
-              "& .MuiAvatar-root": {
-                width: 32,
-                height: 32,
-                ml: -0.5,
-                mr: 1,
-              },
-              "&::before": {
-                content: "''",
-                display: "block",
-                position: "absolute",
-                top: 0,
-                right: 14,
-                width: 10,
-                height: 10,
-                bgcolor: "background.paper",
-                transform: "translateY(-50%) rotate(45deg)",
-                zIndex: 0,
-              },
-            },
-          },
-        }}
-        transformOrigin={{ horizontal: "right", vertical: "top" }}
-        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
-      >
-        {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="1px"
-                      alignItems="center"
-                      width="100%"
-                      flexDirection="row"
-                      sx={{ ...sx }}
-                    >
-                      <ListItemIcon
-                        sx={{
-                          minWidth: "20px",
-                          alignItems: "center",
-                          ...sx,
-                        }}
-                      >
-                        {icon}
-                      </ListItemIcon>
-
-                      {label && (
-                        <Typography sx={{ fontSize: "15px" }}>
-                          {label}
-                        </Typography>
-                      )}
-                    </Stack>
-                  )}
-                </MenuItem>
-              </Box>
-            );
-          }
-        )}
-      </Menu>
-    </Box>
-  );
-}

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

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

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

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