@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,217 @@
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { InputLabel, Stack, useTheme } from "@mui/material";
+import type { DatePickerProps as MuiDatePickerProps } from "@mui/x-date-pickers/DatePicker";
+import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
+import type { PickerValidDate } from "@mui/x-date-pickers/models";
+import { isFunction } from "lodash";
+import { DateTime } from "luxon";
+import React, { useState } from "react";
+import type {
+  FieldError,
+  FieldValues,
+  UseControllerProps,
+} from "react-hook-form";
+import { useController } from "react-hook-form";
+import { CalendarAction } from "../../Actions";
+import { Skeleton } from "./Skeleton";
+
+export type DatePickerProps<P extends FieldValues> = UseControllerProps<P> &
+  MuiDatePickerProps<PickerValidDate> &
+  Partial<{
+    label?: string;
+    required: boolean;
+    disabled: boolean;
+    format: string;
+    error: boolean;
+    helperText: string;
+    loading: boolean;
+    clearable?: boolean;
+    disableKeyboardInput?: boolean;
+    setError: (
+      name: keyof P,
+      error: FieldError | { type: string; message?: string }
+    ) => void;
+  }>;
+
+export const dateFormats = {
+  dateWithISO8601: "yyyy-MM-dd",
+  dateWithEuropean: "dd-MM-yyyy",
+};
+
+export const LeftArrowIcon: React.FC = () => {
+  const theme = useTheme();
+
+  const { iron } = theme.palette.app.color;
+
+  return (
+    <ChevronLeftIcon
+      sx={{
+        border: `1px solid ${iron[800]}`,
+        borderRadius: "5px",
+        p: "4px",
+      }}
+    />
+  );
+};
+
+export const RightArrowIcon: React.FC = () => {
+  const theme = useTheme();
+
+  const { iron } = theme.palette.app.color;
+
+  return (
+    <ChevronRightIcon
+      sx={{
+        border: `1px solid ${iron[800]}`,
+        borderRadius: "5px",
+        p: "4px",
+      }}
+    />
+  );
+};
+
+export function DatePicker<P extends FieldValues>({
+  setError,
+  control,
+  defaultValue,
+  disabled = false,
+  label,
+  readOnly = false,
+  name,
+  error = false,
+  helperText,
+  loading = false,
+  required = false,
+  clearable = true,
+  rules,
+  disableKeyboardInput = false,
+  format = dateFormats.dateWithEuropean,
+  ...restProps
+}: DatePickerProps<P>) {
+  const {
+    field: { value, onChange, ...restField },
+  } = useController({ name, control, defaultValue, rules });
+
+  const [open, setOpen] = useState(false);
+
+  const theme = useTheme();
+
+  const { iron, butterflyBlue, mirage } = theme.palette.app.color;
+
+  const finalValue = value ? DateTime.fromISO(value) : null;
+
+  if (loading) {
+    return <Skeleton label={label} />;
+  }
+
+  const EmptyIcon = () => null;
+
+  return (
+    <Stack gap="10px">
+      {label && <InputLabel required={required}>{label}</InputLabel>}
+
+      <MuiDatePicker<DateTime>
+        {...restField}
+        {...restProps}
+        disabled={disabled}
+        format={format}
+        value={finalValue}
+        readOnly={readOnly}
+        open={open && !readOnly}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        slotProps={{
+          field: {
+            clearable,
+            onClear: () => onChange(null),
+            readOnly: disableKeyboardInput,
+          },
+          clearButton: {
+            tabIndex: -1, // This will make the clear button skipped in the tab order
+          },
+          textField: {
+            disabled,
+            helperText,
+            error,
+            InputProps: {
+              endAdornment: (
+                <CalendarAction
+                  disabled={disabled}
+                  onClick={() => setOpen(true)}
+                />
+              ),
+              sx: {
+                "& .MuiInputAdornment-root": {
+                  width: "30px",
+                },
+              },
+            },
+            onKeyDown: (event) => {
+              if (!clearable && event.key === "Backspace") {
+                event.preventDefault();
+              }
+            },
+          },
+          day: {
+            sx: {
+              "&.MuiPickersDay-root": {
+                borderRadius: "5px",
+                borderColor: butterflyBlue[900],
+                fontWeight: 500,
+                color: mirage[900],
+              },
+              "&.MuiPickersDay-root.Mui-selected": {
+                backgroundColor: butterflyBlue[900],
+                color: iron[600],
+              },
+              "&.MuiPickersDay-today": {
+                color: butterflyBlue[900],
+                backgroundColor: iron[600],
+              },
+            },
+          },
+          calendarHeader: {
+            sx: {
+              "& .MuiPickersCalendarHeader-label": {
+                fontWeight: "bold",
+              },
+            },
+          },
+          yearButton: {
+            sx: {
+              "&.MuiPickersYear-yearButton.Mui-selected": {
+                backgroundColor: butterflyBlue[900],
+              },
+            },
+          },
+          monthButton: {
+            sx: {
+              "&.MuiPickersMonth-monthButton.Mui-selected": {
+                backgroundColor: butterflyBlue[900],
+              },
+            },
+          },
+        }}
+        slots={{
+          leftArrowIcon: LeftArrowIcon,
+          rightArrowIcon: RightArrowIcon,
+          switchViewIcon: EmptyIcon,
+        }}
+        dayOfWeekFormatter={(weekday) => `${weekday.toFormat("ccc")}`}
+        onChange={(value, details) => {
+          if (details.validationError) {
+            if (isFunction(setError)) {
+              setError(name, {
+                type: "manual",
+                message: "common.date.invalid",
+              });
+            }
+          } else if (value) {
+            onChange(value.toISODate());
+          }
+        }}
+      />
+    </Stack>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,97 @@
+import { InputLabel, Stack, Typography } from "@mui/material";
+import { useState } from "react";
+import { DateRangePicker as RdrDateRangePicker } from "react-date-range";
+import type { FieldValues, UseControllerProps } from "react-hook-form";
+import { useController } from "react-hook-form";
+import { Skeleton } from "./Skeleton";
+
+export type DateRangePickerProps<P extends FieldValues> =
+  UseControllerProps<P> & {
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
+    loading?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+  };
+
+export function DateRangePicker<P extends FieldValues>({
+  control,
+  defaultValue,
+  disabled = false,
+  label,
+  name,
+  error = false,
+  helperText,
+  loading = false,
+  required = false,
+  rules,
+}: DateRangePickerProps<P>) {
+  const {
+    field: { onChange },
+  } = useController({ name, control, defaultValue, rules });
+
+  const [range, setRange] = useState([
+    {
+      startDate: new Date(),
+      endDate: new Date(),
+      key: "selection",
+    },
+  ]);
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  return (
+    <Stack gap="10px">
+      {label && (
+        <InputLabel required={required} disabled={disabled}>
+          {label}
+        </InputLabel>
+      )}
+
+      <RdrDateRangePicker
+        ranges={range}
+        onChange={(ranges) => {
+          const selectedRange = ranges.selection;
+
+          if (
+            selectedRange?.endDate &&
+            selectedRange?.startDate &&
+            selectedRange?.key
+          ) {
+            setRange([
+              {
+                startDate: selectedRange.startDate,
+                endDate: selectedRange.endDate,
+                key: selectedRange.key,
+              },
+            ]);
+
+            const startDate = new Date(
+              selectedRange.startDate.toUTCString()
+            ).toISOString();
+
+            const endDate = new Date(
+              selectedRange.endDate.toUTCString()
+            ).toISOString();
+
+            onChange([startDate, endDate]);
+          }
+        }}
+        months={1}
+        direction="horizontal"
+        calendarFocus="backwards"
+        staticRanges={[]}
+        inputRanges={[]}
+        moveRangeOnFirstSelection={false}
+        preventSnapRefocus={true}
+      />
+
+      {error && <Typography color="red">{helperText}</Typography>}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+export const Skeleton = () => {
+  return (
+    <Stack direction="row" gap="10px">
+      <Stack gap="10px">
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+        <MuiSkeleton
+          height="40px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      </Stack>
+      <Stack gap="10px">
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+        <MuiSkeleton
+          height="40px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      </Stack>
+    </Stack>
+  );
+};

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

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

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

@@ -0,0 +1,253 @@
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { Box, InputLabel, Stack, Tooltip, useTheme } from "@mui/material";
+import type { DateTimePickerProps as MuiDateTimePickerProps } from "@mui/x-date-pickers/DateTimePicker";
+import { DateTimePicker as MuiDateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import type { PickerValidDate } from "@mui/x-date-pickers/models";
+import { DateTime } from "luxon";
+import React, { type ReactElement, useState } from "react";
+import type {
+  FieldError,
+  FieldValues,
+  Path,
+  PathValue,
+  UseControllerProps,
+} from "react-hook-form";
+import { useController } from "react-hook-form";
+import { CalendarAction } from "../../Actions";
+import { Skeleton } from "./Skeleton";
+
+export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> &
+  MuiDateTimePickerProps<PickerValidDate> &
+  Partial<{
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    format: string;
+    error: boolean;
+    helperText: string;
+    loading: boolean;
+    clearable?: boolean;
+    helperIcon?: ReactElement;
+    toolTipText?: string;
+    timeStepsMinutes?: number;
+    setError: (
+      name: keyof P,
+      error: FieldError | { type: string; message?: string }
+    ) => void;
+  }>;
+
+const LeftArrowIcon: React.FC = () => {
+  const theme = useTheme();
+
+  const { iron } = theme.palette.app.color;
+
+  return (
+    <ChevronLeftIcon
+      sx={{
+        border: `1px solid ${iron[800]}`,
+        borderRadius: "5px",
+        p: "4px",
+      }}
+    />
+  );
+};
+
+const RightArrowIcon: React.FC = () => {
+  const theme = useTheme();
+
+  const { iron } = theme.palette.app.color;
+
+  return (
+    <ChevronRightIcon
+      sx={{
+        border: `1px solid ${iron[800]}`,
+        borderRadius: "5px",
+        p: "4px",
+      }}
+    />
+  );
+};
+
+export function DateTimePicker<P extends FieldValues>({
+  control,
+  defaultValue,
+  disabled = false,
+  label,
+  readOnly = false,
+  name,
+  error = false,
+  helperText,
+  loading = false,
+  required = false,
+  clearable = true,
+  rules,
+  format = "dd-MM-yyyy HH:mm",
+  helperIcon,
+  toolTipText,
+  timeStepsMinutes = 1,
+  ...restProps
+}: DateTimePickerProps<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 { iron, butterflyBlue, mirage } = theme.palette.app.color;
+
+  const pickerValue = value
+    ? // eslint-disable-next-line sonarjs/no-nested-conditional
+      (DateTime.fromISO(value) as PathValue<P, Path<P> & (string | undefined)>)
+    : null;
+
+  if (loading) {
+    return (
+      <Box sx={{ width: "350px" }}>
+        <Skeleton label={label} />
+      </Box>
+    );
+  }
+
+  const EmptyIcon = () => null;
+
+  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>
+      )}
+      <MuiDateTimePicker<DateTime>
+        {...restField}
+        {...restProps}
+        disabled={disabled}
+        readOnly={readOnly}
+        open={open}
+        ampm={false}
+        value={pickerValue}
+        timeSteps={{ minutes: timeStepsMinutes }}
+        format={format}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        slotProps={{
+          field: {
+            clearable,
+            onClear: () => onChange(null),
+          },
+          clearButton: {
+            tabIndex: -1,
+          },
+          textField: {
+            disabled,
+            helperText,
+            error,
+            InputProps: {
+              endAdornment: <CalendarAction onClick={() => setOpen(true)} />,
+              sx: {
+                "& .MuiInputAdornment-root": {
+                  width: "30px",
+                },
+              },
+            },
+          },
+          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",
+              },
+            },
+          },
+          day: {
+            sx: {
+              "&.MuiPickersDay-root": {
+                borderRadius: "5px",
+                borderColor: butterflyBlue[900],
+                fontWeight: 500,
+                color: mirage[900],
+              },
+              "&.MuiPickersDay-root.Mui-selected": {
+                backgroundColor: butterflyBlue[900],
+                color: iron[600],
+              },
+              "&.MuiPickersDay-today": {
+                color: butterflyBlue[900],
+                backgroundColor: iron[600],
+              },
+              ":focus": {
+                backgroundColor: "transparent",
+              },
+            },
+          },
+          calendarHeader: {
+            sx: {
+              "& .MuiPickersCalendarHeader-label": {
+                fontWeight: "bold",
+              },
+            },
+          },
+          yearButton: {
+            sx: {
+              "&.MuiPickersYear-yearButton.Mui-selected": {
+                backgroundColor: butterflyBlue[900],
+              },
+            },
+          },
+        }}
+        slots={{
+          leftArrowIcon: LeftArrowIcon,
+          rightArrowIcon: RightArrowIcon,
+          switchViewIcon: EmptyIcon,
+        }}
+        shouldDisableTime={() => !pickerValue}
+        onChange={(value) => {
+          if (value?.isValid) {
+            return onChange(value.toUTC().toISO());
+          }
+
+          onChange(value);
+        }}
+      />
+    </Stack>
+  );
+}

package/packages/shared-components/src/FormFields/DateTimePicker/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/DateTimePicker/index.ts

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

package/packages/shared-components/src/FormFields/FileUpload/FileNames.tsx

@@ -0,0 +1,32 @@
+import { AttachFile } from "@mui/icons-material";
+import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import { IconButton, Stack, Typography } from "@mui/material";
+import { v4 as uuidv4 } from "uuid";
+
+type FileNamesProps = {
+  names: string[];
+  onDelete: (index: number) => void;
+};
+
+export const FileNames = ({ names, onDelete }: FileNamesProps) => {
+  return names.map((name: string, index: number) => {
+    return (
+      <Stack
+        key={uuidv4()}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack direction="row" gap="8x">
+          <AttachFile />
+
+          <Typography>{name}</Typography>
+        </Stack>
+
+        <IconButton onClick={() => onDelete(index)}>
+          <DeleteOutlineOutlinedIcon />
+        </IconButton>
+      </Stack>
+    );
+  });
+};