@codezee/sixtify-brahma 0.2.3 → 0.2.6

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"
+  },
+  "include": ["src", "index.ts"],
+  "exclude": ["node_modules", "dist"]
+}

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

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

package/packages/shared-components/turbo/generators/config.ts

@@ -0,0 +1,33 @@
+import type { PlopTypes } from "@turbo/gen";
+
+// Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+// eslint-disable-next-line import/no-default-export
+export default function generator(plop: PlopTypes.NodePlopAPI): void {
+  // A simple generator to add a new React component to the internal UI library
+  plop.setGenerator("react-component", {
+    description: "Adds a new react component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is the name of the component?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/{{kebabCase name}}.tsx",
+        templateFile: "templates/component.hbs",
+      },
+      {
+        type: "append",
+        path: "package.json",
+        // eslint-disable-next-line sonarjs/no-empty-group
+        pattern: /"exports": {(?<insertion>)/g,
+        // eslint-disable-next-line quotes
+        template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
+      },
+    ],
+  });
+}

package/packages/shared-components/turbo/generators/templates/component.hbs

@@ -0,0 +1,8 @@
+export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div>
+      <h1>{{ pascalCase name }} Component</h1>
+      {children}
+    </div>
+  );
+};

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,44 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "globalEnv": [
+    "NEXT_PUBLIC_MOCKING_ENABLED",
+    "NEXT_PUBLIC_API_SERVER",
+    "NEXT_PUBLIC_MOCKING_API_SERVER",
+    "NEXTAUTH_URL"
+  ],
+  "tasks": {
+    "build": {
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        ".env",
+        ".env.*"
+      ],
+      "outputs": [
+        ".next/**",
+        "!.next/cache/**",
+        "storybook-static/**"
+      ]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    },
+    "clean": {
+      "cache": false,
+      "persistent": true
+    },
+    "lint": {
+      "dependsOn": [
+        "^lint"
+      ]
+    },
+    "start": {
+      "dependsOn": [
+        "build"
+      ]
+    }
+  }
+}

package/apps/docs/storybook-static/192.6c7aea37.iframe.bundle.js

@@ -1 +0,0 @@
-(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[192],{"../../node_modules/.pnpm/@storybook+blocks@8.4.7_react-dom@18.3.1_react@18.3.1_storybook@8.4.7/node_modules/@storybook/blocks/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/.pnpm/@storybook+blocks@8.4.7_react-dom@18.3.1_react@18.3.1_storybook@8.4.7/node_modules/@storybook/blocks/dist sync recursive",module.exports=webpackEmptyContext},"../../node_modules/.pnpm/@storybook+core@8.4.7_prettier@3.4.2/node_modules/@storybook/core/dist/components sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/.pnpm/@storybook+core@8.4.7_prettier@3.4.2/node_modules/@storybook/core/dist/components sync recursive",module.exports=webpackEmptyContext},"../../node_modules/.pnpm/@storybook+core@8.4.7_prettier@3.4.2/node_modules/@storybook/core/dist/theming sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/.pnpm/@storybook+core@8.4.7_prettier@3.4.2/node_modules/@storybook/core/dist/theming sync recursive",module.exports=webpackEmptyContext}}]);