@databiosphere/findable-ui 13.0.1 → 14.0.0

package/src/theme/common/components.ts

@@ -1,8 +1,4 @@
 import { Components, Theme } from "@mui/material";
-import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon";
-import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
-import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
-import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
 import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
@@ -19,7 +15,6 @@ import {
   TEXT_BODY_400,
   TEXT_BODY_400_2_LINES,
   TEXT_BODY_500,
-  TEXT_BODY_LARGE_500,
   TEXT_BODY_SMALL_400,
   TEXT_BODY_SMALL_500,
   TEXT_HEADING,
@@ -85,159 +80,6 @@ export const MuiAccordionSummary: Components["MuiAccordionSummary"] = {
   },
 };
 
-/**
- * MuiAlert Component
- * @param theme - Theme.
- * @returns MuiAlert component theme styles.
- */
-export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
-  return {
-    defaultProps: {
-      iconMapping: {
-        error: ErrorIcon({ fontSize: "small" }),
-        info: InfoIcon({ fontSize: "small" }),
-        success: SuccessIcon({ fontSize: "small" }),
-        warning: WarningIcon({ fontSize: "small" }),
-      },
-    },
-    styleOverrides: {
-      icon: {
-        opacity: 1,
-        padding: "2px 0",
-      },
-      message: {
-        display: "grid",
-        gap: 4,
-        padding: 0,
-      },
-      root: {
-        ...theme.typography[TEXT_BODY_400_2_LINES],
-        borderRadius: 8,
-        boxShadow: theme.shadows[1], // elevation01
-        color: theme.palette.ink.main,
-      },
-      standard: {
-        alignItems: FLEX_START,
-        padding: 20,
-      },
-      standardError: {
-        backgroundColor: theme.palette.alert.lightest,
-        border: `1px solid ${theme.palette.alert.main}${alpha32}`,
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "& .MuiAlert-icon": {
-          color: theme.palette.alert.main,
-        },
-      },
-      standardInfo: {
-        backgroundColor: theme.palette.info.lightest,
-        border: `1px solid ${theme.palette.info.main}${alpha32}`,
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "& .MuiAlert-icon": {
-          color: theme.palette.info.main,
-        },
-      },
-      standardSuccess: {
-        backgroundColor: theme.palette.success.lightest,
-        border: `1px solid ${theme.palette.success.main}${alpha32}`,
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "& .MuiAlert-icon": {
-          color: theme.palette.success.main,
-        },
-      },
-      standardWarning: {
-        backgroundColor: theme.palette.warning.lightest,
-        border: `1px solid ${theme.palette.warning.main}${alpha32}`,
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "& .MuiAlert-icon": {
-          color: theme.palette.warning.main,
-        },
-      },
-    },
-    variants: [
-      {
-        props: { severity: "info", variant: "neutral" },
-        style: {
-          backgroundColor: theme.palette.smoke.light,
-          padding: 16,
-        },
-      },
-      {
-        props: { variant: "banner" },
-        style: {
-          padding: 16,
-          // eslint-disable-next-line sort-keys -- disabling key order for readability
-          "& .MuiAlert-icon": {
-            padding: 0,
-          },
-          "& .MuiAlertTitle-root": {
-            ...theme.typography[TEXT_BODY_500],
-          },
-        },
-      },
-      {
-        props: { severity: "error", variant: "banner" },
-        style: {
-          backgroundColor: theme.palette.alert.lightest,
-          border: `1px solid ${theme.palette.alert.main}${alpha32}`,
-          // eslint-disable-next-line sort-keys -- disabling key order for readability
-          "& .MuiAlert-icon": {
-            color: theme.palette.alert.main,
-          },
-        },
-      },
-      {
-        props: { severity: "info", variant: "banner" },
-        style: {
-          backgroundColor: theme.palette.info.lightest,
-          border: `1px solid ${theme.palette.info.main}${alpha32}`,
-          // eslint-disable-next-line sort-keys -- disabling key order for readability
-          "& .MuiAlert-icon": {
-            color: theme.palette.info.main,
-          },
-        },
-      },
-      {
-        props: { severity: "success", variant: "banner" },
-        style: {
-          backgroundColor: theme.palette.success.lightest,
-          border: `1px solid ${theme.palette.success.main}${alpha32}`,
-          // eslint-disable-next-line sort-keys -- disabling key order for readability
-          "& .MuiAlert-icon": {
-            color: theme.palette.success.main,
-          },
-        },
-      },
-      {
-        props: { severity: "warning", variant: "banner" },
-        style: {
-          backgroundColor: theme.palette.warning.lightest,
-          border: `1px solid ${theme.palette.warning.main}${alpha32}`,
-          // eslint-disable-next-line sort-keys -- disabling key order for readability
-          "& .MuiAlert-icon": {
-            color: theme.palette.warning.main,
-          },
-        },
-      },
-    ],
-  };
-};
-
-/**
- * MuiAlertTitle Component
- * @param theme - Theme.
- * @returns MuiAlertTitle component theme styles.
- */
-export const MuiAlertTitle = (theme: Theme): Components["MuiAlertTitle"] => {
-  return {
-    styleOverrides: {
-      root: {
-        ...theme.typography[TEXT_BODY_LARGE_500],
-        margin: 0,
-      },
-    },
-  };
-};
-
 /**
  * MuiAppBar Component
  */
@@ -1047,11 +889,14 @@ export const MuiInputBase = (theme: Theme): Components["MuiInputBase"] => {
  */
 export const MuiLink: Components["MuiLink"] = {
   defaultProps: {
-    underline: "hover",
+    underline: "always",
   },
   styleOverrides: {
     root: {
       cursor: "pointer",
+      textDecorationColor: "currentColor",
+      textDecorationSkipInk: "none",
+      textUnderlinePosition: "from-font",
     },
   },
 };
@@ -1211,6 +1056,18 @@ export const MuiOutlinedInput = (
 export const MuiPaper = (theme: Theme): Components["MuiPaper"] => {
   return {
     variants: [
+      {
+        props: { elevation: 1 },
+        style: {
+          boxShadow: theme.shadows[1], // elevation01
+        },
+      },
+      {
+        props: { elevation: 2 },
+        style: {
+          boxShadow: theme.shadows[2], // elevation02
+        },
+      },
       {
         props: { variant: "footer" },
         style: {

package/src/theme/components/index.ts

@@ -0,0 +1,2 @@
+export { MuiAlert } from "./muiAlert";
+export { MuiAlertTitle } from "./muiAlertTitle";

package/src/theme/components/muiAlert.ts

@@ -0,0 +1,123 @@
+import { Components, Theme } from "@mui/material";
+import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon";
+import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
+import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
+import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
+import { SIZE } from "../../styles/common/constants/size";
+import { COLOR, SEVERITY, VARIANT } from "../../styles/common/mui/alert";
+import { FONT_SIZE } from "../../styles/common/mui/icon";
+import { alpha32 } from "../common/palette";
+import { TEXT_BODY_500 } from "../common/typography";
+
+export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
+  return {
+    defaultProps: {
+      elevation: 1,
+      iconMapping: {
+        error: ErrorIcon({ fontSize: FONT_SIZE.SMALL }),
+        info: InfoIcon({ fontSize: FONT_SIZE.SMALL }),
+        success: SuccessIcon({ fontSize: FONT_SIZE.SMALL }),
+        warning: WarningIcon({ fontSize: FONT_SIZE.SMALL }),
+      },
+      size: SIZE.MEDIUM,
+    },
+    styleOverrides: {
+      icon: {
+        opacity: 1,
+        padding: 0,
+      },
+      message: {
+        ...theme.typography[TEXT_BODY_500], // default size - "medium"
+        display: "grid",
+        gap: 4,
+        padding: 0,
+      },
+      root: {
+        alignItems: "flex-start",
+        borderRadius: 8,
+        color: theme.palette.ink.main,
+        padding: 16,
+        variants: [
+          {
+            props: { severity: SEVERITY.ERROR },
+            style: {
+              backgroundColor: theme.palette.alert.lightest,
+              border: `1px solid ${theme.palette.alert.main}${alpha32}`,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "& .MuiAlert-icon": {
+                color: theme.palette.alert.main,
+              },
+            },
+          },
+          {
+            props: { severity: SEVERITY.INFO },
+            style: {
+              backgroundColor: theme.palette.info.lightest,
+              border: `1px solid ${theme.palette.info.main}${alpha32}`,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "& .MuiAlert-icon": {
+                color: theme.palette.info.main,
+              },
+            },
+          },
+          {
+            props: { severity: SEVERITY.SUCCESS },
+            style: {
+              backgroundColor: theme.palette.success.lightest,
+              border: `1px solid ${theme.palette.success.main}${alpha32}`,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "& .MuiAlert-icon": {
+                color: theme.palette.success.main,
+              },
+            },
+          },
+          {
+            props: { severity: SEVERITY.WARNING },
+            style: {
+              backgroundColor: theme.palette.warning.lightest,
+              border: `1px solid ${theme.palette.warning.main}${alpha32}`,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "& .MuiAlert-icon": {
+                color: theme.palette.warning.main,
+              },
+            },
+          },
+          {
+            props: { color: COLOR.INK },
+            style: {
+              backgroundColor: theme.palette.ink.main,
+              color: theme.palette.common.white,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              ".MuiLink-root": {
+                color: theme.palette.common.white,
+              },
+            },
+          },
+          {
+            props: { color: COLOR.PRIMARY },
+            style: {
+              backgroundColor: theme.palette.primary.main,
+              color: theme.palette.common.white,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              ".MuiLink-root": {
+                color: theme.palette.common.white,
+              },
+            },
+          },
+          {
+            props: { color: COLOR.SMOKE },
+            style: {
+              backgroundColor: theme.palette.smoke.light,
+            },
+          },
+          {
+            props: { variant: VARIANT.FILLED },
+            style: {
+              border: "none",
+            },
+          },
+        ],
+      },
+    },
+  };
+};

package/src/theme/components/muiAlertTitle.ts

@@ -0,0 +1,14 @@
+import { Components } from "@mui/material";
+import { TEXT_BODY_500 } from "../common/typography";
+
+export const MuiAlertTitle: Components["MuiAlertTitle"] = {
+  defaultProps: {
+    gutterBottom: false,
+    variant: TEXT_BODY_500,
+  },
+  styleOverrides: {
+    root: {
+      margin: 0,
+    },
+  },
+};

package/src/theme/theme.ts

@@ -4,6 +4,7 @@ import * as C from "./common/components";
 import * as P from "./common/palette";
 import { shadows } from "./common/shadows";
 import * as T from "./common/typography";
+import * as M from "./components";
 
 export interface ThemeProps {
   theme: Theme;
@@ -71,8 +72,8 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
     MuiAccordion: C.MuiAccordion(theme),
     MuiAccordionDetails: C.MuiAccordionDetails,
     MuiAccordionSummary: C.MuiAccordionSummary,
-    MuiAlert: C.MuiAlert(theme),
-    MuiAlertTitle: C.MuiAlertTitle(theme),
+    MuiAlert: M.MuiAlert(theme),
+    MuiAlertTitle: M.MuiAlertTitle,
     MuiAppBar: C.MuiAppBar,
     MuiBackdrop: C.MuiBackdrop(theme),
     MuiBreadcrumbs: C.MuiBreadcrumbs(theme),

package/types/data-explorer-ui.d.ts

@@ -25,19 +25,20 @@ import {
   CustomFeatureTableState,
 } from "../src/components/Table/features/entities";
 import { GridTrackSize } from "../src/config/entities";
+import { SIZE } from "../src/styles/common/constants/size";
 
 /**
  * Alert prop options.
  */
 declare module "@mui/material/Alert" {
+  interface AlertProps {
+    size?: SIZE.MEDIUM | SIZE.LARGE;
+  }
+
   interface AlertPropsColorOverrides {
     ink: true;
     primary: true;
-  }
-
-  interface AlertPropsVariantOverrides {
-    banner: true; // Single line alert.
-    neutral: true;
+    smoke: true;
   }
 }
 

package/lib/components/Index/components/TitleCell/titleCell.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-import { LinkProps } from "../../../Links/components/Link/link";
-export interface TitleCellProps extends LinkProps {
-    title: ReactNode;
-}
-export declare const TitleCell: ({ title, ...props }: TitleCellProps) => JSX.Element;

package/lib/components/Index/components/TitleCell/titleCell.js

@@ -1,10 +0,0 @@
-import { Typography } from "@mui/material";
-import React from "react";
-import { TEXT_BODY_400 } from "../../../../theme/common/typography";
-import { Link } from "../../../Links/components/Link/link";
-import { TitleCell as Cell } from "./titleCell.styles";
-export const TitleCell = ({ title, ...props }) => {
-    return (React.createElement(Cell, { gridSx: { gap: 1 } },
-        typeof title === "string" ? (React.createElement(Typography, { variant: TEXT_BODY_400 }, title)) : (title),
-        React.createElement(Link, { ...props })));
-};

package/lib/components/Index/components/TitleCell/titleCell.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const TitleCell: import("@emotion/styled").StyledComponent<import("../../../common/Grid/grid").GridProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;

package/lib/components/Index/components/TitleCell/titleCell.styles.js

@@ -1,6 +0,0 @@
-import styled from "@emotion/styled";
-import { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
-import { Grid } from "../../../common/Grid/grid";
-export const TitleCell = styled(Grid) `
-  ${textBodySmall400};
-`;

package/lib/components/common/Alert/alert.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Alert } from "./alert";
-declare const _default: Meta<typeof Alert>;
-export default _default;
-type Story = StoryObj<typeof Alert>;
-export declare const AlertStory: Story;

package/lib/components/common/Alert/alert.stories.js

@@ -1,36 +0,0 @@
-import { Alert } from "./alert";
-export default {
-    argTypes: {
-        children: {
-            control: "text",
-            description: "Inner text",
-        },
-        color: {
-            description: "Color of alert",
-        },
-        icon: {
-            control: "text",
-            description: "Top left icon. If provided will replace severity.",
-        },
-        severity: {
-            description: "Top left predefined icon. Combine with color.",
-        },
-        title: {
-            control: "text",
-            description: "Highlighted text",
-        },
-        variant: {
-            description: "Type of the alert",
-        },
-    },
-    component: Alert,
-    title: "Components/Common/Alert",
-};
-export const AlertStory = {
-    args: {
-        children: "Something certainly happened",
-        color: "warning",
-        severity: "warning",
-        title: "Ouch!",
-    },
-};

package/lib/components/common/Alert/components/AlertText/alertText.styles.d.ts

@@ -1,4 +0,0 @@
-export declare const AlertText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/common/Alert/components/AlertText/alertText.styles.js

@@ -1,19 +0,0 @@
-import styled from "@emotion/styled";
-export const AlertText = styled.div `
-  ul {
-    padding-left: 24px;
-    margin: 8px 0;
-
-    li {
-      margin: 4px 0;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  *:last-child {
-    margin-bottom: 0;
-  }
-`;

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.d.ts

@@ -1,7 +0,0 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import { ReactNode } from "react";
-export interface BannerPrimaryProps extends MAlertProps {
-    children: ReactNode;
-    className?: string;
-}
-export declare const BannerPrimary: ({ children, className, ...props }: BannerPrimaryProps) => JSX.Element;

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.js

@@ -1,5 +0,0 @@
-import React from "react";
-import { Alert } from "./bannerPrimary.styles";
-export const BannerPrimary = ({ children, className, ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ }) => {
-    return (React.createElement(Alert, { className: className, color: "primary", elevation: 0, icon: false, variant: "standard", ...props }, children));
-};

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const Alert: import("@emotion/styled").StyledComponent<import("@mui/material").AlertProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.js

@@ -1,19 +0,0 @@
-import styled from "@emotion/styled";
-import { Alert as MAlert } from "@mui/material";
-import { primaryMain, white } from "../../../../../styles/common/mixins/colors";
-import { textBodySmall400 } from "../../../../../styles/common/mixins/fonts";
-export const Alert = styled(MAlert) `
-  border-radius: 0;
-  justify-content: center;
-  padding: 8px;
-
-  &.MuiAlert-standardPrimary {
-    background-color: ${primaryMain};
-    color: ${white};
-  }
-
-  .MuiAlert-message {
-    ${textBodySmall400};
-    text-align: center;
-  }
-`;

package/lib/components/common/Banner/components/DismissibleBanner/dismissibleBanner.d.ts

@@ -1,10 +0,0 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import { ElementType, ReactNode } from "react";
-export interface CookieBannerProps extends MAlertProps {
-    Alert?: ElementType;
-    children: ReactNode;
-    className?: string;
-    onDismiss?: () => void;
-    open: boolean;
-}
-export declare const DismissibleBanner: ({ Alert, className, children, onDismiss, open, ...props }: CookieBannerProps) => JSX.Element;

package/lib/components/common/Banner/components/DismissibleBanner/dismissibleBanner.js

@@ -1,16 +0,0 @@
-import { Fade, Alert as MAlert, } from "@mui/material";
-import React, { useEffect, useState } from "react";
-export const DismissibleBanner = ({ Alert = MAlert /* Requires forwardRef to be used as a child of Fade. */, className, children, onDismiss, open, ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ }) => {
-    const [isIn, setIsIn] = useState(false);
-    // Callback fired when the component requests to be closed.
-    const onClose = () => {
-        onDismiss?.();
-        setIsIn(false);
-    };
-    // Sets the open state.
-    useEffect(() => {
-        setIsIn(open);
-    }, [open]);
-    return (React.createElement(Fade, { in: isIn, unmountOnExit: true },
-        React.createElement(Alert, { className: className, onClose: onClose, ...props }, children)));
-};

package/lib/components/common/Banner/components/SessionTimeout/sessionTimeout.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const Banner: import("@emotion/styled").StyledComponent<import("../BannerPrimary/bannerPrimary").BannerPrimaryProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;

package/lib/components/common/Banner/components/SessionTimeout/sessionTimeout.styles.js

@@ -1,21 +0,0 @@
-import styled from "@emotion/styled";
-import { mediaDesktopUp } from "../../../../../styles/common/mixins/breakpoints";
-import { BannerPrimary } from "../BannerPrimary/bannerPrimary";
-export const Banner = styled(BannerPrimary) `
-  gap: 12px;
-  padding: 8px 12px;
-
-  ${mediaDesktopUp} {
-    padding: 8px 16px;
-  }
-
-  .MuiAlert-message {
-    align-self: center;
-    flex: 1;
-  }
-
-  .MuiAlert-action {
-    margin: -8px;
-    padding: 0;
-  }
-`;

package/src/components/Index/components/TitleCell/titleCell.styles.ts

@@ -1,7 +0,0 @@
-import styled from "@emotion/styled";
-import { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
-import { Grid } from "../../../common/Grid/grid";
-
-export const TitleCell = styled(Grid)`
-  ${textBodySmall400};
-`;

package/src/components/Index/components/TitleCell/titleCell.tsx

@@ -1,22 +0,0 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
-import { TEXT_BODY_400 } from "../../../../theme/common/typography";
-import { Link, LinkProps } from "../../../Links/components/Link/link";
-import { TitleCell as Cell } from "./titleCell.styles";
-
-export interface TitleCellProps extends LinkProps {
-  title: ReactNode;
-}
-
-export const TitleCell = ({ title, ...props }: TitleCellProps): JSX.Element => {
-  return (
-    <Cell gridSx={{ gap: 1 }}>
-      {typeof title === "string" ? (
-        <Typography variant={TEXT_BODY_400}>{title}</Typography>
-      ) : (
-        title
-      )}
-      <Link {...props} />
-    </Cell>
-  );
-};

package/src/components/common/Alert/alert.stories.tsx

@@ -1,41 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Alert } from "./alert";
-
-export default {
-  argTypes: {
-    children: {
-      control: "text",
-      description: "Inner text",
-    },
-    color: {
-      description: "Color of alert",
-    },
-    icon: {
-      control: "text",
-      description: "Top left icon. If provided will replace severity.",
-    },
-    severity: {
-      description: "Top left predefined icon. Combine with color.",
-    },
-    title: {
-      control: "text",
-      description: "Highlighted text",
-    },
-    variant: {
-      description: "Type of the alert",
-    },
-  },
-  component: Alert,
-  title: "Components/Common/Alert",
-} as Meta<typeof Alert>;
-
-type Story = StoryObj<typeof Alert>;
-
-export const AlertStory: Story = {
-  args: {
-    children: "Something certainly happened",
-    color: "warning",
-    severity: "warning",
-    title: "Ouch!",
-  },
-};