@codezee/sixtify-brahma 0.1.1

package/packages/eslint-config/library.js

@@ -0,0 +1,88 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/** @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: {
+    node: 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"],
+    "react/jsx-curly-brace-presence": [
+      "error",
+      { props: "never", children: "never" },
+    ],
+    "object-shorthand": ["error", "always"],
+    "import/no-duplicates": ["error"],
+    curly: "error",
+    quotes: ["error", "double"],
+    "import/no-default-export": "off",
+    "sonarjs/todo-tag": "off",
+    "no-template-curly-in-string": "error",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "no-use-before-define": "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/eslint-config/next.js

@@ -0,0 +1,85 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:sonarjs/recommended-legacy",
+    "prettier",
+    require.resolve("@vercel/style-guide/eslint/next"),
+    "plugin:@typescript-eslint/recommended",
+    "turbo",
+    "plugin:import/recommended",
+  ],
+  plugins: ["sonarjs", "import"],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    node: true,
+    browser: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [".*.js", "node_modules/"],
+  overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
+  rules: {
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "react/jsx-curly-brace-presence": [
+      "error",
+      { props: "never", children: "never" },
+    ],
+    "object-shorthand": ["error", "always"],
+    curly: "error",
+    quotes: ["error", "double"],
+    "import/no-duplicates": ["error"],
+    "@typescript-eslint/consistent-type-imports": "error",
+    "no-template-curly-in-string": "error",
+    "no-use-before-define": "error",
+    "no-console": "error",
+    "no-empty-function": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "sonarjs/todo-tag": "off",
+    "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/eslint-config/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@repo/eslint-config",
+  "version": "0.0.0",
+  "private": true,
+  "files": [
+    "library.js",
+    "next.js",
+    "react-internal.js"
+  ],
+  "devDependencies": {
+    "@vercel/style-guide": "^5.2.0",
+    "eslint-config-turbo": "^2.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "typescript": "^5.3.3"
+  }
+}

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/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,6 @@
+export * from "./CalendarAction";
+export * from "./DeleteAction";
+export * from "./DownloadAction";
+export * from "./EditAction";
+export * from "./HistoryAction";
+export * from "./AddAction";

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

@@ -0,0 +1,55 @@
+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[];
+};
+export const ActionCell = ({ items }: 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}
+      >
+        <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,87 @@
+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 = 25;
+
+//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,
+      ...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}
+          {...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";