@databiosphere/findable-ui 0.0.0

package/src/components/Links/links.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from "react";
+import { Link, LinkProps } from "./components/Link/link";
+
+export interface LinksProps {
+  divider?: ReactNode;
+  links: LinkProps[];
+}
+
+export const Links = ({ divider, links }: LinksProps): JSX.Element => {
+  const lastLinkIndex = links.length - 1;
+  return (
+    <>
+      {links.map(({ copyable, label, noWrap, target, url }, i) => {
+        const showDivider = i < lastLinkIndex && divider;
+        return (
+          <span key={`${url}${i}`}>
+            <Link
+              copyable={copyable}
+              label={label}
+              noWrap={noWrap}
+              target={target}
+              url={url}
+            />
+            {showDivider && divider}
+          </span>
+        );
+      })}
+    </>
+  );
+};

package/src/components/Loading/loading.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { Loading } from "./loading";
+
+export default {
+  argTypes: {
+    className: { control: { disabled: true } },
+    loading: { control: "boolean" },
+    panelStyle: {
+      control: "select",
+      options: Array.from(Object.keys(PAPER_PANEL_STYLE)),
+    },
+    text: { control: "text" },
+  },
+  component: Loading,
+  decorators: [
+    (Story): JSX.Element => (
+      <div
+        style={{
+          backgroundColor: "white",
+          borderRadius: 8,
+          height: 600,
+          width: 600,
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  title: "Components/Communication/Loading",
+} as ComponentMeta<typeof Loading>;
+
+const LoadingTemplate: ComponentStory<typeof Loading> = (args) => (
+  <Loading {...args} />
+);
+
+export const LoadingStory = LoadingTemplate.bind({});
+LoadingStory.args = {
+  loading: true,
+};

package/src/components/Loading/loading.styles.ts

@@ -0,0 +1,83 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { TABLET } from "../../theme/common/breakpoints";
+import { Paper, PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { LoadingPanelStyle, LOADING_PANEL_STYLE } from "./loading";
+
+interface Props {
+  panelStyle: LoadingPanelStyle;
+}
+
+export const LoadingPositioner = styled.div<Props>`
+  display: grid;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+
+  // Style "Inherit" - inherit border radius from parent container.
+  ${({ panelStyle }) =>
+    panelStyle === LOADING_PANEL_STYLE.INHERIT &&
+    css`
+      border-radius: inherit;
+    `};
+`;
+
+export const LoadingPaper = styled(Paper)<Props>`
+  background-color: rgba(255, 255, 255, 0.8);
+  display: grid;
+  gap: 16px;
+  justify-items: center;
+  place-content: center center;
+
+  // Style "Flat" paper.
+  ${({ panelStyle }) =>
+    panelStyle === PAPER_PANEL_STYLE.FLAT &&
+    css`
+      border-left: none;
+      border-radius: 0;
+      border-right: none;
+      box-shadow: none;
+    `};
+
+  // Style "Fluid" paper.
+  ${({ panelStyle, theme }) =>
+    panelStyle === PAPER_PANEL_STYLE.FLUID &&
+    css`
+      border-radius: 8px;
+
+      ${theme.breakpoints.down(TABLET)} {
+        border-left: none;
+        border-radius: 0;
+        border-right: none;
+        box-shadow: none;
+      }
+    `};
+
+  // Style "Inherit" - borderless with no elevation, inherit border-radius from parent container.
+  ${({ panelStyle }) =>
+    panelStyle === LOADING_PANEL_STYLE.INHERIT &&
+    css`
+      border: 0;
+      border-radius: inherit;
+      box-shadow: none;
+    `};
+
+  // No style - borderless with no elevation.
+  ${({ panelStyle }) =>
+    panelStyle === PAPER_PANEL_STYLE.NONE &&
+    css`
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    `};
+
+  // Style "Rounded" paper.
+  ${({ panelStyle }) =>
+    panelStyle === PAPER_PANEL_STYLE.ROUNDED &&
+    css`
+      border-radius: 8px;
+    `};
+`;

package/src/components/Loading/loading.tsx

@@ -0,0 +1,73 @@
+import { Fade, SvgIconProps, Typography } from "@mui/material";
+import React from "react";
+import { LoadingIcon } from "../common/CustomIcon/components/LoadingIcon/loadingIcon";
+import { PaperPanelStyle, PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { LoadingPaper, LoadingPositioner } from "./loading.styles";
+
+/**
+ * Loading component.
+ * For the loading component to consume its parent's container the component should be a direct descendant of the parent container.
+ */
+
+export type LoadingPanelStyle =
+  | keyof typeof LOADING_PANEL_STYLE
+  | PaperPanelStyle;
+
+/**
+ * Possible set of loading variant "panel" style values.
+ */
+export enum LOADING_PANEL_STYLE {
+  INHERIT = "INHERIT",
+}
+
+export interface LoadingProps {
+  iconSize?: SvgIconProps["fontSize"];
+  loading: boolean;
+  panelStyle?: LoadingPanelStyle; // Enables loading to mirror parent container styles.
+  text?: string;
+}
+
+export const Loading = ({
+  iconSize = "large",
+  loading,
+  panelStyle = PAPER_PANEL_STYLE.ROUNDED,
+  text,
+}: LoadingProps): JSX.Element | null => {
+  return (
+    <Fade
+      in={loading}
+      mountOnEnter
+      onEnter={(node: HTMLElement): void => onFadeEnter(node)}
+      onExited={(node: HTMLElement): void => onFadeExited(node)}
+      timeout={300}
+      unmountOnExit
+    >
+      <LoadingPositioner panelStyle={panelStyle}>
+        <LoadingPaper panelStyle={panelStyle}>
+          <LoadingIcon color="primary" fontSize={iconSize} />
+          {text && <Typography variant="text-body-400">{text}</Typography>}
+        </LoadingPaper>
+      </LoadingPositioner>
+    </Fade>
+  );
+};
+
+/**
+ * Callback fired before the "entering" status is applied.
+ * The loading element's parent element is assigned position style "relative" for positioning of the loading element.
+ * @param node - Loading element.
+ */
+function onFadeEnter(node: HTMLElement): void {
+  const parentEl = node.parentElement;
+  if (parentEl) parentEl.style.position = "relative";
+}
+
+/**
+ * Callback fired after the "exited" status is applied.
+ * Removes the loading element's parent element position styles.
+ * @param node - Loading element.
+ */
+function onFadeExited(node: HTMLElement): void {
+  const parentEl = node.parentElement;
+  if (parentEl) parentEl.style.position = "";
+}

package/src/components/Login/login.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { HelpIconButton } from "../common/Button/components/HelpIconButton/helpIconButton";
+import { Login } from "./login";
+
+export default {
+  argTypes: {
+    isGoogle: { control: "boolean" },
+    termsOfService: { control: "object" },
+    text: { control: "object" },
+    title: { control: "text" },
+    warning: { control: "object" },
+  },
+  component: Login,
+  parameters: {
+    layout: "fullscreen",
+  },
+  title: "Components/Login",
+} as Meta<typeof Login>;
+
+type Story = StoryObj<typeof Login>;
+
+export const LoginStory: Story = {
+  args: {
+    isGoogle: true,
+    termsOfService: (
+      <p>I have read and agree to privacy notice and terms of use</p>
+    ),
+    text: (
+      <p>
+        Please sign in to your Data Explorer account{" "}
+        <HelpIconButton url="https://www.google.com/" />
+      </p>
+    ),
+    title: "Sign in to your account",
+    warning: (
+      <div>
+        <p>WARNING NOTICE</p>
+        <p>This is a warning notice.</p>
+      </div>
+    ),
+  },
+};

package/src/components/Login/login.styles.ts

@@ -0,0 +1,56 @@
+import styled from "@emotion/styled";
+import {
+  textBody400,
+  textBodySmall400,
+} from "../../styles/common/mixins/fonts";
+import { TABLET } from "../../theme/common/breakpoints";
+import { Section, SectionActions } from "../common/Section/section.styles";
+
+export const LoginWrapper = styled.div`
+  box-sizing: content-box;
+  display: flex;
+  flex-direction: column;
+  gap: 24px 0;
+  margin: 0 auto;
+  max-width: 400px;
+  padding: 56px 16px;
+`;
+
+export const LoginSection = styled(Section)`
+  gap: 24px 0;
+  padding: 32px;
+
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+    padding: 32px;
+  }
+`;
+
+export const LoginAgreement = styled.div`
+  align-items: center;
+  align-self: flex-start;
+  display: flex;
+  gap: 12px;
+`;
+
+export const LoginSectionActions = styled(SectionActions)`
+  flex-direction: column;
+  gap: 16px 0;
+`;
+
+export const LoginText = styled.div`
+  ${textBody400};
+`;
+
+export const TermsOfService = styled.div`
+  ${textBody400};
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+`;
+
+export const LoginWarning = styled.div`
+  ${textBodySmall400};
+  color: ${({ theme }) => theme.palette.ink.light};
+`;

package/src/components/Login/login.tsx

@@ -0,0 +1,89 @@
+import { Checkbox, Typography } from "@mui/material";
+import React, { ChangeEvent, ReactNode, useState } from "react";
+import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
+import { LoginButton } from "../common/Button/components/LoginButton/loginButton";
+import { CheckedIcon } from "../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { GoogleIcon } from "../common/CustomIcon/components/GoogleIcon/googleIcon";
+import { UncheckedErrorIcon } from "../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
+import { UncheckedIcon } from "../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { RoundedPaper } from "../common/Paper/paper.styles";
+import { SectionContent } from "../common/Section/section.styles";
+import {
+  LoginAgreement,
+  LoginSection,
+  LoginSectionActions,
+  LoginText,
+  LoginWarning,
+  LoginWrapper,
+  TermsOfService,
+} from "./login.styles";
+
+export interface LoginProps {
+  isGoogle?: boolean;
+  termsOfService?: ReactNode;
+  text?: ReactNode;
+  title: string;
+  warning?: ReactNode;
+}
+
+export const Login = ({
+  isGoogle = false,
+  termsOfService,
+  text,
+  title,
+  warning,
+}: LoginProps): JSX.Element => {
+  const { authenticateUser } = useAuthentication();
+  const [isError, setIsError] = useState<boolean>(false);
+  const [isInAgreement, setIsInAgreement] = useState<boolean>(!termsOfService);
+
+  // Authenticates the user, if the user has agreed to the terms of service.
+  // If the terms of service are not accepted, set the terms of service error state to true.
+  const onAuthenticateUser = (): void => {
+    if (!isInAgreement) {
+      setIsError(true);
+      return;
+    }
+    authenticateUser();
+  };
+
+  // Callback fired when the checkbox value is changed.
+  // Clears the terms of service error state and sets state isInAgreement with checkbox selected value.
+  const handleChange = (changeEvent: ChangeEvent<HTMLInputElement>): void => {
+    setIsError(false); // Clears terms of service error state when checkbox is touched.
+    setIsInAgreement(changeEvent.target.checked);
+  };
+
+  return (
+    <LoginWrapper>
+      <RoundedPaper>
+        <LoginSection>
+          <SectionContent>
+            <Typography color="ink.main" component="h3" variant="text-heading">
+              {title}
+            </Typography>
+            {text && <LoginText>{text}</LoginText>}
+          </SectionContent>
+          <LoginSectionActions>
+            {termsOfService && (
+              <LoginAgreement>
+                <Checkbox
+                  checkedIcon={<CheckedIcon />}
+                  icon={isError ? <UncheckedErrorIcon /> : <UncheckedIcon />}
+                  onChange={handleChange}
+                />
+                <TermsOfService>{termsOfService}</TermsOfService>
+              </LoginAgreement>
+            )}
+            {isGoogle && (
+              <LoginButton EndIcon={GoogleIcon} onClick={onAuthenticateUser}>
+                Google
+              </LoginButton>
+            )}
+          </LoginSectionActions>
+        </LoginSection>
+      </RoundedPaper>
+      {warning && <LoginWarning>{warning}</LoginWarning>}
+    </LoginWrapper>
+  );
+};

package/src/components/NoResults/noResults.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { Section, SectionContent } from "../common/Section/section.styles";
+
+export const NoResultsSection = styled(Section)`
+  align-items: center;
+  padding: 40px !important; /* Overrides section padding. */
+`;
+
+export const NoResultsSectionContent = styled(SectionContent)`
+  max-width: 456px;
+  text-align: center;
+`;

package/src/components/NoResults/noResults.tsx

@@ -0,0 +1,43 @@
+import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+import { SearchOffIcon } from "../common/CustomIcon/components/SearchOffIcon/searchOffIcon";
+import {
+  FlatPaper,
+  FluidPaper,
+  RoundedPaper,
+} from "../common/Paper/paper.styles";
+import { SectionTitle } from "../common/Section/components/SectionTitle/sectionTitle";
+import { SectionActions } from "../common/Section/section.styles";
+import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
+import { NoResultsSection, NoResultsSectionContent } from "./noResults.styles";
+
+export interface NoResultsProps {
+  actions?: ReactNode;
+  description?: string;
+  Paper?: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper;
+  title: string;
+}
+
+export const NoResults = ({
+  actions,
+  description,
+  Paper = RoundedPaper,
+  title,
+}: NoResultsProps): JSX.Element => {
+  return (
+    <Paper>
+      <NoResultsSection>
+        <StatusIcon priority={PRIORITY.LOW} StatusIcon={SearchOffIcon} />
+        <NoResultsSectionContent>
+          <SectionTitle title={title} />
+          {description && (
+            <Typography color="ink.light" variant="text-body-400-2lines">
+              {description}
+            </Typography>
+          )}
+        </NoResultsSectionContent>
+        {actions && <SectionActions>{actions}</SectionActions>}
+      </NoResultsSection>
+    </Paper>
+  );
+};

package/src/components/Project/common/entities.ts

@@ -0,0 +1,50 @@
+/**
+ * Model of project collaborating organization to be used as props for the CollaboratingOrganizations component.
+ */
+export interface CollaboratingOrganization {
+  citation: number;
+  name: string;
+}
+
+/**
+ * Model of project contact to be used as props for the Contacts component.
+ */
+export interface Contact {
+  email?: string;
+  institution?: string;
+  name: string;
+}
+
+/**
+ * Model of project contributor to be used as props for the Contributors component.
+ */
+export interface Contributor {
+  citation?: number;
+  name: string;
+  role?: string;
+}
+
+/**
+ * Model of project data curator to be used as props for the DataCurators component.
+ */
+export type DataCurator = string;
+
+/**
+ * Model of project description to be used as props for the Description component.
+ */
+export type Description = string;
+
+/**
+ * Model of project publication to be used as props for the Publication component.
+ */
+export interface Publication {
+  doi?: string;
+  officialHcaPublication?: boolean;
+  publicationTitle: string;
+  publicationUrl: string;
+}
+
+/**
+ * Model of project supplementary link to be used as props for the SupplementaryLinks component.
+ */
+export type SupplementaryLink = string;

package/src/components/Project/components/Citation/citation.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Citation } from "./citation";
+
+const meta: Meta<typeof Citation> = {
+  argTypes: {
+    projectPath: { control: "text" },
+    url: { control: "text" },
+  },
+  component: Citation,
+  title: "Components/SectionContent/Content/Project",
+};
+
+export default meta;
+type Story = StoryObj<typeof Citation>;
+
+export const CitationStory: Story = {
+  args: {
+    projectPath: "60ea42e1-af49-42f5-8164-d641fdb696bc",
+    url: "https://data.humancellatlas.org/explore/projects/",
+  },
+};

package/src/components/Project/components/Citation/citation.styles.ts

@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+
+export const SectionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0; /* required to ellipsis any flex child */
+  width: 100%; /* required to ellipsis any flex child */
+`;
+
+export const CitationLink = styled.div`
+  align-items: center;
+  display: flex;
+  min-width: 0;
+
+  // Copy icon button
+  & button {
+    bottom: 2px; /* Center aligns icon with link text without affecting overall rendered citation link height */
+    margin-left: 8px;
+    position: relative;
+  }
+`;

package/src/components/Project/components/Citation/citation.tsx

@@ -0,0 +1,37 @@
+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 { CitationLink, SectionContent } from "./citation.styles";
+
+export interface CitationProps {
+  projectPath?: string;
+  url?: string;
+}
+
+export const Citation = ({ projectPath, url }: CitationProps): JSX.Element => {
+  return (
+    <CollapsableSection collapsable title="Citation">
+      {projectPath && url ? (
+        <SectionContent>
+          <Typography>
+            To reference this project, please use the following link:
+          </Typography>
+          <CitationLink>
+            <Link
+              copyable
+              label={`${url}${projectPath}`}
+              noWrap
+              target={ANCHOR_TARGET.BLANK}
+              url={`${url}${projectPath}`}
+            />
+          </CitationLink>
+        </SectionContent>
+      ) : (
+        <SectionDetailsEmpty />
+      )}
+    </CollapsableSection>
+  );
+};

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

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

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { CollaboratingOrganization } from "../../common/entities";
+import { Sup } from "../Sup/sup.styles";
+
+export interface CollaboratingOrganizationsProps {
+  collaboratingOrganizations?: CollaboratingOrganization[];
+}
+
+export const CollaboratingOrganizations = ({
+  collaboratingOrganizations,
+}: CollaboratingOrganizationsProps): JSX.Element => {
+  return (
+    <CollapsableSection collapsable title="Collaborating Organizations">
+      {collaboratingOrganizations ? (
+        <div>
+          {collaboratingOrganizations.map(({ citation, name }, c) => (
+            <div key={`${name}${c}`}>
+              <Sup>{citation}</Sup>
+              <span>{name}</span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <SectionDetailsEmpty />
+      )}
+    </CollapsableSection>
+  );
+};