@databiosphere/findable-ui 21.3.0 → 22.0.0

package/lib/components/Filter/components/Filter/filter.stories.d.ts

@@ -1,5 +1,25 @@
-import { ComponentMeta } from "@storybook/react";
-import { Filter } from "./filter";
-declare const _default: ComponentMeta<typeof Filter>;
-export default _default;
-export declare const FilterStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./filter").FilterProps>;
+import { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    argTypes: {
+        tags: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }: import("./filter").FilterProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        categorySection?: string | undefined;
+        categoryView: import("../../../../common/entities").SelectCategoryView;
+        closeAncestor?: (() => void) | undefined;
+        isFilterDrawer: boolean;
+        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
+        tags?: React.ReactNode;
+        trackFilterOpened?: import("../../../../config/entities").TrackFilterOpenedFunction | undefined;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterStory: Story;

package/lib/components/Filter/components/Filter/filter.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Filter } from "./filter";
-export default {
+const meta = {
     argTypes: {
         tags: { control: { disable: true } },
     },
@@ -11,31 +11,32 @@ export default {
     ],
     title: "Components/Filter/Filter",
 };
-const FilterTemplate = (args) => (React.createElement(Filter, { ...args }));
+export default meta;
 const onFilter = () => {
     // onFilter function
 };
-export const FilterStory = FilterTemplate.bind({});
-FilterStory.args = {
-    categoryView: {
-        isDisabled: false,
-        key: "genusSpecies",
-        label: "Genus Species",
-        values: [
-            {
-                count: 12,
-                key: "homoSapiens",
-                label: "Homo sapiens",
-                selected: false,
-            },
-            {
-                count: 6,
-                key: "musMusculus",
-                label: "Mus musculus",
-                selected: false,
-            },
-        ],
+export const FilterStory = {
+    args: {
+        categoryView: {
+            isDisabled: false,
+            key: "genusSpecies",
+            label: "Genus Species",
+            values: [
+                {
+                    count: 12,
+                    key: "homoSapiens",
+                    label: "Homo sapiens",
+                    selected: false,
+                },
+                {
+                    count: 6,
+                    key: "musMusculus",
+                    label: "Mus musculus",
+                    selected: false,
+                },
+            ],
+        },
+        isFilterDrawer: false,
+        onFilter,
     },
-    isFilterDrawer: false,
-    onFilter,
 };

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.d.ts

@@ -1,5 +1,31 @@
-import { ComponentMeta } from "@storybook/react";
-import { FilterLabel } from "./filterLabel";
-declare const _default: ComponentMeta<typeof FilterLabel>;
-export default _default;
-export declare const FilterLabelStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./filterLabel").FilterLabelProps>;
+import { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    argTypes: {
+        count: {
+            control: "number";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        isOpen: {
+            control: "boolean";
+        };
+        label: {
+            control: "text";
+        };
+    };
+    component: ({ annotation, count, disabled, isOpen, label, onClick, }: import("./filterLabel").FilterLabelProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        annotation?: import("../../../../common/entities").DataDictionaryAnnotation | undefined;
+        count?: number | undefined;
+        disabled?: boolean | undefined;
+        isOpen: boolean;
+        label: string;
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterLabelStory: Story;

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { FilterLabel } from "./filterLabel";
-export default {
+const meta = {
     argTypes: {
         count: { control: "number" },
         disabled: { control: "boolean" },
@@ -14,11 +14,13 @@ export default {
     ],
     title: "Components/Filter/FilterLabel",
 };
-const FilterLabelTemplate = (args) => (React.createElement(FilterLabel, { ...args }));
-export const FilterLabelStory = FilterLabelTemplate.bind({});
-FilterLabelStory.args = {
-    count: 123,
-    disabled: false,
-    isOpen: false,
-    label: "Label",
+export default meta;
+export const FilterLabelStory = {
+    args: {
+        count: 123,
+        disabled: false,
+        isOpen: false,
+        label: "Label",
+        onClick: () => { },
+    },
 };

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.d.ts

@@ -1,5 +1,38 @@
-import { ComponentMeta } from "@storybook/react";
-import { FilterMenu } from "./filterMenu";
-declare const _default: ComponentMeta<typeof FilterMenu>;
-export default _default;
-export declare const FilterMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./filterMenu").FilterMenuProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        categoryKey: {
+            control: {
+                disable: true;
+            };
+        };
+        menuWidth: {
+            control: "number";
+        };
+        onFilter: {
+            control: {
+                disable: true;
+            };
+        };
+        values: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ categoryKey, categoryLabel, categorySection, isFilterDrawer, menuWidth, onCloseFilter, onFilter, values, }: import("./filterMenu").FilterMenuProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        categoryKey: import("../../../../common/entities").CategoryKey;
+        categoryLabel: string;
+        categorySection?: string | undefined;
+        isFilterDrawer: boolean;
+        menuWidth?: number | undefined;
+        onCloseFilter: () => void;
+        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
+        values: import("../../../../common/entities").SelectCategoryValueView[];
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterMenuStory: Story;

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.js

@@ -1,13 +1,11 @@
 import React from "react";
 import { FilterMenu } from "./filterMenu";
-export default {
+const meta = {
     argTypes: {
-        argTypes: {
-            categoryKey: { control: { disable: true } },
-            menuWidth: { control: "number" },
-            onFilter: { control: { disable: true } },
-            values: { control: { disable: true } },
-        },
+        categoryKey: { control: { disable: true } },
+        menuWidth: { control: "number" },
+        onFilter: { control: { disable: true } },
+        values: { control: { disable: true } },
     },
     component: FilterMenu,
     decorators: [
@@ -16,101 +14,106 @@ export default {
     ],
     title: "Components/Filter/FilterMenu",
 };
-const FilterMenuTemplate = (args) => (React.createElement(FilterMenu, { ...args }));
-export const FilterMenuStory = FilterMenuTemplate.bind({});
-FilterMenuStory.args = {
-    categoryKey: "donorDisease",
-    menuWidth: 312,
-    values: [
-        {
-            count: 312,
-            key: "normal",
-            label: "Normal",
-            selected: false,
-        },
-        {
-            count: 0,
-            key: "abscess",
-            label: "abscess",
-            selected: false,
-        },
-        {
-            count: 3,
-            key: "acoustic neuroma",
-            label: "acoustic neuroma",
-            selected: true,
-        },
-        {
-            count: 3,
-            key: "acute kidney failure",
-            label: "acute kidney failure",
-            selected: true,
-        },
-        {
-            count: 3,
-            key: "acute kidney tubular necrosis",
-            label: "acute kidney tubular necrosis",
-            selected: true,
-        },
-        {
-            count: 3,
-            key: "alcohol abuse",
-            label: "alcohol abuse",
-            selected: true,
-        },
-        {
-            count: 3,
-            key: "Alzheimer disease",
-            label: "Alzheimer disease",
-            selected: true,
-        },
-        {
-            count: 3,
-            key: "amyotrophic lateral sclerosis",
-            label: "amyotrophic lateral sclerosis",
-            selected: true,
-        },
-        {
-            count: 1,
-            key: "anxiety disorder",
-            label: "anxiety disorder",
-            selected: true,
-        },
-        {
-            count: 3,
-            key: "aplastic anemia",
-            label: "aplastic anemia",
-            selected: true,
-        },
-        {
-            count: 3,
-            key: "arthritis",
-            label: "arthritis",
-            selected: true,
-        },
-        {
-            count: 3,
-            key: "asthma",
-            label: "asthma",
-            selected: true,
-        },
-        {
-            count: 222,
-            key: "atherosclerosis",
-            label: "atherosclerosis",
-            selected: false,
-        },
-        {
-            count: 222,
-            key: "atrial fibrillation",
-            label: "atrial fibrillation",
-            selected: true,
-        },
-        {
-            count: 222,
-            key: "benign prostatic hyperplasia",
-            label: "benign prostatic hyperplasia",
-            selected: true,
-        },
-    ],
+export default meta;
+export const FilterMenuStory = {
+    args: {
+        categoryKey: "donorDisease",
+        categoryLabel: "Donor Disease",
+        isFilterDrawer: false,
+        menuWidth: 312,
+        onCloseFilter: () => { },
+        onFilter: () => { },
+        values: [
+            {
+                count: 312,
+                key: "normal",
+                label: "Normal",
+                selected: false,
+            },
+            {
+                count: 0,
+                key: "abscess",
+                label: "abscess",
+                selected: false,
+            },
+            {
+                count: 3,
+                key: "acoustic neuroma",
+                label: "acoustic neuroma",
+                selected: true,
+            },
+            {
+                count: 3,
+                key: "acute kidney failure",
+                label: "acute kidney failure",
+                selected: true,
+            },
+            {
+                count: 3,
+                key: "acute kidney tubular necrosis",
+                label: "acute kidney tubular necrosis",
+                selected: true,
+            },
+            {
+                count: 3,
+                key: "alcohol abuse",
+                label: "alcohol abuse",
+                selected: true,
+            },
+            {
+                count: 3,
+                key: "Alzheimer disease",
+                label: "Alzheimer disease",
+                selected: true,
+            },
+            {
+                count: 3,
+                key: "amyotrophic lateral sclerosis",
+                label: "amyotrophic lateral sclerosis",
+                selected: true,
+            },
+            {
+                count: 1,
+                key: "anxiety disorder",
+                label: "anxiety disorder",
+                selected: true,
+            },
+            {
+                count: 3,
+                key: "aplastic anemia",
+                label: "aplastic anemia",
+                selected: true,
+            },
+            {
+                count: 3,
+                key: "arthritis",
+                label: "arthritis",
+                selected: true,
+            },
+            {
+                count: 3,
+                key: "asthma",
+                label: "asthma",
+                selected: true,
+            },
+            {
+                count: 222,
+                key: "atherosclerosis",
+                label: "atherosclerosis",
+                selected: false,
+            },
+            {
+                count: 222,
+                key: "atrial fibrillation",
+                label: "atrial fibrillation",
+                selected: true,
+            },
+            {
+                count: 222,
+                key: "benign prostatic hyperplasia",
+                label: "benign prostatic hyperplasia",
+                selected: true,
+            },
+        ],
+    },
 };

package/lib/components/Filter/components/FilterTag/filterTag.stories.d.ts

@@ -1,5 +1,16 @@
-import { ComponentMeta } from "@storybook/react";
-import { FilterTag } from "./filterTag";
-declare const _default: ComponentMeta<typeof FilterTag>;
-export default _default;
-export declare const FilterTagStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./filterTag").FilterTagProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        superseded: {
+            control: "boolean";
+        };
+    };
+    component: ({ label, onRemove, superseded, }: import("./filterTag").FilterTagProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterTagStory: Story;

package/lib/components/Filter/components/FilterTag/filterTag.stories.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { FilterTag } from "./filterTag";
-export default {
+const meta = {
     argTypes: {
         label: { control: "text" },
         superseded: { control: "boolean" },
@@ -8,9 +7,11 @@ export default {
     component: FilterTag,
     title: "Components/Filter/FilterTag",
 };
-const FilterTagTemplate = (args) => (React.createElement(FilterTag, { ...args }));
-export const FilterTagStory = FilterTagTemplate.bind({});
-FilterTagStory.args = {
-    label: "Male",
-    superseded: false,
+export default meta;
+export const FilterTagStory = {
+    args: {
+        label: "Male",
+        onRemove: () => { },
+        superseded: false,
+    },
 };

package/lib/components/Filter/components/FilterTags/filterTags.stories.d.ts

@@ -1,5 +1,18 @@
-import { ComponentMeta } from "@storybook/react";
-import { FilterTags } from "./filterTags";
-declare const _default: ComponentMeta<typeof FilterTags>;
-export default _default;
-export declare const FilterTagsStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./filterTags").FilterTagsProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        tags: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ tags }: import("./filterTags").FilterTagsProps) => JSX.Element | null;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        tags?: import("../../../../common/entities").CategoryTag[] | undefined;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterTagsStory: Story;

package/lib/components/Filter/components/FilterTags/filterTags.stories.js

@@ -1,6 +1,9 @@
 import React from "react";
 import { FilterTags } from "./filterTags";
-export default {
+const onRemove = () => {
+    // onRemove function
+};
+const meta = {
     argTypes: {
         tags: { control: { disable: true } },
     },
@@ -11,42 +14,40 @@ export default {
     ],
     title: "Components/Filter/FilterTags",
 };
-const FilterTagsTemplate = (args) => (React.createElement(FilterTags, { ...args }));
-const onRemove = () => {
-    // onRemove function
-};
-export const FilterTagsStory = FilterTagsTemplate.bind({});
-FilterTagsStory.args = {
-    tags: [
-        {
-            label: "Normal",
-            onRemove: onRemove,
-            superseded: false,
-        },
-        {
-            label: "abscess",
-            onRemove: onRemove,
-            superseded: true,
-        },
-        {
-            label: "acoustic neuroma",
-            onRemove: onRemove,
-            superseded: false,
-        },
-        {
-            label: "acute kidney failure",
-            onRemove: onRemove,
-            superseded: false,
-        },
-        {
-            label: "acute kidney tubular necrosis",
-            onRemove: onRemove,
-            superseded: false,
-        },
-        {
-            label: "alcohol abuse",
-            onRemove: onRemove,
-            superseded: false,
-        },
-    ],
+export default meta;
+export const FilterTagsStory = {
+    args: {
+        tags: [
+            {
+                label: "Normal",
+                onRemove: onRemove,
+                superseded: false,
+            },
+            {
+                label: "abscess",
+                onRemove: onRemove,
+                superseded: true,
+            },
+            {
+                label: "acoustic neuroma",
+                onRemove: onRemove,
+                superseded: false,
+            },
+            {
+                label: "acute kidney failure",
+                onRemove: onRemove,
+                superseded: false,
+            },
+            {
+                label: "acute kidney tubular necrosis",
+                onRemove: onRemove,
+                superseded: false,
+            },
+            {
+                label: "alcohol abuse",
+                onRemove: onRemove,
+                superseded: false,
+            },
+        ],
+    },
 };

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.js

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { useFileLocation } from "../../../../hooks/useFileLocation";
+import { useLoginGuard } from "../../../../providers/loginGuard/hook";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { IconButton } from "../../../common/IconButton/iconButton";
@@ -11,6 +12,8 @@ export const AzulFileDownload = ({ entityName, relatedEntityId, relatedEntityNam
     const { fileUrl, isLoading, run } = useFileLocation(url);
     const downloadRef = useRef(null);
     const [isRequestPending, setIsRequestPending] = useState(false);
+    // Prompt user for login before download, if required.
+    const { requireLogin } = useLoginGuard();
     // Initiates file download when file location request is successful.
     useEffect(() => {
         if (!fileUrl)
@@ -22,11 +25,13 @@ export const AzulFileDownload = ({ entityName, relatedEntityId, relatedEntityNam
         downloadEl.click();
         setIsRequestPending(false);
     }, [fileUrl]);
+    // Initiates file download when download button is clicked.
+    const handleDownloadClick = () => {
+        setIsRequestPending(true);
+        trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
+        run();
+    };
     return (React.createElement(Fragment, null,
-        isRequestPending ? (React.createElement(StyledIconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID, Icon: LoadingIcon, size: "medium" })) : (React.createElement(IconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID, disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: () => {
-                setIsRequestPending(true);
-                trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
-                run();
-            }, size: "medium" })),
+        isRequestPending ? (React.createElement(StyledIconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID, Icon: LoadingIcon, size: "medium" })) : (React.createElement(IconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID, disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: () => requireLogin(handleDownloadClick), size: "medium" })),
         React.createElement(Box, { component: "a", "data-testid": AZUL_FILE_DOWNLOAD_TEST_ID, download: true, ref: downloadRef, sx: { display: "none" } })));
 };

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.stories.d.ts

@@ -1,5 +1,8 @@
-import { ComponentMeta } from "@storybook/react";
-import { AzulFileDownload } from "./azulFileDownload";
-declare const _default: ComponentMeta<typeof AzulFileDownload>;
-export default _default;
-export declare const AzulFileDownloadStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./azulFileDownload").AzulFileDownloadProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    component: ({ entityName, relatedEntityId, relatedEntityName, url, }: import("./azulFileDownload").AzulFileDownloadProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AzulFileDownloadStory: Story;