@codezee/sixtify-brahma 0.2.2 → 0.2.3

package/packages/shared-components/src/Card/CardItem/CardItemValue.tsx

@@ -1,98 +0,0 @@
-import type { AvatarOwnProps, SxProps, Theme } from "@mui/material";
-import { Avatar, Skeleton, Stack, Typography, useTheme } from "@mui/material";
-
-type CardItemValueProps = {
-  title?: string;
-  subTitle?: string;
-  loading?: boolean;
-  avatar?: string;
-  showAvatar?: boolean;
-  sx?: SxProps<Theme>;
-  isHideTitle?: boolean;
-  variant?: AvatarOwnProps["variant"];
-};
-
-export const CardItemValue = ({
-  title,
-  subTitle,
-  avatar,
-  loading = false,
-  showAvatar = false,
-  isHideTitle = false,
-  variant = "circular",
-  sx,
-}: CardItemValueProps) => {
-  const theme = useTheme();
-
-  const { slate, iron } = theme.palette.app.color;
-
-  if (loading) {
-    return (
-      <Stack gap="10px " flex="1">
-        <Stack direction="row" gap="10px" alignItems="center">
-          {avatar && (
-            <Skeleton
-              variant="circular"
-              height="30px"
-              animation="wave"
-              width="30px"
-            />
-          )}
-          <Skeleton
-            variant="rounded"
-            height={20}
-            animation="wave"
-            width="150px"
-          />
-        </Stack>
-
-        {subTitle && (
-          <Skeleton
-            variant="rounded"
-            height={20}
-            animation="wave"
-            width="200px"
-          />
-        )}
-      </Stack>
-    );
-  }
-
-  return (
-    <Stack gap="10px" flex="1">
-      <Stack gap="10px" direction="row" alignItems="center">
-        {showAvatar && <Avatar alt={title} src={avatar} variant={variant} />}
-
-        {!isHideTitle && (
-          <Typography
-            variant="body1"
-            sx={{
-              fontWeight: 400,
-              color: slate[900],
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              display: "-webkit-box",
-              WebkitLineClamp: 1,
-              WebkitBoxOrient: "vertical",
-              width: "min-contact",
-              ...sx,
-            }}
-          >
-            {title ? title : "-"}
-          </Typography>
-        )}
-      </Stack>
-
-      {subTitle && (
-        <Typography
-          variant="body1"
-          sx={{
-            color: iron[500],
-          }}
-        >
-          {subTitle}
-        </Typography>
-      )}
-    </Stack>
-  );
-};

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

@@ -1,2 +0,0 @@
-export * from "./CardItem";
-export * from "./CardItemValue";

package/packages/shared-components/src/Card/ProfileCard/ProfileCard.tsx

@@ -1,40 +0,0 @@
-import { Box, Stack, useTheme } from "@mui/material";
-import type { PropsWithChildren, ReactNode } from "react";
-import { PadBox } from "../../PadBox";
-
-type ProfileCardProps = PropsWithChildren<{
-  header: ReactNode;
-  body: ReactNode;
-  onClick: (e: React.MouseEvent) => void;
-}>;
-
-export function ProfileCard({
-  onClick,
-  header,
-  body,
-}: Readonly<ProfileCardProps>) {
-  const theme = useTheme();
-
-  const { lightBlue, butterflyBlue } = theme.palette.app.color;
-
-  return (
-    <Box
-      bgcolor={lightBlue[50]}
-      flex={1}
-      sx={{
-        borderRadius: "10px",
-        cursor: "pointer",
-        ":hover": { background: butterflyBlue[600] },
-      }}
-      height="400px"
-      onClick={onClick}
-    >
-      <PadBox padding={{ padding: "5px" }}>
-        <Stack height="100%" justifyContent="space-between">
-          {header}
-          {body}
-        </Stack>
-      </PadBox>
-    </Box>
-  );
-}

package/packages/shared-components/src/Card/ProfileCard/ProfileCardItem/ProfileCardBody.tsx

@@ -1,53 +0,0 @@
-import CallOutlinedIcon from "@mui/icons-material/CallOutlined";
-import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
-import { Box, Stack } from "@mui/material";
-import type { PropsWithChildren } from "react";
-import { PadBox } from "../../../PadBox";
-import { CardItem, CardItemValue } from "../../CardItem";
-
-type ProfileCardBodyProps = PropsWithChildren<{
-  joiningDate: string;
-  department: string;
-  subDepartment: string;
-  email: string;
-  phone: string;
-  loading?: boolean;
-}>;
-
-export function ProfileCardBody({
-  joiningDate,
-  department,
-  subDepartment,
-  email,
-  phone,
-  loading,
-}: ProfileCardBodyProps) {
-  return (
-    <Box bgcolor="#F3F5F7" sx={{ borderRadius: "10px" }}>
-      <PadBox padding={{ padding: "12px" }}>
-        <Stack gap="10px">
-          <CardItem
-            label="Date of Joining"
-            value={<CardItemValue title={joiningDate} loading={loading} />}
-          />
-          <CardItem
-            label="Department"
-            value={<CardItemValue title={department} loading={loading} />}
-          />
-          <CardItem
-            label="Sub Department"
-            value={<CardItemValue title={subDepartment} loading={loading} />}
-          />
-          <CardItem
-            label={<EmailOutlinedIcon />}
-            value={<CardItemValue title={email} loading={loading} />}
-          />
-          <CardItem
-            label={<CallOutlinedIcon />}
-            value={<CardItemValue title={phone} loading={loading} />}
-          />
-        </Stack>
-      </PadBox>
-    </Box>
-  );
-}

package/packages/shared-components/src/Card/ProfileCard/ProfileCardItem/ProfileCardHeader.tsx

@@ -1,96 +0,0 @@
-import type { SxProps, Theme } from "@mui/material";
-import { Box, Skeleton, Stack, Typography } from "@mui/material";
-import type { PropsWithChildren, ReactNode } from "react";
-import { DeleteAction } from "../../../Actions";
-import { Chip } from "../../../Chips";
-import { PadBox } from "../../../PadBox";
-import { CardItemValue } from "../../CardItem";
-
-type ProfileCardHeaderProps = PropsWithChildren<{
-  avatar: ReactNode;
-  employeeName: string;
-  designation: string;
-  employeeCode: string;
-  loading: boolean;
-  isDraft?: boolean;
-  sx?: SxProps<Theme>;
-  onDeleteClick?: (e: React.MouseEvent) => void;
-}>;
-
-export function ProfileCardHeader({
-  avatar,
-  employeeName,
-  designation,
-  employeeCode,
-  loading,
-  isDraft = false,
-  onDeleteClick,
-}: ProfileCardHeaderProps) {
-  return (
-    <Box>
-      <PadBox padding={{ padding: "10px 5px 0px 10px" }}>
-        <Stack
-          gap="10px"
-          direction="row"
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          {loading ? (
-            <Skeleton
-              variant="rounded"
-              height={20}
-              animation="wave"
-              width="100px"
-            />
-          ) : // eslint-disable-next-line sonarjs/no-nested-conditional
-          isDraft ? (
-            <Chip label="Draft" size="small" color="error" variant="outlined" />
-          ) : (
-            <CardItemValue title={employeeCode} loading={loading} />
-          )}
-
-          {isDraft &&
-            (loading ? (
-              <Skeleton
-                variant="rounded"
-                height={20}
-                animation="wave"
-                width="50px"
-              />
-            ) : (
-              <DeleteAction onClick={onDeleteClick} />
-            ))}
-        </Stack>
-      </PadBox>
-      <Stack alignItems="center" gap="8px">
-        {avatar}
-        {loading ? (
-          <Skeleton
-            variant="rounded"
-            height={30}
-            animation="wave"
-            width="300px"
-          />
-        ) : (
-          <Typography
-            variant="h6"
-            sx={{
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              display: "-webkit-box",
-              WebkitLineClamp: 1,
-              WebkitBoxOrient: "vertical",
-            }}
-            width="330px"
-            fontWeight="600"
-            textAlign="center"
-          >
-            {employeeName ?? "-"}
-          </Typography>
-        )}
-
-        <CardItemValue title={designation} loading={loading} />
-      </Stack>
-    </Box>
-  );
-}

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

@@ -1,6 +0,0 @@
-export * from "./Card";
-export * from "./CardItem";
-export * from "./ProfileCard/ProfileCard";
-export * from "./ProfileCard/ProfileCardItem/ProfileCardBody";
-export * from "./ProfileCard/ProfileCardItem/ProfileCardHeader";
-export * from "./AttendanceCard";

package/packages/shared-components/src/Charts/PieChart.tsx

@@ -1,69 +0,0 @@
-import type { ReactNode } from "react";
-import type { PieChartProps as MuiPieChartProps } from "@mui/x-charts/PieChart";
-import { PieChart as MuiPieChart } from "@mui/x-charts/PieChart";
-import type { PieSeriesType, PieValueType } from "@mui/x-charts";
-import type { MakeOptional } from "@mui/x-charts/internals";
-import { useDrawingArea } from "@mui/x-charts/hooks";
-import { styled } from "@mui/material/styles";
-
-type PieChartProps = Omit<MuiPieChartProps, "series"> & {
-  series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, "id">>, "type">;
-  label?: string;
-};
-
-type PieCenterLabelProps = {
-  children: ReactNode;
-};
-
-export const PieChart = ({
-  height = 235,
-  skipAnimation = false,
-  tooltip,
-  label,
-  series,
-  ...rest
-}: PieChartProps) => {
-  const valueFormatter = (item: MakeOptional<PieValueType, "id">) =>
-    `${item.value}%`;
-
-  const StyledText = styled("text")(({ theme }) => ({
-    fill: theme.palette.text.primary,
-    textAnchor: "middle",
-    dominantBaseline: "central",
-    fontSize: 20,
-  }));
-
-  // eslint-disable-next-line sonarjs/no-unstable-nested-components
-  const PieCenterLabel = ({ children }: PieCenterLabelProps) => {
-    const { width, height, left, top } = useDrawingArea();
-
-    return (
-      <StyledText x={left + width / 2} y={top + height / 2}>
-        {children}
-      </StyledText>
-    );
-  };
-
-  return (
-    <MuiPieChart
-      height={height}
-      sx={{
-        transform: "translate(50px, 0px)",
-        overflow: "visible",
-      }}
-      series={[
-        {
-          arcLabel: (params) => params.label ?? "",
-          arcLabelMinAngle: 20,
-          valueFormatter,
-          ...series,
-        },
-      ]}
-      {...rest}
-      tooltip={tooltip}
-      skipAnimation={skipAnimation}
-    >
-      <PieCenterLabel>{label}</PieCenterLabel>
-    </MuiPieChart>
-  );
-};

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

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

package/packages/shared-components/src/Chips/Chip.tsx

@@ -1,26 +0,0 @@
-import {
-  Avatar,
-  Chip as MuiChip,
-  type ChipProps as MuiChipProps,
-} from "@mui/material";
-
-type ChipProps = {
-  imgURL?: string;
-} & MuiChipProps;
-
-export const Chip = ({
-  label,
-  variant = "outlined",
-  imgURL,
-  avatar,
-  ...rest
-}: ChipProps) => {
-  return (
-    <MuiChip
-      avatar={avatar && <Avatar alt="Natacha" src={imgURL} />}
-      label={label}
-      variant={variant}
-      {...rest}
-    />
-  );
-};

package/packages/shared-components/src/Chips/ChipWithBorder.tsx

@@ -1,39 +0,0 @@
-import type { ChipProps } from "@mui/material";
-import { alpha, Chip, Tooltip } from "@mui/material";
-
-type ChipWithBorderProps = Omit<ChipProps, "color"> & {
-  label: string;
-  color?: string;
-  toolTipLabel?: string;
-};
-
-export const ChipWithBorder = ({
-  label,
-  color = "green",
-  toolTipLabel,
-  ...rest
-}: ChipWithBorderProps) => {
-  return (
-    <Tooltip title={toolTipLabel} arrow placement="top">
-      <Chip
-        label={label}
-        {...rest}
-        sx={{
-          border: `1px solid ${color}`,
-          borderColor: color,
-          backgroundColor: alpha(color, 0.2),
-          borderRadius: "3px",
-          height: "20px",
-          width: "auto",
-          padding: "0px",
-          ".MuiChip-label": {
-            color,
-            fontSize: "12px",
-            fontWeight: 600,
-            padding: "5px",
-          },
-        }}
-      ></Chip>
-    </Tooltip>
-  );
-};

package/packages/shared-components/src/Chips/FilterPill.tsx

@@ -1,47 +0,0 @@
-import React, { forwardRef } from "react";
-import { Chip } from "../Chips";
-import { ClearIcon } from "@mui/x-date-pickers/icons";
-import { useTheme } from "@mui/material";
-
-type FilterPillProps = {
-  onDelete?: () => void;
-  label: React.ReactNode;
-  onClick?: (e: { currentTarget: HTMLDivElement | null }) => void;
-};
-
-export const FilterPill = forwardRef<HTMLDivElement, FilterPillProps>(
-  ({ onDelete, label, onClick }, ref) => {
-    const theme = useTheme();
-
-    const { black, sapphireBlue, iron } = theme.palette.app.color;
-
-    return (
-      <Chip
-        ref={ref}
-        label={label}
-        variant="filled"
-        deleteIcon={onDelete && <ClearIcon />}
-        sx={{
-          maxWidth: "200px",
-          borderRadius: "20px",
-          color: black[900],
-          backgroundColor: `${sapphireBlue[400]} !important`,
-          "&:hover": {
-            backgroundColor: sapphireBlue[500],
-          },
-          "& .MuiChip-deleteIcon": {
-            color: iron[800],
-            "&:hover": {
-              color: iron[900],
-              backgroundColor: sapphireBlue[400],
-            },
-          },
-        }}
-        onDelete={onDelete}
-        onClick={onClick}
-      />
-    );
-  }
-);
-
-FilterPill.displayName = "FilterPill";

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

@@ -1,3 +0,0 @@
-export * from "./Chip";
-export * from "./FilterPill";
-export * from "./ChipWithBorder";

package/packages/shared-components/src/Dialog/BottomDialog.styled.tsx

@@ -1,28 +0,0 @@
-import type { StyledComponent } from "@emotion/styled";
-import type { StackProps } from "@mui/material";
-import { Stack, styled } from "@mui/material";
-import type { DialogProps as MuiDialogProps } from "./Dialog";
-import { Dialog } from "./Dialog";
-
-export const BottomDialogStyled: StyledComponent<MuiDialogProps> = styled(
-  Dialog
-)({
-  height: "85%",
-  top: "auto",
-  "& .MuiDialogContent-root": {
-    display: "grid",
-    padding: "unset",
-  },
-  "& .MuiDialog-paper": {
-    borderTopLeftRadius: "12px",
-    borderTopRightRadius: "12px",
-  },
-});
-
-export const BottomDialogBody: StyledComponent<StackProps> = styled(Stack)(
-  () => ({
-    "& > *": {
-      flex: "1 1 auto",
-    },
-  })
-);

package/packages/shared-components/src/Dialog/BottomDialog.tsx

@@ -1,37 +0,0 @@
-import { BottomDialogBody, BottomDialogStyled } from "./BottomDialog.styled";
-
-import type { DialogProps } from ".";
-import { PadBox } from "../PadBox";
-
-export type BottomDialogProps = Omit<DialogProps, "title"> & {
-  title?: string;
-  open?: boolean;
-  onClose: () => void;
-};
-
-export function BottomDialog({
-  children,
-  title,
-  open = false,
-  onClose,
-  ...rest
-}: BottomDialogProps) {
-  return (
-    <BottomDialogStyled
-      fullScreen
-      title={title}
-      {...rest}
-      open={open}
-      onClose={onClose}
-      PaperProps={{
-        sx: {
-          animation: open ? "slideUp 0.2s cubic-bezier(0.25, 0.8, 0.5, 1)" : "",
-        },
-      }}
-    >
-      <BottomDialogBody direction="row" overflow="hidden">
-        <PadBox padding={{ padding: "1rem" }}>{children}</PadBox>
-      </BottomDialogBody>
-    </BottomDialogStyled>
-  );
-}

package/packages/shared-components/src/Dialog/DeleteDialog.tsx

@@ -1,48 +0,0 @@
-import InfoTwoToneIcon from "@mui/icons-material/InfoTwoTone";
-import { Stack, Typography } from "@mui/material";
-import { Button } from "../Button";
-import { Dialog } from "./Dialog";
-
-export type DeleteDialogProps = {
-  title: string;
-  open: boolean;
-  isDeleteLoading: boolean;
-  onDelete: () => void;
-  onClose: () => void;
-};
-
-export const DeleteDialog = ({
-  title,
-  open,
-  isDeleteLoading,
-  onDelete,
-  onClose,
-}: DeleteDialogProps) => {
-  return (
-    <Dialog
-      maxWidth="xs"
-      isHideCloseIcon={true}
-      isHideDividers={true}
-      open={open}
-      actions={
-        <Stack direction="row" gap="5px">
-          <Button onClick={onClose} variant="outlined">
-            Cancel
-          </Button>
-
-          <Button onClick={onDelete} color="error" loading={isDeleteLoading}>
-            Delete
-          </Button>
-        </Stack>
-      }
-    >
-      <Stack gap="10px" direction="row">
-        <InfoTwoToneIcon color="error" sx={{ mt: "1px" }} />
-
-        <Typography variant="subtitle1" fontWeight={700}>
-          {title}
-        </Typography>
-      </Stack>
-    </Dialog>
-  );
-};

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

@@ -1,61 +0,0 @@
-import HighlightOffIcon from "@mui/icons-material/HighlightOff";
-import {
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Dialog as MuiDialog,
-  Stack,
-  Typography,
-  type DialogProps as MuiDialogProps,
-} from "@mui/material";
-import type { PropsWithChildren, ReactNode } from "react";
-import { PadBox } from "../PadBox";
-
-export type DialogProps = PropsWithChildren<
-  MuiDialogProps & {
-    isHideCloseIcon?: boolean;
-    title?: string;
-    actions?: ReactNode;
-    isHideDividers?: boolean;
-  }
->;
-
-export const Dialog = ({
-  title,
-  isHideCloseIcon = false,
-  isHideDividers = false,
-  children,
-  onClose,
-  actions,
-  ...props
-}: DialogProps) => {
-  return (
-    <MuiDialog fullWidth {...props}>
-      <DialogTitle textAlign="center">
-        <Stack direction="row" alignItems="center">
-          <Typography variant="h5" fontWeight={500} flex={1}>
-            {title}
-          </Typography>
-
-          {!isHideCloseIcon && (
-            <IconButton
-              onClick={(event) => onClose && onClose(event, "escapeKeyDown")}
-              color="secondary"
-            >
-              <HighlightOffIcon fontSize="large" />
-            </IconButton>
-          )}
-        </Stack>
-      </DialogTitle>
-
-      <DialogContent dividers={!isHideDividers}>
-        <PadBox padding={{ padding: "10px" }}>{children}</PadBox>
-      </DialogContent>
-
-      {actions && (
-        <DialogActions sx={{ py: "16px", px: "24px" }}>{actions}</DialogActions>
-      )}
-    </MuiDialog>
-  );
-};

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

@@ -1,3 +0,0 @@
-export * from "./BottomDialog";
-export * from "./DeleteDialog";
-export * from "./Dialog";

package/packages/shared-components/src/Drawer/Bullet.tsx

@@ -1,12 +0,0 @@
-import CircleIcon from "@mui/icons-material/Circle";
-export const Bullet = () => {
-  return (
-    <CircleIcon
-      className="bullet-hover"
-      sx={{
-        fontSize: "7px",
-        borderRadius: "50%",
-      }}
-    />
-  );
-};