@databiosphere/findable-ui 0.0.0

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

@@ -0,0 +1,31 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Contacts } from "./contacts";
+
+export default {
+  argTypes: {
+    contacts: { control: "array" },
+  },
+  component: Contacts,
+  title: "Components/SectionContent/Content/Project",
+} as ComponentMeta<typeof Contacts>;
+
+const ContactsTemplate: ComponentStory<typeof Contacts> = (args) => (
+  <Contacts {...args} />
+);
+
+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",
+    },
+  ],
+};

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

@@ -0,0 +1,33 @@
+import { Link as EmailLink, Typography } from "@mui/material";
+import Link from "next/link";
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { SectionContentListItem } from "../../../common/Section/section.styles";
+import { Contact } from "../../common/entities";
+
+export interface ContactsProps {
+  contacts?: Contact[];
+}
+
+export const Contacts = ({ contacts }: ContactsProps): JSX.Element => {
+  return (
+    <CollapsableSection collapsable title="Contact">
+      {contacts ? (
+        contacts.map(({ email, institution, name }, c) => (
+          <SectionContentListItem key={`${name}${c}`}>
+            <Typography variant="text-body-500-2lines">{name}</Typography>
+            {institution && <span>{institution}</span>}
+            {email && (
+              <Link href={`mailto:${email}`} legacyBehavior passHref>
+                <EmailLink>{email}</EmailLink>
+              </Link>
+            )}
+          </SectionContentListItem>
+        ))
+      ) : (
+        <SectionDetailsEmpty />
+      )}
+    </CollapsableSection>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Contributors } from "./contributors";
+
+export default {
+  component: Contributors,
+  title: "Components/SectionContent/Content/Project",
+} as ComponentMeta<typeof Contributors>;
+
+const ContributorsTemplate: ComponentStory<typeof Contributors> = (args) => (
+  <Contributors {...args} />
+);
+
+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",
+    },
+  ],
+};

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { Contributor } from "../../common/entities";
+import { Sup } from "../Sup/sup.styles";
+
+export interface ContributorsProps {
+  contributors?: Contributor[];
+}
+
+export const Contributors = ({
+  contributors,
+}: ContributorsProps): JSX.Element => {
+  return (
+    <CollapsableSection collapsable title="Contributors">
+      {contributors ? (
+        <div>
+          {contributors.map(({ citation, name, role }, c) => (
+            <div key={`${name}${c}`}>
+              <span>{name}</span>
+              {role && <span> ({role})</span>}
+              {citation && <Sup>{citation}</Sup>}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <SectionDetailsEmpty />
+      )}
+    </CollapsableSection>
+  );
+};

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

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

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { DataCurator } from "../../common/entities";
+
+export interface DataCuratorsProps {
+  dataCurators?: DataCurator[];
+}
+
+export const DataCurators = ({
+  dataCurators,
+}: DataCuratorsProps): JSX.Element => {
+  return (
+    <CollapsableSection collapsable title="Data Curators">
+      {dataCurators ? (
+        <div>
+          {dataCurators.map((name, n) => (
+            <div key={`${name}${n}`}>{name}</div>
+          ))}
+        </div>
+      ) : (
+        <SectionDetailsEmpty />
+      )}
+    </CollapsableSection>
+  );
+};

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

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

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

@@ -0,0 +1,22 @@
+import { Link as PolicyLink, Typography } from "@mui/material";
+import Link from "next/link";
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+
+export const DataReleasePolicy = (): JSX.Element => {
+  return (
+    <CollapsableSection title="Data Access Policy">
+      <Typography>
+        For information regarding data sharing and data use, please see our{" "}
+        <Link
+          href="https://anvilproject.org/faq/data-security/"
+          legacyBehavior
+          passHref
+        >
+          <PolicyLink target="_blank">Data Access Policy</PolicyLink>
+        </Link>
+        .
+      </Typography>
+    </CollapsableSection>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Description } from "./description";
+
+export default {
+  component: Description,
+  title: "Components/SectionContent/Content/Project",
+} as ComponentMeta<typeof Description>;
+
+const DescriptionTemplate: ComponentStory<typeof Description> = (args) => (
+  <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.",
+};

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

@@ -0,0 +1,18 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { Description as ProjectDescription } from "../../common/entities";
+
+export interface DescriptionProps {
+  projectDescription: ProjectDescription;
+}
+
+export const Description = ({
+  projectDescription,
+}: DescriptionProps): JSX.Element => {
+  return (
+    <CollapsableSection title={"Description"}>
+      <Typography>{projectDescription}</Typography>
+    </CollapsableSection>
+  );
+};

package/src/components/Project/components/Details/details.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { KeyValues } from "../../../common/KeyValuePairs/keyValuePairs";
+import { Details } from "./details";
+
+// Template constants
+const details: KeyValues = new Map([
+  ["Project Label", "HeterogeneityCD4TCells"],
+  ["Species", "Homo sapiens"],
+  ["Sample Type", "specimens"],
+  ["Anatomical Entity", "eye"],
+]);
+
+export default {
+  argTypes: {
+    keyValuePairs: { control: "object" },
+    title: { control: "text" },
+  },
+  component: Details,
+  title: "Components/SectionContent/Content/Project",
+} as ComponentMeta<typeof Details>;
+
+const DetailsTemplate: ComponentStory<typeof Details> = (args) => (
+  <Details {...args} />
+);
+
+export const DetailsStory = DetailsTemplate.bind({});
+DetailsStory.args = {
+  keyValuePairs: details,
+  title: "",
+};

package/src/components/Project/components/Details/details.tsx

@@ -0,0 +1,45 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import {
+  Key,
+  KeyValuePairs,
+  KeyValues,
+} from "../../../common/KeyValuePairs/keyValuePairs";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { Stack } from "../../../common/Stack/stack";
+
+export interface DetailsProps {
+  keyValuePairs?: KeyValues;
+  title: string;
+}
+
+/**
+ * Wrapper element around the key.
+ * @param props - Set of values accepted by this component as props.
+ * @param props.children - Key component children.
+ * @returns typography component with color "ink.light".
+ */
+function renderKey(props: { children: Key }): JSX.Element {
+  return <Typography color="ink.light">{props.children}</Typography>;
+}
+
+export const Details = ({
+  keyValuePairs,
+  title,
+}: DetailsProps): JSX.Element => {
+  return (
+    <CollapsableSection collapsable title={title}>
+      {keyValuePairs ? (
+        <KeyValuePairs
+          KeyElType={renderKey}
+          keyValuePairs={keyValuePairs}
+          KeyValuesElType={Fragment}
+          KeyValueElType={Stack}
+        />
+      ) : (
+        <SectionDetailsEmpty />
+      )}
+    </CollapsableSection>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Publications } from "./publications";
+
+export default {
+  component: Publications,
+  title: "Components/SectionContent/Content/Project",
+} as ComponentMeta<typeof Publications>;
+
+const PublicationsTemplate: ComponentStory<typeof Publications> = (args) => (
+  <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/",
+    },
+  ],
+};

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

@@ -0,0 +1,43 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { Link } from "../../../Links/components/Link/link";
+import { Publication } from "../../common/entities";
+
+export interface PublicationsProps {
+  publications?: Publication[];
+}
+
+export const Publications = ({
+  publications,
+}: PublicationsProps): JSX.Element => {
+  return (
+    <CollapsableSection collapsable title="Publications">
+      {publications ? (
+        <div>
+          {publications.map(
+            (
+              { officialHcaPublication, publicationTitle, publicationUrl },
+              p
+            ) => (
+              <Typography key={`${publicationTitle}${p}`}>
+                <Link
+                  label={publicationTitle}
+                  target={ANCHOR_TARGET.BLANK}
+                  url={publicationUrl}
+                />
+                {officialHcaPublication && (
+                  <span> (Official HCA Publication)</span>
+                )}
+              </Typography>
+            )
+          )}
+        </div>
+      ) : (
+        <SectionDetailsEmpty />
+      )}
+    </CollapsableSection>
+  );
+};

package/src/components/Project/components/Sup/sup.styles.tsx

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+
+export const Sup = styled.sup`
+  line-height: 0;
+`;

package/src/components/Project/components/SupplementaryLinks/supplementaryLinks.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { SupplementaryLinks } from "./supplementaryLinks";
+
+export default {
+  component: SupplementaryLinks,
+  title: "Components/SectionContent/Content/Project",
+} as ComponentMeta<typeof SupplementaryLinks>;
+
+const SupplementaryLinksTemplate: ComponentStory<typeof SupplementaryLinks> = (
+  args
+) => <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/",
+  ],
+};

package/src/components/Project/components/SupplementaryLinks/supplementaryLinks.styles.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+
+export const SupplementaryList = styled.div`
+  display: grid;
+  gap: 0 4px;
+  grid-template-columns: auto 1fr;
+`;
+
+export const Marker = styled.span`
+  color: ${({ theme }) => theme.palette.primary.main};
+  text-align: right;
+`;
+
+export const SupplementaryLink = styled.span`
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  min-width: 0; /* required to ellipsis any flex child */
+`;

package/src/components/Project/components/SupplementaryLinks/supplementaryLinks.tsx

@@ -0,0 +1,54 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { Stack } from "../../../common/Stack/stack";
+import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { Link } from "../../../Links/components/Link/link";
+import { SupplementaryLink } from "../../common/entities";
+import {
+  Marker,
+  SupplementaryLink as EllipsisLink,
+  SupplementaryList,
+} from "./supplementaryLinks.styles";
+
+export interface SupplementaryLinksProps {
+  supplementaryLinks?: SupplementaryLink[];
+}
+
+export const SupplementaryLinks = ({
+  supplementaryLinks,
+}: SupplementaryLinksProps): JSX.Element => {
+  return (
+    <CollapsableSection collapsable title="Supplementary Links">
+      {supplementaryLinks ? (
+        <Stack gap={2}>
+          <Typography>
+            Supplementary links are provided by contributors and represent items
+            such as additional data which can’t be hosted here; code that was
+            used to analyze this data; or tools and visualizations associated
+            with this specific dataset.
+          </Typography>
+          <SupplementaryList>
+            {supplementaryLinks.map((link, marker) => (
+              <Fragment key={link}>
+                <Marker>{marker + 1}.</Marker>
+                <EllipsisLink>
+                  <Link
+                    copyable
+                    label={link}
+                    noWrap
+                    target={ANCHOR_TARGET.BLANK}
+                    url={link}
+                  />
+                </EllipsisLink>
+              </Fragment>
+            ))}
+          </SupplementaryList>
+        </Stack>
+      ) : (
+        <SectionDetailsEmpty />
+      )}
+    </CollapsableSection>
+  );
+};

package/src/components/Redirect/redirect.tsx

@@ -0,0 +1,20 @@
+import { useRouter } from "next/router";
+import React, { useEffect } from "react";
+
+export interface RedirectProps {
+  destination: string;
+  replace?: boolean;
+}
+
+export const Redirect = ({
+  destination,
+  replace,
+}: RedirectProps): JSX.Element => {
+  const router = useRouter();
+
+  useEffect(() => {
+    replace ? router.replace(destination) : router.push(destination);
+  }, [destination, replace, router]);
+
+  return <></>;
+};

package/src/components/Support/components/SupportRequest/components/Dialog/dialog.styles.ts

@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+import { Fab as MFab, Popover as MPopover } from "@mui/material";
+import { smokeMain } from "../../../../../../styles/common/mixins/colors";
+import { shadows02 } from "../../../../../../styles/common/mixins/shadows";
+import { tabletUp } from "../../../../../../theme/common/breakpoints";
+import { alpha80, inkMain } from "../../../../../../theme/common/palette";
+
+interface Props {
+  open: boolean;
+}
+
+export const Fab = styled(MFab)<Props>`
+  bottom: 16px;
+  box-shadow: ${shadows02};
+  position: fixed;
+  right: 16px;
+  z-index: ${({ open }) => (open ? 1350 : 1050)}; // Above backdrop component.
+`;
+
+export const Popover = styled(MPopover)`
+  &.MuiPopover-root {
+    background-color: ${inkMain}${alpha80};
+
+    > .MuiPaper-root {
+      border: 1px solid ${smokeMain};
+      border-radius: 8px;
+      width: 100%;
+
+      ${tabletUp} {
+        max-width: 496px;
+      }
+    }
+  }
+`;

package/src/components/Support/components/SupportRequest/components/Dialog/dialog.tsx

@@ -0,0 +1,56 @@
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import React, {
+  Dispatch,
+  MouseEvent,
+  ReactNode,
+  SetStateAction,
+  useState,
+} from "react";
+import { FeedbackIcon } from "../../../../../common/CustomIcon/components/FeedbackIcon/feedbackIcon";
+import { Fab, Popover } from "./dialog.styles";
+
+export interface FormDialogProps {
+  children: ReactNode;
+  setFormSubmitted: Dispatch<SetStateAction<boolean>>;
+}
+
+export const FormDialog = ({
+  children,
+  setFormSubmitted,
+}: FormDialogProps): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const toggleOpen = (event: MouseEvent<HTMLButtonElement>): void => {
+    setAnchorEl((open) => (open ? null : event.currentTarget));
+  };
+
+  const onClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Fab color="primary" onClick={toggleOpen} open={open} size="medium">
+        {open ? <CloseRoundedIcon /> : <FeedbackIcon fontSize="medium" />}
+      </Fab>
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          horizontal: "right",
+          vertical: -8,
+        }}
+        onClose={onClose}
+        open={open}
+        onTransitionExited={(): void => setFormSubmitted(false)}
+        slotProps={{ paper: { elevation: 2 } }}
+        transformOrigin={{
+          horizontal: "right",
+          vertical: "bottom",
+        }}
+      >
+        {children}
+      </Popover>
+    </>
+  );
+};