@codezee/sixtify-brahma 0.2.3 → 0.2.6

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

@@ -0,0 +1,22 @@
+import { Stack, Typography } from "@mui/material";
+import type { PropsWithChildren } from "react";
+import { PadBox } from "../PadBox";
+
+export const FormSection = ({
+  title,
+  children,
+}: PropsWithChildren<{ title?: string }>) => {
+  return (
+    <Stack gap="15px">
+      {title && (
+        <Typography fontWeight={700} variant="h5">
+          {title}
+        </Typography>
+      )}
+
+      <PadBox padding={{ padding: "20px" }}>
+        <Stack gap="15px">{children}</Stack>
+      </PadBox>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from "./FormContainer";
+export * from "./FormGridLayout";
+export * from "./FormRow";
+export * from "./FormSection";

package/packages/shared-components/src/Loader/FacebookCircularProgress.tsx

@@ -0,0 +1,41 @@
+import {
+  Box,
+  CircularProgress,
+  circularProgressClasses,
+  type CircularProgressProps,
+} from "@mui/material";
+
+export function FacebookCircularProgress(
+  props: Readonly<CircularProgressProps>
+) {
+  return (
+    <Box sx={{ position: "relative" }}>
+      <CircularProgress
+        variant="determinate"
+        sx={{
+          color: (theme) => theme.palette.grey[200],
+        }}
+        size={40}
+        thickness={4}
+        {...props}
+        value={100}
+      />
+      <CircularProgress
+        variant="indeterminate"
+        disableShrink
+        sx={{
+          color: (theme) => theme.palette.app?.color.butterflyBlue[900],
+          animationDuration: "400ms",
+          position: "absolute",
+          left: 0,
+          [`& .${circularProgressClasses.circle}`]: {
+            strokeLinecap: "round",
+          },
+        }}
+        size={40}
+        thickness={4}
+        {...props}
+      />
+    </Box>
+  );
+}

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

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

package/packages/shared-components/src/PadBox/PadBox.tsx

@@ -0,0 +1,21 @@
+import { Box, type SxProps } from "@mui/material";
+import type { PropsWithChildren } from "react";
+
+export const PadBox = ({
+  children,
+  padding,
+}: PropsWithChildren<{ padding: SxProps }>) => {
+  return (
+    <Box
+      sx={{
+        ...padding,
+        height: "inherit",
+        boxSizing: "border-box",
+        width: "100%",
+      }}
+      id="pad-box"
+    >
+      {children}
+    </Box>
+  );
+};

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

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

package/packages/shared-components/src/Pagination/Pagination.tsx

@@ -0,0 +1,42 @@
+import {
+  TablePagination,
+  type TablePaginationProps,
+  useTheme,
+} from "@mui/material";
+
+export const Pagination = ({
+  count,
+  page,
+  onPageChange,
+  rowsPerPage,
+  onRowsPerPageChange,
+  ...rest
+}: TablePaginationProps) => {
+  const theme = useTheme();
+
+  const { grey } = theme.palette;
+
+  return (
+    <TablePagination
+      sx={{
+        "& .MuiInputBase-root": {
+          paddingRight: "10px",
+        },
+        "& .MuiTablePagination-select": {
+          backgroundColor: "transparent !important",
+        },
+        "& .MuiTablePagination-input": {
+          border: `1.5px solid ${grey[400]}`,
+          borderRadius: "5px",
+        },
+      }}
+      component="div"
+      count={count}
+      page={page}
+      onPageChange={onPageChange}
+      rowsPerPage={rowsPerPage}
+      onRowsPerPageChange={onRowsPerPageChange}
+      {...rest}
+    />
+  );
+};

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

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

package/packages/shared-components/src/Stepper/Stepper.tsx

@@ -0,0 +1,54 @@
+import type {
+  StepperProps as MuiStepperProps,
+  StepLabelProps,
+} from "@mui/material";
+import {
+  Stepper as MuiStepper,
+  Step,
+  StepLabel,
+  Box,
+  Typography,
+  useTheme,
+} from "@mui/material";
+
+type StepperProps = MuiStepperProps & {
+  steps: string[];
+  showActiveStepIcon?: boolean;
+  stepLabelProps?: StepLabelProps;
+};
+
+export const Stepper = ({
+  orientation = "horizontal",
+  activeStep = 0,
+  stepLabelProps = {},
+  steps,
+  ...rest
+}: StepperProps) => {
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  return (
+    <Box>
+      <MuiStepper activeStep={activeStep} orientation={orientation} {...rest}>
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel
+              {...stepLabelProps}
+              sx={{
+                ".Mui-active .css-18pqgpd-MuiSvgIcon-root-MuiStepIcon-root": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+                ".Mui-completed": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+              }}
+            >
+              <Typography variant="body2">{label}</Typography>
+            </StepLabel>
+          </Step>
+        ))}
+      </MuiStepper>
+    </Box>
+  );
+};

package/packages/shared-components/src/Stepper/StepperV2.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import Stack from "@mui/material/Stack";
+import type { StepperProps } from "@mui/material/Stepper";
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import type { StepLabelProps } from "@mui/material/StepLabel";
+import StepLabel from "@mui/material/StepLabel";
+import Check from "@mui/icons-material/Check";
+import StepConnector, {
+  stepConnectorClasses,
+} from "@mui/material/StepConnector";
+import type { StepIconProps } from "@mui/material/StepIcon";
+
+const QontoConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 10,
+    left: "calc(-50% + 16px)",
+    right: "calc(50% + 16px)",
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: "#784af4",
+    },
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: "#784af4",
+    },
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor: "#eaeaf0",
+    borderTopWidth: 3,
+    borderRadius: 1,
+    ...theme.applyStyles("dark", {
+      borderColor: theme.palette.grey[800],
+    }),
+  },
+}));
+
+const QontoStepIconRoot = styled("div")<{ ownerState: { active?: boolean } }>(
+  ({ theme }) => ({
+    color: "#eaeaf0",
+    display: "flex",
+    height: 22,
+    alignItems: "center",
+    "& .QontoStepIcon-completedIcon": {
+      color: "#784af4",
+      zIndex: 1,
+      fontSize: 18,
+    },
+    "& .QontoStepIcon-circle": {
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      backgroundColor: "currentColor",
+    },
+    ...theme.applyStyles("dark", {
+      color: theme.palette.grey[700],
+    }),
+    variants: [
+      {
+        props: ({ ownerState }) => ownerState.active,
+        style: {
+          color: "#784af4",
+        },
+      },
+    ],
+  })
+);
+
+function QontoStepIcon(props: Readonly<StepIconProps>) {
+  const { active, completed, className } = props;
+
+  return (
+    <QontoStepIconRoot ownerState={{ active }} className={className}>
+      {completed ? (
+        <Check className="QontoStepIcon-completedIcon" />
+      ) : (
+        <div className="QontoStepIcon-circle" />
+      )}
+    </QontoStepIconRoot>
+  );
+}
+
+type StepperV2Props = StepperProps & {
+  steps: string[];
+  stepLabelProps?: StepLabelProps;
+};
+
+export const StepperV2 = ({
+  steps,
+  alternativeLabel = true,
+  stepLabelProps = {},
+  ...rest
+}: StepperV2Props) => {
+  return (
+    <Stack sx={{ width: "100%" }} spacing={4}>
+      <Stepper
+        alternativeLabel={alternativeLabel}
+        activeStep={1}
+        connector={<QontoConnector />}
+        {...rest}
+      >
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel StepIconComponent={QontoStepIcon} {...stepLabelProps}>
+              {label}
+            </StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+    </Stack>
+  );
+};

package/packages/shared-components/src/Stepper/StepperV3.tsx

@@ -0,0 +1,72 @@
+import type {
+  StepperProps as MuiStepperProps,
+  StepLabelProps,
+} from "@mui/material";
+import {
+  Stepper as MuiStepper,
+  Step,
+  StepLabel,
+  Box,
+  Typography,
+  useTheme,
+  Stack,
+} from "@mui/material";
+
+type StepperProps = MuiStepperProps & {
+  steps: { in_time?: string; out_time?: string }[];
+  showActiveStepIcon?: boolean;
+  stepLabelProps?: StepLabelProps;
+};
+
+export const StepperV3 = ({
+  orientation = "horizontal",
+  activeStep = 0,
+  stepLabelProps = {},
+  steps,
+  ...rest
+}: StepperProps) => {
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  return (
+    <Box>
+      <MuiStepper activeStep={activeStep} orientation={orientation} {...rest}>
+        {steps.map((label, index) => (
+          // eslint-disable-next-line sonarjs/no-array-index-key
+          <Step key={index}>
+            <StepLabel
+              {...stepLabelProps}
+              sx={{
+                ".Mui-active .css-18pqgpd-MuiSvgIcon-root-MuiStepIcon-root": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+                ".Mui-completed .MuiStepIcon-root": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+                ".MuiStepIcon-text": {
+                  color: "transparent !important",
+                  display: "none",
+                },
+              }}
+            >
+              <Stack>
+                {label?.in_time ? (
+                  <>
+                    <Typography variant="caption">In at</Typography>
+                    <Typography variant="caption">{label?.in_time}</Typography>
+                  </>
+                ) : (
+                  <>
+                    <Typography variant="caption">Out at</Typography>
+                    <Typography variant="caption">{label?.out_time}</Typography>
+                  </>
+                )}
+              </Stack>
+            </StepLabel>
+          </Step>
+        ))}
+      </MuiStepper>
+    </Box>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from "./Stepper";
+export * from "./StepperV2";
+export * from "./StepperV3";

package/packages/shared-components/src/Svgs/AppLogo/AppLogoMedium.tsx

@@ -0,0 +1,65 @@
+import type { SVGProps } from "react";
+
+export const AppLogoMedium = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={117}
+      height={42}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#fff"
+        d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+      />
+      <path
+        fill="#3BA4E8"
+        stroke="#3BA4E8"
+        strokeWidth={0.353}
+        d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+      />
+      <path
+        fill="#3BA4E8"
+        d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+      />
+      <path
+        stroke="#3BA4E8"
+        strokeWidth={0.353}
+        d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+      />
+      <path
+        fill="#fff"
+        d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+      />
+      <path
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+      />
+      <path
+        fill="#fff"
+        d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+      />
+      <path
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+      />
+      <path
+        fill="#fff"
+        d="M85 26.695v-2.35h-5.569v-2.364h4.977v-2.203H79.43v-2.14h5.264v-2.332H76.64v11.389H85Zm-13.287-5.727c0 2.541-1.912 3.346-3.977 3.346h-1.371v-6.66h1.439c1.997 0 3.91.756 3.91 3.314Zm3.013 0c0-4.311-3.453-5.662-6.855-5.662h-4.332v11.389h4.469c3.3 0 6.718-1.722 6.718-5.727Zm-16.198-.016c0 2.058-1.421 3.538-3.435 3.538-2.015 0-3.42-1.48-3.42-3.538 0-1.995 1.389-3.475 3.42-3.475 2.03 0 3.436 1.48 3.436 3.475Zm3.098 0C61.626 17.3 58.85 15 55.093 15c-3.74 0-6.516 2.3-6.516 5.952 0 3.603 2.776 6.048 6.516 6.048 3.757 0 6.533-2.445 6.533-6.048Zm-13.523 4.166-2.014-1.802c-.507.676-1.405 1.159-2.539 1.159-1.997 0-3.402-1.415-3.402-3.491 0-2.01 1.438-3.49 3.452-3.49.914 0 1.879.337 2.42 1.045l1.964-1.866C46.986 15.579 45.174 15 43.5 15 39.843 15 37 17.332 37 20.984 37 24.555 39.759 27 43.449 27c2.014 0 3.605-.724 4.654-1.882Z"
+      />
+      <path
+        fill="#fff"
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="M85 26.695v-2.35h-5.569v-2.364h4.977v-2.203H79.43v-2.14h5.264v-2.332H76.64v11.389H85Zm-13.287-5.727c0 2.541-1.912 3.346-3.977 3.346h-1.371v-6.66h1.439c1.997 0 3.91.756 3.91 3.314Zm3.013 0c0-4.311-3.453-5.662-6.855-5.662h-4.332v11.389h4.469c3.3 0 6.718-1.722 6.718-5.727Zm-16.198-.016c0 2.058-1.421 3.538-3.435 3.538-2.015 0-3.42-1.48-3.42-3.538 0-1.995 1.389-3.475 3.42-3.475 2.03 0 3.436 1.48 3.436 3.475Zm3.098 0C61.626 17.3 58.85 15 55.093 15c-3.74 0-6.516 2.3-6.516 5.952 0 3.603 2.776 6.048 6.516 6.048 3.757 0 6.533-2.445 6.533-6.048Zm-13.523 4.166-2.014-1.802c-.507.676-1.405 1.159-2.539 1.159-1.997 0-3.402-1.415-3.402-3.491 0-2.01 1.438-3.49 3.452-3.49.914 0 1.879.337 2.42 1.045l1.964-1.866C46.986 15.579 45.174 15 43.5 15 39.843 15 37 17.332 37 20.984 37 24.555 39.759 27 43.449 27c2.014 0 3.605-.724 4.654-1.882Z"
+      />
+      <path
+        fill="#3BA4E8"
+        d="M117 27v-2.475h-5.576v-2.491h4.983v-2.322h-4.983v-2.254h5.271V15h-8.068v12H117Zm-10.288 0v-2.475h-5.576v-2.491h4.983v-2.322h-4.983v-2.254h5.271V15h-8.068v12h8.373Zm-10.254 0v-2.509h-5.966l5.847-7.169V15h-9.204v2.457h5.577L87 24.491V27h9.458Z"
+      />
+    </svg>
+  );
+};

package/packages/shared-components/src/Svgs/AppLogo/AppLogoSmall.tsx

@@ -0,0 +1,48 @@
+import type { SVGProps } from "react";
+export const AppLogoSmall = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={32}
+    height={42}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+    />
+    <path
+      fill="#3BA4E8"
+      stroke="#3BA4E8"
+      strokeWidth={0.353}
+      d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+    />
+    <path
+      fill="#3BA4E8"
+      d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+    />
+    <path
+      stroke="#3BA4E8"
+      strokeWidth={0.353}
+      d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+    />
+    <path
+      fill="#fff"
+      d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+    />
+    <path
+      stroke="#fff"
+      strokeWidth={0.353}
+      d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+    />
+    <path
+      fill="#fff"
+      d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+    />
+    <path
+      stroke="#fff"
+      strokeWidth={0.353}
+      d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+    />
+  </svg>
+);

package/packages/shared-components/src/Svgs/ArrowUp.tsx

@@ -0,0 +1,11 @@
+export const ArrowUp = () => (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 10 9"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M5 0L10 8.75H0L5 0Z" fill="#D9D9D9" />
+  </svg>
+);