@codezee/sixtify-brahma 0.0.0

package/packages/shared-components/src/FormFields/TimeField/TimeField.tsx

@@ -0,0 +1,120 @@
+import { InputLabel, Stack, useTheme } from "@mui/material";
+import {
+  TimeField as MuiTimeField,
+  type TimeFieldProps as MuiTimeFieldProps,
+} from "@mui/x-date-pickers/TimeField";
+import { DateTime } from "luxon";
+import type {
+  FieldValues,
+  Path,
+  PathValue,
+  UseControllerProps,
+} from "react-hook-form";
+import { useController } from "react-hook-form";
+import type { PickerValidDate } from "@mui/x-date-pickers/models";
+import { Skeleton } from "./Skeleton";
+
+export type TimeFieldProps<P extends FieldValues> = UseControllerProps<P> &
+  MuiTimeFieldProps<PickerValidDate> &
+  Partial<{
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    error: boolean;
+    helperText: string;
+    loading: boolean;
+    format: string;
+    isReturnLocalTime: boolean;
+    isReturnDateWithTime: boolean;
+  }>;
+
+export function TimeField<P extends FieldValues>({
+  control,
+  defaultValue,
+  disabled = false,
+  label,
+  name,
+  error,
+  helperText,
+  loading = false,
+  required = false,
+  rules,
+  format = "HH:mm",
+  isReturnLocalTime = false,
+  isReturnDateWithTime = false,
+  ...restProps
+}: TimeFieldProps<P>) {
+  const {
+    field: { value, onChange, ...restField },
+  } = useController({ name, control, defaultValue, rules });
+
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  if (error && value && typeof value === "object") {
+    helperText = "Invalid time";
+  }
+
+  const pickerValue = value
+    ? (DateTime.fromISO(value) as PathValue<P, Path<P> & (string | undefined)>)
+    : null;
+
+  if (loading) {
+    return <Skeleton label={label} />;
+  }
+
+  return (
+    <Stack gap="10px">
+      {label && (
+        <InputLabel required={required} disabled={disabled}>
+          {label}
+        </InputLabel>
+      )}
+      <MuiTimeField<DateTime>
+        {...restField}
+        {...restProps}
+        disabled={disabled}
+        value={pickerValue}
+        onChange={(value) => {
+          if (value?.isValid) {
+            if (isReturnLocalTime) {
+              return onChange(value.toFormat(format));
+            }
+
+            if (isReturnDateWithTime) {
+              return onChange(value.toUTC().toISO());
+            }
+
+            onChange(value.toUTC().toISOTime());
+          } else {
+            onChange(value);
+          }
+        }}
+        slotProps={{
+          textField: {
+            disabled,
+            helperText,
+            error,
+            sx: {
+              backgroundColor: "white",
+              "& .Mui-selected": {
+                backgroundColor: butterflyBlue[900],
+                borderRadius: "5px",
+              },
+            },
+          },
+        }}
+        format={format}
+        helperText={helperText}
+        sx={{
+          backgroundColor: "white",
+          "& .Mui-selected": {
+            backgroundColor: butterflyBlue[900],
+            borderRadius: "5px",
+          },
+        }}
+      />
+    </Stack>
+  );
+}

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

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

package/packages/shared-components/src/FormFields/TimePicker/Skeleton.tsx

@@ -0,0 +1,24 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+export const Skeleton = ({ label }: { label?: string }) => {
+  return (
+    <Stack gap="10px" flex={1}>
+      {label && (
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      )}
+      <MuiSkeleton
+        height="40px"
+        width="100%"
+        sx={{
+          transform: "scale(1)",
+        }}
+      />
+    </Stack>
+  );
+};

package/packages/shared-components/src/FormFields/TimePicker/TimePicker.tsx

@@ -0,0 +1,168 @@
+import { InputLabel, Stack, Tooltip, useTheme } from "@mui/material";
+import type { TimePickerProps as MuiTimePickerProps } from "@mui/x-date-pickers/TimePicker";
+import { TimePicker as MuiTimePicker } from "@mui/x-date-pickers/TimePicker";
+import type { PickerValidDate } from "@mui/x-date-pickers/models";
+import { DateTime } from "luxon";
+import { type ReactElement, useState } from "react";
+import type {
+  FieldValues,
+  Path,
+  PathValue,
+  UseControllerProps,
+} from "react-hook-form";
+import { useController } from "react-hook-form";
+import { Skeleton } from "./Skeleton";
+
+export type TimePickerProps<P extends FieldValues> = UseControllerProps<P> &
+  MuiTimePickerProps<PickerValidDate> &
+  Partial<{
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    format: string;
+    error: boolean;
+    helperText: string;
+    loading: boolean;
+    isReturnLocalTime: boolean;
+    isReturnDateWithTime: boolean;
+    helperIcon?: ReactElement;
+    toolTipText?: string;
+    timeStepsMinutes?: number;
+  }>;
+
+export function TimePicker<P extends FieldValues>({
+  control,
+  defaultValue,
+  disabled = false,
+  label,
+  readOnly = false,
+  name,
+  error = false,
+  helperText,
+  loading = false,
+  required = false,
+  rules,
+  format = "HH:mm",
+  isReturnLocalTime = false,
+  isReturnDateWithTime = false,
+  timeStepsMinutes = 1,
+  helperIcon,
+  toolTipText,
+  ...restProps
+}: TimePickerProps<P>) {
+  const {
+    field: { value, onChange, ...restField },
+  } = useController({ name, control, defaultValue, rules });
+
+  const [open, setOpen] = useState(false);
+
+  if (error && value && typeof value === "object") {
+    helperText = "Invalid time";
+  }
+
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  const pickerValue = value
+    ? (DateTime.fromISO(value) as PathValue<P, Path<P> & (string | undefined)>)
+    : null;
+
+  if (loading) {
+    return <Skeleton label={label} />;
+  }
+
+  return (
+    <Stack gap="10px">
+      {label && (
+        <Stack alignItems="center" flexDirection="row" gap="5px">
+          <InputLabel required={required} disabled={disabled}>
+            {label}
+          </InputLabel>
+          {helperIcon && toolTipText && (
+            <Tooltip title={toolTipText} placement="bottom">
+              {helperIcon}
+            </Tooltip>
+          )}
+        </Stack>
+      )}
+
+      <MuiTimePicker<DateTime>
+        {...restField}
+        {...restProps}
+        disabled={disabled}
+        readOnly={readOnly}
+        open={open}
+        ampm={false}
+        value={pickerValue}
+        format={format}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        timeSteps={{ minutes: timeStepsMinutes }}
+        slotProps={{
+          textField: {
+            disabled,
+            helperText,
+            error,
+            sx: {
+              backgroundColor: "white",
+              "& .Mui-selected": {
+                backgroundColor: butterflyBlue[900],
+                borderRadius: "5px",
+              },
+            },
+          },
+          popper: {
+            sx: {
+              "& .MuiMultiSectionDigitalClockSection-root::after": {
+                display: "unset",
+              },
+              "& .MuiList-padding": {
+                padding: "10px",
+              },
+              "& .MuiMultiSectionDigitalClockSection-item": {
+                padding: "4px",
+              },
+              "& .MuiMultiSectionDigitalClockSection-item.Mui-selected": {
+                backgroundColor: butterflyBlue[900],
+                borderRadius: "5px",
+              },
+              "& .MuiMultiSectionDigitalClockSection-item.Mui-selected:hover": {
+                backgroundColor: butterflyBlue[900],
+                borderRadius: "5px",
+              },
+              "& .Mui-selected:hover": {
+                backgroundColor: butterflyBlue[900],
+                borderRadius: "5px",
+              },
+              "& .MuiMultiSectionDigitalClockSection-item.Mui-selected:focus-visible":
+                {
+                  backgroundColor: butterflyBlue[900],
+                  borderRadius: "5px",
+                },
+              "& .Mui-selected:focus-visible": {
+                backgroundColor: butterflyBlue[900],
+                borderRadius: "5px",
+              },
+            },
+          },
+        }}
+        onChange={(value) => {
+          if (value?.isValid) {
+            if (isReturnLocalTime) {
+              return onChange(value.toFormat(format));
+            }
+
+            if (isReturnDateWithTime) {
+              return onChange(value.toUTC().toISO());
+            }
+
+            onChange(value.toUTC().toISOTime());
+          } else {
+            onChange(value);
+          }
+        }}
+      />
+    </Stack>
+  );
+}

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

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

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

@@ -0,0 +1,16 @@
+export * from "./Autocomplete";
+export * from "./CheckBox";
+export * from "./DatePicker";
+export * from "./DateRangePicker";
+export * from "./DateTimePicker";
+export * from "./FileUpload";
+export * from "./ImageUpload";
+export * from "./ListItemButton";
+export * from "./PasswordField";
+export * from "./PhoneInputField";
+export * from "./RadioGroupField";
+export * from "./SearchField";
+export * from "./Switch";
+export * from "./TextField";
+export * from "./TimeField";
+export * from "./TimePicker";

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

@@ -0,0 +1,18 @@
+import { Stack } from "@mui/material";
+import { SvgsIndicator } from "../Svgs/SvgsIndicator";
+import { type WorkDayType } from "../utils/colorVariant";
+
+type IndicatorProps = {
+  label?: string;
+  variant?: WorkDayType;
+  colourCode?: string;
+};
+
+export const Indicator = ({ label, variant, colourCode }: IndicatorProps) => {
+  return (
+    <Stack gap="10px" direction="row" alignItems="center">
+      <SvgsIndicator variant={variant} colourCode={colourCode} />
+      {label}
+    </Stack>
+  );
+};

package/packages/shared-components/src/Indicator/SeverityIndicator.tsx

@@ -0,0 +1,34 @@
+import { alpha, Box, Stack, Typography } from "@mui/material";
+import { PadBox } from "../PadBox";
+import CircleIcon from "@mui/icons-material/Circle";
+
+type SeverityIndicatorProps = {
+  label: string;
+  color: string;
+  isBackground: boolean;
+};
+
+export const SeverityIndicator = ({
+  color,
+  label,
+  isBackground = false,
+}: SeverityIndicatorProps) => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: `${isBackground ? alpha(color, 0.2) : ""}`,
+        width: "max-content",
+        borderRadius: "6px",
+      }}
+    >
+      <PadBox padding={{ padding: "5px", paddingX: "8px" }}>
+        <Stack flexDirection="row" alignItems="center" gap="8px">
+          <CircleIcon sx={{ color, fontSize: "12px" }} />
+          <Typography variant="body2" sx={{ fontWeight: 500 }}>
+            {label}
+          </Typography>
+        </Stack>
+      </PadBox>
+    </Box>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from "./Indicator";
+export * from "./SeverityIndicator";

package/packages/shared-components/src/Layouts/FormContainer.tsx

@@ -0,0 +1,6 @@
+import { Stack } from "@mui/material";
+import type { PropsWithChildren } from "react";
+
+export const FormContainer = ({ children }: PropsWithChildren) => {
+  return <Stack gap="30px">{children}</Stack>;
+};

package/packages/shared-components/src/Layouts/FormGridLayout.tsx

@@ -0,0 +1,27 @@
+import { Grid } from "@mui/material";
+import { Children, type ReactNode } from "react";
+
+type FormGridLayoutProps = {
+  children: ReactNode;
+  columns?: number;
+};
+
+export const FormGridLayout = ({
+  children,
+  columns = 3,
+}: FormGridLayoutProps) => {
+  return (
+    <Grid container spacing={2}>
+      {Children.map(
+        children,
+        (child, index) =>
+          child && (
+            // eslint-disable-next-line sonarjs/no-array-index-key
+            <Grid item xs={12 / columns} key={index}>
+              {child}
+            </Grid>
+          )
+      )}
+    </Grid>
+  );
+};

package/packages/shared-components/src/Layouts/FormRow/FormRow.styled.tsx

@@ -0,0 +1,47 @@
+import type { StackProps } from "@mui/material";
+import { Stack } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import type { ComponentType } from "react";
+import { Children } from "react";
+
+function calculateWidth(
+  childrenCount: number,
+  fullWidth: boolean,
+  maxColumn: number
+) {
+  if (maxColumn <= 2 && childrenCount <= 2 && !fullWidth) {
+    return "calc(50% - 10px)";
+  }
+
+  if (childrenCount <= 3 && !fullWidth) {
+    return "calc(33% - 20px)";
+  }
+
+  return "100%";
+}
+
+type RowContainerStyledProps = StackProps & {
+  fullWidth: boolean;
+  maxColumn: number;
+};
+
+export const RowContainerStyled: ComponentType<RowContainerStyledProps> =
+  styled(Stack, {
+    shouldForwardProp(prop) {
+      return prop !== "fullWidth" && prop !== "maxColumn";
+    },
+  })<{ fullWidth: boolean; maxColumn: number }>(({
+    children,
+    fullWidth,
+    maxColumn,
+  }) => {
+    const childrenCount = Children.toArray(children).length;
+
+    const flexBasis = calculateWidth(childrenCount, fullWidth, maxColumn);
+
+    return {
+      "& > *": {
+        flexBasis,
+      },
+    };
+  });

package/packages/shared-components/src/Layouts/FormRow/FormRow.tsx

@@ -0,0 +1,20 @@
+import type { PropsWithChildren } from "react";
+import { RowContainerStyled } from "./FormRow.styled";
+
+export const FormRow = ({
+  children,
+  fullWidth = false,
+  maxColumn = 3,
+}: PropsWithChildren<{ fullWidth?: boolean; maxColumn?: number }>) => {
+  return (
+    <RowContainerStyled
+      direction="row"
+      flexWrap="wrap"
+      gap="20px"
+      fullWidth={fullWidth}
+      maxColumn={maxColumn}
+    >
+      {children}
+    </RowContainerStyled>
+  );
+};

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

@@ -0,0 +1 @@
+export { FormRow } from "./FormRow";

package/packages/shared-components/src/Layouts/FormSection.tsx

@@ -0,0 +1,22 @@
+import { Stack, Typography } from "@mui/material";
+import type { PropsWithChildren } from "react";
+import { PadBox } from "../PadBox";
+
+export const FormSection = ({
+  title,
+  children,
+}: PropsWithChildren<{ title?: string }>) => {
+  return (
+    <Stack gap="15px">
+      {title && (
+        <Typography fontWeight={700} variant="h5">
+          {title}
+        </Typography>
+      )}
+
+      <PadBox padding={{ padding: "20px" }}>
+        <Stack gap="15px">{children}</Stack>
+      </PadBox>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from "./FormContainer";
+export * from "./FormGridLayout";
+export * from "./FormRow";
+export * from "./FormSection";

package/packages/shared-components/src/Loader/FacebookCircularProgress.tsx

@@ -0,0 +1,41 @@
+import {
+  Box,
+  CircularProgress,
+  circularProgressClasses,
+  type CircularProgressProps,
+} from "@mui/material";
+
+export function FacebookCircularProgress(
+  props: Readonly<CircularProgressProps>
+) {
+  return (
+    <Box sx={{ position: "relative" }}>
+      <CircularProgress
+        variant="determinate"
+        sx={{
+          color: (theme) => theme.palette.grey[200],
+        }}
+        size={40}
+        thickness={4}
+        {...props}
+        value={100}
+      />
+      <CircularProgress
+        variant="indeterminate"
+        disableShrink
+        sx={{
+          color: (theme) => theme.palette.app?.color.butterflyBlue[900],
+          animationDuration: "400ms",
+          position: "absolute",
+          left: 0,
+          [`& .${circularProgressClasses.circle}`]: {
+            strokeLinecap: "round",
+          },
+        }}
+        size={40}
+        thickness={4}
+        {...props}
+      />
+    </Box>
+  );
+}

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

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

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

@@ -0,0 +1,21 @@
+import { Box, type SxProps } from "@mui/material";
+import type { PropsWithChildren } from "react";
+
+export const PadBox = ({
+  children,
+  padding,
+}: PropsWithChildren<{ padding: SxProps }>) => {
+  return (
+    <Box
+      sx={{
+        ...padding,
+        height: "inherit",
+        boxSizing: "border-box",
+        width: "100%",
+      }}
+      id="pad-box"
+    >
+      {children}
+    </Box>
+  );
+};

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

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

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

@@ -0,0 +1,42 @@
+import {
+  TablePagination,
+  type TablePaginationProps,
+  useTheme,
+} from "@mui/material";
+
+export const Pagination = ({
+  count,
+  page,
+  onPageChange,
+  rowsPerPage,
+  onRowsPerPageChange,
+  ...rest
+}: TablePaginationProps) => {
+  const theme = useTheme();
+
+  const { grey } = theme.palette;
+
+  return (
+    <TablePagination
+      sx={{
+        "& .MuiInputBase-root": {
+          paddingRight: "10px",
+        },
+        "& .MuiTablePagination-select": {
+          backgroundColor: "transparent !important",
+        },
+        "& .MuiTablePagination-input": {
+          border: `1.5px solid ${grey[400]}`,
+          borderRadius: "5px",
+        },
+      }}
+      component="div"
+      count={count}
+      page={page}
+      onPageChange={onPageChange}
+      rowsPerPage={rowsPerPage}
+      onRowsPerPageChange={onRowsPerPageChange}
+      {...rest}
+    />
+  );
+};

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

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