@codezee/sixtify-brahma 0.1.1

package/packages/shared-components/src/FormFields/CheckBox/CheckBox.styled.tsx

@@ -0,0 +1,67 @@
+import { Check } from "@mui/icons-material";
+import type { CSSObject, CheckboxProps } from "@mui/material";
+import { Box, styled } from "@mui/material";
+
+export const BoxStyled = styled(Box)<{ size: CheckboxProps["size"] }>(({
+  theme,
+  size,
+}) => {
+  const { color } = theme.palette.app;
+
+  const checkBoxSize =
+    size === "small"
+      ? {
+          width: "14px",
+          height: "14px",
+        }
+      : {
+          width: "20px",
+          height: "20px",
+        };
+
+  const style: CSSObject = {
+    ...checkBoxSize,
+    borderRadius: "4px",
+    border: `2px solid ${color.iron[900]}`,
+    "input:hover ~ &": {
+      borderColor: color.butterflyBlue[900],
+    },
+    "input:disabled ~ &": {
+      borderColor: color.iron[800],
+    },
+  };
+
+  return style;
+});
+
+export const CheckStyled = styled(Check)<{ size: CheckboxProps["size"] }>(({
+  theme,
+  size,
+}) => {
+  const { color } = theme.palette.app;
+
+  const checkBoxSize =
+    size === "small"
+      ? {
+          width: "14px",
+          height: "14px",
+        }
+      : {
+          width: "20px",
+          height: "20px",
+        };
+
+  const style: CSSObject = {
+    ...checkBoxSize,
+    border: `2px solid ${color.butterflyBlue[900]}`,
+    borderRadius: "4px",
+    color: color.iron[600],
+    backgroundColor: color.butterflyBlue[900],
+    "input:disabled ~ &": {
+      borderColor: color.iron[800],
+      backgroundColor: color.iron[800],
+    },
+  };
+
+  return style;
+});

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

@@ -0,0 +1,44 @@
+import Checkbox, {
+  type CheckboxProps as MuiCheckboxProps,
+} from "@mui/material/Checkbox";
+import {
+  useController,
+  type ControllerRenderProps,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import { BoxStyled, CheckStyled } from "./CheckBox.styled";
+import { Skeleton } from "./Skeleton";
+
+export type CheckBoxProps<P extends FieldValues> = UseControllerProps<P> &
+  Omit<Omit<MuiCheckboxProps, "checked">, keyof ControllerRenderProps<P>> & {
+    loading?: boolean;
+  };
+
+export function CheckBox<P extends FieldValues>({
+  name,
+  rules,
+  control,
+  defaultValue,
+  size,
+  loading = false,
+  ...restCheckBoxProps
+}: CheckBoxProps<P>) {
+  const {
+    field: { value = false, ...restField },
+  } = useController({ name, control, defaultValue, rules });
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  return (
+    <Checkbox
+      icon={<BoxStyled size={size} />}
+      checkedIcon={<CheckStyled size={size} />}
+      checked={value}
+      {...restField}
+      {...restCheckBoxProps}
+    />
+  );
+}

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

@@ -0,0 +1,12 @@
+import { Skeleton as MuiSkeleton } from "@mui/material";
+
+export const Skeleton = () => {
+  return (
+    <MuiSkeleton
+      width={30}
+      height={30}
+      sx={{ borderRadius: "4px" }}
+      variant="rectangular"
+    />
+  );
+};

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

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

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

@@ -0,0 +1,206 @@
+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;
+    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,
+  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 />;
+  }
+
+  const EmptyIcon = () => null;
+
+  return (
+    <Stack gap="10px">
+      <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),
+          },
+          textField: {
+            disabled,
+            helperText,
+            error,
+            InputProps: {
+              endAdornment: (
+                <CalendarAction
+                  disabled={disabled}
+                  onClick={() => setOpen(true)}
+                />
+              ),
+              sx: {
+                "& .MuiInputAdornment-root": {
+                  width: "30px",
+                },
+              },
+            },
+          },
+          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,21 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+export const Skeleton = () => {
+  return (
+    <Stack gap="10px">
+      <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,96 @@
+import { InputLabel, Stack } from "@mui/material";
+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";
+import { useState } from "react";
+
+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={2}
+        direction="horizontal"
+        calendarFocus="backwards"
+        staticRanges={[]}
+        inputRanges={[]}
+        moveRangeOnFirstSelection={false}
+        preventSnapRefocus={true}
+      />
+      {error && <span style={{ color: "red" }}>{helperText}</span>}
+    </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";