@codezee/sixtify-brahma 0.2.3 → 0.2.6

package/packages/eslint-config/react-internal.js

@@ -0,0 +1,89 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/*
+ * This is a custom ESLint configuration for use with
+ * internal (bundled by their consumer) libraries
+ * that utilize React.
+ */
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier",
+    "turbo",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:sonarjs/recommended-legacy",
+    "plugin:import/recommended",
+  ],
+  plugins: ["sonarjs", "import"],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    browser: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [".*.js", "node_modules/", "dist/"],
+  overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
+  rules: {
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "import/no-duplicates": ["error"],
+    "react/jsx-curly-brace-presence": [
+      "error",
+      { props: "never", children: "never" },
+    ],
+    "object-shorthand": ["error", "always"],
+    curly: "error",
+    quotes: ["error", "double"],
+    "import/no-default-export": "error",
+    "no-template-curly-in-string": "error",
+    "sonarjs/todo-tag": "off",
+    "no-use-before-define": "error",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "no-console": "error",
+    "no-empty-function": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "no-else-return": "error",
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: ["case", "default"], next: "*" },
+      { blankLine: "always", prev: "directive", next: "*" },
+      { blankLine: "any", prev: "directive", next: "directive" },
+      {
+        blankLine: "always",
+        prev: ["var", "let", "const"],
+        next: "*",
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: ["var", "let", "const"],
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: "return",
+      },
+      {
+        blankLine: "always",
+        prev: "*",
+        next: "if",
+      },
+    ],
+  },
+};

package/packages/shared-components/.eslintrc.js

@@ -0,0 +1,10 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@repo/eslint-config/react-internal.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.lint.json",
+    tsconfigRootDir: __dirname,
+  },
+};

package/packages/shared-components/package.json

@@ -0,0 +1,22 @@
+{
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@turbo/gen": "^1.12.4",
+    "@types/eslint": "^8.56.5",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.57.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "main": "src/index.ts",
+  "name": "@repo/shared-components",
+  "private": true,
+  "scripts": {
+    "generate:component": "turbo gen react-component",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "version": "0.0.0"
+}

package/packages/shared-components/src/Actions/AddAction.tsx

@@ -0,0 +1,13 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgAdd } from "../Svgs";
+
+export type AddActionProps = IconButtonProps;
+
+export const AddAction = (props: AddActionProps) => {
+  return (
+    <IconButton {...props}>
+      <SvgAdd />
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/CalendarAction.tsx

@@ -0,0 +1,13 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgCalendar } from "../Svgs";
+
+export type CalendarActionProps = IconButtonProps;
+
+export const CalendarAction = (props: CalendarActionProps) => {
+  return (
+    <IconButton sx={{ color: "#4C5D70" }} {...props}>
+      <SvgCalendar />
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/ConfigureAction.tsx

@@ -0,0 +1,13 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgConfigure } from "../Svgs";
+
+export type ConfigureActionProps = IconButtonProps;
+
+export const ConfigureAction = (props: ConfigureActionProps) => {
+  return (
+    <IconButton {...props}>
+      <SvgConfigure />
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/DeleteAction.tsx

@@ -0,0 +1,13 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgDelete } from "../Svgs/SvgDelete";
+
+export type DeleteActionProps = IconButtonProps;
+
+export const DeleteAction = (props: DeleteActionProps) => {
+  return (
+    <IconButton {...props}>
+      <SvgDelete />
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/DownloadAction.tsx

@@ -0,0 +1,13 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgDownload } from "../Svgs";
+
+export type DownloadActionProps = IconButtonProps;
+
+export const DownloadAction = (props: DownloadActionProps) => {
+  return (
+    <IconButton {...props}>
+      <SvgDownload />
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/EditAction.tsx

@@ -0,0 +1,13 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgsEdit } from "../Svgs/SvgsEdit";
+
+export type EditActionProps = IconButtonProps;
+
+export const EditAction = (props: EditActionProps) => {
+  return (
+    <IconButton {...props}>
+      <SvgsEdit />
+    </IconButton>
+  );
+};

package/packages/shared-components/src/Actions/HistoryAction.tsx

@@ -0,0 +1,13 @@
+import type { IconButtonProps } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { SvgsHistory } from "../Svgs/SvgsHistory";
+
+export type HistoryActionProps = IconButtonProps;
+
+export const HistoryAction = (props: HistoryActionProps) => {
+  return (
+    <IconButton {...props}>
+      <SvgsHistory />
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,7 @@
+export * from "./AddAction";
+export * from "./CalendarAction";
+export * from "./ConfigureAction";
+export * from "./DeleteAction";
+export * from "./DownloadAction";
+export * from "./EditAction";
+export * from "./HistoryAction";

package/packages/shared-components/src/AgGrid/ActionCell/ActionCell.tsx

@@ -0,0 +1,57 @@
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { Box, IconButton, ListItemButton, Stack } from "@mui/material";
+import { type MouseEvent, useState } from "react";
+import { PadBox } from "../../PadBox";
+import { Popover } from "./Popover";
+
+type AgGridActionColumn = {
+  title: string;
+  onClick: () => void;
+};
+
+type ActionColumnProps = {
+  items: AgGridActionColumn[];
+  disabled?: boolean;
+};
+export const ActionCell = ({ items, disabled }: ActionColumnProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
+
+  const HandleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const HandleClick = (event: MouseEvent<HTMLDivElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <IconButton
+        component="div"
+        sx={{ cursor: "pointer", alignItems: "center", width: "100%" }}
+        onClick={HandleClick}
+        disabled={disabled}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      {!!anchorEl && (
+        <Popover open={true} anchorEl={anchorEl} onClose={HandleClose}>
+          <PadBox padding={{ padding: "2px" }}>
+            {items.map((item) => {
+              return (
+                <Stack key={item.title}>
+                  <ListItemButton
+                    sx={{ width: "100%", textAlign: "center" }}
+                    onClick={() => item?.onClick()}
+                  >
+                    {item.title}
+                  </ListItemButton>
+                </Stack>
+              );
+            })}
+          </PadBox>
+        </Popover>
+      )}
+    </Box>
+  );
+};

package/packages/shared-components/src/AgGrid/ActionCell/Popover.tsx

@@ -0,0 +1,32 @@
+import type { PopoverProps } from "@mui/material";
+import { Popover as MuiPopover } from "@mui/material";
+
+export const Popover = ({
+  open,
+  anchorEl,
+  children,
+  onClose,
+}: PopoverProps) => {
+  return (
+    <MuiPopover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "center",
+      }}
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "right",
+      }}
+      sx={{
+        "& .MuiPaper-root": {
+          width: "auto",
+        },
+      }}
+    >
+      {children}
+    </MuiPopover>
+  );
+};

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

@@ -0,0 +1,93 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import type { AgGridReactProps } from "ag-grid-react";
+import { AgGridReact } from "ag-grid-react";
+import type { Ref } from "react";
+import { forwardRef } from "react";
+
+export const defaultPageSize = 50;
+
+export const pageSizeOptions = [20, 50, 100, 200];
+
+//TODO: jaydip, fix unknown type
+export type AgGridProps<T = unknown> = AgGridReactProps<T> & {
+  height?: string;
+  ref?: Ref<AgGridReact<T>>;
+  totalRecords?: number;
+  overlayNoRowsTemplate?: string;
+};
+
+type AgGridType = React.ForwardRefExoticComponent<AgGridProps> &
+  (<GenericType>(props: AgGridProps<GenericType>) => JSX.Element);
+
+export const AgGrid = forwardRef(
+  <T,>(props: AgGridProps<T>, ref: Ref<AgGridReact<T>>) => {
+    const {
+      cacheBlockSize = defaultPageSize,
+      defaultColDef = {
+        flex: 1,
+        floatingFilter: false,
+        filterParams: {
+          buttons: ["apply", "reset"],
+          closeOnApply: true,
+          contains: false,
+        },
+      },
+      height = "597px",
+      rowHeight = 50,
+      rowModelType = "infinite",
+      rowBuffer = 5,
+      totalRecords,
+      // eslint-disable-next-line quotes
+      overlayNoRowsTemplate = '<span class="ag-overlay-no-rows-center">No Data Found</span>',
+      infiniteInitialRowCount = defaultPageSize,
+      pagination = false,
+      ...rest
+    } = props;
+
+    const {
+      palette: {
+        app: { color },
+      },
+    } = useTheme();
+
+    if (totalRecords === 0) {
+      return (
+        <Box
+          sx={{
+            borderRadius: "4px",
+            margin: "20px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "300px",
+            textAlign: "center",
+            backgroundColor: color.butterflyBlue[700],
+          }}
+        >
+          <Typography variant="h6">No result found</Typography>
+        </Box>
+      );
+    }
+
+    return (
+      <div className="ag-theme-quartz " style={{ width: "100%", height }}>
+        <AgGridReact<T>
+          ref={ref}
+          cacheBlockSize={cacheBlockSize}
+          defaultColDef={defaultColDef}
+          rowHeight={rowHeight}
+          rowModelType={rowModelType}
+          rowBuffer={rowBuffer}
+          infiniteInitialRowCount={infiniteInitialRowCount}
+          overlayNoRowsTemplate={overlayNoRowsTemplate}
+          pagination={pagination}
+          {...(pagination ? { paginationPageSize: defaultPageSize } : {})}
+          paginationPageSizeSelector={pagination ? pageSizeOptions : false}
+          {...rest}
+        />
+      </div>
+    );
+  }
+) as AgGridType;
+
+AgGrid.displayName = "AgGrid";

package/packages/shared-components/src/AgGrid/LoadingCell.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "@mui/material";
+
+export const LoadingCell = () => {
+  return <Skeleton animation="pulse" width="100%" />;
+};

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

@@ -0,0 +1,3 @@
+export * from "./AgGrid";
+export * from "./LoadingCell";
+export * from "./ActionCell/ActionCell";

package/packages/shared-components/src/AppBar/AppBar.styled.tsx

@@ -0,0 +1,25 @@
+import { styled } from "@mui/material";
+import type { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import MuiAppBar from "@mui/material/AppBar";
+
+export const StyledAppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<MuiAppBarProps & { open?: boolean }>(({ theme, open }) => ({
+  background: theme.palette.app.color.iron[600],
+  boxShadow: "unset",
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  marginLeft: "80px",
+  width: "calc(100% - 80px)",
+  ...(open && {
+    marginLeft: "300px",
+    width: "calc(100% - 300px)",
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));

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

@@ -0,0 +1,20 @@
+"use client";
+
+import { Toolbar } from "@mui/material";
+import type { PropsWithChildren } from "react";
+import { StyledAppBar } from "./AppBar.styled";
+
+export type AppBarProps = {
+  drawerOpen: boolean;
+};
+
+export const AppBar = ({
+  drawerOpen,
+  children,
+}: PropsWithChildren<AppBarProps>) => {
+  return (
+    <StyledAppBar position="fixed" open={drawerOpen}>
+      <Toolbar>{children}</Toolbar>
+    </StyledAppBar>
+  );
+};

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

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

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

@@ -0,0 +1,76 @@
+import {
+  Box,
+  IconButton,
+  Link,
+  Breadcrumbs as MuiBreadcrumbs,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import type { ReactNode } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+type BreadcrumbItem = {
+  icon?: ReactNode;
+  text?: string;
+  onClick?: () => void;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItem[];
+};
+
+export const Breadcrumbs = ({ items }: BreadcrumbProps) => {
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  return (
+    <MuiBreadcrumbs>
+      {items.map((item) => {
+        const { icon, text, onClick } = item;
+
+        if (onClick) {
+          return (
+            <Link
+              key={uuidv4()}
+              underline="hover"
+              sx={{ display: "flex", alignItems: "center" }}
+              onClick={(e) => {
+                e.preventDefault();
+
+                onClick();
+              }}
+              href="#"
+            >
+              {icon && (
+                <IconButton
+                  sx={{
+                    color: butterflyBlue[900],
+                  }}
+                >
+                  {icon}
+                </IconButton>
+              )}
+              {text && <Typography>{text}</Typography>}
+            </Link>
+          );
+        }
+
+        return (
+          <Box key={uuidv4()}>
+            {icon && (
+              <IconButton
+                sx={{
+                  color: butterflyBlue[900],
+                }}
+              >
+                {icon}
+              </IconButton>
+            )}
+            {text && <Typography>{text}</Typography>}
+          </Box>
+        );
+      })}
+    </MuiBreadcrumbs>
+  );
+};

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

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

package/packages/shared-components/src/Button/ActionButton.tsx

@@ -0,0 +1,38 @@
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import {
+  Button,
+  CircularProgress,
+  Divider,
+  Stack,
+  useTheme,
+} from "@mui/material";
+export type ActionButtonProps = MuiButtonProps & {
+  loading?: boolean;
+};
+
+export const ActionButton = ({
+  loading = false,
+  children,
+  ...rest
+}: ActionButtonProps) => {
+  const theme = useTheme();
+
+  const { lightBlue } = theme.palette.app.color;
+
+  return (
+    <Button {...rest}>
+      <Stack gap="10px" flexDirection="row" alignItems="center">
+        {loading ? <CircularProgress size={28} /> : children}
+        <Divider
+          orientation="vertical"
+          sx={{
+            borderColor: lightBlue[100],
+            height: "22px",
+          }}
+        />
+        <ExpandMoreRoundedIcon fontSize="small" />
+      </Stack>
+    </Button>
+  );
+};

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

@@ -0,0 +1,19 @@
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import { CircularProgress, Button as MuiButton } from "@mui/material";
+
+export type ButtonProps = MuiButtonProps & {
+  loading?: boolean;
+};
+
+export const Button = ({
+  loading = false,
+  children,
+  disabled = false,
+  ...rest
+}: ButtonProps) => {
+  return (
+    <MuiButton disabled={loading || disabled} {...rest}>
+      {loading ? <CircularProgress size={28} /> : children}
+    </MuiButton>
+  );
+};

package/packages/shared-components/src/Button/ButtonGroup.tsx

@@ -0,0 +1,37 @@
+import { ButtonGroup as MuiButtonGroup } from "@mui/material";
+import { isFunction } from "lodash";
+import type { ReactNode } from "react";
+import { Button } from "./Button";
+
+type ButtonObject = {
+  icon: ReactNode;
+  value: string;
+  label: string;
+  selected: boolean;
+  onClick: (value: string) => void;
+};
+
+type ButtonGroupProps = {
+  renderButtons: ButtonObject[];
+};
+
+export const ButtonGroup = ({ renderButtons }: ButtonGroupProps) => {
+  return (
+    <MuiButtonGroup sx={{ boxShadow: "none" }} aria-label="Basic button group">
+      {renderButtons?.map(({ icon, value, label, selected, onClick }) => (
+        <Button
+          variant={!selected ? "outlined" : "contained"}
+          key={value}
+          onClick={() => {
+            if (isFunction(onClick)) {
+              onClick(value);
+            }
+          }}
+          startIcon={icon}
+        >
+          {label}
+        </Button>
+      ))}
+    </MuiButtonGroup>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from "./ActionButton";
+export * from "./Button";
+export * from "./ButtonGroup";