@codezee/sixtify-brahma 0.2.2 → 0.2.3

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

@@ -1,67 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,206 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,96 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

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