@databiosphere/findable-ui 13.0.1 → 15.0.0

package/src/styles/common/mui/alert.ts

@@ -0,0 +1,24 @@
+import { AlertProps } from "@mui/material";
+
+export const COLOR: Record<string, AlertProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  INK: "ink",
+  PRIMARY: "primary",
+  SMOKE: "smoke",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+export const SEVERITY: Record<string, AlertProps["severity"]> = {
+  ERROR: "error",
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+export const VARIANT: Record<string, AlertProps["variant"]> = {
+  FILLED: "filled",
+  OUTLINED: "outlined",
+  STANDARD: "standard",
+};

package/src/styles/common/mui/chip.ts

@@ -0,0 +1,36 @@
+import { ChipProps } from "@mui/material";
+
+type ChipPropsOptions = {
+  COLOR: typeof COLOR;
+  SIZE: typeof SIZE;
+  VARIANT: typeof VARIANT;
+};
+
+const COLOR: Record<string, ChipProps["color"]> = {
+  DEFAULT: "default",
+  ERROR: "error",
+  INFO: "info",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const SIZE: Record<string, ChipProps["size"]> = {
+  MEDIUM: "medium",
+  SMALL: "small",
+};
+
+const VARIANT: Record<string, ChipProps["variant"]> = {
+  FILLED: "filled",
+  FILTER_TAG: "filterTag",
+  N_TAG: "ntag",
+  OUTLINED: "outlined",
+  STATUS: "status",
+};
+
+export const CHIP_PROPS: ChipPropsOptions = {
+  COLOR,
+  SIZE,
+  VARIANT,
+};

package/src/styles/common/mui/icon.ts

@@ -0,0 +1,8 @@
+import { IconProps } from "@mui/material";
+
+export const FONT_SIZE: Record<string, IconProps["fontSize"]> = {
+  INHERIT: "inherit",
+  LARGE: "large",
+  MEDIUM: "medium",
+  SMALL: "small",
+};

package/src/theme/common/components.ts

@@ -1,9 +1,6 @@
 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 { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
   alpha32,
@@ -19,7 +16,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 +81,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
  */
@@ -575,8 +418,23 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
         color: "inherit",
         margin: "0 -2px 0 0",
       },
+      label: {
+        ...theme.typography[TEXT_BODY_SMALL_400],
+      },
     },
     variants: [
+      {
+        props: { size: CHIP_PROPS.SIZE.SMALL },
+        style: {
+          height: 20,
+        },
+      },
+      {
+        props: { size: CHIP_PROPS.SIZE.MEDIUM },
+        style: {
+          height: 24,
+        },
+      },
       {
         props: { color: "default" },
         style: {
@@ -1047,11 +905,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 +1072,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/src/views/ExportView/exportView.tsx

@@ -14,7 +14,7 @@ export const ExportView = (props: ExportViewProps): JSX.Element => {
     exploreState: { filterState },
   } = useExploreState();
   useUpdateURLSearchParams();
-  useRequestFileManifest(undefined, filterState, undefined);
+  useRequestFileManifest(undefined, undefined, filterState, undefined);
   const { tabs, top } = useExportConfig();
   const currentTab = tabs[0];
   const { mainColumn, sideColumn } = currentTab;

package/tests/azulFileDownload.test.tsx

@@ -21,6 +21,11 @@ describe("AzulFileDownload", () => {
   const FILE_URL = "https://example.com/storage/file";
   const MOCK_RUN = jest.fn();
   const URL = "https://example.com/repository/file";
+  const TRACKING_PARAMETERS = {
+    entityName: "filename.extension",
+    relatedEntityId: "id",
+    relatedEntityName: "name",
+  };
   beforeEach(() => {
     (useFileLocation as jest.Mock).mockReturnValue({
       fileUrl: undefined,
@@ -33,24 +38,24 @@ describe("AzulFileDownload", () => {
   });
   describe("download button", () => {
     test("should render the download button", () => {
-      render(<AzulFileDownload url={URL} />);
+      render(<AzulFileDownload {...TRACKING_PARAMETERS} url={URL} />);
       const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
       expect(buttonEl).not.toBeNull();
     });
     test("should disable the download button if URL is undefined", () => {
-      render(<AzulFileDownload />);
+      render(<AzulFileDownload {...TRACKING_PARAMETERS} />);
       const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
       expect(buttonEl.disabled).toBe(true);
     });
     test("should enable the download button if a URL is provided", () => {
-      render(<AzulFileDownload url={URL} />);
+      render(<AzulFileDownload {...TRACKING_PARAMETERS} url={URL} />);
       const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
       expect(buttonEl.disabled).toBe(false);
     });
   });
   describe("download functionality", () => {
     test("should call the run function when the button is clicked", () => {
-      render(<AzulFileDownload url={URL} />);
+      render(<AzulFileDownload {...TRACKING_PARAMETERS} url={URL} />);
       const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
       fireEvent.click(buttonEl);
       expect(MOCK_RUN).toHaveBeenCalled();
@@ -61,7 +66,7 @@ describe("AzulFileDownload", () => {
         isLoading: false,
         run: MOCK_RUN,
       });
-      render(<AzulFileDownload url={URL} />);
+      render(<AzulFileDownload {...TRACKING_PARAMETERS} url={URL} />);
       const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
       fireEvent.click(buttonEl);
       await waitFor(() => {
@@ -80,7 +85,7 @@ describe("AzulFileDownload", () => {
         isLoading: false,
         run: MOCK_RUN,
       });
-      render(<AzulFileDownload url={URL} />);
+      render(<AzulFileDownload {...TRACKING_PARAMETERS} url={URL} />);
       const buttonEl = getButtonById(AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID);
       const anchorEl = getAnchorEl(AZUL_FILE_DOWNLOAD_TEST_ID);
       fireEvent.click(buttonEl);