@monolith-forensics/monolith-ui 1.0.7 → 1.0.8

package/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/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/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/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/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/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/index.js

@@ -1,8 +0,0 @@
-export * from "./src/Form";
-export * from "./src/Input";
-export * from "./src/TextArea";
-export * from "./src/TextBox";
-export * from "./src/TextAreaBox";
-export * from "./src/NumberBox";
-export * from "./src/SelectBox";
-export * from "./src/DateBox";

package/src/CheckBox.js

@@ -1,49 +0,0 @@
-import styled from "@emotion/styled";
-import CheckBoxOutlineBlankOutlinedIcon from "@mui/icons-material/CheckBoxOutlineBlankOutlined";
-import CheckBoxIcon from "@mui/icons-material/CheckBox";
-import { useState } from "react";
-import { useEffect } from "react";
-
-const CheckBox = styled(
-  ({ className, checked = true, onChange = () => {}, style = {} }) => {
-    const [checkedState, setCheckedState] = useState(checked);
-
-    const handleChange = (e) => {
-      e.stopPropagation();
-      setCheckedState(!checkedState);
-      onChange({ newValue: !checkedState, previousValue: checkedState });
-    };
-
-    useEffect(() => {
-      setCheckedState(checked);
-    }, [checked]);
-
-    return (
-      <div className={className} onClick={handleChange}>
-        {checkedState === true ? (
-          <CheckBoxIcon className="checkbox checked" />
-        ) : (
-          <CheckBoxOutlineBlankOutlinedIcon className="checkbox unchecked" />
-        )}
-      </div>
-    );
-  }
-)((props) => ({
-  display: "flex",
-  alignItems: "center",
-  width: 20,
-  cursor: "pointer",
-  ".checkbox": {
-    color: props.theme.palette.primary.main,
-    ...props.style,
-    fontSize: (() => {
-      if (props.size === "small") return 16;
-      if (props.size === "medium") return 20;
-      if (props.size === "large") return 24;
-      return 16;
-    })(),
-    // padding: 5,
-  },
-}));
-
-export default CheckBox;