@databiosphere/findable-ui 50.7.0 → 50.7.1

package/src/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.tsx

@@ -1,344 +0,0 @@
-import { MenuItem, SelectChangeEvent, Typography } from "@mui/material";
-import {
-  useEffect,
-  ChangeEvent,
-  Dispatch,
-  FocusEvent,
-  SetStateAction,
-  useState,
-  JSX,
-} from "react";
-import { FileRejection } from "react-dropzone";
-import { ValidationError } from "yup";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
-import { Input } from "../../../../../common/Form/components/Input/input";
-import { Select } from "../../../../../common/Form/components/Select/select";
-import { UploadFile } from "../../../../../common/Form/components/UploadFile/uploadFile";
-import { GridPaper } from "../../../../../common/Paper/paper.styles";
-import {
-  SectionActions,
-  SectionContent,
-} from "../../../../../common/Section/section.styles";
-import { SupportRequest } from "../../supportRequest";
-import Dropzone from "../Dropzone/dropzone";
-import {
-  DEFAULT_FORM_STATE,
-  DRAGGING_STYLE,
-  MAX_ATTACHMENT_SIZE,
-  OPTIONS,
-  VALIDATION_SCHEMA,
-} from "./common/constants";
-import {
-  FORM_CONTROL_LABEL,
-  FORM_CONTROL_NAME,
-  FormState,
-  RequestValue,
-} from "./common/entities";
-import { createSupportRequest, uploadAttachment } from "./common/utils";
-import { Section } from "./supportRequestForm.styles";
-
-export interface SupportRequestFormProps {
-  setFormSubmitted: Dispatch<SetStateAction<boolean>>;
-  supportRequest: SupportRequest;
-}
-
-export const SupportRequestForm = ({
-  setFormSubmitted,
-  supportRequest,
-}: SupportRequestFormProps): JSX.Element => {
-  const [formState, setFormState] = useState<FormState>(DEFAULT_FORM_STATE);
-  const [errorFields, setErrorFields] = useState<Set<string>>();
-
-  // Validate form state when it changes.
-  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.
-  const onAttachmentDeleted = (): void => {
-    setFormState((formState) => ({
-      ...formState,
-      attachmentToken: "",
-    }));
-  };
-
-  // Upload file to add as attachment to request.
-  const onAttachmentDropped = async <T extends File>(
-    files: T[],
-  ): Promise<void> => {
-    try {
-      setFormState((formState) => ({
-        ...formState,
-        attachmentRejected: false,
-        attachmentRejections: [],
-        attachmentUploading: true,
-      }));
-      const response = await uploadAttachment(uploadURL, files[0]);
-      setFormState((formState) => ({
-        ...formState,
-        attachmentName: response.attachment.file_name,
-        attachmentToken: response.token,
-        attachmentUploading: false,
-      }));
-    } catch (error) {
-      setFormState((formState) => ({
-        ...formState,
-        attachmentRejected: true,
-        attachmentRejections: [],
-        attachmentUploading: false,
-      }));
-      console.log(error);
-    }
-  };
-
-  // Attachment has been rejected (on drop of file).
-  const onAttachmentRejected = (fileRejections: FileRejection[]): void => {
-    // We can assume there is a single error as we are not doing multiple uploads.
-    const rejection = fileRejections[0] || {};
-    setFormState((formState) => ({
-      ...formState,
-      attachmentRejected: true,
-      attachmentRejections: rejection.errors,
-    }));
-  };
-
-  // Indicate input/select field has been touched.
-  const onBlur = (event: FocusEvent<HTMLInputElement>): void => {
-    const target = event.target;
-    setFormState((formState) => ({
-      ...formState,
-      touched: {
-        ...formState.touched,
-        [target.name]: true,
-      },
-    }));
-  };
-
-  // Bind input value to state.
-  const onInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const target = event.target;
-    const value = target.value;
-    const name = target.name;
-    setFormState((formState) => ({
-      ...formState,
-      [name]: value,
-    }));
-  };
-
-  // Updates form state with the selected question type.
-  const onSelectChange = (event: SelectChangeEvent<unknown>): void => {
-    setFormState((formState) => ({
-      ...formState,
-      type: event.target.value as string,
-    }));
-  };
-
-  // Handle submit of support request form.
-  const onSupportRequestSubmitted = async (): Promise<void> => {
-    const request = buildSupportRequest(formState);
-    try {
-      setFormState((formState) => ({
-        ...formState,
-        submitError: false,
-        submitting: true,
-      }));
-      await createSupportRequest(requestURL, request, FIELD_ID);
-      setFormState((formState) => ({
-        ...formState,
-        submitted: true,
-        submitting: false,
-      }));
-      setFormSubmitted(true); // Shows form submitted message.
-    } catch (error) {
-      setFormState((formState) => ({
-        ...formState,
-        submitError: true,
-        submitting: false,
-      }));
-      console.log(error);
-    }
-  };
-
-  return (
-    <Dropzone
-      activeStyle={DRAGGING_STYLE}
-      disabled={Boolean(formState[FORM_CONTROL_NAME.ATTACHMENT_TOKEN])}
-      maxSize={MAX_ATTACHMENT_SIZE}
-      multiple={false}
-      onDropAccepted={onAttachmentDropped}
-      onDropRejected={onAttachmentRejected}
-    >
-      {({ isDragActive, open }): JSX.Element => (
-        <GridPaper>
-          <Section>
-            <SectionContent>
-              <Typography
-                component="h3"
-                variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}
-              >
-                Contact Us
-              </Typography>
-              <Typography
-                color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-                variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
-              >
-                We’re here to help and answer any questions you might have. We
-                look forward to hearing from you!
-              </Typography>
-            </SectionContent>
-          </Section>
-          <Section>
-            <Input
-              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}
-              onBlur={onBlur}
-              onChange={onInputChange}
-            />
-            <Input
-              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}
-              onBlur={onBlur}
-              onChange={onInputChange}
-            />
-            <Select
-              displayEmpty={true}
-              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}
-              onBlur={onBlur}
-              onChange={onSelectChange}
-              renderValue={renderSelectValue}
-              value={formState[FORM_CONTROL_NAME.TYPE]}
-              variant="outlined"
-            >
-              {OPTIONS.map(({ label, value }) => (
-                <MenuItem key={value} value={value}>
-                  {label}
-                </MenuItem>
-              ))}
-            </Select>
-            <Input
-              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}
-              onBlur={onBlur}
-              onChange={onInputChange}
-            />
-            <Input
-              error={isFieldError(
-                formState,
-                errorFields,
-                FORM_CONTROL_NAME.DESCRIPTION,
-              )}
-              isFilled={Boolean(formState[FORM_CONTROL_NAME.DESCRIPTION])}
-              label={FORM_CONTROL_LABEL.DESCRIPTION}
-              multiline
-              name={FORM_CONTROL_NAME.DESCRIPTION}
-              onBlur={onBlur}
-              onChange={onInputChange}
-              placeholder="Enter a decription"
-              rows={2}
-            />
-            <UploadFile
-              isDragActive={isDragActive}
-              label={FORM_CONTROL_LABEL.ATTACHMENT_TOKEN}
-              onAttachmentDeleted={onAttachmentDeleted}
-              open={open}
-              {...formState}
-            />
-          </Section>
-          <Section>
-            <SectionActions>
-              <ButtonPrimary
-                disabled={Boolean(errorFields) || formState.submitting}
-                fullWidth
-                onClick={onSupportRequestSubmitted}
-                id="button-support-request"
-              >
-                Send
-              </ButtonPrimary>
-            </SectionActions>
-          </Section>
-        </GridPaper>
-      )}
-    </Dropzone>
-  );
-};
-
-/**
- * Build support request model from form values.
- * @param formState - Form State.
- * @returns support request.
- */
-function buildSupportRequest(formState: FormState): RequestValue {
-  const { attachmentToken, description, email, name, subject, type } =
-    formState;
-  return {
-    attachmentToken,
-    description,
-    email,
-    name,
-    subject,
-    type,
-  };
-}
-
-/**
- * Returns true if the given field is touched and has an error.
- * @param formState - Form state.
- * @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,
-  errorFields: Set<string> | undefined,
-  fieldName: FORM_CONTROL_NAME,
-): boolean {
-  return Boolean(formState.touched[fieldName] && errorFields?.has(fieldName));
-}
-
-/**
- * Renders select value.
- * @param value - Select value.
- * @returns select value.
- */
-function renderSelectValue(value: unknown): string {
-  const label = OPTIONS.find((option) => option.value === value)?.label;
-  return label || "Choose subject";
-}

package/src/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.tsx

@@ -1,39 +0,0 @@
-import { Typography } from "@mui/material";
-import { JSX, ReactNode } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { EmailReadIcon } from "../../../../../common/CustomIcon/components/EmailReadIcon/emailReadIcon";
-import {
-  ICON_BADGE_COLOR,
-  IconBadge,
-} from "../../../../../common/IconBadge/iconBadge";
-import {
-  Section,
-  SectionContent,
-} from "../../../../../common/Section/section.styles";
-
-export interface SupportRequestSubmittedProps {
-  description?: ReactNode;
-  title?: ReactNode;
-}
-
-export const SupportRequestSubmitted = ({
-  description = "Your request has been submitted.",
-  title = "Thank You!",
-}: SupportRequestSubmittedProps): JSX.Element => {
-  return (
-    <Section>
-      <SectionContent>
-        <IconBadge color={ICON_BADGE_COLOR.SUCCESS} Icon={EmailReadIcon} />
-        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}>
-          {title}
-        </Typography>
-        <Typography
-          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-          variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
-        >
-          {description}
-        </Typography>
-      </SectionContent>
-    </Section>
-  );
-};

package/src/components/Support/components/SupportRequest/supportRequest.tsx

@@ -1,33 +0,0 @@
-import { useState, JSX } from "react";
-import { FormDialog } from "./components/Dialog/dialog";
-import { REQUEST_FIELD_ID } from "./components/SupportRequestForm/common/entities";
-import { SupportRequestForm } from "./components/SupportRequestForm/supportRequestForm";
-import { SupportRequestSubmitted } from "./components/SupportRequestSubmitted/supportRequestSubmitted";
-
-export interface SupportRequest {
-  FIELD_ID: Record<REQUEST_FIELD_ID, number>;
-  requestURL: string;
-  uploadURL: string;
-}
-
-export interface SupportRequestProps {
-  supportRequest: SupportRequest;
-}
-
-export const SupportRequest = ({
-  supportRequest,
-}: SupportRequestProps): JSX.Element => {
-  const [formSubmitted, setFormSubmitted] = useState<boolean>(false);
-  return (
-    <FormDialog setFormSubmitted={setFormSubmitted}>
-      {formSubmitted ? (
-        <SupportRequestSubmitted />
-      ) : (
-        <SupportRequestForm
-          setFormSubmitted={setFormSubmitted}
-          supportRequest={supportRequest}
-        />
-      )}
-    </FormDialog>
-  );
-};

package/src/components/Support/components/ViewSupport/types.ts

@@ -1,8 +0,0 @@
-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.styles.ts

@@ -1,31 +0,0 @@
-import styled from "@emotion/styled";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { SHADOWS } from "../../../../styles/common/constants/shadows";
-import { bpUpSm } from "../../../../styles/common/mixins/breakpoints";
-
-export const Fab = styled("a")`
-  align-items: center;
-  background-color: ${PALETTE.PRIMARY_MAIN};
-  border: none;
-  border-radius: 50%;
-  bottom: 16px;
-  box-shadow: ${SHADOWS["02"]};
-  color: ${PALETTE.COMMON_WHITE};
-  cursor: pointer;
-  display: flex;
-  font-size: 28px; // Determines the size of the support icon.
-  height: 56px;
-  justify-content: center;
-  position: fixed;
-  right: 16px;
-  width: 56px;
-  z-index: 100; // Above loading component.
-
-  &:hover {
-    background-color: ${PALETTE.PRIMARY_DARK};
-  }
-
-  ${bpUpSm} {
-    bottom: 72px;
-  }
-`;

package/src/components/Support/components/ViewSupport/viewSupport.tsx

@@ -1,25 +0,0 @@
-import { JSX } from "react";
-import { ContactSupportIcon } from "../../../common/CustomIcon/components/ContactSupportIcon/contactSupportIcon";
-import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../../Links/common/entities";
-import { ViewSupportProps } from "./types";
-import { Fab } from "./viewSupport.styles";
-
-/**
- * View support button component.
- * Navigates to support URL provided.
- */
-
-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} rel={rel} target={target} {...props}>
-      <Icon fontSize="inherit" />
-    </Fab>
-  );
-};

package/src/components/Table/columnDef/accessorFn/typeGuards.ts

@@ -1,15 +0,0 @@
-import { RowData } from "@tanstack/react-table";
-
-/**
- * Type guard to check if a row has a specific key.
- * Useful for generic accessor functions.
- * @param row - The row to check.
- * @param key - The key to check.
- * @returns True if the row has the specified key, false otherwise.
- */
-export function rowHasKey<T extends RowData, K extends PropertyKey, TValue>(
-  row: T,
-  key: K,
-): row is T & Record<K, TValue> {
-  return row != null && typeof row === "object" && key in row;
-}

package/src/components/Table/columnDef/columnFilters/filterFn.ts

@@ -1,27 +0,0 @@
-import { Row, RowData } from "@tanstack/react-table";
-
-/**
- * Returns true if the row should be included in the filtered rows.
- * The row will be included if:
- * - the column value (string) equals a value in the filter values array, or
- * - one of the column values is included in the filter values array.
- * See https://github.com/TanStack/table/blob/c895bda085d0886a7eba00a08019f377efbac54c/packages/table-core/src/filterFns.ts.
- * @param row - Row to filter.
- * @param columnId - Column identifier to retrieve the row's value.
- * @param filterValue - Filter value or values.
- * @returns True if the row should be included in the filtered rows.
- */
-export function arrIncludesSome<T extends RowData>(
-  row: Row<T>,
-  columnId: string,
-  filterValue: unknown[],
-): boolean {
-  return filterValue.some((val) => {
-    const columnValue = row.getValue<unknown[]>(columnId);
-    if (Array.isArray(columnValue)) {
-      return columnValue?.includes(val);
-    } else {
-      return columnValue === val;
-    }
-  });
-}

package/src/components/Table/columnDef/globalFilter/constants.ts

@@ -1,5 +0,0 @@
-import { rankings, RankItemOptions } from "@tanstack/match-sorter-utils";
-
-export const RANK_ITEM_OPTIONS: RankItemOptions = {
-  threshold: rankings.CONTAINS,
-};

package/src/components/Table/columnDef/globalFilter/filterFn.ts

@@ -1,34 +0,0 @@
-import { FilterMeta, Row, RowData } from "@tanstack/react-table";
-import { parseSearchTerms, rankColumnValue, rankRowColumns } from "./utils";
-
-/**
- * Fuzzy matches a column against search terms.
- * A true value is returned if the column's value passes the ranking threshold.
- * Normally, TanStack global filtering will not process remaining row columns if a match is found.
- * This function ranks other row columns for highlighting purposes.
- * @param row - Row.
- * @param columnId - Column identifier.
- * @param value - Search term.
- * @param addMeta - Function to add filter metadata.
- * @returns Whether the row passed the filter.
- */
-export function fuzzy<T extends RowData>(
-  row: Row<T>,
-  columnId: string,
-  value: unknown,
-  addMeta: (meta: FilterMeta) => void,
-): boolean {
-  // Split the search term into terms.
-  const terms = parseSearchTerms(value);
-
-  // Rank the column value.
-  const passed = rankColumnValue(row, columnId, terms);
-
-  // Add the filter metadata.
-  addMeta({ passed });
-
-  // Rank other columns for highlighting purposes (TanStack global filtering will not process remaining columns if a match is found).
-  if (passed) rankRowColumns(row, columnId, terms);
-
-  return passed;
-}

package/src/components/Table/columnDef/globalFilter/types.ts

@@ -1,5 +0,0 @@
-import { FilterMeta } from "@tanstack/react-table";
-
-export interface ColumnFilterMeta extends FilterMeta {
-  passed?: boolean;
-}

package/src/components/Table/columnDef/globalFilter/utils.ts

@@ -1,74 +0,0 @@
-import { rankItem } from "@tanstack/match-sorter-utils";
-import { Row, RowData } from "@tanstack/react-table";
-import { RANK_ITEM_OPTIONS } from "./constants";
-
-/**
- * Parses a search term into an array of terms.
- * @param value - Search term.
- * @returns Array of terms.
- */
-export function parseSearchTerms(value: unknown): string[] {
-  const terms = String(value ?? "")
-    .toLowerCase()
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean)
-    .sort((a, b) => b.length - a.length);
-  const termsSet = new Set(terms);
-  return [...termsSet];
-}
-
-/**
- * Ranks a column's value against search terms.
- * @param row - Row to rank.
- * @param columnId - Column identifier.
- * @param terms - Search terms to match against.
- * @returns Whether the value passed.
- */
-export function rankColumnValue<T extends RowData>(
-  row: Row<T>,
-  columnId: string,
-  terms: string[],
-): boolean {
-  // Get the column value.
-  const columnValue = row.getValue(columnId);
-
-  // Return false if the column value is undefined or null.
-  if (columnValue === undefined || columnValue === null) return false;
-
-  // Check if each term matches the column value.
-  // Ranking from CASE_SENSITIVE_EQUAL to CONTAINS (excludes `ACRONYM`, `MATCHES` threshold).
-  const rankings = terms.map((term) =>
-    rankItem(String(columnValue), term, RANK_ITEM_OPTIONS),
-  );
-
-  return rankings.every(({ passed }) => passed);
-}
-
-/**
- * Ranks a row's columns against search terms.
- * Processes columns that are searchable and have not already been processed.
- * @param row - Row to rank.
- * @param columnId - Column identifier.
- * @param terms - Search terms to match against.
- */
-export function rankRowColumns<T extends RowData>(
-  row: Row<T>,
-  columnId: string,
-  terms: string[],
-): void {
-  // Process other columns.
-  for (const { column } of row.getAllCells()) {
-    // Column is not searchable.
-    if (!column.getCanGlobalFilter()) continue;
-
-    // Column has already been processed.
-    if (column.id === columnId) continue;
-
-    // Rank the column value.
-    const passed = rankColumnValue(row, column.id, terms);
-
-    // Add the filter metadata.
-    row.columnFiltersMeta[column.id] = { passed };
-  }
-}

package/src/components/Table/common/columnDef.ts

@@ -1,40 +0,0 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
-import { TABLE_CELL_PROPS } from "../../../styles/common/mui/tableCell";
-import { RowPositionCell } from "../components/TableCell/components/RowPositionCell/rowPositionCell";
-import { RowSelectionCell } from "../components/TableCell/components/RowSelectionCell/rowSelectionCell";
-import { HeadSelectionCell } from "../components/TableHead/components/HeadSelectionCell/headSelectionCell";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
-
-export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
-  ROW_POSITION: {
-    cell: RowPositionCell,
-    enableColumnFilter: false,
-    enableGrouping: false,
-    enableHiding: false,
-    enableSorting: false,
-    enableTableDownload: false,
-    header: "",
-    id: COLUMN_IDENTIFIER.ROW_POSITION,
-    meta: {
-      align: TABLE_CELL_PROPS.ALIGN.RIGHT,
-      columnPinned: false,
-      header: "",
-      width: "max-content",
-    },
-  },
-  ROW_SELECTION: {
-    cell: RowSelectionCell,
-    enableColumnFilter: false,
-    enableGrouping: false,
-    enableHiding: false,
-    enableSorting: false,
-    enableTableDownload: false,
-    header: HeadSelectionCell,
-    id: COLUMN_IDENTIFIER.ROW_SELECTION,
-    meta: {
-      columnPinned: false,
-      header: "",
-      width: "max-content",
-    },
-  },
-};