@databiosphere/findable-ui 21.4.0 → 22.0.0

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.tsx

@@ -7,7 +7,7 @@ import React, {
   useState,
 } from "react";
 import { FileRejection } from "react-dropzone";
-import validate from "validate.js";
+import { ValidationError } from "yup";
 import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { Input } from "../../../../../common/Form/components/Input/input";
@@ -21,18 +21,17 @@ import {
 import { SupportRequest } from "../../supportRequest";
 import Dropzone from "../Dropzone/dropzone";
 import {
-  CONSTRAINTS,
   DEFAULT_FORM_STATE,
   DRAGGING_STYLE,
   MAX_ATTACHMENT_SIZE,
   OPTIONS,
+  VALIDATION_SCHEMA,
 } from "./common/constants";
 import {
   FORM_CONTROL_LABEL,
   FORM_CONTROL_NAME,
   FormState,
   RequestValue,
-  ValidateResponse,
 } from "./common/entities";
 import { createSupportRequest, uploadAttachment } from "./common/utils";
 import { Section, Title } from "./supportRequestForm.styles";
@@ -47,7 +46,23 @@ export const SupportRequestForm = ({
   supportRequest,
 }: SupportRequestFormProps): JSX.Element => {
   const [formState, setFormState] = useState<FormState>(DEFAULT_FORM_STATE);
-  const errors = validate(buildSupportRequest(formState), CONSTRAINTS); // Determine error state of form
+  const [errorFields, setErrorFields] = useState<Set<string>>();
+
+  // Validate form state when it changes.
+  React.useEffect(() => {
+    VALIDATION_SCHEMA.validate(buildSupportRequest(formState), {
+      abortEarly: false,
+    })
+      .then(() => setErrorFields(undefined))
+      .catch((aggregateError: ValidationError) => {
+        const fields = new Set<string>();
+        for (const error of aggregateError.inner) {
+          if (error.path) fields.add(error.path);
+        }
+        setErrorFields(fields);
+      });
+  }, [formState]);
+
   const { FIELD_ID, requestURL, uploadURL } = supportRequest;
 
   // Delete attachment.
@@ -177,7 +192,11 @@ export const SupportRequestForm = ({
           </Section>
           <Section>
             <Input
-              error={isFieldError(formState, errors, FORM_CONTROL_NAME.NAME)}
+              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}
@@ -185,7 +204,11 @@ export const SupportRequestForm = ({
               onChange={onInputChange}
             />
             <Input
-              error={isFieldError(formState, errors, FORM_CONTROL_NAME.EMAIL)}
+              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}
@@ -194,7 +217,11 @@ export const SupportRequestForm = ({
             />
             <Select
               displayEmpty={true}
-              error={isFieldError(formState, errors, FORM_CONTROL_NAME.TYPE)}
+              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}
@@ -211,7 +238,11 @@ export const SupportRequestForm = ({
               ))}
             </Select>
             <Input
-              error={isFieldError(formState, errors, FORM_CONTROL_NAME.SUBJECT)}
+              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}
@@ -221,7 +252,7 @@ export const SupportRequestForm = ({
             <Input
               error={isFieldError(
                 formState,
-                errors,
+                errorFields,
                 FORM_CONTROL_NAME.DESCRIPTION
               )}
               isFilled={Boolean(formState[FORM_CONTROL_NAME.DESCRIPTION])}
@@ -244,7 +275,7 @@ export const SupportRequestForm = ({
           <Section>
             <SectionActions>
               <ButtonPrimary
-                disabled={Boolean(errors) || formState.submitting}
+                disabled={Boolean(errorFields) || formState.submitting}
                 fullWidth
                 onClick={onSupportRequestSubmitted}
                 id="button-support-request"
@@ -280,18 +311,16 @@ function buildSupportRequest(formState: FormState): RequestValue {
 /**
  * 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: FormState,
-  error: ValidateResponse | undefined,
+  errorFields: Set<string> | undefined,
   fieldName: FORM_CONTROL_NAME
 ): boolean {
-  const hasError = Boolean(error?.[fieldName]);
-  const isTouched = Boolean(formState.touched[fieldName]);
-  return isTouched && hasError;
+  return Boolean(formState.touched[fieldName] && errorFields?.has(fieldName));
 }
 
 /**

package/src/components/Support/components/ViewSupport/types.ts

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

package/src/components/Support/components/ViewSupport/viewSupport.tsx

@@ -1,6 +1,7 @@
-import React, { ElementType } from "react";
+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 { ViewSupportProps } from "./types";
 import { Fab } from "./viewSupport.styles";
 
 /**
@@ -8,21 +9,16 @@ import { Fab } from "./viewSupport.styles";
  * Navigates to support URL provided.
  */
 
-export interface ViewSupportProps {
-  className?: string;
-  Icon?: ElementType;
-  target?: ANCHOR_TARGET;
-  url: string;
-}
-
 export const ViewSupport = ({
   className,
   Icon = ContactSupportIcon,
+  rel = REL_ATTRIBUTE.NO_OPENER_NO_REFERRER,
   target = ANCHOR_TARGET.BLANK,
   url,
+  ...props /* AnchorHTMLAttributes<HTMLAnchorElement> */
 }: ViewSupportProps): JSX.Element => {
   return (
-    <Fab className={className} href={url} target={target}>
+    <Fab className={className} href={url} rel={rel} target={target} {...props}>
       <Icon fontSize="inherit" />
     </Fab>
   );

package/src/components/Table/components/Pagination/pagination.stories.tsx

@@ -1,8 +1,7 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Pagination } from "./pagination";
 
-export default {
+const meta = {
   argTypes: {
     canNextPage: { control: "boolean" },
     canPreviousPage: { control: "boolean" },
@@ -13,14 +12,19 @@ export default {
   },
   component: Pagination,
   title: "Components/Table",
-} as ComponentMeta<typeof Pagination>;
+} satisfies Meta<typeof Pagination>;
 
-const PaginationTemplate: ComponentStory<typeof Pagination> = (args) => (
-  <Pagination {...args} />
-);
+export default meta;
 
-export const PaginationStory = PaginationTemplate.bind({});
-PaginationStory.args = {
-  currentPage: 1,
-  totalPage: 25,
+type Story = StoryObj<typeof meta>;
+
+export const PaginationStory: Story = {
+  args: {
+    canNextPage: true,
+    canPreviousPage: false,
+    currentPage: 1,
+    onNextPage: () => {},
+    onPreviousPage: () => {},
+    totalPage: 25,
+  },
 };

package/src/components/common/Accordion/accordion.stories.tsx

@@ -3,10 +3,12 @@ import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Accordion } from "./accordion";
 
-export default {
+const meta = {
   component: Accordion,
   title: "Components/Common/Accordion",
-} as Meta<typeof Accordion>;
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
 
 type Story = StoryObj<typeof Accordion>;
 

package/src/components/common/Breadcrumbs/breadcrumbs.stories.tsx

@@ -1,58 +1,57 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Breadcrumbs } from "./breadcrumbs";
 
-export default {
-  argTypes: {
-    children: { control: { disabled: true } },
-  },
+const meta = {
   component: Breadcrumbs,
   title: "Components/Common/BreadCrumbs",
-} as ComponentMeta<typeof Breadcrumbs>;
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
 
-const BreadcrumbTemplate: ComponentStory<typeof Breadcrumbs> = (args) => (
-  <Breadcrumbs {...args} />
-);
+type Story = StoryObj<typeof meta>;
 
-export const BreadcrumbDefaultStory = BreadcrumbTemplate.bind({});
-BreadcrumbDefaultStory.args = {
-  breadcrumbs: [
-    {
-      path: "#",
-      text: "Home",
-    },
-    {
-      path: "#",
-      text: "Data Explorer",
-    },
-  ],
+export const BreadcrumbDefaultStory: Story = {
+  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: Story = {
+  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: Story = {
+  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/src/components/common/Button/components/CallToActionButton/callToActionButton.stories.tsx

@@ -1,19 +1,15 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { ANCHOR_TARGET } from "../../../../Links/common/entities";
 import { CallToAction, CallToActionButton } from "./callToActionButton";
 
-export default {
-  argTypes: {
-    children: { control: { disabled: true } },
-  },
+const meta = {
   component: CallToActionButton,
   title: "Components/Common/CallToActionButton",
-} as ComponentMeta<typeof CallToActionButton>;
+} satisfies Meta<typeof CallToActionButton>;
+
+export default meta;
 
-const CallToActionButtonTemplate: ComponentStory<typeof CallToActionButton> = (
-  args
-) => <CallToActionButton {...args} />;
+type Story = StoryObj<typeof meta>;
 
 const callToAction: CallToAction = {
   label: "Click here",
@@ -21,16 +17,17 @@ const callToAction: CallToAction = {
   url: "https://www.google.com",
 };
 
-export const CallToActionButtonStory = CallToActionButtonTemplate.bind({});
-CallToActionButtonStory.args = {
-  callToAction,
-  className: "call-to-action-button",
-  disabled: false,
+export const CallToActionButtonStory: Story = {
+  args: {
+    callToAction,
+    className: "call-to-action-button",
+    disabled: false,
+  },
 };
 
-export const CallToActionButtonWithCustomComponentStory =
-  CallToActionButtonTemplate.bind({});
-CallToActionButtonWithCustomComponentStory.args = {
-  ButtonElType: "a",
-  callToAction,
+export const CallToActionButtonWithCustomComponentStory: Story = {
+  args: {
+    ButtonElType: "a",
+    callToAction,
+  },
 };

package/src/components/common/Button/components/HelpIconButton/helpIconButton.stories.tsx

@@ -2,15 +2,15 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ANCHOR_TARGET } from "../../../../Links/common/entities";
 import { HelpIconButton } from "./helpIconButton";
 
-const meta: Meta<typeof 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,
   title: "Components/Common/HelpIconButton",
-};
+} satisfies Meta<typeof HelpIconButton>;
 
 export default meta;
 

package/src/components/common/Card/card.stories.tsx

@@ -2,10 +2,12 @@ import { Meta, StoryObj } from "@storybook/react";
 import logo from "../../../images/logo.svg";
 import { Card } from "./card";
 
-export default {
+const meta = {
   component: Card,
   title: "Components/Common/Card",
-} as Meta<typeof Card>;
+} satisfies Meta<typeof Card>;
+
+export default meta;
 
 type Story = StoryObj<typeof Card>;
 

package/src/components/common/Code/code.stories.tsx

@@ -4,7 +4,7 @@ import { Code } from "./code";
 const meta = {
   component: Code,
   title: "Components/Common/Code",
-} as Meta<typeof Code>;
+} satisfies Meta<typeof Code>;
 
 export default meta;
 

package/src/components/common/CopyToClipboard/copyToClipboard.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { CopyToClipboard } from "./copyToClipboard";
 
-export default {
+const meta = {
   argTypes: {
     copyStr: {
       description: "String to be copied",
@@ -9,7 +9,9 @@ export default {
   },
   component: CopyToClipboard,
   title: "Components/Common/CopyToClipboard",
-} as Meta<typeof CopyToClipboard>;
+} satisfies Meta<typeof CopyToClipboard>;
+
+export default meta;
 
 type Story = StoryObj<typeof CopyToClipboard>;
 

package/src/components/common/Section/components/SectionTitle/sectionTitle.stories.tsx

@@ -1,20 +1,20 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { SectionTitle } from "./sectionTitle";
 
-export default {
+const meta = {
   argTypes: {
     title: { control: "text" },
   },
   component: SectionTitle,
   title: "Components/SectionContent/Title",
-} as ComponentMeta<typeof SectionTitle>;
+} satisfies Meta<typeof SectionTitle>;
 
-const SectionTitleTemplate: ComponentStory<typeof SectionTitle> = (args) => (
-  <SectionTitle {...args} />
-);
+export default meta;
 
-export const SectionTitleStory = SectionTitleTemplate.bind({});
-SectionTitleStory.args = {
-  title: "Analysis Portals",
+type Story = StoryObj<typeof meta>;
+
+export const SectionTitleStory: Story = {
+  args: {
+    title: "Analysis Portals",
+  },
 };

package/src/components/common/Socials/socials.stories.tsx

@@ -8,13 +8,15 @@ 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",
-} as Meta<typeof Socials>;
+} satisfies Meta<typeof Socials>;
+
+export default meta;
 
 type Story = StoryObj<typeof Socials>;
 

package/src/components/common/StaticImage/staticImage.stories.tsx

@@ -1,9 +1,8 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import logo from "../../../images/logo.svg";
 import { StaticImage } from "./staticImage";
 
-export default {
+const meta = {
   argTypes: {
     alt: { control: "text" },
     height: { control: "number" },
@@ -12,15 +11,16 @@ export default {
   },
   component: StaticImage,
   title: "Components/Common/Image/StaticImage",
-} as ComponentMeta<typeof StaticImage>;
+} satisfies Meta<typeof StaticImage>;
 
-const StaticImageTemplate: ComponentStory<typeof StaticImage> = (args) => (
-  <StaticImage {...args} />
-);
+export default meta;
 
-export const StaticImageStory = StaticImageTemplate.bind({});
-StaticImageStory.args = {
-  alt: "Data Explorer",
-  height: 40,
-  src: logo,
+type Story = StoryObj<typeof meta>;
+
+export const StaticImageStory: Story = {
+  args: {
+    alt: "Data Explorer",
+    height: 40,
+    src: logo.src,
+  },
 };

package/src/components/common/StatusIcon/statusIcon.stories.tsx

@@ -1,23 +1,23 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/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)) },
   },
   component: StatusIcon,
   title: "Components/Common/Alert/StatusIcon",
-} as ComponentMeta<typeof StatusIcon>;
+} satisfies Meta<typeof StatusIcon>;
 
-const StatusIconTemplate: ComponentStory<typeof StatusIcon> = (args) => (
-  <StatusIcon {...args} />
-);
+export default meta;
 
-export const StatusIconStory = StatusIconTemplate.bind({});
-StatusIconStory.args = {
-  StatusIcon: SearchOffIcon,
-  priority: PRIORITY.LOW,
+type Story = StoryObj<typeof meta>;
+
+export const StatusIconStory: Story = {
+  args: {
+    StatusIcon: SearchOffIcon,
+    priority: PRIORITY.LOW,
+  },
 };

package/src/components/common/Tag/tag.stories.tsx

@@ -1,21 +1,23 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 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",
-} as ComponentMeta<typeof Tag>;
+} satisfies Meta<typeof Tag>;
 
-const WarningTagTemplate: ComponentStory<typeof Tag> = (args) => (
-  <TagWarning {...args}>{args.children}</TagWarning>
-);
+export default meta;
 
-export const WarningTagStory = WarningTagTemplate.bind({});
-WarningTagStory.args = {
-  children: "Please note",
+type Story = StoryObj<typeof meta>;
+
+export const WarningTagStory: Story = {
+  args: {
+    children: "Please note",
+  },
+  render: (args) => <TagWarning {...args}>{args.children}</TagWarning>,
 };