@monolith-forensics/monolith-ui 1.0.12 → 1.1.1

package/src/components/TextInput/TextInput.tsx

@@ -1,50 +0,0 @@
-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/core/index.js

@@ -1,16 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src/components/theme/components.js

@@ -1,140 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,235 +0,0 @@
-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

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