@databiosphere/findable-ui 21.3.0 → 22.0.0

package/lib/components/Project/components/Details/details.stories.d.ts

@@ -1,5 +1,16 @@
-import { ComponentMeta } from "@storybook/react";
-import { Details } from "./details";
-declare const _default: ComponentMeta<typeof Details>;
-export default _default;
-export declare const DetailsStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./details").DetailsProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        keyValuePairs: {
+            control: "object";
+        };
+        title: {
+            control: "text";
+        };
+    };
+    component: ({ keyValuePairs, title, }: import("./details").DetailsProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DetailsStory: Story;

package/lib/components/Project/components/Details/details.stories.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Details } from "./details";
 // Template constants
 const details = new Map([
@@ -7,7 +6,7 @@ const details = new Map([
     ["Sample Type", "specimens"],
     ["Anatomical Entity", "eye"],
 ]);
-export default {
+const meta = {
     argTypes: {
         keyValuePairs: { control: "object" },
         title: { control: "text" },
@@ -15,9 +14,10 @@ export default {
     component: Details,
     title: "Components/SectionContent/Content/Project",
 };
-const DetailsTemplate = (args) => (React.createElement(Details, { ...args }));
-export const DetailsStory = DetailsTemplate.bind({});
-DetailsStory.args = {
-    keyValuePairs: details,
-    title: "",
+export default meta;
+export const DetailsStory = {
+    args: {
+        keyValuePairs: details,
+        title: "",
+    },
 };

package/lib/components/Project/components/Publications/publications.stories.d.ts

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

package/lib/components/Project/components/Publications/publications.stories.js

@@ -1,22 +1,22 @@
-import React from "react";
 import { Publications } from "./publications";
-export default {
+const meta = {
     component: Publications,
     title: "Components/SectionContent/Content/Project",
 };
-const PublicationsTemplate = (args) => (React.createElement(Publications, { ...args }));
-export const PublicationsStory = PublicationsTemplate.bind({});
-PublicationsStory.args = {
-    publications: [
-        {
-            doi: "10.1126/science.aay3224",
-            officialHcaPublication: true,
-            publicationTitle: "A cell atlas of human thymic development defines T cell repertoire formation.",
-            publicationUrl: "https://www.science.org/doi/10.1126/science.aay3224",
-        },
-        {
-            publicationTitle: "A revised airway epithelial hierarchy includes CFTR-expressing ionocytes.",
-            publicationUrl: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6295155/",
-        },
-    ],
+export default meta;
+export const PublicationsStory = {
+    args: {
+        publications: [
+            {
+                doi: "10.1126/science.aay3224",
+                officialHcaPublication: true,
+                publicationTitle: "A cell atlas of human thymic development defines T cell repertoire formation.",
+                publicationUrl: "https://www.science.org/doi/10.1126/science.aay3224",
+            },
+            {
+                publicationTitle: "A revised airway epithelial hierarchy includes CFTR-expressing ionocytes.",
+                publicationUrl: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6295155/",
+            },
+        ],
+    },
 };

package/lib/components/Project/components/SupplementaryLinks/supplementaryLinks.stories.d.ts

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

package/lib/components/Project/components/SupplementaryLinks/supplementaryLinks.stories.js

@@ -1,23 +1,23 @@
-import React from "react";
 import { SupplementaryLinks } from "./supplementaryLinks";
-export default {
+const meta = {
     component: SupplementaryLinks,
     title: "Components/SectionContent/Content/Project",
 };
-const SupplementaryLinksTemplate = (args) => React.createElement(SupplementaryLinks, { ...args });
-export const SupplementaryLinksStory = SupplementaryLinksTemplate.bind({});
-SupplementaryLinksStory.args = {
-    supplementaryLinks: [
-        "https://castelobranco.shinyapps.io/MSCtrl_CCA_18/",
-        "https://ki.se/en/mbb/oligointernode",
-        "https://cellxgene.cziscience.com/collections/c9706a92-0e5f-46c1-96d8-20e42467f287",
-        "https://github.com/DeprezM/HCA_analysis",
-        "https://tumor-toolbox.broadinstitute.org/",
-        "http://dx.doi.org/10.6019/PXD011655",
-        "https://github.com/agneantanaviciute/colonicepithelium",
-        "https://developmentcellatlas.ncl.ac.uk/datasets/HCA_thymus/",
-        "https://doi.org/10.5281/zenodo.3572421",
-        "https://www.gutcellatlas.org/",
-        "https://czi-pbmc-cite-seq.jax.org/",
-    ],
+export default meta;
+export const SupplementaryLinksStory = {
+    args: {
+        supplementaryLinks: [
+            "https://castelobranco.shinyapps.io/MSCtrl_CCA_18/",
+            "https://ki.se/en/mbb/oligointernode",
+            "https://cellxgene.cziscience.com/collections/c9706a92-0e5f-46c1-96d8-20e42467f287",
+            "https://github.com/DeprezM/HCA_analysis",
+            "https://tumor-toolbox.broadinstitute.org/",
+            "http://dx.doi.org/10.6019/PXD011655",
+            "https://github.com/agneantanaviciute/colonicepithelium",
+            "https://developmentcellatlas.ncl.ac.uk/datasets/HCA_thymus/",
+            "https://doi.org/10.5281/zenodo.3572421",
+            "https://www.gutcellatlas.org/",
+            "https://czi-pbmc-cite-seq.jax.org/",
+        ],
+    },
 };

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.d.ts

@@ -1,37 +1,20 @@
+import * as yup from "yup";
 import { FormOption, FormState } from "./entities";
-export declare const CONSTRAINTS: {
-    attachmentToken: {
-        presence: {
-            allowEmpty: boolean;
-        };
-    };
-    description: {
-        presence: {
-            allowEmpty: boolean;
-        };
-    };
-    email: {
-        email: boolean;
-        presence: {
-            allowEmpty: boolean;
-        };
-    };
-    name: {
-        presence: {
-            allowEmpty: boolean;
-        };
-    };
-    subject: {
-        presence: {
-            allowEmpty: boolean;
-        };
-    };
-    type: {
-        presence: {
-            allowEmpty: boolean;
-        };
-    };
-};
+export declare const VALIDATION_SCHEMA: yup.ObjectSchema<{
+    attachmentToken: string;
+    description: string;
+    email: string;
+    name: string;
+    subject: string;
+    type: string;
+}, yup.AnyObject, {
+    attachmentToken: undefined;
+    description: undefined;
+    email: undefined;
+    name: undefined;
+    subject: undefined;
+    type: undefined;
+}, "">;
 export declare const DEFAULT_FORM_STATE: FormState;
 export declare const DRAGGING_STYLE: {
     cursor: string;

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.js

@@ -1,13 +1,14 @@
+import * as yup from "yup";
 import { FORM_CONTROL_NAME } from "./entities";
-// Validation constraints
-export const CONSTRAINTS = {
-    [FORM_CONTROL_NAME.ATTACHMENT_TOKEN]: { presence: { allowEmpty: true } },
-    [FORM_CONTROL_NAME.DESCRIPTION]: { presence: { allowEmpty: false } },
-    [FORM_CONTROL_NAME.EMAIL]: { email: true, presence: { allowEmpty: false } },
-    [FORM_CONTROL_NAME.NAME]: { presence: { allowEmpty: false } },
-    [FORM_CONTROL_NAME.SUBJECT]: { presence: { allowEmpty: false } },
-    [FORM_CONTROL_NAME.TYPE]: { presence: { allowEmpty: false } },
-};
+// Validation schema
+export const VALIDATION_SCHEMA = yup.object({
+    [FORM_CONTROL_NAME.ATTACHMENT_TOKEN]: yup.string().defined(),
+    [FORM_CONTROL_NAME.DESCRIPTION]: yup.string().required(),
+    [FORM_CONTROL_NAME.EMAIL]: yup.string().email().required(),
+    [FORM_CONTROL_NAME.NAME]: yup.string().required(),
+    [FORM_CONTROL_NAME.SUBJECT]: yup.string().required(),
+    [FORM_CONTROL_NAME.TYPE]: yup.string().required(),
+});
 // Default form state.
 export const DEFAULT_FORM_STATE = {
     attachmentName: "",

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.js

@@ -1,6 +1,5 @@
 import { MenuItem, Typography } from "@mui/material";
 import React, { useState, } from "react";
-import validate from "validate.js";
 import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { Input } from "../../../../../common/Form/components/Input/input";
@@ -9,13 +8,28 @@ import { UploadFile } from "../../../../../common/Form/components/UploadFile/upl
 import { GridPaper } from "../../../../../common/Paper/paper.styles";
 import { SectionActions, SectionContent, } from "../../../../../common/Section/section.styles";
 import Dropzone from "../Dropzone/dropzone";
-import { CONSTRAINTS, DEFAULT_FORM_STATE, DRAGGING_STYLE, MAX_ATTACHMENT_SIZE, OPTIONS, } from "./common/constants";
+import { DEFAULT_FORM_STATE, DRAGGING_STYLE, MAX_ATTACHMENT_SIZE, OPTIONS, VALIDATION_SCHEMA, } from "./common/constants";
 import { FORM_CONTROL_LABEL, FORM_CONTROL_NAME, } from "./common/entities";
 import { createSupportRequest, uploadAttachment } from "./common/utils";
 import { Section, Title } from "./supportRequestForm.styles";
 export const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
     const [formState, setFormState] = useState(DEFAULT_FORM_STATE);
-    const errors = validate(buildSupportRequest(formState), CONSTRAINTS); // Determine error state of form
+    const [errorFields, setErrorFields] = useState();
+    // Validate form state when it changes.
+    React.useEffect(() => {
+        VALIDATION_SCHEMA.validate(buildSupportRequest(formState), {
+            abortEarly: false,
+        })
+            .then(() => setErrorFields(undefined))
+            .catch((aggregateError) => {
+            const fields = new Set();
+            for (const error of aggregateError.inner) {
+                if (error.path)
+                    fields.add(error.path);
+            }
+            setErrorFields(fields);
+        });
+    }, [formState]);
     const { FIELD_ID, requestURL, uploadURL } = supportRequest;
     // Delete attachment.
     const onAttachmentDeleted = () => {
@@ -121,15 +135,15 @@ export const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
                 React.createElement(Title, null, "Contact Us"),
                 React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_400 }, "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!"))),
         React.createElement(Section, null,
-            React.createElement(Input, { error: isFieldError(formState, errors, FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[FORM_CONTROL_NAME.NAME]), label: FORM_CONTROL_LABEL.NAME, name: FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }),
-            React.createElement(Input, { error: isFieldError(formState, errors, FORM_CONTROL_NAME.EMAIL), isFilled: Boolean(formState[FORM_CONTROL_NAME.EMAIL]), label: FORM_CONTROL_LABEL.EMAIL, name: FORM_CONTROL_NAME.EMAIL, onBlur: onBlur, onChange: onInputChange }),
-            React.createElement(Select, { displayEmpty: true, error: isFieldError(formState, errors, FORM_CONTROL_NAME.TYPE), isFilled: Boolean(formState[FORM_CONTROL_NAME.TYPE]), label: FORM_CONTROL_LABEL.TYPE, name: FORM_CONTROL_NAME.TYPE, onBlur: onBlur, onChange: onSelectChange, renderValue: renderSelectValue, value: formState[FORM_CONTROL_NAME.TYPE], variant: "outlined" }, OPTIONS.map(({ label, value }) => (React.createElement(MenuItem, { key: value, value: value }, label)))),
-            React.createElement(Input, { error: isFieldError(formState, errors, FORM_CONTROL_NAME.SUBJECT), isFilled: Boolean(formState[FORM_CONTROL_NAME.SUBJECT]), label: FORM_CONTROL_LABEL.SUBJECT, name: FORM_CONTROL_NAME.SUBJECT, onBlur: onBlur, onChange: onInputChange }),
-            React.createElement(Input, { error: isFieldError(formState, errors, FORM_CONTROL_NAME.DESCRIPTION), isFilled: Boolean(formState[FORM_CONTROL_NAME.DESCRIPTION]), label: FORM_CONTROL_LABEL.DESCRIPTION, multiline: true, name: FORM_CONTROL_NAME.DESCRIPTION, onBlur: onBlur, onChange: onInputChange, placeholder: "Enter a decription", rows: 2 }),
+            React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[FORM_CONTROL_NAME.NAME]), label: FORM_CONTROL_LABEL.NAME, name: FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }),
+            React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.EMAIL), isFilled: Boolean(formState[FORM_CONTROL_NAME.EMAIL]), label: FORM_CONTROL_LABEL.EMAIL, name: FORM_CONTROL_NAME.EMAIL, onBlur: onBlur, onChange: onInputChange }),
+            React.createElement(Select, { displayEmpty: true, error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.TYPE), isFilled: Boolean(formState[FORM_CONTROL_NAME.TYPE]), label: FORM_CONTROL_LABEL.TYPE, name: FORM_CONTROL_NAME.TYPE, onBlur: onBlur, onChange: onSelectChange, renderValue: renderSelectValue, value: formState[FORM_CONTROL_NAME.TYPE], variant: "outlined" }, OPTIONS.map(({ label, value }) => (React.createElement(MenuItem, { key: value, value: value }, label)))),
+            React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.SUBJECT), isFilled: Boolean(formState[FORM_CONTROL_NAME.SUBJECT]), label: FORM_CONTROL_LABEL.SUBJECT, name: FORM_CONTROL_NAME.SUBJECT, onBlur: onBlur, onChange: onInputChange }),
+            React.createElement(Input, { error: isFieldError(formState, errorFields, FORM_CONTROL_NAME.DESCRIPTION), isFilled: Boolean(formState[FORM_CONTROL_NAME.DESCRIPTION]), label: FORM_CONTROL_LABEL.DESCRIPTION, multiline: true, name: FORM_CONTROL_NAME.DESCRIPTION, onBlur: onBlur, onChange: onInputChange, placeholder: "Enter a decription", rows: 2 }),
             React.createElement(UploadFile, { isDragActive: isDragActive, label: FORM_CONTROL_LABEL.ATTACHMENT_TOKEN, onAttachmentDeleted: onAttachmentDeleted, open: open, ...formState })),
         React.createElement(Section, null,
             React.createElement(SectionActions, null,
-                React.createElement(ButtonPrimary, { disabled: Boolean(errors) || formState.submitting, fullWidth: true, onClick: onSupportRequestSubmitted, id: "button-support-request" }, "Send")))))));
+                React.createElement(ButtonPrimary, { disabled: Boolean(errorFields) || formState.submitting, fullWidth: true, onClick: onSupportRequestSubmitted, id: "button-support-request" }, "Send")))))));
 };
 /**
  * Build support request model from form values.
@@ -150,14 +164,12 @@ function buildSupportRequest(formState) {
 /**
  * Returns true if the given field is touched and has an error.
  * @param formState - Form state.
- * @param error - Validate.js error object.
+ * @param errorFields - Set of names of fields that have errors.
  * @param fieldName - Field name.
  * @returns true if the given field has an error.
  */
-function isFieldError(formState, error, fieldName) {
-    const hasError = Boolean(error?.[fieldName]);
-    const isTouched = Boolean(formState.touched[fieldName]);
-    return isTouched && hasError;
+function isFieldError(formState, errorFields, fieldName) {
+    return Boolean(formState.touched[fieldName] && errorFields?.has(fieldName));
 }
 /**
  * Renders select value.

package/lib/components/Support/components/ViewSupport/types.d.ts

@@ -0,0 +1,6 @@
+import { AnchorHTMLAttributes, ElementType } from "react";
+import { BaseComponentProps } from "../../../types";
+export interface ViewSupportProps extends AnchorHTMLAttributes<HTMLAnchorElement>, BaseComponentProps {
+    Icon?: ElementType;
+    url: string;
+}

package/lib/components/Support/components/ViewSupport/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Support/components/ViewSupport/viewSupport.d.ts

@@ -1,13 +1,6 @@
-import { ElementType } from "react";
-import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { ViewSupportProps } from "./types";
 /**
  * View support button component.
  * Navigates to support URL provided.
  */
-export interface ViewSupportProps {
-    className?: string;
-    Icon?: ElementType;
-    target?: ANCHOR_TARGET;
-    url: string;
-}
-export declare const ViewSupport: ({ className, Icon, target, url, }: ViewSupportProps) => JSX.Element;
+export declare const ViewSupport: ({ className, Icon, rel, target, url, ...props }: ViewSupportProps) => JSX.Element;

package/lib/components/Support/components/ViewSupport/viewSupport.js

@@ -1,8 +1,12 @@
 import React from "react";
 import { ContactSupportIcon } from "../../../common/CustomIcon/components/ContactSupportIcon/contactSupportIcon";
-import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../../Links/common/entities";
 import { Fab } from "./viewSupport.styles";
-export const ViewSupport = ({ className, Icon = ContactSupportIcon, target = ANCHOR_TARGET.BLANK, url, }) => {
-    return (React.createElement(Fab, { className: className, href: url, target: target },
+/**
+ * View support button component.
+ * Navigates to support URL provided.
+ */
+export const ViewSupport = ({ className, Icon = ContactSupportIcon, rel = REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target = ANCHOR_TARGET.BLANK, url, ...props /* AnchorHTMLAttributes<HTMLAnchorElement> */ }) => {
+    return (React.createElement(Fab, { className: className, href: url, rel: rel, target: target, ...props },
         React.createElement(Icon, { fontSize: "inherit" })));
 };

package/lib/components/Table/components/Pagination/pagination.stories.d.ts

@@ -1,5 +1,28 @@
-import { ComponentMeta } from "@storybook/react";
-import { Pagination } from "./pagination";
-declare const _default: ComponentMeta<typeof Pagination>;
-export default _default;
-export declare const PaginationStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./pagination").PaginationProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        canNextPage: {
+            control: "boolean";
+        };
+        canPreviousPage: {
+            control: "boolean";
+        };
+        currentPage: {
+            control: "number";
+        };
+        onNextPage: {
+            action: string;
+        };
+        onPreviousPage: {
+            action: string;
+        };
+        totalPage: {
+            control: "number";
+        };
+    };
+    component: ({ canNextPage, canPreviousPage, currentPage, onNextPage, onPreviousPage, totalPage, }: import("./pagination").PaginationProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const PaginationStory: Story;

package/lib/components/Table/components/Pagination/pagination.stories.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { Pagination } from "./pagination";
-export default {
+const meta = {
     argTypes: {
         canNextPage: { control: "boolean" },
         canPreviousPage: { control: "boolean" },
@@ -12,9 +11,14 @@ export default {
     component: Pagination,
     title: "Components/Table",
 };
-const PaginationTemplate = (args) => (React.createElement(Pagination, { ...args }));
-export const PaginationStory = PaginationTemplate.bind({});
-PaginationStory.args = {
-    currentPage: 1,
-    totalPage: 25,
+export default meta;
+export const PaginationStory = {
+    args: {
+        canNextPage: true,
+        canPreviousPage: false,
+        currentPage: 1,
+        onNextPage: () => { },
+        onPreviousPage: () => { },
+        totalPage: 25,
+    },
 };

package/lib/components/common/Accordion/accordion.stories.d.ts

@@ -1,7 +1,10 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { Accordion } from "./accordion";
-declare const _default: Meta<typeof Accordion>;
-export default _default;
+declare const meta: {
+    component: ({ children, collapseIcon, expanded, expandIcon, title, ...props }: import("./accordion").AccordionProps) => JSX.Element;
+    title: string;
+};
+export default meta;
 type Story = StoryObj<typeof Accordion>;
 export declare const AccordionStory: Story;
 export declare const AccordionsStory: Story;

package/lib/components/common/Accordion/accordion.stories.js

@@ -1,10 +1,11 @@
 import { Box } from "@mui/material";
 import React from "react";
 import { Accordion } from "./accordion";
-export default {
+const meta = {
     component: Accordion,
     title: "Components/Common/Accordion",
 };
+export default meta;
 export const AccordionStory = {
     args: {
         children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",

package/lib/components/common/Breadcrumbs/breadcrumbs.stories.d.ts

@@ -1,7 +1,10 @@
-import { ComponentMeta } from "@storybook/react";
-import { Breadcrumbs } from "./breadcrumbs";
-declare const _default: ComponentMeta<typeof Breadcrumbs>;
-export default _default;
-export declare const BreadcrumbDefaultStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./breadcrumbs").BreadcrumbsProps>;
-export declare const BreadcrumbCustomSeparatorStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./breadcrumbs").BreadcrumbsProps>;
-export declare const BreadcrumbWithLongerTitleStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./breadcrumbs").BreadcrumbsProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    component: ({ breadcrumbs, className, Separator, }: import("./breadcrumbs").BreadcrumbsProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BreadcrumbDefaultStory: Story;
+export declare const BreadcrumbCustomSeparatorStory: Story;
+export declare const BreadcrumbWithLongerTitleStory: Story;

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;