codeforlife 2.8.2 → 2.9.0

package/src/theme/components/MuiButton.ts

@@ -1,70 +0,0 @@
-import { buttonClasses } from "@mui/material"
-
-import type Components from "./_components"
-import { includesClassNames } from "../../utils/theme"
-import typography from "../typography"
-
-const MuiButton: Components["MuiButton"] = {
-  defaultProps: {
-    variant: "contained",
-    size: "medium",
-  },
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      color: "black",
-      textTransform: "none",
-      textAlign: "center",
-      borderRadius: "0px",
-      padding: "11px 12px",
-      height: "42px",
-      whiteSpace: "nowrap",
-      width: "fit-content",
-      minWidth: "150px",
-      boxShadow: "none",
-      ...(ownerState.size === "small" && {
-        height: "27px",
-        padding: "4.5px 9px",
-        letterSpacing: "0",
-      }),
-      ...(includesClassNames(ownerState, ["body"]) && {
-        marginBottom: typography.body1?.marginBottom,
-      }),
-    }),
-    contained: ({ ownerState }) => ({
-      backgroundColor: "#ffd23b",
-      "&:hover": {
-        backgroundColor: "#ffc709",
-        boxShadow: [
-          "0px 6px 10px 0px rgba(0, 0, 0, 0.14)",
-          "0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
-          "0px 3px 5px 0px rgba(0, 0, 0, 0.2);",
-        ].join(),
-      },
-      [`&.${buttonClasses.disabled}`]: {
-        backgroundColor: "#ffe382",
-        color: "#7A5F01",
-      },
-      ...(includesClassNames(ownerState, ["alert"]) && {
-        color: "white",
-        backgroundColor: "#ff0000",
-        "&:hover": {
-          backgroundColor: "#df0531",
-        },
-        [`&.${buttonClasses.disabled}`]: {
-          backgroundColor: "#E76A6A",
-          color: "white",
-        },
-      }),
-    }),
-    outlined: {
-      border: "2px solid #eab502",
-      "&:hover": {
-        border: "2px solid #eab502",
-        backgroundColor: "transparent",
-        textDecoration: "underline",
-      },
-    },
-  },
-}
-
-export default MuiButton

package/src/theme/components/MuiCardActions.tsx

@@ -1,12 +0,0 @@
-import type Components from "./_components"
-import spacing from "../spacing"
-
-const MuiCardActions: Components["MuiCardActions"] = {
-  styleOverrides: {
-    root: {
-      padding: spacing(2),
-    },
-  },
-}
-
-export default MuiCardActions

package/src/theme/components/MuiCheckbox.ts

@@ -1,12 +0,0 @@
-import type Components from "./_components"
-
-const MuiCheckbox: Components["MuiCheckbox"] = {
-  styleOverrides: {
-    root: {
-      paddingLeft: "0px",
-      marginLeft: "-2px",
-    },
-  },
-}
-
-export default MuiCheckbox

package/src/theme/components/MuiContainer.ts

@@ -1,19 +0,0 @@
-import type Components from "./_components"
-import { getFlexStyleOverrides } from "./_components"
-import spacing from "../spacing"
-
-const MuiContainer: Components["MuiContainer"] = {
-  defaultProps: {
-    maxWidth: "lg",
-  },
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      ...getFlexStyleOverrides(ownerState),
-      paddingLeft: spacing(2, true),
-      paddingRight: spacing(2, true),
-      padding: spacing(7),
-    }),
-  },
-}
-
-export default MuiContainer

package/src/theme/components/MuiDialog.tsx

@@ -1,16 +0,0 @@
-import type Components from "./_components"
-
-const MuiDialog: Components["MuiDialog"] = {
-  defaultProps: {
-    maxWidth: "sm",
-  },
-  styleOverrides: {
-    paper: {
-      borderRadius: "0px !important",
-      padding: "24px",
-      alignItems: "center",
-    },
-  },
-}
-
-export default MuiDialog

package/src/theme/components/MuiFormControlLabel.ts

@@ -1,18 +0,0 @@
-import { typographyClasses } from "@mui/material"
-
-import type Components from "./_components"
-import { form } from "../typography"
-
-const MuiFormControlLabel: Components["MuiFormControlLabel"] = {
-  styleOverrides: {
-    root: {
-      [`.${typographyClasses.root}`]: {
-        ...form,
-        marginBottom: 0,
-      },
-      margin: 0,
-    },
-  },
-}
-
-export default MuiFormControlLabel

package/src/theme/components/MuiFormHelperText.ts

@@ -1,12 +0,0 @@
-import type Components from "./_components"
-import { form } from "../typography"
-
-const MuiFormHelperText: Components["MuiFormHelperText"] = {
-  styleOverrides: {
-    root: {
-      ...form,
-    },
-  },
-}
-
-export default MuiFormHelperText

package/src/theme/components/MuiGrid2.ts

@@ -1,16 +0,0 @@
-import type Components from "./_components"
-import { getFlexStyleOverrides } from "./_components"
-
-const MuiGrid2: Components["MuiGrid2"] = {
-  defaultProps: {
-    disableEqualOverflow: true,
-    // padding: 0 // TODO: normalize padding.
-  },
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      ...getFlexStyleOverrides(ownerState),
-    }),
-  },
-}
-
-export default MuiGrid2

package/src/theme/components/MuiInputBase.ts

@@ -1,14 +0,0 @@
-import type Components from "./_components"
-import typography from "../typography"
-
-const MuiInputBase: Components["MuiInputBase"] = {
-  styleOverrides: {
-    root: {
-      backgroundColor: "white",
-      marginBottom: 0,
-      color: typography.body1?.color,
-    },
-  },
-}
-
-export default MuiInputBase

package/src/theme/components/MuiLink.ts

@@ -1,41 +0,0 @@
-import type Components from "./_components"
-import { includesClassNames } from "../../utils/theme"
-import typography from "../typography"
-
-const MuiLink: Components["MuiLink"] = {
-  defaultProps: {
-    underline: "none", // BUG: if not set, MUI fails to run.
-    color: "inherit",
-  },
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      cursor: "pointer",
-      ...(includesClassNames(ownerState, ["no-decor"])
-        ? {
-            ":hover": {
-              textDecoration: "underline",
-            },
-          }
-        : {
-            textDecoration: "underline",
-            ":hover": {
-              fontWeight: "bold",
-            },
-          }),
-      ...(includesClassNames(ownerState, ["back-to"]) && {
-        textDecoration: "none",
-        display: "inline-block",
-        marginBottom: typography.body1?.marginBottom,
-        ":hover": {
-          fontWeight: "bold",
-          textDecoration: "underline",
-        },
-        ":before": {
-          content: '"< Back to "',
-        },
-      }),
-    }),
-  },
-}
-
-export default MuiLink

package/src/theme/components/MuiList.ts

@@ -1,12 +0,0 @@
-import type Components from "./_components"
-
-const MuiList: Components["MuiList"] = {
-  styleOverrides: {
-    root: {
-      paddingTop: 0,
-      paddingBottom: 0,
-    },
-  },
-}
-
-export default MuiList

package/src/theme/components/MuiListItemText.ts

@@ -1,18 +0,0 @@
-import { listItemTextClasses } from "@mui/material"
-
-import type Components from "./_components"
-import { includesClassNames } from "../../utils/theme"
-
-const MuiListItemText: Components["MuiListItemText"] = {
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      ...(includesClassNames(ownerState, ["last"]) && {
-        [`.${listItemTextClasses.primary}`]: {
-          marginBottom: 0,
-        },
-      }),
-    }),
-  },
-}
-
-export default MuiListItemText

package/src/theme/components/MuiMenu.ts

@@ -1,14 +0,0 @@
-import type Components from "./_components"
-
-const MuiMenu: Components["MuiMenu"] = {
-  styleOverrides: {
-    paper: {
-      borderRadius: 0,
-    },
-    list: {
-      padding: 0,
-    },
-  },
-}
-
-export default MuiMenu

package/src/theme/components/MuiMenuItem.ts

@@ -1,15 +0,0 @@
-import type Components from "./_components"
-import { includesClassNames } from "../../utils/theme"
-
-const MuiMenuItem: Components["MuiMenuItem"] = {
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      ...(includesClassNames(ownerState, ["header"]) && {
-        pointerEvents: "none",
-        fontWeight: "bold",
-      }),
-    }),
-  },
-}
-
-export default MuiMenuItem

package/src/theme/components/MuiSelect.ts

@@ -1,16 +0,0 @@
-import type Components from "./_components"
-import { type StyleOverridesWithRoot } from "./_components"
-
-const MuiSelect: Components["MuiSelect"] = {
-  defaultProps: {
-    color: "black",
-  },
-
-  styleOverrides: {
-    root: {
-      borderRadius: "0px",
-    },
-  } as StyleOverridesWithRoot<"MuiSelect">,
-}
-
-export default MuiSelect

package/src/theme/components/MuiTab.ts

@@ -1,29 +0,0 @@
-import { tabClasses } from "@mui/material"
-
-import type Components from "./_components"
-import { primary } from "../colors"
-
-const MuiTab: Components["MuiTab"] = {
-  styleOverrides: {
-    root: {
-      textTransform: "none",
-      fontSize: "16px",
-      fontWeight: 600,
-      minWidth: "150px",
-      border: "2px solid white",
-      [`&.${tabClasses.selected}`]: {
-        color: primary[300],
-        backgroundColor: "white",
-        cursor: "default",
-      },
-      [`:not(.${tabClasses.selected})`]: {
-        color: "white",
-        ":hover": {
-          textDecoration: "underline",
-        },
-      },
-    },
-  },
-}
-
-export default MuiTab

package/src/theme/components/MuiTable.ts

@@ -1,29 +0,0 @@
-import { tableCellClasses } from "@mui/material"
-
-import type Components from "./_components"
-import { includesClassNames } from "../../utils/theme"
-import typography from "../typography"
-
-const MuiTable: Components["MuiTable"] = {
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      borderStyle: "hidden",
-      overflowX: "auto",
-      [`.${tableCellClasses.root}`]: {
-        border: "2px solid white",
-      },
-      ...(includesClassNames(ownerState, ["text"]) && {
-        borderStyle: "unset",
-        display: "block",
-        [`.${tableCellClasses.root}`]: {
-          border: "1px solid #DDD",
-        },
-      }),
-      ...(includesClassNames(ownerState, ["body"]) && {
-        marginBottom: typography.body1?.marginBottom,
-      }),
-    }),
-  },
-}
-
-export default MuiTable

package/src/theme/components/MuiTableBody.ts

@@ -1,15 +0,0 @@
-import type Components from "./_components"
-import { includesClassNames } from "../../utils/theme"
-
-const MuiTableBody: Components["MuiTableBody"] = {
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      backgroundColor: "#F1ECEC",
-      ...(includesClassNames(ownerState, ["text"]) && {
-        backgroundColor: "white",
-      }),
-    }),
-  },
-}
-
-export default MuiTableBody

package/src/theme/components/MuiTableHead.ts

@@ -1,26 +0,0 @@
-import { tableCellClasses, typographyClasses } from "@mui/material"
-
-import type Components from "./_components"
-import { includesClassNames } from "../../utils/theme"
-
-const MuiTableHead: Components["MuiTableHead"] = {
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      backgroundColor: "#6E7171",
-      ...(includesClassNames(ownerState, ["light"]) && {
-        backgroundColor: "#9A9C9E",
-      }),
-      [`.${typographyClasses.root}`]: {
-        color: "white",
-        fontWeight: 600,
-        marginBottom: 0,
-      },
-      [`.${tableCellClasses.head}`]: {
-        color: "white",
-        fontWeight: 600,
-      },
-    }),
-  },
-}
-
-export default MuiTableHead

package/src/theme/components/MuiTabs.ts

@@ -1,26 +0,0 @@
-import { tabClasses } from "@mui/material"
-
-import type Components from "./_components"
-
-const MuiTabs: Components["MuiTabs"] = {
-  defaultProps: {
-    variant: "scrollable",
-    scrollButtons: true,
-    allowScrollButtonsMobile: true,
-  },
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      ...(ownerState !== undefined && // NOTE: this is a bug with MUI
-        [undefined, "horizontal"].includes(ownerState.orientation) && {
-          [`.${tabClasses.root}:not(:last-of-type)`]: {
-            marginRight: "30px",
-          },
-        }),
-    }),
-    indicator: {
-      display: "none",
-    },
-  },
-}
-
-export default MuiTabs

package/src/theme/components/MuiTextField.ts

@@ -1,86 +0,0 @@
-import {
-  filledInputClasses,
-  formHelperTextClasses,
-  formLabelClasses,
-  inputBaseClasses,
-  inputClasses,
-  outlinedInputClasses,
-  svgIconClasses,
-} from "@mui/material"
-
-import type Components from "./_components"
-import { includesClassNames } from "../../utils/theme"
-import palette from "../palette"
-import typography from "../typography"
-
-const MuiTextField: Components["MuiTextField"] = {
-  defaultProps: {
-    size: "small",
-    variant: "filled",
-  },
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      width: "100%",
-      backgroundColor: "transparent",
-      [`& > .${inputBaseClasses.root}`]: {
-        ...(ownerState.disabled
-          ? {
-              [`.${inputBaseClasses.disabled}`]: {
-                color: `${typography.body1!.color} !important`,
-                "-webkit-text-fill-color": "unset",
-              },
-              border: "0px !important",
-              borderRadius: "0px !important",
-              // @ts-expect-error value is assignable
-              backgroundColor: `${palette.info!.main} !important`,
-            }
-          : {
-              border: "1px solid black !important",
-              borderRadius: "0px !important",
-              backgroundColor: "white !important",
-            }),
-      },
-      [`& > .${inputBaseClasses.root}.${inputBaseClasses.error}`]: {
-        // @ts-expect-error value is assignable
-        border: `1px solid ${palette.error!.main} !important`,
-      },
-      [`& .${outlinedInputClasses.root}.${inputClasses.focused} > fieldset`]: {
-        borderColor: "black !important",
-      },
-      [`.${svgIconClasses.root}`]: {
-        color: `${typography.body1!.color} !important`,
-      },
-      [`.${filledInputClasses.root}::after`]: {
-        borderColor: `${typography.body1!.color} !important`,
-      },
-      [`.${formLabelClasses.root}`]: {
-        color: `${typography.body1!.color} !important`,
-      },
-      [`.${formHelperTextClasses.root}`]: {
-        fontSize: "12px !important",
-      },
-      ...(ownerState.multiline === true && {
-        ...((includesClassNames(ownerState, ["resize"]) ||
-          includesClassNames(ownerState, ["resize-both"])) && {
-          width: "auto",
-          [`.${inputClasses.inputMultiline}`]: {
-            resize: "both",
-          },
-        }),
-        ...(includesClassNames(ownerState, ["resize-horizontal"]) && {
-          width: "auto",
-          [`.${inputClasses.inputMultiline}`]: {
-            resize: "horizontal",
-          },
-        }),
-        ...(includesClassNames(ownerState, ["resize-vertical"]) && {
-          [`.${inputClasses.inputMultiline}`]: {
-            resize: "vertical",
-          },
-        }),
-      }),
-    }),
-  },
-}
-
-export default MuiTextField

package/src/theme/components/MuiToolbar.ts

@@ -1,11 +0,0 @@
-import type Components from "./_components"
-
-const MuiToolbar: Components["MuiToolbar"] = {
-  styleOverrides: {
-    root: {
-      padding: "15px 0px !important",
-    },
-  },
-}
-
-export default MuiToolbar

package/src/theme/components/MuiTypography.ts

@@ -1,12 +0,0 @@
-import type Components from "./_components"
-import { getFontStyleOverrides } from "./_components"
-
-const MuiTypography: Components["MuiTypography"] = {
-  styleOverrides: {
-    root: ({ ownerState }) => ({
-      ...getFontStyleOverrides(ownerState),
-    }),
-  },
-}
-
-export default MuiTypography

package/src/theme/components/_components.ts

@@ -1,95 +0,0 @@
-import {
-  type CSSObject,
-  type ComponentsOverrides,
-  type ComponentsPropsList,
-  type Theme,
-  type ThemeOptions,
-} from "@mui/material"
-import { type CommonProps } from "@mui/material/OverridableComponent"
-import { type OverridesStyleRules } from "@mui/material/styles/overrides"
-import { type TypographyOptions } from "@mui/material/styles/createTypography"
-
-import {
-  getClassNames,
-  includesClassNames,
-  matchClassNames,
-} from "../../utils/theme"
-import typography from "../typography"
-
-export default interface Components
-  extends NonNullable<ThemeOptions["components"]> {}
-
-export type StyleOverridesWithRoot<
-  Component extends keyof ComponentsOverrides<Theme>,
-> = ComponentsOverrides<Theme>[Component] & {
-  root: OverridesStyleRules<"root", Component, Theme>["root"]
-}
-
-export type OwnerState<ComponentName extends keyof ComponentsPropsList> =
-  ComponentsPropsList[ComponentName] & Record<string, unknown>
-
-export function getFlexStyleOverrides(props: CommonProps): CSSObject {
-  const styleOverrides: CSSObject = {}
-
-  const classNames = getClassNames(props)
-
-  if (classNames.some(className => className.startsWith("flex-"))) {
-    styleOverrides.display = "flex"
-    if (includesClassNames(classNames, ["flex-center"])) {
-      styleOverrides.justifyContent = "center"
-      styleOverrides.alignItems = "center"
-    } else if (includesClassNames(classNames, ["flex-center-x"])) {
-      styleOverrides.justifyContent = "center"
-      styleOverrides.alignItems = "start"
-    } else if (includesClassNames(classNames, ["flex-center-y"])) {
-      styleOverrides.justifyContent = "start"
-      styleOverrides.alignItems = "center"
-    } else if (includesClassNames(classNames, ["flex-end"])) {
-      styleOverrides.justifyContent = "end"
-      styleOverrides.alignItems = "end"
-    } else if (includesClassNames(classNames, ["flex-end-x"])) {
-      styleOverrides.justifyContent = "end"
-      styleOverrides.alignItems = "start"
-    } else if (includesClassNames(classNames, ["flex-end-y"])) {
-      styleOverrides.justifyContent = "start"
-      styleOverrides.alignItems = "end"
-    }
-  }
-
-  return styleOverrides
-}
-
-export function getFontStyleOverrides(props: CommonProps): CSSObject {
-  let styleOverrides: CSSObject = {}
-
-  const classNames = getClassNames(props)
-
-  if (includesClassNames(classNames, ["nowrap-ellipsis"])) {
-    styleOverrides.whiteSpace = "nowrap"
-    styleOverrides.overflow = "hidden"
-    styleOverrides.textOverflow = "ellipsis"
-  }
-
-  ;["h1", "h2", "h3", "h4", "h5", "h6", "body1", "body2"]
-    .filter(className => className in typography)
-    .forEach(className => {
-      const typographyClass = typography[
-        className as keyof TypographyOptions
-      ] as CSSObject
-
-      if (includesClassNames(classNames, [className])) {
-        styleOverrides = { ...styleOverrides, ...typographyClass }
-      }
-
-      matchClassNames(classNames, new RegExp(`^${className}-(\\w+)$`)).forEach(
-        match => {
-          const prop = match[1]
-          if (prop in typographyClass) {
-            styleOverrides[prop] = typographyClass[prop]
-          }
-        },
-      )
-    })
-
-  return styleOverrides
-}