@databiosphere/findable-ui 21.4.0 → 22.0.0

package/lib/components/Project/components/DataCurators/dataCurators.stories.d.ts

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

package/lib/components/Project/components/DataCurators/dataCurators.stories.js

@@ -1,14 +1,14 @@
-import React from "react";
 import { DataCurators } from "./dataCurators";
-export default {
+const meta = {
     argTypes: {
-        dataCurators: { control: "array" },
+        dataCurators: { control: "object" },
     },
     component: DataCurators,
     title: "Components/SectionContent/Content/Project",
 };
-const DataCuratorsTemplate = (args) => (React.createElement(DataCurators, { ...args }));
-export const DataCuratorsStory = DataCuratorsTemplate.bind({});
-DataCuratorsStory.args = {
-    dataCurators: ["Schwartz Rachel", "William Sullivan", "Parisa Nejad"],
+export default meta;
+export const DataCuratorsStory = {
+    args: {
+        dataCurators: ["Schwartz Rachel", "William Sullivan", "Parisa Nejad"],
+    },
 };

package/lib/components/Project/components/DataReleasePolicy/dataReleasePolicy.stories.d.ts

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

package/lib/components/Project/components/DataReleasePolicy/dataReleasePolicy.stories.js

@@ -1,8 +1,7 @@
-import React from "react";
 import { DataReleasePolicy } from "./dataReleasePolicy";
-export default {
+const meta = {
     component: DataReleasePolicy,
     title: "Components/SectionContent/Content/Project",
 };
-const DataReleasePolicyTemplate = () => React.createElement(DataReleasePolicy, null);
-export const DataReleasePolicyStory = DataReleasePolicyTemplate.bind({});
+export default meta;
+export const DataReleasePolicyStory = {};

package/lib/components/Project/components/Description/description.stories.d.ts

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

package/lib/components/Project/components/Description/description.stories.js

@@ -1,11 +1,11 @@
-import React from "react";
 import { Description } from "./description";
-export default {
+const meta = {
     component: Description,
     title: "Components/SectionContent/Content/Project",
 };
-const DescriptionTemplate = (args) => (React.createElement(Description, { ...args }));
-export const DescriptionStory = DescriptionTemplate.bind({});
-DescriptionStory.args = {
-    projectDescription: "Although the function of the mammalian pancreas hinges on complex interactions of distinct cell types, gene expression profiles have primarily been described with bulk mixtures. Here we implemented a droplet-based, single-cell RNA-seq method to determine the transcriptomes of over 12,000 individual pancreatic cells from four human donors and two mouse strains. Cells could be divided into 15 clusters that matched previously characterized cell types: all endocrine cell types, including rare epsilon-cells; exocrine cell types; vascular cells; Schwann cells; quiescent and activated stellate cells; and four types of immune cells. We detected subpopulations of ductal cells with distinct expression profiles and validated their existence with immuno-histochemistry stains. Moreover, among human beta- cells, we detected heterogeneity in the regulation of genes relating to functional maturation and levels of ER stress. Finally, we deconvolved bulk gene expression samples using the single-cell data to detect disease-associated differential expression. Our dataset provides a resource for the discovery of novel cell type-specific transcription factors, signaling receptors, and medically relevant genes.",
+export default meta;
+export const DescriptionStory = {
+    args: {
+        projectDescription: "Although the function of the mammalian pancreas hinges on complex interactions of distinct cell types, gene expression profiles have primarily been described with bulk mixtures. Here we implemented a droplet-based, single-cell RNA-seq method to determine the transcriptomes of over 12,000 individual pancreatic cells from four human donors and two mouse strains. Cells could be divided into 15 clusters that matched previously characterized cell types: all endocrine cell types, including rare epsilon-cells; exocrine cell types; vascular cells; Schwann cells; quiescent and activated stellate cells; and four types of immune cells. We detected subpopulations of ductal cells with distinct expression profiles and validated their existence with immuno-histochemistry stains. Moreover, among human beta- cells, we detected heterogeneity in the regulation of genes relating to functional maturation and levels of ER stress. Finally, we deconvolved bulk gene expression samples using the single-cell data to detect disease-associated differential expression. Our dataset provides a resource for the discovery of novel cell type-specific transcription factors, signaling receptors, and medically relevant genes.",
+    },
 };

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;