@codezee/sixtify-brahma 0.2.3 → 0.2.6

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

@@ -0,0 +1,33 @@
+import {
+  useController,
+  type ControllerRenderProps,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import type { SwitchProps } from "@mui/material";
+import { Switch as MuiSwitch } from "@mui/material";
+import { Skeleton } from "./Skeleton";
+
+export type SwitchFieldProps<P extends FieldValues> = UseControllerProps<P> &
+  Omit<Omit<SwitchProps, "checked">, keyof ControllerRenderProps<P>> & {
+    loading?: boolean;
+  };
+
+export function Switch<P extends FieldValues>({
+  name,
+  rules,
+  control,
+  defaultValue,
+  loading = false,
+  ...restSwitchProps
+}: SwitchFieldProps<P>) {
+  const {
+    field: { value = false, ...restField },
+  } = useController({ name, control, defaultValue, rules });
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  return <MuiSwitch checked={value} {...restField} {...restSwitchProps} />;
+}

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

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

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

@@ -0,0 +1,31 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+type SkeletonProps = {
+  rows?: number;
+  label?: string;
+};
+
+export const Skeleton = ({ rows, label }: SkeletonProps) => {
+  const height: number = rows === undefined ? 40 : rows * 23;
+
+  return (
+    <Stack gap="10px">
+      {label && (
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      )}
+
+      <MuiSkeleton
+        height={`${height}px`}
+        sx={{
+          transform: "scale(1)",
+        }}
+      />
+    </Stack>
+  );
+};

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

@@ -0,0 +1,92 @@
+import {
+  InputLabel,
+  TextField as MuiTextField,
+  Stack,
+  type TextFieldProps as MuiTextFieldProps,
+} from "@mui/material";
+import type { KeyboardEvent } from "react";
+import {
+  useController,
+  type ControllerRenderProps,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import { Skeleton } from "./Skeleton";
+
+export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> &
+  Omit<MuiTextFieldProps, keyof ControllerRenderProps<P>> & {
+    label?: string;
+    loading?: boolean;
+    rows?: number;
+    isCapitalize?: boolean;
+    isTrimStartDisabled?: boolean;
+  };
+
+export function TextField<P extends FieldValues>({
+  control,
+  name,
+  defaultValue,
+  label = "",
+  rules,
+  type,
+  required,
+  disabled,
+  loading = false,
+  placeholder = "",
+  isCapitalize = false,
+  isTrimStartDisabled = false,
+  rows,
+  ...inputFieldProps
+}: TextFieldProps<P>) {
+  const {
+    field: { value, onChange, ...restField },
+  } = useController({ name, control, defaultValue, rules });
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "-" && type === "number") {
+      event.preventDefault();
+    }
+  };
+
+  if (loading) {
+    return <Skeleton label={label} rows={rows} />;
+  }
+
+  return (
+    <Stack gap="10px">
+      {label && <InputLabel required={required}>{label}</InputLabel>}
+
+      <MuiTextField
+        disabled={disabled}
+        required={required}
+        fullWidth
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder || label}
+        type={type}
+        inputProps={{
+          min: 0,
+        }}
+        onChange={(event) => {
+          let value = event.target.value || null;
+
+          if (typeof value === "string" && value.trim() === "") {
+            value = null;
+          } else if (!isTrimStartDisabled && typeof value === "string") {
+            value = value.trimStart();
+          }
+
+          if (value && type === "number") {
+            onChange(Number(value));
+          } else if (isCapitalize) {
+            onChange(value ? value?.toUpperCase() : null);
+          } else {
+            onChange(value);
+          }
+        }}
+        value={typeof value === "string" ? value.trimStart() : (value ?? "")}
+        {...restField}
+        {...inputFieldProps}
+      />
+    </Stack>
+  );
+}

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

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

package/packages/shared-components/src/FormFields/TimeField/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/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,13 @@
+export * from "./Autocomplete";
+export * from "./CheckBox";
+export * from "./DatePicker";
+export * from "./FileUpload";
+export * from "./ImageUpload";
+export * from "./ListItemButton";
+export * from "./PasswordField";
+export * from "./RadioGroupField";
+export * from "./SearchField";
+export * from "./TextField";
+export * from "./TimePicker";
+export * from "./TimeField";
+export * from "./DateRangePicker";

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,39 @@
+import { Stack } from "@mui/material";
+import { styled } from "@mui/material/styles";
+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%";
+}
+
+export const RowContainerStyled = styled(Stack, {
+  shouldForwardProp(prop) {
+    return prop !== "fullWidth";
+  },
+})<{ 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";