@databiosphere/findable-ui 21.4.0 → 22.0.0

package/lib/components/common/Breadcrumbs/breadcrumbs.stories.js

@@ -1,50 +1,49 @@
-import React from "react";
 import { Breadcrumbs } from "./breadcrumbs";
-export default {
-    argTypes: {
-        children: { control: { disabled: true } },
-    },
+const meta = {
     component: Breadcrumbs,
     title: "Components/Common/BreadCrumbs",
 };
-const BreadcrumbTemplate = (args) => (React.createElement(Breadcrumbs, { ...args }));
-export const BreadcrumbDefaultStory = BreadcrumbTemplate.bind({});
-BreadcrumbDefaultStory.args = {
-    breadcrumbs: [
-        {
-            path: "#",
-            text: "Home",
-        },
-        {
-            path: "#",
-            text: "Data Explorer",
-        },
-    ],
+export default meta;
+export const BreadcrumbDefaultStory = {
+    args: {
+        breadcrumbs: [
+            {
+                path: "#",
+                text: "Home",
+            },
+            {
+                path: "#",
+                text: "Data Explorer",
+            },
+        ],
+    },
 };
-export const BreadcrumbCustomSeparatorStory = BreadcrumbTemplate.bind({});
-BreadcrumbCustomSeparatorStory.args = {
-    Separator: " | ",
-    breadcrumbs: [
-        {
-            path: "#",
-            text: "Home",
-        },
-        {
-            path: "#",
-            text: "Data Explorer",
-        },
-    ],
+export const BreadcrumbCustomSeparatorStory = {
+    args: {
+        Separator: " | ",
+        breadcrumbs: [
+            {
+                path: "#",
+                text: "Home",
+            },
+            {
+                path: "#",
+                text: "Data Explorer",
+            },
+        ],
+    },
 };
-export const BreadcrumbWithLongerTitleStory = BreadcrumbTemplate.bind({});
-BreadcrumbWithLongerTitleStory.args = {
-    breadcrumbs: [
-        {
-            path: "#",
-            text: "Explore",
-        },
-        {
-            path: "#",
-            text: "A Single-Cell Transcriptomic Map of the Human and Mouse Pancreas Reveals Inter- and Intra-cell Population Structure",
-        },
-    ],
+export const BreadcrumbWithLongerTitleStory = {
+    args: {
+        breadcrumbs: [
+            {
+                path: "#",
+                text: "Explore",
+            },
+            {
+                path: "#",
+                text: "A Single-Cell Transcriptomic Map of the Human and Mouse Pancreas Reveals Inter- and Intra-cell Population Structure",
+            },
+        ],
+    },
 };

package/lib/components/common/Button/components/CallToActionButton/callToActionButton.stories.d.ts

@@ -1,6 +1,9 @@
-import { ComponentMeta } from "@storybook/react";
-import { CallToActionButton } from "./callToActionButton";
-declare const _default: ComponentMeta<typeof CallToActionButton>;
-export default _default;
-export declare const CallToActionButtonStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./callToActionButton").CallToActionButtonProps>;
-export declare const CallToActionButtonWithCustomComponentStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./callToActionButton").CallToActionButtonProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    component: ({ ButtonElType: Button, buttonProps, callToAction, className, disabled, }: import("./callToActionButton").CallToActionButtonProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CallToActionButtonStory: Story;
+export declare const CallToActionButtonWithCustomComponentStory: Story;

package/lib/components/common/Button/components/CallToActionButton/callToActionButton.stories.js

@@ -1,27 +1,25 @@
-import React from "react";
 import { ANCHOR_TARGET } from "../../../../Links/common/entities";
 import { CallToActionButton } from "./callToActionButton";
-export default {
-    argTypes: {
-        children: { control: { disabled: true } },
-    },
+const meta = {
     component: CallToActionButton,
     title: "Components/Common/CallToActionButton",
 };
-const CallToActionButtonTemplate = (args) => React.createElement(CallToActionButton, { ...args });
+export default meta;
 const callToAction = {
     label: "Click here",
     target: ANCHOR_TARGET.BLANK,
     url: "https://www.google.com",
 };
-export const CallToActionButtonStory = CallToActionButtonTemplate.bind({});
-CallToActionButtonStory.args = {
-    callToAction,
-    className: "call-to-action-button",
-    disabled: false,
+export const CallToActionButtonStory = {
+    args: {
+        callToAction,
+        className: "call-to-action-button",
+        disabled: false,
+    },
 };
-export const CallToActionButtonWithCustomComponentStory = CallToActionButtonTemplate.bind({});
-CallToActionButtonWithCustomComponentStory.args = {
-    ButtonElType: "a",
-    callToAction,
+export const CallToActionButtonWithCustomComponentStory = {
+    args: {
+        ButtonElType: "a",
+        callToAction,
+    },
 };

package/lib/components/common/Button/components/HelpIconButton/helpIconButton.stories.d.ts

@@ -1,6 +1,23 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
 import { HelpIconButton } from "./helpIconButton";
-declare const meta: Meta<typeof HelpIconButton>;
+declare const meta: {
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        target: {
+            control: "select";
+            options: ANCHOR_TARGET[];
+        };
+        url: {
+            control: "text";
+        };
+    };
+    component: ({ size, target, url, }: import("./helpIconButton").HelpIconButtonProps) => JSX.Element;
+    title: string;
+};
 export default meta;
 type Story = StoryObj<typeof HelpIconButton>;
 export declare const HelpIconButtonStory: Story;

package/lib/components/common/Button/components/HelpIconButton/helpIconButton.stories.js

@@ -2,8 +2,8 @@ import { ANCHOR_TARGET } from "../../../../Links/common/entities";
 import { HelpIconButton } from "./helpIconButton";
 const meta = {
     argTypes: {
-        size: { control: "select" },
-        target: { control: "select" },
+        size: { control: "select", options: ["small", "medium", "large"] },
+        target: { control: "select", options: Object.values(ANCHOR_TARGET) },
         url: { control: "text" },
     },
     component: HelpIconButton,

package/lib/components/common/Card/card.stories.d.ts

@@ -1,7 +1,10 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { Card } from "./card";
-declare const _default: Meta<typeof Card>;
-export default _default;
+declare const meta: {
+    component: ({ cardActions, cardUrl, media, Paper, secondaryText, secondaryTitle, text, title, }: import("./card").CardProps) => JSX.Element;
+    title: string;
+};
+export default meta;
 type Story = StoryObj<typeof Card>;
 export declare const CardStory: Story;
 export declare const CardActionsStory: Story;

package/lib/components/common/Card/card.stories.js

@@ -1,9 +1,10 @@
 import logo from "../../../images/logo.svg";
 import { Card } from "./card";
-export default {
+const meta = {
     component: Card,
     title: "Components/Common/Card",
 };
+export default meta;
 export const CardStory = {
     args: {
         cardUrl: "https://anvilproject.org/",

package/lib/components/common/Code/code.stories.d.ts

@@ -1,6 +1,8 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Code } from "./code";
-declare const meta: Meta<typeof Code>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    component: ({ className, code }: import("./code").CodeProps) => JSX.Element;
+    title: string;
+};
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const CodeStory: Story;

package/lib/components/common/CopyToClipboard/copyToClipboard.stories.d.ts

@@ -1,6 +1,14 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { CopyToClipboard } from "./copyToClipboard";
-declare const _default: Meta<typeof CopyToClipboard>;
-export default _default;
+declare const meta: {
+    argTypes: {
+        copyStr: {
+            description: string;
+        };
+    };
+    component: ({ copyStr, }: import("./copyToClipboard").CopyToClipboardProps) => JSX.Element;
+    title: string;
+};
+export default meta;
 type Story = StoryObj<typeof CopyToClipboard>;
 export declare const CopyToClipboardStory: Story;

package/lib/components/common/CopyToClipboard/copyToClipboard.stories.js

@@ -1,5 +1,5 @@
 import { CopyToClipboard } from "./copyToClipboard";
-export default {
+const meta = {
     argTypes: {
         copyStr: {
             description: "String to be copied",
@@ -8,6 +8,7 @@ export default {
     component: CopyToClipboard,
     title: "Components/Common/CopyToClipboard",
 };
+export default meta;
 export const CopyToClipboardStory = {
     args: {
         copyStr: "Copy me",

package/lib/components/common/Section/components/SectionTitle/sectionTitle.stories.d.ts

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

package/lib/components/common/Section/components/SectionTitle/sectionTitle.stories.js

@@ -1,14 +1,14 @@
-import React from "react";
 import { SectionTitle } from "./sectionTitle";
-export default {
+const meta = {
     argTypes: {
         title: { control: "text" },
     },
     component: SectionTitle,
     title: "Components/SectionContent/Title",
 };
-const SectionTitleTemplate = (args) => (React.createElement(SectionTitle, { ...args }));
-export const SectionTitleStory = SectionTitleTemplate.bind({});
-SectionTitleStory.args = {
-    title: "Analysis Portals",
+export default meta;
+export const SectionTitleStory = {
+    args: {
+        title: "Analysis Portals",
+    },
 };

package/lib/components/common/Socials/socials.stories.d.ts

@@ -1,6 +1,14 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { Socials } from "./socials";
-declare const _default: Meta<typeof Socials>;
-export default _default;
+declare const meta: {
+    argTypes: {
+        socials: {
+            control: "object";
+        };
+    };
+    component: import("react").ForwardRefExoticComponent<import("./socials").SocialsProps & import("react").RefAttributes<HTMLDivElement>>;
+    title: string;
+};
+export default meta;
 type Story = StoryObj<typeof Socials>;
 export declare const SocialsStory: Story;

package/lib/components/common/Socials/socials.stories.js

@@ -6,13 +6,14 @@ import { SlackIcon } from "../CustomIcon/components/SlackIcon/slackIcon";
 import { XIcon } from "../CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../CustomIcon/components/YouTubeIcon/youTubeIcon";
 import { Socials } from "./socials";
-export default {
+const meta = {
     argTypes: {
         socials: { control: "object" },
     },
     component: Socials,
     title: "Components/Navigation/SocialLinks",
 };
+export default meta;
 export const SocialsStory = {
     args: {
         socials: [

package/lib/components/common/StaticImage/staticImage.stories.d.ts

@@ -1,5 +1,22 @@
-import { ComponentMeta } from "@storybook/react";
-import { StaticImage } from "./staticImage";
-declare const _default: ComponentMeta<typeof StaticImage>;
-export default _default;
-export declare const StaticImageStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./staticImage").StaticImageProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        alt: {
+            control: "text";
+        };
+        height: {
+            control: "number";
+        };
+        src: {
+            control: "text";
+        };
+        width: {
+            control: "number";
+        };
+    };
+    component: ({ alt, height, src, width, }: import("./staticImage").StaticImageProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const StaticImageStory: Story;

package/lib/components/common/StaticImage/staticImage.stories.js

@@ -1,7 +1,6 @@
-import React from "react";
 import logo from "../../../images/logo.svg";
 import { StaticImage } from "./staticImage";
-export default {
+const meta = {
     argTypes: {
         alt: { control: "text" },
         height: { control: "number" },
@@ -11,10 +10,11 @@ export default {
     component: StaticImage,
     title: "Components/Common/Image/StaticImage",
 };
-const StaticImageTemplate = (args) => (React.createElement(StaticImage, { ...args }));
-export const StaticImageStory = StaticImageTemplate.bind({});
-StaticImageStory.args = {
-    alt: "Data Explorer",
-    height: 40,
-    src: logo,
+export default meta;
+export const StaticImageStory = {
+    args: {
+        alt: "Data Explorer",
+        height: 40,
+        src: logo.src,
+    },
 };

package/lib/components/common/StatusIcon/statusIcon.stories.d.ts

@@ -1,5 +1,19 @@
-import { ComponentMeta } from "@storybook/react";
-import { StatusIcon } from "./statusIcon";
-declare const _default: ComponentMeta<typeof StatusIcon>;
-export default _default;
-export declare const StatusIconStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./statusIcon").StatusIconProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        StatusIcon: {
+            control: {
+                disable: true;
+            };
+        };
+        priority: {
+            control: "select";
+            options: string[];
+        };
+    };
+    component: ({ priority, StatusIcon, }: import("./statusIcon").StatusIconProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const StatusIconStory: Story;

package/lib/components/common/StatusIcon/statusIcon.stories.js

@@ -1,7 +1,6 @@
-import React from "react";
 import { SearchOffIcon } from "../CustomIcon/components/SearchOffIcon/searchOffIcon";
 import { PRIORITY, StatusIcon } from "./statusIcon";
-export default {
+const meta = {
     argTypes: {
         StatusIcon: { control: { disable: true } },
         priority: { control: "select", options: Array.from(Object.keys(PRIORITY)) },
@@ -9,9 +8,10 @@ export default {
     component: StatusIcon,
     title: "Components/Common/Alert/StatusIcon",
 };
-const StatusIconTemplate = (args) => (React.createElement(StatusIcon, { ...args }));
-export const StatusIconStory = StatusIconTemplate.bind({});
-StatusIconStory.args = {
-    StatusIcon: SearchOffIcon,
-    priority: PRIORITY.LOW,
+export default meta;
+export const StatusIconStory = {
+    args: {
+        StatusIcon: SearchOffIcon,
+        priority: PRIORITY.LOW,
+    },
 };

package/lib/components/common/Tag/tag.stories.d.ts

@@ -1,5 +1,15 @@
-import { ComponentMeta } from "@storybook/react";
-import { Tag } from "./tag";
-declare const _default: ComponentMeta<typeof Tag>;
-export default _default;
-export declare const WarningTagStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./tag").TagProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        children: {
+            control: {
+                disabled: boolean;
+            };
+        };
+    };
+    component: ({ children, className }: import("./tag").TagProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WarningTagStory: Story;

package/lib/components/common/Tag/tag.stories.js

@@ -1,15 +1,17 @@
 import React from "react";
 import { Tag } from "./tag";
 import { TagWarning } from "./tag.styles";
-export default {
+const meta = {
     argTypes: {
         children: { control: { disabled: true } },
     },
     component: Tag,
     title: "Components/Common/Alert/Tag",
 };
-const WarningTagTemplate = (args) => (React.createElement(TagWarning, { ...args }, args.children));
-export const WarningTagStory = WarningTagTemplate.bind({});
-WarningTagStory.args = {
-    children: "Please note",
+export default meta;
+export const WarningTagStory = {
+    args: {
+        children: "Please note",
+    },
+    render: (args) => React.createElement(TagWarning, { ...args }, args.children),
 };

package/lib/components/common/ToggleButtonGroup/toggleButtonGroup.stories.d.ts

@@ -1,5 +1,18 @@
-import { ComponentMeta } from "@storybook/react";
-import { ToggleButtonGroup } from "./toggleButtonGroup";
-declare const _default: ComponentMeta<typeof ToggleButtonGroup>;
-export default _default;
-export declare const ToggleButtonGroupStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./toggleButtonGroup").ToggleButtonGroupProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        toggleButtons: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ toggleButtons, ...props }: import("./toggleButtonGroup").ToggleButtonGroupProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ToggleButtonGroupStory: Story;

package/lib/components/common/ToggleButtonGroup/toggleButtonGroup.stories.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { ToggleButtonGroup } from "./toggleButtonGroup";
-export default {
+const meta = {
     argTypes: {
         toggleButtons: { table: { disable: true } },
     },
@@ -10,23 +9,24 @@ export default {
     },
     title: "Components/Common/ButtonGroup",
 };
-const ToggleButtonGroupTemplate = (args) => React.createElement(ToggleButtonGroup, { ...args });
-export const ToggleButtonGroupStory = ToggleButtonGroupTemplate.bind({});
-ToggleButtonGroupStory.args = {
-    toggleButtons: [
-        {
-            label: "Exact Match (243)",
-            onToggle: () => {
-                // onToggle function
+export default meta;
+export const ToggleButtonGroupStory = {
+    args: {
+        toggleButtons: [
+            {
+                label: "Exact Match (243)",
+                onToggle: () => {
+                    // onToggle function
+                },
+                value: "exact-match",
             },
-            value: "exact-match",
-        },
-        {
-            label: "Related (33)",
-            onToggle: () => {
-                // onToggle function
+            {
+                label: "Related (33)",
+                onToggle: () => {
+                    // onToggle function
+                },
+                value: "related-match",
             },
-            value: "related-match",
-        },
-    ],
+        ],
+    },
 };

package/lib/styles/common/mui/typography.js

@@ -6,5 +6,6 @@ export const COLOR = {
 export const VARIANT = {
     INHERIT: "inherit",
     TEXT_BODY_400: "text-body-400",
+    TEXT_BODY_400_2_LINES: "text-body-400-2lines",
     TEXT_HEADING_SMALL: "text-heading-small",
 };

package/lib/views/DataDictionaryView/dataDictionaryView.d.ts

@@ -0,0 +1,2 @@
+import { BaseComponentProps } from "../../components/types";
+export declare const DataDictionaryView: ({ className, }: BaseComponentProps) => JSX.Element;

package/lib/views/DataDictionaryView/dataDictionaryView.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { DataDictionary } from "../../components/DataDictionary/dataDictionary";
+export const DataDictionaryView = ({ className, }) => {
+    return React.createElement(DataDictionary, { className: className });
+};