@databiosphere/findable-ui 21.4.0 → 23.0.0

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/Table/components/TableCell/components/RowPositionCell/constants.js

@@ -1,5 +1,5 @@
-import { VARIANT } from "../../../../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 export const TYPOGRAPHY_PROPS = {
     sx: { marginRight: -2, paddingLeft: 2 },
-    variant: VARIANT.INHERIT,
+    variant: MUI_TYPOGRAPHY_PROPS.VARIANT.INHERIT,
 };

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/AnchorLink/anchorLink.d.ts

@@ -1,3 +1,9 @@
+/**
+ * An anchor link component that provides deep linking functionality.
+ * @important The parent element must have `position: relative` CSS property
+ * to ensure proper positioning of the anchor link icon, and hover pseudo-class
+ * to change opacity of the icon.
+ */
 interface AnchorLinkProps {
     anchorLink: string;
     className?: string;

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;

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/LoginDialog/constants.js

@@ -1,15 +1,15 @@
 import { FONT_SIZE } from "../../../styles/common/mui/icon";
-import { COLOR, VARIANT } from "../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
 export const DIALOG_CONTENT_TEXT_PROPS = {
-    color: COLOR.INK_LIGHT,
+    color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
     component: "div",
-    variant: VARIANT.TEXT_BODY_400,
+    variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
 };
 export const DIALOG_PROPS = {
     PaperProps: { elevation: 0 },
 };
 export const DIALOG_TITLE_PROPS = {
-    variant: VARIANT.TEXT_HEADING_SMALL,
+    variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL,
 };
 export const ICON_BUTTON_PROPS = {
     color: "inkLight",