@databiosphere/findable-ui 21.3.0 → 22.0.0

package/src/components/Login/components/Section/components/Consent/consent.styles.ts

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Grid2 } from "@mui/material";
+
+export const StyledGrid2 = styled(Grid2)`
+  align-items: center;
+  align-self: flex-start;
+  display: flex;
+  gap: 12px;
+
+  .MuiTypography-text-body-400 {
+    .MuiLink-root {
+      color: inherit;
+    }
+  }
+`;

package/src/components/Login/components/Section/components/Consent/consent.tsx

@@ -0,0 +1,30 @@
+import { Checkbox, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { BaseComponentProps } from "../../../../../types";
+import { StyledGrid2 } from "./consent.styles";
+import { ConsentProps } from "./types";
+
+export const Consent = ({
+  children,
+  className,
+  handleConsent,
+  isDisabled,
+  isError,
+  ...props /* Mui Grid2Props */
+}: BaseComponentProps & ConsentProps): JSX.Element | null => {
+  if (isDisabled) return null;
+  return (
+    <StyledGrid2 className={className} {...props}>
+      <Checkbox
+        checkedIcon={<CheckedIcon />}
+        icon={isError ? <UncheckedErrorIcon /> : <UncheckedIcon />}
+        onChange={handleConsent}
+      />
+      <Typography variant={TEXT_BODY_400}>{children}</Typography>
+    </StyledGrid2>
+  );
+};

package/src/components/Login/components/Section/components/Consent/types.ts

@@ -0,0 +1,10 @@
+import { Grid2Props } from "@mui/material";
+import { ReactNode } from "react";
+import { UseUserConsent } from "../../../../hooks/useUserConsent/types";
+
+export interface ConsentProps
+  extends Grid2Props,
+    Pick<UseUserConsent, "handleConsent">,
+    Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
+  children: ReactNode;
+}

package/src/components/Login/components/Section/components/Warning/warning.tsx

@@ -0,0 +1,24 @@
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { COLOR } from "../../../../../../styles/common/mui/typography";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { BaseComponentProps } from "../../../../../types";
+
+export const Warning = ({
+  children,
+  className,
+  ...props /* Mui TypographyOwnProps */
+}: BaseComponentProps & TypographyProps): JSX.Element | null => {
+  if (!children) return null;
+  return (
+    <Typography
+      className={className}
+      color={COLOR.INK_LIGHT}
+      mt={6}
+      variant={TEXT_BODY_SMALL_400}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+};

package/src/components/Login/hooks/useUserConsent/types.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from "react";
+
+export interface UseUserConsent {
+  handleConsent: (e: ChangeEvent<HTMLInputElement>) => void;
+  handleError: (error: boolean) => void;
+  state: {
+    isDisabled: boolean;
+    isError: boolean;
+    isValid: boolean;
+  };
+}

package/src/components/Login/hooks/useUserConsent/useUserConsent.ts

@@ -0,0 +1,32 @@
+import { ChangeEvent, useCallback, useState } from "react";
+import { useAuthenticationConfig } from "../../../../hooks/authentication/config/useAuthenticationConfig";
+import { UseUserConsent } from "./types";
+
+export const useUserConsent = (): UseUserConsent => {
+  const authConfig = useAuthenticationConfig();
+  const [isDisabled] = useState<boolean>(Boolean(!authConfig?.termsOfService));
+  const [isError, setIsError] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean>(false);
+
+  const handleError = useCallback((error: boolean) => {
+    setIsError(error);
+  }, []);
+
+  const handleConsent = useCallback(
+    (changeEvent: ChangeEvent<HTMLInputElement>): void => {
+      handleError(false);
+      setIsValid(changeEvent.target.checked);
+    },
+    [handleError]
+  );
+
+  return {
+    handleConsent,
+    handleError,
+    state: {
+      isDisabled,
+      isError,
+      isValid,
+    },
+  };
+};

package/src/components/Login/hooks/useUserLogin/types.ts

@@ -0,0 +1,8 @@
+import { ProviderId } from "../../../../providers/authentication/common/types";
+import { UseUserConsent } from "../useUserConsent/types";
+
+export interface UseUserLogin
+  extends Omit<UseUserConsent, "handleError" | "state"> {
+  consentState: Pick<UseUserConsent["state"], "isDisabled" | "isError">;
+  handleLogin: (providerId: ProviderId) => void;
+}

package/src/components/Login/hooks/useUserLogin/useUserLogin.ts

@@ -0,0 +1,29 @@
+import { useCallback } from "react";
+import { useAuth } from "../../../../providers/authentication/auth/hook";
+import { ProviderId } from "../../../../providers/authentication/common/types";
+import { useUserConsent } from "../useUserConsent/useUserConsent";
+import { UseUserLogin } from "./types";
+
+export const useUserLogin = (): UseUserLogin => {
+  const { service: { requestLogin } = {} } = useAuth();
+  const { handleConsent, handleError, state: consentState } = useUserConsent();
+  const { isDisabled, isError, isValid } = consentState; // Consent state: { isValid } is an indicator of whether the user has accepted the login terms.
+
+  const handleLogin = useCallback(
+    (providerId: ProviderId): void => {
+      if (!isDisabled && !isValid) {
+        // If the user has not accepted terms, set error state to true.
+        handleError(true);
+        return;
+      }
+      requestLogin?.(providerId);
+    },
+    [handleError, isDisabled, isValid, requestLogin]
+  );
+
+  return {
+    consentState: { isDisabled, isError },
+    handleConsent,
+    handleLogin,
+  };
+};

package/src/components/Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories.tsx

@@ -1,34 +1,33 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { CollaboratingOrganizations } from "./collaboratingOrganizations";
 
-export default {
+const meta = {
   argTypes: {
-    collaboratingOrganizations: { control: "array" },
+    collaboratingOrganizations: { control: "object" },
   },
   component: CollaboratingOrganizations,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof CollaboratingOrganizations>;
+} satisfies Meta<typeof CollaboratingOrganizations>;
 
-const CollaboratingOrganizationsTemplate: ComponentStory<
-  typeof CollaboratingOrganizations
-> = (args) => <CollaboratingOrganizations {...args} />;
+export default meta;
 
-export const CollaboratingOrganizationsStory =
-  CollaboratingOrganizationsTemplate.bind({});
-CollaboratingOrganizationsStory.args = {
-  collaboratingOrganizations: [
-    {
-      citation: 1,
-      name: "The Jackson Laboratory",
-    },
-    {
-      citation: 2,
-      name: "The New York Genome Center",
-    },
-    {
-      citation: 3,
-      name: "Weill Cornell Medicine",
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const CollaboratingOrganizationsStory: Story = {
+  args: {
+    collaboratingOrganizations: [
+      {
+        citation: 1,
+        name: "The Jackson Laboratory",
+      },
+      {
+        citation: 2,
+        name: "The New York Genome Center",
+      },
+      {
+        citation: 3,
+        name: "Weill Cornell Medicine",
+      },
+    ],
+  },
 };

package/src/components/Project/components/Contacts/contacts.stories.tsx

@@ -1,31 +1,31 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Contacts } from "./contacts";
 
-export default {
+const meta = {
   argTypes: {
-    contacts: { control: "array" },
+    contacts: { control: "object" },
   },
   component: Contacts,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Contacts>;
+} satisfies Meta<typeof Contacts>;
 
-const ContactsTemplate: ComponentStory<typeof Contacts> = (args) => (
-  <Contacts {...args} />
-);
+export default meta;
 
-export const ContactsStory = ContactsTemplate.bind({});
-ContactsStory.args = {
-  contacts: [
-    {
-      email: "gervaise.henry@utsouthwestern.edu",
-      institution: "UT Southwestern",
-      name: "Gervaise H Henry",
-    },
-    {
-      email: "poppy@utsouthwestern.edu",
-      institution: "UT Southwestern",
-      name: "Poppy Rose Roberts",
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const ContactsStory: Story = {
+  args: {
+    contacts: [
+      {
+        email: "gervaise.henry@utsouthwestern.edu",
+        institution: "UT Southwestern",
+        name: "Gervaise H Henry",
+      },
+      {
+        email: "poppy@utsouthwestern.edu",
+        institution: "UT Southwestern",
+        name: "Poppy Rose Roberts",
+      },
+    ],
+  },
 };

package/src/components/Project/components/Contributors/contributors.stories.tsx

@@ -1,38 +1,38 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Contributors } from "./contributors";
 
-export default {
+const meta = {
   component: Contributors,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Contributors>;
+} satisfies Meta<typeof Contributors>;
 
-const ContributorsTemplate: ComponentStory<typeof Contributors> = (args) => (
-  <Contributors {...args} />
-);
+export default meta;
 
-export const ContributorsStory = ContributorsTemplate.bind({});
-ContributorsStory.args = {
-  contributors: [
-    {
-      citation: 1,
-      name: "Rose R Reginold",
-      role: undefined,
-    },
-    {
-      citation: 1,
-      name: "Frank D Dirk",
-      role: "Project Coordinator",
-    },
-    {
-      citation: 2,
-      name: "Marcelo Freire",
-      role: "Principal Investigator",
-    },
-    {
-      citation: 3,
-      name: "Nathan Lawlor",
-      role: "Computational Scientist",
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const ContributorsStory: Story = {
+  args: {
+    contributors: [
+      {
+        citation: 1,
+        name: "Rose R Reginold",
+        role: undefined,
+      },
+      {
+        citation: 1,
+        name: "Frank D Dirk",
+        role: "Project Coordinator",
+      },
+      {
+        citation: 2,
+        name: "Marcelo Freire",
+        role: "Principal Investigator",
+      },
+      {
+        citation: 3,
+        name: "Nathan Lawlor",
+        role: "Computational Scientist",
+      },
+    ],
+  },
 };

package/src/components/Project/components/DataCurators/dataCurators.stories.tsx

@@ -1,20 +1,20 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { DataCurators } from "./dataCurators";
 
-export default {
+const meta = {
   argTypes: {
-    dataCurators: { control: "array" },
+    dataCurators: { control: "object" },
   },
   component: DataCurators,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof DataCurators>;
+} satisfies Meta<typeof DataCurators>;
 
-const DataCuratorsTemplate: ComponentStory<typeof DataCurators> = (args) => (
-  <DataCurators {...args} />
-);
+export default meta;
 
-export const DataCuratorsStory = DataCuratorsTemplate.bind({});
-DataCuratorsStory.args = {
-  dataCurators: ["Schwartz Rachel", "William Sullivan", "Parisa Nejad"],
+type Story = StoryObj<typeof meta>;
+
+export const DataCuratorsStory: Story = {
+  args: {
+    dataCurators: ["Schwartz Rachel", "William Sullivan", "Parisa Nejad"],
+  },
 };

package/src/components/Project/components/DataReleasePolicy/dataReleasePolicy.stories.tsx

@@ -1,14 +1,13 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { DataReleasePolicy } from "./dataReleasePolicy";
 
-export default {
+const meta = {
   component: DataReleasePolicy,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof DataReleasePolicy>;
+} satisfies Meta<typeof DataReleasePolicy>;
 
-const DataReleasePolicyTemplate: ComponentStory<
-  typeof DataReleasePolicy
-> = () => <DataReleasePolicy />;
+export default meta;
 
-export const DataReleasePolicyStory = DataReleasePolicyTemplate.bind({});
+type Story = StoryObj<typeof meta>;
+
+export const DataReleasePolicyStory: Story = {};

package/src/components/Project/components/Description/description.stories.tsx

@@ -1,18 +1,18 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Description } from "./description";
 
-export default {
+const meta = {
   component: Description,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Description>;
+} satisfies Meta<typeof Description>;
 
-const DescriptionTemplate: ComponentStory<typeof Description> = (args) => (
-  <Description {...args} />
-);
+export default meta;
 
-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.",
+type Story = StoryObj<typeof meta>;
+
+export const DescriptionStory: Story = {
+  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/src/components/Project/components/Details/details.stories.tsx

@@ -1,5 +1,4 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { KeyValues } from "../../../common/KeyValuePairs/keyValuePairs";
 import { Details } from "./details";
 
@@ -11,21 +10,22 @@ const details: KeyValues = new Map([
   ["Anatomical Entity", "eye"],
 ]);
 
-export default {
+const meta = {
   argTypes: {
     keyValuePairs: { control: "object" },
     title: { control: "text" },
   },
   component: Details,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Details>;
+} satisfies Meta<typeof Details>;
 
-const DetailsTemplate: ComponentStory<typeof Details> = (args) => (
-  <Details {...args} />
-);
+export default meta;
 
-export const DetailsStory = DetailsTemplate.bind({});
-DetailsStory.args = {
-  keyValuePairs: details,
-  title: "",
+type Story = StoryObj<typeof meta>;
+
+export const DetailsStory: Story = {
+  args: {
+    keyValuePairs: details,
+    title: "",
+  },
 };

package/src/components/Project/components/Publications/publications.stories.tsx

@@ -1,30 +1,30 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Publications } from "./publications";
 
-export default {
+const meta = {
   component: Publications,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof Publications>;
+} satisfies Meta<typeof Publications>;
 
-const PublicationsTemplate: ComponentStory<typeof Publications> = (args) => (
-  <Publications {...args} />
-);
+export default meta;
 
-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/",
-    },
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const PublicationsStory: Story = {
+  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/src/components/Project/components/SupplementaryLinks/supplementaryLinks.stories.tsx

@@ -1,29 +1,29 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { SupplementaryLinks } from "./supplementaryLinks";
 
-export default {
+const meta = {
   component: SupplementaryLinks,
   title: "Components/SectionContent/Content/Project",
-} as ComponentMeta<typeof SupplementaryLinks>;
+} satisfies Meta<typeof SupplementaryLinks>;
 
-const SupplementaryLinksTemplate: ComponentStory<typeof SupplementaryLinks> = (
-  args
-) => <SupplementaryLinks {...args} />;
+export default meta;
 
-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/",
-  ],
+type Story = StoryObj<typeof meta>;
+
+export const SupplementaryLinksStory: Story = {
+  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/src/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.ts

@@ -1,14 +1,15 @@
+import * as yup from "yup";
 import { FORM_CONTROL_NAME, FormOption, FormState } 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: FormState = {