@databiosphere/findable-ui 21.4.0 → 22.0.0

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.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;

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

@@ -1,11 +1,14 @@
-import React from "react";
 import { AzulFileDownload } from "./azulFileDownload";
-export default {
+const meta = {
     component: AzulFileDownload,
     title: "Components/Common/IconButton/Download",
 };
-const AzulFileDownloadTemplate = (args) => React.createElement(AzulFileDownload, { ...args });
-export const AzulFileDownloadStory = AzulFileDownloadTemplate.bind({});
-AzulFileDownloadStory.args = {
-    url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+export default meta;
+export const AzulFileDownloadStory = {
+    args: {
+        entityName: "",
+        relatedEntityId: "",
+        relatedEntityName: "",
+        url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
+    },
 };

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.d.ts

@@ -1,5 +1,13 @@
-import { ComponentMeta } from "@storybook/react";
-import { Summaries } from "./summaries";
-declare const _default: ComponentMeta<typeof Summaries>;
-export default _default;
-export declare const SummariesStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./summaries").SummariesProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        summaries: {
+            control: "object";
+        };
+    };
+    component: ({ summaries }: import("./summaries").SummariesProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SummariesStory: Story;

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.js

@@ -1,18 +1,18 @@
-import React from "react";
 import { Summaries } from "./summaries";
-export default {
+const meta = {
     argTypes: {
-        summaries: { control: "array" },
+        summaries: { control: "object" },
     },
     component: Summaries,
     title: "Components/Summary",
 };
-const SummariesTemplate = (args) => (React.createElement(Summaries, { ...args }));
-export const SummariesStory = SummariesTemplate.bind({});
-SummariesStory.args = {
-    summaries: [
-        { count: "1", label: "Species" },
-        { count: "1.1k", label: "Donors" },
-        { count: "508.5k", label: "Files" },
-    ],
+export default meta;
+export const SummariesStory = {
+    args: {
+        summaries: [
+            { count: "1", label: "Species" },
+            { count: "1.1k", label: "Donors" },
+            { count: "508.5k", label: "Files" },
+        ],
+    },
 };

package/lib/components/Index/components/Hero/hero.stories.d.ts

@@ -1,5 +1,23 @@
-import { ComponentMeta } from "@storybook/react";
-import { Hero } from "./hero";
-declare const _default: ComponentMeta<typeof Hero>;
-export default _default;
-export declare const HeroStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./hero").HeroProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        Summaries: {
+            table: {
+                disable: true;
+            };
+        };
+        title: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ SideBarButton, Summaries, title, }: import("./hero").HeroProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const HeroStory: Story;

package/lib/components/Index/components/Hero/hero.stories.js

@@ -1,7 +1,8 @@
 import React from "react";
+import { Summaries } from "./components/Summaries/summaries";
 import { SummariesStory } from "./components/Summaries/summaries.stories";
 import { Hero } from "./hero";
-export default {
+const meta = {
     argTypes: {
         Summaries: { table: { disable: true } },
         title: { table: { disable: true } },
@@ -12,9 +13,10 @@ export default {
     },
     title: "Components/Hero/ExploreView",
 };
-const HeroTemplate = (args) => React.createElement(Hero, { ...args });
-export const HeroStory = HeroTemplate.bind({});
-HeroStory.args = {
-    Summaries: React.createElement(SummariesStory, { ...SummariesStory.args }),
-    title: "Data Explorer",
+export default meta;
+export const HeroStory = {
+    args: {
+        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
+        title: "Data Explorer",
+    },
 };