@monolith-forensics/monolith-ui 1.0.7 → 1.0.9

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import FieldLabel from "../FieldLabel";
+import StyledInput from "../Input";
+
+interface TextInputProps {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  colSpan?: number;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  description?: string | null;
+}
+
+const TextInput: React.FC<TextInputProps> = ({
+  label,
+  error,
+  errorMessage,
+  required,
+  colSpan = 1,
+  size,
+  description,
+  ...other
+}) => {
+  return (
+    <div
+      style={{
+        gridColumn: `span ${colSpan}`,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+      }}
+    >
+      {label && (
+        <FieldLabel
+          error={error}
+          errorMessage={errorMessage}
+          asterisk={required}
+          size={size}
+          description={description}
+        >
+          {label}
+        </FieldLabel>
+      )}
+      <StyledInput error={error} {...other} />
+    </div>
+  );
+};
+
+export default TextInput;

package/src/components/TextInput/index.tsx

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

package/src/components/core/index.js

@@ -0,0 +1,16 @@
+import { ThemeProvider } from "styled-components";
+
+import variants from "@monolith-ui/theme/variants";
+
+export const MonolithThemeProvider = ({ children, theme }) => {
+  let selectedTheme = theme
+    ? variants.find((variant) => variant.name === theme)
+    : variants[1]; // Default to dark theme
+
+  if (!selectedTheme) {
+    console.warn(new Error(`The theme ${theme} is not valid`));
+    selectedTheme = variants[1]; // Default to dark theme
+  }
+
+  return <ThemeProvider theme={selectedTheme}>{children}</ThemeProvider>;
+};

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export { default as Button } from "./Button";
+export { default as Input } from "./Input";
+export { default as TextArea } from "./TextArea";
+export { default as FieldLabel } from "./FieldLabel";
+export { default as TextInput } from "./TextInput";
+export { default as TextAreaInput } from "./TextAreaInput";
+export { default as Pill } from "./Pill";

package/src/components/theme/breakpoints.js

@@ -0,0 +1,11 @@
+const breakpoints = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536,
+  },
+};
+
+export default breakpoints;

package/src/components/theme/components.js

@@ -0,0 +1,140 @@
+const components = {
+  MuiButtonBase: {
+    defaultProps: {
+      disableRipple: true,
+    },
+  },
+  MuiLink: {
+    defaultProps: {
+      underline: "hover",
+    },
+  },
+  MuiCardHeader: {
+    defaultProps: {
+      titleTypographyProps: {
+        variant: "h6",
+      },
+    },
+    styleOverrides: {
+      action: {
+        marginTop: "-4px",
+        marginRight: "-4px",
+      },
+    },
+  },
+  MuiCard: {
+    styleOverrides: {
+      root: {
+        borderRadius: "0px",
+        // boxShadow:
+        //   "rgba(50, 50, 93, 0.025) 0px 2px 5px -1px, rgba(0, 0, 0, 0.05) 0px 1px 3px -1px",
+        boxShadow:
+          "0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%) !important",
+        backgroundImage: "none",
+      },
+    },
+  },
+  MuiPaper: {
+    styleOverrides: {
+      root: {
+        backgroundImage: "none",
+      },
+    },
+  },
+  MuiPickersDay: {
+    styleOverrides: {
+      day: {
+        fontWeight: "300",
+      },
+    },
+  },
+  MuiPickersYear: {
+    styleOverrides: {
+      root: {
+        height: "64px",
+      },
+    },
+  },
+  MuiPickersCalendar: {
+    styleOverrides: {
+      transitionContainer: {
+        marginTop: "6px",
+      },
+    },
+  },
+  MuiPickersCalendarHeader: {
+    styleOverrides: {
+      iconButton: {
+        backgroundColor: "transparent",
+        "& > *": {
+          backgroundColor: "transparent",
+        },
+      },
+      switchHeader: {
+        marginTop: "2px",
+        marginBottom: "4px",
+      },
+    },
+  },
+  MuiPickersClock: {
+    styleOverrides: {
+      container: {
+        margin: `32px 0 4px`,
+      },
+    },
+  },
+  MuiPickersClockNumber: {
+    styleOverrides: {
+      clockNumber: {
+        left: `calc(50% - 16px)`,
+        width: "32px",
+        height: "32px",
+      },
+    },
+  },
+  MuiPickerDTHeader: {
+    styleOverrides: {
+      dateHeader: {
+        "& h4": {
+          fontSize: "2.125rem",
+          fontWeight: 400,
+        },
+      },
+      timeHeader: {
+        "& h3": {
+          fontSize: "3rem",
+          fontWeight: 400,
+        },
+      },
+    },
+  },
+  MuiPickersTimePicker: {
+    styleOverrides: {
+      hourMinuteLabel: {
+        "& h2": {
+          fontSize: "3.75rem",
+          fontWeight: 300,
+        },
+      },
+    },
+  },
+  MuiPickersToolbar: {
+    styleOverrides: {
+      toolbar: {
+        "& h4": {
+          fontSize: "2.125rem",
+          fontWeight: 400,
+        },
+      },
+    },
+  },
+  MuiChip: {
+    styleOverrides: {
+      root: {
+        borderRadius: "16px",
+      },
+    },
+  },
+};
+
+export default components;

package/src/components/theme/index.js

@@ -0,0 +1,77 @@
+import "@mui/lab/themeAugmentation";
+
+import { createTheme as createMuiTheme } from "@mui/material/styles";
+import variants from "./variants";
+import typography from "./typography";
+import breakpoints from "./breakpoints";
+import components from "./components";
+import shadows from "./shadows";
+
+const createTheme = (name) => {
+  let themeConfig = variants.find((variant) => variant.name === name);
+
+  if (!themeConfig) {
+    console.warn(new Error(`The theme ${name} is not valid`));
+    themeConfig = variants[0];
+  }
+
+  const componentsStyled = {
+    ...components,
+    MuiButton: {
+      variants: [
+        {
+          props: { variant: "outlined-filled" },
+          style: {
+            border: "1px solid #CCC",
+            color: themeConfig.palette.secondary.main,
+            backgroundColor: themeConfig.palette.background.paper,
+          },
+        },
+      ],
+    },
+    MuiMenu: {
+      styleOverrides: {
+        paper: {
+          minWidth: 150,
+          backgroundColor: themeConfig.palette.menu.background,
+          border: `1px solid ${
+            themeConfig.name === "DARK"
+              ? "rgba(255, 255, 255, 0.12)"
+              : "rgba(0, 0, 0, 0.12)"
+          }`,
+        },
+      },
+    },
+  };
+
+  return createMuiTheme(
+    {
+      spacing: 4,
+      breakpoints: breakpoints,
+      // @ts-ignore
+      components: componentsStyled,
+      typography: typography,
+      // shadows: shadows,
+      palette: themeConfig.palette,
+      zIndex: {
+        mobileStepper: 1800,
+        fab: 1801,
+        speedDial: 1802,
+        appBar: 1803,
+        modal: 1501,
+        snackbar: 1806,
+        tooltip: 1807,
+      },
+    },
+    {
+      name: themeConfig.name,
+      header: themeConfig.header,
+      footer: themeConfig.footer,
+      sidebar: themeConfig.sidebar,
+      scrollbar: themeConfig.scrollbar,
+      mfBorder: themeConfig.mfBorder,
+    }
+  );
+};
+
+export default createTheme;

package/src/components/theme/shadows.js

@@ -0,0 +1,33 @@
+function createShadow() {
+  return `box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);`;
+}
+
+const shadows = [
+  "none",
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+  createShadow(),
+];
+
+export default shadows;

package/src/components/theme/typography.js

@@ -0,0 +1,58 @@
+const typography = {
+  fontFamily: [
+    "Inter",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    '"Segoe UI"',
+    "Roboto",
+    '"Helvetica Neue"',
+    "Arial",
+    "sans-serif",
+    '"Apple Color Emoji"',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+  ].join(","),
+  fontSize: 13,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 600,
+  h1: {
+    fontSize: "2rem",
+    fontWeight: 600,
+    lineHeight: 1.25,
+  },
+  h2: {
+    fontSize: "1.75rem",
+    fontWeight: 600,
+    lineHeight: 1.25,
+  },
+  h3: {
+    fontSize: "1.5rem",
+    fontWeight: 600,
+    lineHeight: 1.25,
+  },
+  h4: {
+    fontSize: "1.125rem",
+    fontWeight: 500,
+    lineHeight: 1.25,
+  },
+  h5: {
+    fontSize: "1.0625rem",
+    fontWeight: 500,
+    lineHeight: 1.25,
+  },
+  h6: {
+    fontSize: "1rem",
+    fontWeight: 500,
+    lineHeight: 1.25,
+  },
+  body1: {
+    fontSize: 13,
+  },
+  button: {
+    textTransform: "none",
+  },
+};
+
+export default typography;

package/src/components/theme/variants.js

@@ -0,0 +1,235 @@
+import merge from "deepmerge";
+
+// Themes
+export const THEMES = {
+  DEFAULT: "DEFAULT",
+  DARK: "DARK",
+  LIGHT: "LIGHT",
+};
+
+const customBlue = {
+  50: "#e9f0fb",
+  100: "#c8daf4",
+  200: "#a3c1ed",
+  300: "#7ea8e5",
+  400: "#6395e0",
+  500: "#4782da",
+  600: "#407ad6",
+  700: "#376fd0",
+  800: "#2f65cb",
+  900: "#2052c2 ",
+};
+
+const defaultVariant = {
+  name: THEMES.DEFAULT,
+  palette: {
+    mode: "light",
+    primary: {
+      main: customBlue[700],
+      contrastText: "#FFF",
+    },
+    secondary: {
+      main: "#FFF",
+      contrastText: "#000",
+    },
+    third: {
+      main: "#000",
+      contrastText: "#FFF",
+    },
+    fourth: {
+      main: "#ff4500",
+      contrastText: "#FFF",
+    },
+    background: {
+      // default: "#F7F9FC",
+      default: "#FFF",
+      paper: "#FFF",
+      alt: "#ededed",
+      secondary: "#f0f0f0",
+      gradient: "linear-gradient(#FFFFFF 0%, #ccdcf9 50%)",
+    },
+    menu: {
+      background: "#FFF",
+    },
+    signature: {
+      penColor: "#000000",
+      borderColor: "#444444",
+      backgroundColor: "",
+    },
+    text: {
+      primary: "rgba(0, 0, 0, 0.95)",
+      secondary: "rgba(0, 0, 0, 0.75)",
+    },
+    input: {
+      background: "#fbfbfb",
+      border: "rgba(0, 0, 0, 0.2)",
+      borderHover: "#BDBDBD",
+      borderFocus: "#BDBDBD",
+      borderError: "#F44336",
+      borderDisabled: "#E0E0E0",
+      text: "#000",
+      textDisabled: "#6d6d6d",
+      placeholder: "#6d6d6d",
+    },
+    textArea: {
+      background: "#f1f1f4",
+      border: "rgba(0, 0, 0, 0.2)",
+      borderHover: "#BDBDBD",
+      borderFocus: "#BDBDBD",
+      borderError: "#F44336",
+      borderDisabled: "#E0E0E0",
+      text: "#000",
+      textDisabled: "#9E9E9E",
+      placeholder: "#9E9E9E",
+    },
+    dataGrid: {
+      hover: "#efefef",
+    },
+    action: {
+      hover: "rgba(0, 0, 0, 0.1)",
+    },
+    divider: "rgba(0, 0, 0, 0.3)",
+  },
+  header: {
+    color: "rgba(0, 0, 0, 0.95)",
+    background: "#FFF",
+    search: {
+      color: "rgba(0, 0, 0, 0.6)",
+    },
+    indicator: {
+      background: customBlue[600],
+    },
+  },
+  footer: {
+    color: "rgba(0, 0, 0, 0.6)",
+    background: "#FFF",
+  },
+  sidebar: {
+    color: "rgba(0, 0, 0, 0.95)",
+    background: "#233044",
+    active: "#455466",
+    header: {
+      color: "#FFF",
+      background: "#233044",
+      brand: {
+        color: customBlue[500],
+      },
+    },
+    badge: {
+      color: "#FFF",
+      background: customBlue[500],
+    },
+  },
+  scrollbar: {
+    track: "#f1f1f1",
+    thumb: "#DDD",
+    thumbHover: "#BBB",
+  },
+  mfBorder: {
+    primary: "#f1f1f1",
+    secondary: "#DDD",
+  },
+  zIndex: {
+    snackbar: 999999,
+  },
+};
+
+const darkVariant = merge(defaultVariant, {
+  name: THEMES.DARK,
+  palette: {
+    mode: "dark",
+    divider: "rgba(255, 255, 255, 0.15)",
+    action: {
+      hover: "rgba(255, 255, 255, 0.05)",
+    },
+    primary: {
+      main: customBlue[500],
+      contrastText: "#FFF",
+    },
+    secondary: {
+      main: "#3f3f3f",
+      contrastText: "#FFF",
+    },
+    background: {
+      default: "#222222",
+      paper: "#333333",
+      alt: "#1e1e1e",
+      secondary: "#303030",
+      gradient: "linear-gradient(#333333 0%, #1e1e1e 50%)",
+    },
+    menu: {
+      background: "#222222",
+    },
+    text: {
+      primary: "rgba(255, 255, 255, 0.95)",
+      secondary: "rgba(255, 255, 255, 0.6)",
+    },
+    divider: "rgba(255, 255, 255, 0.15)",
+    signature: {
+      penColor: "#eeeeee",
+      borderColor: "#999999",
+      backgroundColor: "rgba(60,60,60,1)",
+    },
+    input: {
+      background: "#272727",
+      border: "#ffffff1a",
+      borderHover: "#BDBDBD",
+      borderFocus: "#BDBDBD",
+      borderError: "#F44336",
+      borderDisabled: "#E0E0E0",
+      text: "#000",
+      textDisabled: "#6d6d6d",
+      placeholder: "#6d6d6d",
+    },
+    textArea: {
+      background: "#292929",
+      border: "rgba(255, 255, 255, 0.2)",
+      borderHover: "#BDBDBD",
+      borderFocus: "#BDBDBD",
+      borderError: "#F44336",
+      borderDisabled: "#E0E0E0",
+      text: "#000",
+      textDisabled: "#9E9E9E",
+      placeholder: "#9E9E9E",
+    },
+    dataGrid: {
+      hover: "#2f2f2f",
+    },
+  },
+  header: {
+    color: "rgba(255, 255, 255, 0.95)",
+    background: "#1B2635",
+    search: {
+      color: "rgba(255, 255, 255, 0.6)",
+    },
+  },
+  footer: {
+    color: "rgba(255, 255, 255, 0.6)",
+    background: "#222222",
+  },
+  sidebar: {
+    color: "rgba(255, 255, 255, 0.95)",
+    background: "#181818",
+    active: "#313131",
+    header: {
+      color: "#FFF",
+      background: "#181818",
+      brand: {
+        color: "#FFFFFF",
+      },
+    },
+  },
+  scrollbar: {
+    thumb: "#3f3f3f",
+    track: "#252525",
+    thumbHover: "#151515",
+  },
+  mfBorder: {
+    primary: "#3f3f3f",
+    secondary: "#252525",
+  },
+});
+
+const variants = [defaultVariant, darkVariant];
+
+export default variants;

package/src/index.ts

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