@codezee/sixtify-brahma 0.0.0

package/packages/shared-components/src/utils/theme/theme.ts

@@ -0,0 +1,297 @@
+import {
+  outlinedInputClasses,
+  type PaletteMode,
+  type ThemeOptions,
+} from "@mui/material";
+import { darkPalette } from "./paletteDark";
+import { lightPalette } from "./paletteLight";
+import "./types";
+import { typographyThemeOptions, typographyVariantMapping } from "./typography";
+
+export const Theme = {
+  light: "light",
+  dark: "dark",
+} as const;
+
+export type ThemeVariant = keyof typeof Theme;
+
+export const getPaletteByTheme = (mode: PaletteMode) => ({
+  palette: {
+    mode,
+    ...(mode === Theme.light ? lightPalette : darkPalette),
+  },
+});
+
+export function appTheme(theme: PaletteMode): ThemeOptions {
+  const { palette } = getPaletteByTheme(theme);
+
+  return {
+    palette,
+    typography: typographyThemeOptions,
+    components: {
+      MuiInputBase: {
+        styleOverrides: {
+          input: {
+            padding: "8.5px 14px !important", //TODO: need to fix this important
+            color: palette.app.color.slate[900],
+            "::placeholder": {
+              color: palette.app.color.iron[800],
+              opacity: 1,
+            },
+          },
+        },
+      },
+      MuiCssBaseline: {
+        styleOverrides: {
+          ":root": {
+            fontSize: "62.5%",
+          },
+        },
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            borderRadius: "4px",
+            fontSize: "15px",
+          },
+        },
+        defaultProps: {
+          variant: "contained",
+          color: "secondary",
+        },
+        variants: [
+          {
+            props: { variant: "contained" },
+            style: {
+              color: palette.app.color.iron[600],
+            },
+          },
+        ],
+      },
+      MuiButtonGroup: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            borderRadius: "5px",
+            border: `1px solid ${palette.app.color.butterflyBlue[900]}`,
+          },
+          firstButton: {
+            border: "unset",
+          },
+          middleButton: {
+            border: "unset",
+          },
+          lastButton: {
+            border: "unset",
+          },
+        },
+        defaultProps: {
+          variant: "contained",
+          color: "secondary",
+        },
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          indeterminate: {
+            "& .MuiSvgIcon-root": {
+              color: palette.app.color.butterflyBlue[900],
+              borderRadius: "4px",
+              width: "19px",
+              height: "19px",
+            },
+          },
+          root: {
+            padding: "unset",
+          },
+        },
+        defaultProps: {
+          disableRipple: true,
+        },
+      },
+      MuiBreadcrumbs: {
+        styleOverrides: {
+          root: {
+            color: "unset",
+          },
+        },
+      },
+      MuiFormHelperText: {
+        styleOverrides: {
+          root: {
+            marginLeft: "unset",
+          },
+        },
+      },
+      MuiInputLabel: {
+        styleOverrides: {
+          root: {
+            marginLeft: "unset",
+            color: palette.app.color.iron[400],
+            fontWeight: 500,
+          },
+        },
+      },
+      MuiFormLabel: {
+        styleOverrides: {
+          root: {
+            fontSize: "16px",
+            "&.Mui-disabled": {
+              "& .MuiFormLabel-asterisk": {
+                color: palette.app.color.iron[800],
+              },
+            },
+          },
+          asterisk: {
+            color: palette.app.color.red[900],
+          },
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: "4px",
+          },
+        },
+        defaultProps: {
+          size: "small",
+          color: "inherit",
+        },
+      },
+      MuiAutocomplete: {
+        styleOverrides: {
+          paper: {
+            fontSize: "1.4rem",
+          },
+          root: {
+            "& .MuiInputBase-root": {
+              padding: "unset",
+            },
+          },
+        },
+      },
+      MuiTabs: {
+        styleOverrides: {
+          indicator: {
+            backgroundColor: palette.app.color.butterflyBlue[900],
+            height: "3px",
+          },
+          root: {
+            "& .MuiButtonBase-root": {
+              minHeight: "48px",
+            },
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            fontWeight: 500,
+            fontSize: "14px",
+            color: "black",
+            "&.Mui-selected": {
+              color: "black",
+            },
+          },
+        },
+      },
+      MuiTypography: {
+        defaultProps: {
+          variantMapping: {
+            ...typographyVariantMapping,
+          },
+        },
+      },
+      MuiLink: {
+        styleOverrides: {
+          root: {
+            ":hover": {
+              color: palette.app.color.butterflyBlue[900],
+            },
+          },
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            padding: "unset",
+            ":hover": {
+              [`& .${outlinedInputClasses.notchedOutline}`]: {
+                borderColor: palette.app.color.butterflyBlue[900],
+              },
+            },
+            "&.Mui-focused": {
+              [`& .${outlinedInputClasses.notchedOutline}`]: {
+                borderColor: palette.app.color.butterflyBlue[900],
+              },
+            },
+            "&.Mui-disabled": {
+              [`& .${outlinedInputClasses.notchedOutline}`]: {
+                borderColor: palette.app.color.butterflyBlue[300],
+              },
+            },
+          },
+          notchedOutline: {
+            borderColor: palette.app.color.iron[800],
+          },
+        },
+      },
+      MuiInputAdornment: {
+        styleOverrides: {
+          root: {
+            marginRight: "unset",
+            paddingLeft: "14px",
+          },
+          positionEnd: {
+            paddingRight: "10px",
+          },
+        },
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            padding: "0px 5px 0px 5px",
+            border: 0,
+            borderRadius: "6px",
+          },
+        },
+        defaultProps: {
+          color: "success",
+        },
+        variants: [
+          {
+            props: { color: "success" },
+            style: {
+              background: palette.app.color.darkMint[700],
+              color: palette.app.color.darkMint[900],
+            },
+          },
+          {
+            props: { color: "error" },
+            style: {
+              background: palette.app.color.lipstickRed[600],
+              color: palette.app.color.red[800],
+            },
+          },
+          {
+            props: { color: "info" },
+            style: {
+              background: palette.app.color.butterflyBlue[600],
+              color: palette.app.color.butterflyBlue[900],
+            },
+          },
+        ],
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            borderBottom: `1px solid ${palette.app.color.butterflyBlue[700]}`,
+            padding: "10px 16px",
+          },
+        },
+      },
+    },
+    spacing: 10,
+  };
+}

package/packages/shared-components/src/utils/theme/types.ts

@@ -0,0 +1,18 @@
+import type { ColorPalette } from "./colorPalette";
+
+export type AppPalette = {
+  color: ColorPalette;
+  paperBoxShadow: string;
+};
+
+declare module "@mui/material/styles" {
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/consistent-type-definitions
+  interface Palette {
+    app: AppPalette;
+  }
+
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/consistent-type-definitions
+  interface PaletteOptions {
+    app: AppPalette;
+  }
+}

package/packages/shared-components/src/utils/theme/typography.ts

@@ -0,0 +1,52 @@
+import type { TypographyPropsVariantOverrides } from "@mui/material";
+import type {
+  FontStyleOptions,
+  TypographyOptions,
+  TypographyStyleOptions,
+  Variant,
+} from "@mui/material/styles/createTypography";
+
+type TypographyVariant = keyof TypographyPropsVariantOverrides;
+type TypographyActiveVariants = {
+  [K in TypographyVariant]: TypographyPropsVariantOverrides[K] extends true
+    ? K
+    : never;
+}[TypographyVariant];
+
+export const typographyFontStyleOptions: FontStyleOptions = {
+  fontSize: 14,
+  fontFamily: "Poppins",
+};
+
+export const typographyOptions: Partial<
+  Record<Variant, TypographyStyleOptions>
+> = {
+  h1: { fontSize: "96px", lineHeight: "112px" },
+  h2: { fontSize: "60px", lineHeight: "72px" },
+  h3: { fontSize: "48px", lineHeight: "56px" },
+  h4: { fontSize: "36px", lineHeight: "42px" },
+  h5: { fontSize: "24px", lineHeight: "24px" },
+  h6: { fontSize: "20px", lineHeight: "24px" },
+  subtitle1: { fontSize: "18px", lineHeight: "24px" },
+  subtitle2: { fontSize: "14px", lineHeight: "24px" },
+  body1: { fontSize: "16px", lineHeight: "24px" },
+  body2: { fontSize: "14px", lineHeight: "20px" },
+  caption: { fontSize: "12px", lineHeight: "16px" },
+};
+
+export const typographyVariantMapping: Record<
+  TypographyActiveVariants,
+  string
+> = {
+  subHeader1: "p",
+  subHeader2: "p",
+  body: "p",
+  subText: "p",
+  smallText: "p",
+  tinyText: "p",
+};
+
+export const typographyThemeOptions: TypographyOptions = {
+  ...typographyFontStyleOptions,
+  ...typographyOptions,
+};

package/packages/shared-components/src/utils/urlToNestedObject.ts

@@ -0,0 +1,9 @@
+import { isEmpty as _isEmpty } from "lodash";
+
+export function urlToNestedObject(url: string) {
+  const segments = url.split("/").filter((segment) => segment !== ""); // Split and remove empty segments
+
+  return segments.reduceRight((acc, segment) => {
+    return { [segment]: _isEmpty(acc) ? true : acc }; // Build the nested structure from right to left
+  }, {});
+}

package/packages/shared-components/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist/types"
+  },
+  "include": ["src", "index.ts"],
+  "exclude": ["node_modules", "dist/types"]
+}

package/packages/shared-components/tsconfig.lint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist/types"
+  },
+  "include": ["src", "turbo" ],
+  "exclude": ["node_modules", "dist/types"]
+}

package/packages/shared-components/webpack/cjs.js

@@ -0,0 +1,20 @@
+const { merge } = require("webpack-merge");
+const { resolve } = require("path");
+
+const commonConfig = require("./common");
+
+const packageJson = require("../package.json");
+
+const c = merge(commonConfig, {
+  mode: "production",
+  externals: Object.keys(packageJson.peerDependencies || {}),
+  output: {
+    filename: "index.js",
+    path: resolve(__dirname, "../dist/cjs"),
+    library: {
+      type: "commonjs2",
+    },
+  },
+});
+
+module.exports = c;

package/packages/shared-components/webpack/common.js

@@ -0,0 +1,36 @@
+const { resolve } = require("path");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const ProgressPlugin = require("progress-webpack-plugin");
+
+module.exports = {
+  devtool: "source-map",
+  entry: [resolve(__dirname, "../src/index.ts")],
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: ["ts-loader", "source-map-loader"],
+        exclude: "/node_modules/",
+      },
+    ],
+  },
+  plugins: [new CleanWebpackPlugin(), new ProgressPlugin()],
+  stats: "error-warning",
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        parallel: 3,
+        extractComments: false,
+        terserOptions: {
+          format: {
+            comments: "/@codezee/i",
+          },
+        },
+      }),
+    ],
+  },
+};

package/packages/typescript-config/base.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "isolatedModules": true,
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "moduleResolution": "NodeNext",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022"
+  }
+}

package/packages/typescript-config/nextjs.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "jsx": "preserve",
+    "noEmit": true
+  }
+}

package/packages/typescript-config/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@repo/typescript-config",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/typescript-config/react-library.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"

package/turbo.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://turbo.build/schema.v1.json",
+  "globalEnv": [
+    "NEXT_PUBLIC_MOCKING_ENABLED",
+    "NEXT_PUBLIC_API_SERVER",
+    "NEXT_PUBLIC_MOCKING_API_SERVER",
+    "NEXTAUTH_URL"
+  ],
+  "pipeline": {
+    "build": {
+      "dependsOn": [
+        "^build"
+      ],
+      "outputs": [
+        ".next/**",
+        "!.next/cache/**"
+      ],
+      "inputs": ["**/*"]
+    },
+    "check:types": {},
+    "check:format": {},
+    "format": {},
+    "clean": {
+      "cache": false,
+      "persistent": true
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    },
+    "lint": {
+      "dependsOn": [
+        "^lint"
+      ]
+    },
+    "start": {
+      "dependsOn": [
+        "build"
+      ]
+    }
+  }
+}