@codezee/sixtify-brahma 0.1.1

package/packages/shared-components/src/utils/theme/colorPaletteUI.tsx

@@ -0,0 +1,44 @@
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { colorPalette } from "./colorPalette";
+
+const ColorSwatch = ({ color, shade }: { color: string; shade: string }) => {
+  return (
+    <Tooltip title={color}>
+      <Box
+        sx={{
+          width: 80,
+          height: 40,
+          backgroundColor: color,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          border: "1px solid #e0e0e0",
+          color: "black",
+          fontSize: "12px",
+        }}
+      >
+        {shade}
+      </Box>
+    </Tooltip>
+  );
+};
+
+export const colorPaletteUI = () => {
+  return (
+    <Stack spacing={4} sx={{ padding: 4 }}>
+      {Object.entries(colorPalette).map(([name, shades]) => (
+        <Stack key={name} spacing={2}>
+          <Typography variant="h6" sx={{ textTransform: "capitalize" }}>
+            {name.replace(/([A-Z])/g, " $1")}
+          </Typography>
+
+          <Stack direction="row" spacing={0}>
+            {Object.entries(shades).map(([shade, color]) => (
+              <ColorSwatch key={shade} shade={shade} color={color} />
+            ))}
+          </Stack>
+        </Stack>
+      ))}
+    </Stack>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { colorPalette } from "./colorPalette";
+
+export const darkPalette = {
+  app: {
+    color: colorPalette,
+    paperBoxShadow:
+      "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+  },
+  divider: colorPalette.butterflyBlue[700],
+};

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

@@ -0,0 +1,31 @@
+import { type PaletteOptions } from "@mui/material";
+import { colorPalette } from "./colorPalette";
+
+export const lightPalette: PaletteOptions = {
+  common: {
+    black: "hsla(0, 100%, 0%, 1)",
+    white: "hsla(0, 100%, 100%, 1)",
+  },
+  primary: {
+    main: colorPalette.mirage[900] as string,
+    light: colorPalette.butterflyBlue[400],
+  },
+  secondary: {
+    main: colorPalette.butterflyBlue[900] as string,
+  },
+  info: {
+    main: colorPalette.slate[900] as string,
+  },
+  error: {
+    main: colorPalette.red[900] as string,
+  },
+  warning: {
+    main: colorPalette.darkOrange[900] as string,
+  },
+  app: {
+    color: colorPalette,
+    paperBoxShadow:
+      "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+  },
+  divider: colorPalette.butterflyBlue[700],
+};

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

@@ -0,0 +1,289 @@
+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],
+            },
+          },
+        ],
+      },
+    },
+    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"
+      ]
+    }
+  }
+}