@databiosphere/findable-ui 21.3.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/CustomIcon/components/CloseIcon/closeIcon.tsx

@@ -0,0 +1,17 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+
+export const CloseIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M8.99994 10.1061L5.38104 13.725C5.23104 13.875 5.04984 13.947 4.83744 13.941C4.62504 13.9344 4.44384 13.8561 4.29384 13.7061C4.14384 13.5561 4.06884 13.3719 4.06884 13.1535C4.06884 12.9345 4.14384 12.75 4.29384 12.6L7.89384 9.00005L4.27494 5.38115C4.12494 5.23115 4.05294 5.04695 4.05894 4.82855C4.06554 4.60955 4.14384 4.42505 4.29384 4.27505C4.44384 4.12505 4.62804 4.05005 4.84644 4.05005C5.06544 4.05005 5.24994 4.12505 5.39994 4.27505L8.99994 7.89395L12.6188 4.27505C12.7688 4.12505 12.953 4.05005 13.1714 4.05005C13.3904 4.05005 13.5749 4.12505 13.7249 4.27505C13.8749 4.42505 13.9499 4.60955 13.9499 4.82855C13.9499 5.04695 13.8749 5.23115 13.7249 5.38115L10.106 9.00005L13.7249 12.6189C13.8749 12.7689 13.9499 12.9501 13.9499 13.1625C13.9499 13.3749 13.8749 13.5561 13.7249 13.7061C13.5749 13.8561 13.3904 13.9311 13.1714 13.9311C12.953 13.9311 12.7688 13.8561 12.6188 13.7061L8.99994 10.1061Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/LoginDialog/constants.ts

@@ -0,0 +1,33 @@
+import {
+  DialogContentTextProps,
+  DialogProps,
+  DialogTitleProps,
+  IconButtonProps,
+  IconProps,
+} from "@mui/material";
+import { FONT_SIZE } from "../../../styles/common/mui/icon";
+import { COLOR, VARIANT } from "../../../styles/common/mui/typography";
+
+export const DIALOG_CONTENT_TEXT_PROPS: DialogContentTextProps = {
+  color: COLOR.INK_LIGHT,
+  component: "div",
+  variant: VARIANT.TEXT_BODY_400,
+};
+
+export const DIALOG_PROPS: Partial<DialogProps> = {
+  PaperProps: { elevation: 0 },
+};
+
+export const DIALOG_TITLE_PROPS: DialogTitleProps = {
+  variant: VARIANT.TEXT_HEADING_SMALL,
+};
+
+export const ICON_BUTTON_PROPS: IconButtonProps = {
+  color: "inkLight",
+  edge: "end",
+  size: "xsmall",
+};
+
+export const ICON_PROPS: Pick<IconProps, "fontSize"> = {
+  fontSize: FONT_SIZE.SMALL,
+};

package/src/components/common/LoginDialog/loginDialog.styles.ts

@@ -0,0 +1,51 @@
+import styled from "@emotion/styled";
+import { Dialog } from "@mui/material";
+import { inkMain } from "../../../styles/common/mixins/colors";
+import { alpha80 } from "../../../theme/common/palette";
+
+export const StyledDialog = styled(Dialog)`
+  &.MuiDialog-root {
+    .MuiBackdrop-root {
+      background-color: ${inkMain}${alpha80};
+    }
+
+    .MuiDialog-paper {
+      border-radius: 8px;
+      max-width: 400px;
+      padding: 32px;
+      position: relative; /* positions close icon */
+
+      .MuiDialogTitle-root,
+      .MuiDialogContent-root,
+      .MuiDialogActions-root {
+        padding: 0;
+      }
+
+      .MuiDialogTitle-root {
+        font-size: 20px;
+
+        .MuiIconButton-root {
+          position: absolute;
+          right: 12px;
+          top: 12px;
+        }
+      }
+
+      .MuiDialogContent-root {
+        .MuiDialogContentText-root {
+          margin: 8px 0;
+        }
+
+        .MuiGrid2-root {
+          margin: 24px 0;
+        }
+      }
+
+      .MuiDialogActions-root {
+        display: flex;
+        flex-direction: column;
+        gap: 16px 0;
+      }
+    }
+  }
+`;

package/src/components/common/LoginDialog/loginDialog.tsx

@@ -0,0 +1,56 @@
+import {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+} from "@mui/material";
+import React from "react";
+import { useAuthenticationConfig } from "../../../hooks/authentication/config/useAuthenticationConfig";
+import { Buttons } from "../../Login/components/Buttons/buttons";
+import { Consent } from "../../Login/components/Section/components/Consent/consent";
+import { Warning } from "../../Login/components/Section/components/Warning/warning";
+import { useUserLogin } from "../../Login/hooks/useUserLogin/useUserLogin";
+import { CloseIcon } from "../CustomIcon/components/CloseIcon/closeIcon";
+import {
+  DIALOG_CONTENT_TEXT_PROPS,
+  DIALOG_PROPS,
+  DIALOG_TITLE_PROPS,
+  ICON_BUTTON_PROPS,
+  ICON_PROPS,
+} from "./constants";
+import { StyledDialog } from "./loginDialog.styles";
+import { LoginDialogProps } from "./types";
+
+export const LoginDialog = ({
+  onClose,
+  open,
+}: LoginDialogProps): JSX.Element | null => {
+  const authConfig = useAuthenticationConfig();
+  const { consentState, handleConsent, handleLogin } = useUserLogin();
+
+  if (!authConfig) return null;
+
+  return (
+    <StyledDialog {...DIALOG_PROPS} onClose={onClose} open={open}>
+      <DialogTitle {...DIALOG_TITLE_PROPS}>
+        <div>Sign In Required</div>
+        <IconButton {...ICON_BUTTON_PROPS} onClick={onClose}>
+          <CloseIcon {...ICON_PROPS} />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText {...DIALOG_CONTENT_TEXT_PROPS}>
+          Please sign in to proceed with this action.
+        </DialogContentText>
+        <Consent handleConsent={handleConsent} {...consentState}>
+          {authConfig.termsOfService}
+        </Consent>
+      </DialogContent>
+      <DialogActions disableSpacing>
+        <Buttons handleLogin={handleLogin} providers={authConfig.providers} />
+      </DialogActions>
+      <Warning>{authConfig.warning}</Warning>
+    </StyledDialog>
+  );
+};

package/src/components/common/LoginDialog/types.ts

@@ -0,0 +1,4 @@
+export interface LoginDialogProps {
+  onClose: () => void;
+  open: boolean;
+}

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",
+  },
 };