@databiosphere/findable-ui 0.0.0

package/src/components/common/CustomIcon/components/XIcon/xIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom X icon (socials).
+ */
+
+export const XIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M10.1723 8.0327L14.7597 2.7002H13.6727L9.68942 7.33033L6.50801 2.7002H2.83862L7.64954 9.70178L2.83862 15.2937H3.92576L8.13217 10.4041L11.492 15.2937H15.1614L10.1721 8.0327H10.1723ZM8.68335 9.76347L8.1959 9.06627L4.31746 3.51857H5.98724L9.11718 7.99574L9.60463 8.69294L13.6732 14.5126H12.0034L8.68335 9.76373V9.76347Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/CustomIcon/components/YouTubeIcon/youTubeIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom YouTube icon (socials).
+ */
+
+export const YouTubeIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M16.3547 5.31523C16.1859 4.64023 15.6515 4.10586 15.0047 3.93711C13.7953 3.59961 9.01405 3.59961 9.01405 3.59961C9.01405 3.59961 4.20468 3.59961 2.9953 3.93711C2.34843 4.10586 1.81405 4.64023 1.6453 5.31523C1.3078 6.49648 1.3078 9.02773 1.3078 9.02773C1.3078 9.02773 1.3078 11.5309 1.6453 12.7402C1.81405 13.4152 2.34843 13.9215 2.9953 14.0902C4.20468 14.3996 9.01405 14.3996 9.01405 14.3996C9.01405 14.3996 13.7953 14.3996 15.0047 14.0902C15.6515 13.9215 16.1859 13.4152 16.3547 12.7402C16.6922 11.5309 16.6922 9.02773 16.6922 9.02773C16.6922 9.02773 16.6922 6.49648 16.3547 5.31523ZM7.43905 11.3059V6.74961L11.4328 9.02773L7.43905 11.3059Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/Dialog/components/DialogTitle/dialogTitle.tsx

@@ -0,0 +1,26 @@
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { DialogTitle as MDialogTitle, IconButton } from "@mui/material";
+import React, { ReactNode } from "react";
+
+export interface DialogTitleProps {
+  className?: string;
+  onClose?: () => void;
+  title?: ReactNode;
+}
+
+export const DialogTitle = ({
+  className,
+  onClose,
+  title,
+}: DialogTitleProps): JSX.Element => {
+  return (
+    <MDialogTitle className={className}>
+      {title}
+      {onClose && (
+        <IconButton color="ink" edge="end" onClick={onClose} size="xsmall">
+          <CloseRoundedIcon />
+        </IconButton>
+      )}
+    </MDialogTitle>
+  );
+};

package/src/components/common/Dot/dot.styles.ts

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+export const DotSeparator = styled("span")`
+  align-self: center;
+  background-color: ${({ theme }) => theme.palette.ink.light};
+  border-radius: 50%;
+  display: block;
+  flex: none;
+  height: 4px;
+  width: 4px;
+`;

package/src/components/common/Dot/dot.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { DotSeparator } from "./dot.styles";
+
+export interface DotProps {
+  className?: string;
+}
+
+export const Dot = ({ className }: DotProps): JSX.Element => {
+  return <DotSeparator className={className} />;
+};

package/src/components/common/EllipsisContent/ellipsisContent.styles.ts

@@ -0,0 +1,24 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ButtonTextPrimary } from "../Button/components/ButtonTextPrimary/buttonTextPrimary";
+
+interface Props {
+  isEllipsis: boolean;
+  maxLineCount: number;
+}
+
+export const Content = styled("div")<Props>`
+  ${({ isEllipsis, maxLineCount }) =>
+    isEllipsis &&
+    css`
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      -webkit-line-clamp: ${maxLineCount};
+      overflow: hidden;
+    `}
+`;
+
+export const Button = styled(ButtonTextPrimary)`
+  align-self: flex-start;
+  margin-top: 8px;
+`;

package/src/components/common/EllipsisContent/ellipsisContent.tsx

@@ -0,0 +1,204 @@
+import React, { ReactNode, useEffect, useRef, useState } from "react";
+import {
+  getBorderBoxSizeHeight,
+  useResizeObserver,
+} from "../../../hooks/useResizeObserver";
+import { Button, Content } from "./ellipsisContent.styles";
+
+enum EllipsisMode {
+  "NONE" = "NONE",
+  "OFF" = "OFF",
+  "ON" = "ON",
+}
+
+export interface OverviewDescriptionProps {
+  children: ReactNode | ReactNode[];
+  maxLineCount: number;
+}
+
+export const EllipsisContent = ({
+  children,
+  maxLineCount,
+}: OverviewDescriptionProps): JSX.Element => {
+  const ellipsisRef = useRef<HTMLDivElement>(null);
+  const { height } =
+    useResizeObserver(ellipsisRef, getBorderBoxSizeHeight) || {};
+  const [ellipsisMode, setEllipsisMode] = useState<EllipsisMode | undefined>();
+  const isEllipsis = ellipsisMode === EllipsisMode.ON;
+
+  /**
+   * Updates the state of ellipsis mode by toggling between "ON" and "OFF" values.
+   */
+  const onToggleMode = (): void => {
+    setEllipsisMode((currentMode) => {
+      if (currentMode === EllipsisMode.ON) {
+        return EllipsisMode.OFF;
+      }
+      return EllipsisMode.ON;
+    });
+  };
+
+  /**
+   * Ellipsis mode state is initialized to "NONE" only when the component mounts,
+   * so we guarantee that `ellipsisRef` gets the element handle for resize observer hook.
+   */
+  useEffect(() => {
+    setEllipsisMode(EllipsisMode.NONE);
+  }, []);
+
+  /**
+   * Ellipsis mode state updates with changes to the rendered content height.
+   */
+  useEffect(() => {
+    setEllipsisMode((currentMode) => {
+      return getEllipsisMode(ellipsisRef.current, maxLineCount, currentMode);
+    });
+  }, [height, maxLineCount]);
+
+  return (
+    <>
+      <Content
+        ref={ellipsisRef}
+        isEllipsis={isEllipsis}
+        maxLineCount={maxLineCount}
+      >
+        <div>{children}</div>
+      </Content>
+      {isModeActivated(ellipsisMode) && (
+        <Button onClick={onToggleMode}>{getModeText(ellipsisMode)}</Button>
+      )}
+    </>
+  );
+};
+
+/**
+ * Returns the calculated line count of text rendered within the given element.
+ * @param element - Element observed by resize observer (ellipsis container).
+ * @returns line count of text rendered.
+ */
+function calculateRenderedLineCount(
+  element: HTMLDivElement | null
+): number | undefined {
+  if (!element) {
+    return;
+  }
+  // Grab the DOMRects for the text nodes within the element.
+  const DOMRects = getTextNodeDOMRects(element).sort(sortDOMRects);
+  if (DOMRects.length === 0) {
+    return;
+  }
+  // Set the first bounding rect as the initial y1 and y2 values.
+  let lineCount = 1;
+  let y1 = DOMRects[0].top;
+  let y2 = DOMRects[0].bottom;
+  // Keeping a track of the upper and lower positional threshold of each line, we are going to test each bounding rect
+  // to see if it falls within the threshold of the current line. If it does, we skip it. If it doesn't, we increment
+  // the line count and update the threshold values.
+  for (const rect of DOMRects) {
+    const { bottom, top } = rect;
+    if (top >= y1 && bottom <= y2) {
+      continue;
+    }
+    y1 = top;
+    y2 = bottom;
+    lineCount++;
+  }
+  return lineCount;
+}
+
+/**
+ * Returns one of the following ellipsis mode for the content:
+ * - "ON" - paragraph is ellipsis view with the option to toggle view, or
+ * - "OFF" - paragraph is in full view with the option to toggle view, or
+ * - "NONE" - paragraph is in full view with no option to toggle view as it does not require ellipsis.
+ * @param element - Element observed by resize observer (ellipsis container).
+ * @param maxLineCount - Maximum lines to display.
+ * @param currentMode - Current ellipsis mode.
+ * @returns ellipsis mode.
+ */
+function getEllipsisMode(
+  element: HTMLDivElement | null,
+  maxLineCount: number,
+  currentMode: EllipsisMode = EllipsisMode.NONE
+): EllipsisMode {
+  // Calculate line count.
+  const lineCount = calculateRenderedLineCount(element);
+
+  if (!lineCount) {
+    return currentMode;
+  }
+
+  if (lineCount <= maxLineCount) {
+    // Element does not have hidden content and line count is within allowable limit.
+    // Mode is "NONE" - ellipsis mode not required.
+    return EllipsisMode.NONE;
+  }
+
+  if (currentMode === EllipsisMode.NONE) {
+    // Line count exceeds allowable limit, and ellipsis mode is "NONE".
+    // Change mode to "ON" - ellipsis mode required.
+    return EllipsisMode.ON;
+  }
+
+  return currentMode;
+}
+
+/**
+ * Returns applicable button text for display corresponding with current mode.
+ * When the current mode is "ON" the return value will be "Show More", otherwise the return value is "Show Less".
+ * @param currentMode - current ellipsis mode.
+ * @returns string for display as button text.
+ */
+function getModeText(currentMode?: EllipsisMode): string {
+  if (currentMode === EllipsisMode.ON) {
+    return "Read More";
+  }
+  return "Read Less";
+}
+
+/**
+ * Returns a list of DOMRects for text nodes within the given node.
+ * @param node - Node.
+ * @param DOMRects - List of DOMRects.
+ * @returns a list of text node DOMRects.
+ */
+function getTextNodeDOMRects(node: Node, DOMRects: DOMRect[] = []): DOMRect[] {
+  if (node.hasChildNodes()) {
+    for (const child of node.childNodes) {
+      // Traverse the DOM tree to find text nodes.
+      getTextNodeDOMRects(child, DOMRects);
+    }
+  } else {
+    // Create a range object for the text node.
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    // Grab the DOMRectList for the range; this is a list of the bounding rectangles for the content.
+    const DOMRectList = range.getClientRects();
+    for (const rect of [...DOMRectList]) {
+      if (rect.height && rect.width) {
+        DOMRects.push(rect);
+      }
+    }
+  }
+  return DOMRects;
+}
+
+/**
+ * Ellipsis mode is "activated" when content is long enough to be truncated.
+ * i.e. the current mode will not equal "NONE".
+ * @param currentMode - current ellipsis mode.
+ * @returns true when mode is not "NONE".
+ */
+function isModeActivated(currentMode?: EllipsisMode): boolean {
+  return !!currentMode && currentMode !== EllipsisMode.NONE;
+}
+
+/**
+ * Sorts the given DOMRects by their y value.
+ * @param DOMRect0 - First DOMRect to compare.
+ * @param DOMRect1 - Second DOMRect to compare.
+ * @returns number indicating the relative order of the given DOMRects.
+ */
+function sortDOMRects(DOMRect0: DOMRect, DOMRect1: DOMRect): number {
+  return DOMRect0.y - DOMRect1.y;
+}

package/src/components/common/Form/components/Input/input.styles.ts

@@ -0,0 +1,55 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { FormControl } from "@mui/material";
+import { inkLight, inkMain } from "../../../../../styles/common/mixins/colors";
+
+interface Props {
+  isFilled?: boolean;
+}
+
+export const InputFormControl = styled(FormControl, {
+  shouldForwardProp: (prop) => prop !== "isFilled",
+})<Props>`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .MuiOutlinedInput-root {
+    .MuiOutlinedInput-input {
+      padding: 10px 12px 10px 0;
+    }
+
+    &.MuiInputBase-multiline {
+      padding: 0 0 0 10px;
+    }
+
+    input::placeholder,
+    textarea::placeholder {
+      color: ${inkLight};
+      opacity: 0.8;
+    }
+
+    &.Mui-focused {
+      input::placeholder,
+      textarea::placeholder {
+        opacity: 0;
+      }
+    }
+
+    // Input filled.
+    ${({ isFilled, ...props }) =>
+      isFilled &&
+      css`
+        & .MuiOutlinedInput-input,
+        .MuiSvgIcon-root {
+          color: ${inkMain(props)};
+        }
+      `};
+  }
+
+  .MuiFormHelperText-root {
+    align-items: flex-start;
+    display: flex;
+    gap: 4px;
+  }
+`;

package/src/components/common/Form/components/Input/input.tsx

@@ -0,0 +1,37 @@
+import {
+  OutlinedInput,
+  OutlinedInputProps as MOutlinedInputProps,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { InputFormControl } from "./input.styles";
+
+/**
+ * Basic form input component.
+ */
+
+export interface InputProps extends MOutlinedInputProps {
+  className?: string;
+  isFilled: boolean;
+  label?: string;
+}
+
+export const Input = ({
+  className,
+  isFilled,
+  label,
+  ...props /* Spread props to allow for Mui OutlinedInputProps specific prop overrides e.g. "disabled". */
+}: InputProps): JSX.Element => {
+  return (
+    <InputFormControl className={className} isFilled={isFilled}>
+      {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
+      <OutlinedInput
+        fullWidth
+        inputProps={{ autoComplete: "off", spellCheck: false }}
+        size="small"
+        {...props}
+      />
+    </InputFormControl>
+  );
+};

package/src/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.tsx

@@ -0,0 +1,10 @@
+import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import React from "react";
+
+export const DropDownIcon = ({
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}): JSX.Element => {
+  return (
+    <ArrowDropDownRoundedIcon color="inkMain" fontSize="small" {...props} />
+  );
+};

package/src/components/common/Form/components/Select/select.styles.ts

@@ -0,0 +1,26 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { FormControl } from "@mui/material";
+import { inkMain } from "../../../../../styles/common/mixins/colors";
+
+interface Props {
+  isFilled: boolean;
+}
+
+export const InputFormControl = styled(FormControl, {
+  shouldForwardProp: (prop) => prop !== "isFilled",
+})<Props>`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  // Input filled.
+  ${({ isFilled, ...props }) =>
+    isFilled &&
+    css`
+      & .MuiOutlinedInput-input,
+      .MuiSvgIcon-root {
+        color: ${inkMain(props)};
+      }
+    `};
+`;

package/src/components/common/Form/components/Select/select.tsx

@@ -0,0 +1,37 @@
+import {
+  Select as MSelect,
+  SelectProps as MSelectProps,
+  Typography,
+} from "@mui/material";
+import React, { ReactNode } from "react";
+import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { InputFormControl } from "./select.styles";
+
+/**
+ * Basic form select component.
+ */
+
+export interface SelectProps extends MSelectProps {
+  children: ReactNode;
+  className?: string;
+  isFilled: boolean;
+  label?: string;
+}
+
+export const Select = ({
+  children,
+  className,
+  isFilled,
+  label,
+  onBlur,
+  ...props /* Spread props to allow for Mui SelectProps specific prop overrides e.g. "disabled". */
+}: SelectProps): JSX.Element => {
+  return (
+    <InputFormControl className={className} isFilled={isFilled}>
+      {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
+      <MSelect fullWidth inputProps={{ onBlur }} size="small" {...props}>
+        {children}
+      </MSelect>
+    </InputFormControl>
+  );
+};

package/src/components/common/Form/components/UploadFile/uploadFile.styles.ts

@@ -0,0 +1,62 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ButtonBase } from "@mui/material";
+import {
+  errorMain,
+  infoLightest,
+  infoMain,
+  inkMain,
+  smokeDark,
+  smokeLight,
+} from "../../../../../styles/common/mixins/colors";
+
+interface Props {
+  isAttached: boolean;
+  isDragActive: boolean;
+  isError: boolean;
+}
+
+export const Button = styled(ButtonBase, {
+  shouldForwardProp: (prop) =>
+    prop !== "isAttached" && prop !== "isDragActive" && prop !== "isError",
+})<Props>`
+  align-items: center;
+  background-color: ${smokeLight};
+  border: 1px dashed ${smokeDark};
+  border-radius: 4px;
+  display: flex;
+  gap: 8px;
+  height: 40px;
+  justify-content: ${(props) =>
+    props.isAttached ? "space-between" : undefined};
+  padding: 10px 12px;
+
+  // Drag active.
+  ${({ isDragActive, theme }) =>
+    isDragActive &&
+    css`
+      background-color: ${infoLightest({ theme })};
+      border: 1px dashed ${infoMain({ theme })};
+    `};
+
+  // Error.
+  ${({ isDragActive, isError, theme }) =>
+    isError &&
+    !isDragActive &&
+    css`
+      border: 1px dashed ${errorMain({ theme })};
+    `};
+
+  .MuiTypography-text-body-400 {
+    color: ${inkMain};
+    opacity: 0.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+export const Underline = styled.span`
+  text-decoration: underline;
+  text-underline-offset: 2px;
+`;

package/src/components/common/Form/components/UploadFile/uploadFile.tsx

@@ -0,0 +1,88 @@
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { FormHelperText, Typography } from "@mui/material";
+import React from "react";
+import { DropzoneState } from "react-dropzone";
+import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { Loading, LOADING_PANEL_STYLE } from "../../../../Loading/loading";
+import { FormState } from "../../../../Support/components/SupportRequest/components/SupportRequestForm/common/entities";
+import { ErrorIcon } from "../../../CustomIcon/components/ErrorIcon/errorIcon";
+import { InputFormControl } from "../Input/input.styles";
+import { Button, Underline } from "./uploadFile.styles";
+
+export interface UploadFileProps {
+  attachmentName: FormState["attachmentName"];
+  attachmentRejected: FormState["attachmentRejected"];
+  attachmentRejections: FormState["attachmentRejections"];
+  attachmentToken: FormState["attachmentToken"];
+  attachmentUploading: FormState["attachmentUploading"];
+  className?: string;
+  isDragActive: boolean;
+  label: string;
+  onAttachmentDeleted: () => void;
+  open: DropzoneState["open"];
+}
+
+export const UploadFile = ({
+  attachmentName,
+  attachmentRejected,
+  attachmentRejections,
+  attachmentToken,
+  attachmentUploading,
+  className,
+  isDragActive,
+  label,
+  onAttachmentDeleted,
+  open,
+}: UploadFileProps): JSX.Element => {
+  const error = attachmentRejected;
+  const isAttached = Boolean(attachmentToken);
+  return (
+    <InputFormControl className={className} error={error}>
+      {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
+      <Button
+        isAttached={isAttached}
+        isDragActive={isDragActive}
+        isError={error}
+        onClick={attachmentToken ? onAttachmentDeleted : open}
+      >
+        <Loading
+          iconSize="small"
+          loading={attachmentUploading}
+          panelStyle={LOADING_PANEL_STYLE.INHERIT}
+        />
+        <Typography variant={TEXT_BODY_400}>
+          {isAttached ? (
+            attachmentName
+          ) : (
+            <>
+              Drag or <Underline>Click</Underline> to attach file
+            </>
+          )}
+        </Typography>
+        {isAttached && <CloseRoundedIcon fontSize="small" />}
+      </Button>
+      {error && (
+        <FormHelperText>
+          <ErrorIcon fontSize="xxsmall" />
+          {getErrorMessage(attachmentRejections)}
+        </FormHelperText>
+      )}
+    </InputFormControl>
+  );
+};
+
+/**
+ * Returns the error message for the attachment.
+ * @param attachmentRejections - Attachment rejections.
+ * @returns error message.
+ */
+function getErrorMessage(
+  attachmentRejections: FormState["attachmentRejections"]
+): string {
+  const fileSizeError = attachmentRejections.find(
+    (rejection) => rejection.code === "file-too-large"
+  );
+  return fileSizeError
+    ? "File must be less than 20 MB."
+    : "Unable to upload file.";
+}

package/src/components/common/Grid/components/GridItem/gridItem.tsx

@@ -0,0 +1,25 @@
+import { Box, SxProps } from "@mui/material";
+import React, { ReactNode } from "react";
+
+// TODO the prop "children" should not necessarily be optional, but it is for now to avoid typescript errors with the use of this component within site configuration files.
+
+export interface GridItemProps {
+  children?: ReactNode | ReactNode[];
+  gridItemSx?: SxProps;
+}
+
+/**
+ * A basic Grid Item component for rendering CSS grid items.
+ */
+
+export const GridItem = ({
+  children,
+  gridItemSx,
+  ...props /* Spread props to allow for Mui Box specific prop overrides. */
+}: GridItemProps): JSX.Element => {
+  return (
+    <Box sx={gridItemSx} {...props}>
+      {children}
+    </Box>
+  );
+};