@codezee/sixtify-brahma 0.2.6 → 0.2.7

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

@@ -1,51 +0,0 @@
-import { Box, Skeleton, Stack, Typography } from "@mui/material";
-import { PadBox } from "../PadBox";
-import { SvgsIndicator } from "../Svgs/SvgsIndicator";
-import { getColorByVariant, type WorkDayType } from "../utils/colorVariant";
-
-type AttendanceCardProps = {
-  variant: WorkDayType;
-  label: string;
-  value: string;
-  isLoading: boolean;
-};
-export const AttendanceCard = ({
-  variant,
-  label,
-  value,
-  isLoading = false,
-}: AttendanceCardProps) => {
-  return (
-    <Box
-      sx={{
-        width: "223px",
-        height: "93px",
-        borderRadius: "8px",
-        border: `1px solid ${getColorByVariant(variant)}`,
-        backgroundColor: `${getColorByVariant(variant, "light")}`,
-        position: "relative",
-      }}
-    >
-      <PadBox padding={{ padding: "15px" }}>
-        <Stack gap="15px">
-          <Typography>{label}</Typography>
-          {isLoading ? (
-            <Skeleton
-              width={80}
-              height={25}
-              sx={{
-                transform: "scale(1)",
-                borderRadius: "4px",
-              }}
-            />
-          ) : (
-            <Typography variant="h6">{value}</Typography>
-          )}
-        </Stack>
-        <Box sx={{ position: "absolute", top: "0px", right: "5px" }}>
-          <SvgsIndicator variant={variant} />
-        </Box>
-      </PadBox>
-    </Box>
-  );
-};

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

@@ -1,34 +0,0 @@
-import { Box, Stack, Typography, useTheme } from "@mui/material";
-import type { PropsWithChildren, ReactNode } from "react";
-import { PadBox } from "../PadBox";
-
-type CardProps = PropsWithChildren<{
-  heading?: ReactNode;
-  action?: ReactNode;
-}>;
-
-export function Card({ heading, children, action }: Readonly<CardProps>) {
-  const theme = useTheme();
-
-  const { lightBlue } = theme.palette.app.color;
-
-  return (
-    <Box bgcolor={lightBlue[50]} flex={1} sx={{ borderRadius: "5px" }}>
-      <PadBox padding={{ padding: 2 }}>
-        <Stack gap="10px">
-          <Stack
-            flexDirection="row"
-            alignItems="center"
-            justifyContent="space-between"
-          >
-            <Typography variant="h6">{heading}</Typography>
-
-            <Box>{action}</Box>
-          </Stack>
-
-          {children}
-        </Stack>
-      </PadBox>
-    </Box>
-  );
-}

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

@@ -1,33 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import type { ReactNode } from "react";
-
-type CardItemProps = Readonly<{
-  label: ReactNode;
-  value?: ReactNode;
-}>;
-
-export function CardItem({ label, value }: CardItemProps) {
-  return (
-    <Stack
-      direction="row"
-      justifyContent="space-between"
-      alignItems="center"
-      gap="5px"
-    >
-      {typeof label === "string" ? (
-        <Typography
-          variant="body1"
-          sx={{ fontWeight: 500 }}
-          flex={1}
-          maxWidth="400px"
-        >
-          {label} :
-        </Typography>
-      ) : (
-        <> {label} :</>
-      )}
-
-      {value}
-    </Stack>
-  );
-}

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: "10px" }}>
-        <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 { Box, Stack } from "@mui/material";
-import type { PropsWithChildren } from "react";
-import { PadBox } from "../../../PadBox";
-import { SvgEmail } from "../../../Svgs/SvgEmail";
-import { SvgPhone } from "../../../Svgs/SvgPhone";
-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={<SvgEmail />}
-            value={<CardItemValue title={email} loading={loading} />}
-          />
-          <CardItem
-            label={<SvgPhone />}
-            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="500"
-            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,81 +0,0 @@
-import { styled } from "@mui/material/styles";
-import type { PieSeriesType, PieValueType } from "@mui/x-charts";
-import { useDrawingArea } from "@mui/x-charts/hooks";
-import type { MakeOptional } from "@mui/x-charts/internals";
-import type { PieChartProps as MuiPieChartProps } from "@mui/x-charts/PieChart";
-import { PieChart as MuiPieChart } from "@mui/x-charts/PieChart";
-import type { ReactNode } from "react";
-import { Skeleton } from "./Skeleton";
-
-type PieChartProps = Omit<MuiPieChartProps, "series"> & {
-  series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, "id">>, "type">;
-  label?: string;
-  valueFormatter?: (item: { value: number }) => string;
-  loading?: boolean;
-};
-
-type PieCenterLabelProps = {
-  children: ReactNode;
-};
-
-export const PieChart = ({
-  height = 235,
-  skipAnimation = false,
-  loading = false,
-  valueFormatter = (item: MakeOptional<PieValueType, "id">) => `${item.value}%`,
-  tooltip,
-  label,
-  series,
-  ...rest
-}: PieChartProps) => {
-  const StyledText = styled("text")(({ theme }) => ({
-    fill: theme.palette.text.primary,
-    textAnchor: "middle",
-    dominantBaseline: "central",
-    fontSize: 20,
-  }));
-
-  const outerRadius = Number(series.outerRadius ?? 0);
-
-  const innerRadius = Number(series.innerRadius ?? 0);
-
-  const radius = outerRadius - innerRadius;
-
-  // 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>
-    );
-  };
-
-  if (loading) {
-    return <Skeleton height={height} radius={radius} />;
-  }
-
-  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/Skeleton.tsx

@@ -1,36 +0,0 @@
-import { Box, Skeleton as MuiSkeleton } from "@mui/material";
-
-export const Skeleton = ({
-  height = 235,
-  radius = 18,
-}: {
-  height?: string | number;
-  radius?: number;
-}) => {
-  return (
-    <Box position="relative" display="flex" justifyContent="center">
-      <MuiSkeleton
-        sx={{
-          transform: "unset",
-          width: "162px",
-          height: { height },
-          borderRadius: "50%",
-          border: `${radius}px solid #e0e0e0`,
-          background: "transparent",
-          boxSizing: "border-box",
-        }}
-      />
-
-      <MuiSkeleton
-        sx={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          width: "80px",
-          height: "25px",
-        }}
-      />
-    </Box>
-  );
-};

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",
-    },
-  })
-);