@codezee/sixtify-brahma 0.2.6 → 0.2.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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