@databiosphere/findable-ui 21.4.0 → 22.0.0

package/lib/components/Index/components/NTagCell/nTagCell.stories.d.ts

@@ -1,5 +1,16 @@
-import { ComponentMeta } from "@storybook/react";
-import { NTagCell } from "./nTagCell";
-declare const _default: ComponentMeta<typeof NTagCell>;
-export default _default;
-export declare const NTagCellStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./nTagCell").NTagCellProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        values: {
+            control: "object";
+        };
+    };
+    component: ({ label, TypographyProps, values, }: import("./nTagCell").NTagCellProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const NTagCellStory: Story;

package/lib/components/Index/components/NTagCell/nTagCell.stories.js

@@ -1,16 +1,16 @@
-import React from "react";
 import { NTagCell } from "./nTagCell";
-export default {
+const meta = {
     argTypes: {
         label: { control: "text" },
-        values: { control: "array" },
+        values: { control: "object" },
     },
     component: NTagCell,
     title: "Components/Table/Cell/NTagCell",
 };
-const NTagCellTemplate = (args) => (React.createElement(NTagCell, { ...args }));
-export const NTagCellStory = NTagCellTemplate.bind({});
-NTagCellStory.args = {
-    label: "species",
-    values: ["Homo sapiens", "Mus musculus"],
+export default meta;
+export const NTagCellStory = {
+    args: {
+        label: "species",
+        values: ["Homo sapiens", "Mus musculus"],
+    },
 };

package/lib/components/Index/index.stories.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Summaries } from "./components/Hero/components/Summaries/summaries";
 import { SummariesStory } from "./components/Hero/components/Summaries/summaries.stories";
 import { Index } from "./index";
 export default {
@@ -17,7 +18,7 @@ export default {
 export const IndexStory = {
     args: {
         List: undefined,
-        Summaries: React.createElement(SummariesStory, { ...SummariesStory.args }),
+        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
         Tabs: undefined,
         title: "Explore Data",
     },

package/lib/components/Layout/components/BackPage/backPageView.stories.d.ts

@@ -1,5 +1,31 @@
-import { ComponentMeta } from "@storybook/react";
-import { BackPageView } from "./backPageView";
-declare const _default: ComponentMeta<typeof BackPageView>;
-export default _default;
-export declare const BackPageViewStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./backPageView").BackPageViewProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        isDetailOverview: {
+            control: "boolean";
+        };
+        mainColumn: {
+            table: {
+                disable: true;
+            };
+        };
+        sideColumn: {
+            table: {
+                disable: true;
+            };
+        };
+        top: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ isDetailOverview, mainColumn, sideColumn, Tabs, top, }: import("./backPageView").BackPageViewProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BackPageViewStory: Story;

package/lib/components/Layout/components/BackPage/backPageView.stories.js

@@ -1,15 +1,23 @@
 import React from "react";
+import { CollaboratingOrganizations } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
 import { CollaboratingOrganizationsStory } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { Contacts } from "../../../Project/components/Contacts/contacts";
 import { ContactsStory } from "../../../Project/components/Contacts/contacts.stories";
+import { Contributors } from "../../../Project/components/Contributors/contributors";
 import { ContributorsStory } from "../../../Project/components/Contributors/contributors.stories";
+import { DataCurators } from "../../../Project/components/DataCurators/dataCurators";
 import { DataCuratorsStory } from "../../../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicyStory } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DataReleasePolicy } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy";
+import { Description } from "../../../Project/components/Description/description";
 import { DescriptionStory } from "../../../Project/components/Description/description.stories";
+import { Details } from "../../../Project/components/Details/details";
 import { DetailsStory } from "../../../Project/components/Details/details.stories";
+import { Publications } from "../../../Project/components/Publications/publications";
 import { PublicationsStory } from "../../../Project/components/Publications/publications.stories";
+import { SupplementaryLinks } from "../../../Project/components/SupplementaryLinks/supplementaryLinks";
 import { SupplementaryLinksStory } from "../../../Project/components/SupplementaryLinks/supplementaryLinks.stories";
 import { BackPageView } from "./backPageView";
-export default {
+const meta = {
     argTypes: {
         isDetailOverview: { control: "boolean" },
         mainColumn: { table: { disable: true } },
@@ -22,20 +30,21 @@ export default {
     },
     title: "Views/BackPage",
 };
-const BackPageViewTemplate = (args) => (React.createElement(BackPageView, { ...args }));
-export const BackPageViewStory = BackPageViewTemplate.bind({});
-BackPageViewStory.args = {
-    isDetailOverview: true,
-    mainColumn: (React.createElement(React.Fragment, null,
-        React.createElement(DescriptionStory, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
-        React.createElement(ContactsStory, { ...ContactsStory.args }),
-        React.createElement(PublicationsStory, { ...PublicationsStory.args }),
-        React.createElement(ContributorsStory, { ...ContributorsStory.args }),
-        React.createElement(CollaboratingOrganizationsStory, { ...CollaboratingOrganizationsStory.args }),
-        React.createElement(DataCuratorsStory, { ...DataCuratorsStory.args }),
-        React.createElement(SupplementaryLinksStory, { ...SupplementaryLinksStory.args }),
-        React.createElement(DataReleasePolicyStory, null))),
-    sideColumn: (React.createElement(React.Fragment, null,
-        React.createElement(DetailsStory, { title: DetailsStory.args?.title ?? "", keyValuePairs: DetailsStory.args?.keyValuePairs }))),
-    top: React.createElement(React.Fragment, null),
+export default meta;
+export const BackPageViewStory = {
+    args: {
+        isDetailOverview: true,
+        mainColumn: (React.createElement(React.Fragment, null,
+            React.createElement(Description, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
+            React.createElement(Contacts, { ...ContactsStory.args }),
+            React.createElement(Publications, { ...PublicationsStory.args }),
+            React.createElement(Contributors, { ...ContributorsStory.args }),
+            React.createElement(CollaboratingOrganizations, { ...CollaboratingOrganizationsStory.args }),
+            React.createElement(DataCurators, { ...DataCuratorsStory.args }),
+            React.createElement(SupplementaryLinks, { ...SupplementaryLinksStory.args }),
+            React.createElement(DataReleasePolicy, null))),
+        sideColumn: (React.createElement(React.Fragment, null,
+            React.createElement(Details, { ...DetailsStory.args }))),
+        top: React.createElement(React.Fragment, null),
+    },
 };

package/lib/components/Layout/components/Footer/footer.stories.d.ts

@@ -1,6 +1,27 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { Footer } from "./footer";
-declare const _default: Meta<typeof Footer>;
-export default _default;
+declare const meta: {
+    argTypes: {
+        Branding: {
+            control: {
+                disabled: boolean;
+            };
+        };
+        navLinks: {
+            control: "object";
+        };
+        socials: {
+            control: {
+                disabled: boolean;
+            };
+        };
+    };
+    component: ({ Branding, className, navLinks, socials, versionInfo, }: import("./footer").FooterProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
 type Story = StoryObj<typeof Footer>;
 export declare const FooterStory: Story;

package/lib/components/Layout/components/Footer/footer.stories.js

@@ -7,10 +7,10 @@ import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
 import { Logo } from "../Header/components/Content/components/Logo/logo";
 import { Footer } from "./footer";
-export default {
+const meta = {
     argTypes: {
         Branding: { control: { disabled: true } },
-        navLinks: { control: "array" },
+        navLinks: { control: "object" },
         socials: { control: { disabled: true } },
     },
     component: Footer,
@@ -19,9 +19,10 @@ export default {
     },
     title: "Components/Layout/Footer",
 };
+export default meta;
 export const FooterStory = {
     args: {
-        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo }),
+        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo.src }),
         navLinks: [
             {
                 label: "Help",

package/lib/components/Layout/components/Header/header.stories.js

@@ -25,7 +25,7 @@ const url = "/";
 export const HeaderStory = {
     args: {
         authenticationEnabled: false,
-        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
+        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo.src }),
         navigation: [
             undefined,
             [

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.d.ts

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

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.js

@@ -1,14 +1,14 @@
-import React from "react";
 import { SidebarLabel } from "./sidebarLabel";
-export default {
+const meta = {
     argTypes: {
         label: { control: "text" },
     },
     component: SidebarLabel,
     title: "Components/Label",
 };
-const SidebarLabelTemplate = (args) => (React.createElement(SidebarLabel, { ...args }));
-export const SidebarLabelStory = SidebarLabelTemplate.bind({});
-SidebarLabelStory.args = {
-    label: "Filter",
+export default meta;
+export const SidebarLabelStory = {
+    args: {
+        label: "Filter",
+    },
 };

package/lib/components/Layout/components/Sidebar/sidebar.stories.js

@@ -1,3 +1,4 @@
+import { fn } from "@storybook/test";
 import React from "react";
 import { Sidebar } from "./sidebar";
 export default {
@@ -34,5 +35,6 @@ export const TemporaryOpenSidebarStory = {
     args: {
         children: React.createElement("div", null),
         drawerOpen: true,
+        onDrawerClose: fn(),
     },
 };

package/lib/components/Links/links.stories.d.ts

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

package/lib/components/Links/links.stories.js

@@ -1,21 +1,21 @@
-import React from "react";
 import { Links } from "./links";
-export default {
+const FACEBOOK_URL = "https://www.facebook.com";
+const GOOGLE_URL = "https://www.google.com";
+const TWITTER_URL = "https://www.twitter.com";
+const meta = {
     argTypes: {
-        links: { control: "array" },
+        links: { control: "object" },
     },
     component: Links,
     title: "Components/Deprecated/Links",
 };
-const LinksTemplate = (args) => (React.createElement(Links, { ...args }));
-const FACEBOOK_URL = "https://www.facebook.com";
-const GOOGLE_URL = "https://www.google.com";
-const TWITTER_URL = "https://www.twitter.com";
-export const LinksStory = LinksTemplate.bind({});
-LinksStory.args = {
-    links: [
-        { label: "Facebook", url: FACEBOOK_URL },
-        { label: "Google", url: GOOGLE_URL },
-        { label: "Twitter", url: TWITTER_URL },
-    ],
+export default meta;
+export const LinksStory = {
+    args: {
+        links: [
+            { label: "Facebook", url: FACEBOOK_URL },
+            { label: "Google", url: GOOGLE_URL },
+            { label: "Twitter", url: TWITTER_URL },
+        ],
+    },
 };

package/lib/components/Loading/loading.stories.d.ts

@@ -1,5 +1,34 @@
-import { ComponentMeta } from "@storybook/react";
-import { Loading } from "./loading";
-declare const _default: ComponentMeta<typeof Loading>;
-export default _default;
-export declare const LoadingStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./loading").LoadingProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        appear: {
+            control: "boolean";
+        };
+        iconSize: {
+            control: "select";
+            options: string[];
+        };
+        loading: {
+            control: "boolean";
+        };
+        panelStyle: {
+            control: "select";
+            options: string[];
+        };
+        text: {
+            control: "text";
+        };
+    };
+    component: ({ appear, iconSize, loading, panelStyle, text, }: import("./loading").LoadingProps) => JSX.Element | null;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        appear?: boolean | undefined;
+        iconSize?: import("@mui/material").SvgIconProps["fontSize"];
+        loading: boolean;
+        panelStyle?: import("./loading").LoadingPanelStyle | undefined;
+        text?: string | undefined;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoadingStory: Story;

package/lib/components/Loading/loading.stories.js

@@ -1,9 +1,10 @@
 import React from "react";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { Loading } from "./loading";
-export default {
+const meta = {
     argTypes: {
-        className: { control: { disabled: true } },
+        appear: { control: "boolean" },
+        iconSize: { control: "select", options: ["small", "medium", "large"] },
         loading: { control: "boolean" },
         panelStyle: {
             control: "select",
@@ -23,8 +24,9 @@ export default {
     ],
     title: "Components/Communication/Loading",
 };
-const LoadingTemplate = (args) => (React.createElement(Loading, { ...args }));
-export const LoadingStory = LoadingTemplate.bind({});
-LoadingStory.args = {
-    loading: true,
+export default meta;
+export const LoadingStory = {
+    args: {
+        loading: true,
+    },
 };

package/lib/components/Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories.d.ts

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

package/lib/components/Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories.js

@@ -1,27 +1,27 @@
-import React from "react";
 import { CollaboratingOrganizations } from "./collaboratingOrganizations";
-export default {
+const meta = {
     argTypes: {
-        collaboratingOrganizations: { control: "array" },
+        collaboratingOrganizations: { control: "object" },
     },
     component: CollaboratingOrganizations,
     title: "Components/SectionContent/Content/Project",
 };
-const CollaboratingOrganizationsTemplate = (args) => React.createElement(CollaboratingOrganizations, { ...args });
-export const CollaboratingOrganizationsStory = CollaboratingOrganizationsTemplate.bind({});
-CollaboratingOrganizationsStory.args = {
-    collaboratingOrganizations: [
-        {
-            citation: 1,
-            name: "The Jackson Laboratory",
-        },
-        {
-            citation: 2,
-            name: "The New York Genome Center",
-        },
-        {
-            citation: 3,
-            name: "Weill Cornell Medicine",
-        },
-    ],
+export default meta;
+export const CollaboratingOrganizationsStory = {
+    args: {
+        collaboratingOrganizations: [
+            {
+                citation: 1,
+                name: "The Jackson Laboratory",
+            },
+            {
+                citation: 2,
+                name: "The New York Genome Center",
+            },
+            {
+                citation: 3,
+                name: "Weill Cornell Medicine",
+            },
+        ],
+    },
 };

package/lib/components/Project/components/Contacts/contacts.stories.d.ts

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

package/lib/components/Project/components/Contacts/contacts.stories.js

@@ -1,25 +1,25 @@
-import React from "react";
 import { Contacts } from "./contacts";
-export default {
+const meta = {
     argTypes: {
-        contacts: { control: "array" },
+        contacts: { control: "object" },
     },
     component: Contacts,
     title: "Components/SectionContent/Content/Project",
 };
-const ContactsTemplate = (args) => (React.createElement(Contacts, { ...args }));
-export const ContactsStory = ContactsTemplate.bind({});
-ContactsStory.args = {
-    contacts: [
-        {
-            email: "gervaise.henry@utsouthwestern.edu",
-            institution: "UT Southwestern",
-            name: "Gervaise H Henry",
-        },
-        {
-            email: "poppy@utsouthwestern.edu",
-            institution: "UT Southwestern",
-            name: "Poppy Rose Roberts",
-        },
-    ],
+export default meta;
+export const ContactsStory = {
+    args: {
+        contacts: [
+            {
+                email: "gervaise.henry@utsouthwestern.edu",
+                institution: "UT Southwestern",
+                name: "Gervaise H Henry",
+            },
+            {
+                email: "poppy@utsouthwestern.edu",
+                institution: "UT Southwestern",
+                name: "Poppy Rose Roberts",
+            },
+        ],
+    },
 };

package/lib/components/Project/components/Contributors/contributors.stories.d.ts

@@ -1,5 +1,8 @@
-import { ComponentMeta } from "@storybook/react";
-import { Contributors } from "./contributors";
-declare const _default: ComponentMeta<typeof Contributors>;
-export default _default;
-export declare const ContributorsStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./contributors").ContributorsProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    component: ({ contributors, }: import("./contributors").ContributorsProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ContributorsStory: Story;

package/lib/components/Project/components/Contributors/contributors.stories.js

@@ -1,32 +1,32 @@
-import React from "react";
 import { Contributors } from "./contributors";
-export default {
+const meta = {
     component: Contributors,
     title: "Components/SectionContent/Content/Project",
 };
-const ContributorsTemplate = (args) => (React.createElement(Contributors, { ...args }));
-export const ContributorsStory = ContributorsTemplate.bind({});
-ContributorsStory.args = {
-    contributors: [
-        {
-            citation: 1,
-            name: "Rose R Reginold",
-            role: undefined,
-        },
-        {
-            citation: 1,
-            name: "Frank D Dirk",
-            role: "Project Coordinator",
-        },
-        {
-            citation: 2,
-            name: "Marcelo Freire",
-            role: "Principal Investigator",
-        },
-        {
-            citation: 3,
-            name: "Nathan Lawlor",
-            role: "Computational Scientist",
-        },
-    ],
+export default meta;
+export const ContributorsStory = {
+    args: {
+        contributors: [
+            {
+                citation: 1,
+                name: "Rose R Reginold",
+                role: undefined,
+            },
+            {
+                citation: 1,
+                name: "Frank D Dirk",
+                role: "Project Coordinator",
+            },
+            {
+                citation: 2,
+                name: "Marcelo Freire",
+                role: "Principal Investigator",
+            },
+            {
+                citation: 3,
+                name: "Nathan Lawlor",
+                role: "Computational Scientist",
+            },
+        ],
+    },
 };