@databiosphere/findable-ui 0.0.0

package/src/components/common/Grid/grid.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 GridProps {
+  children?: ReactNode | ReactNode[];
+  gridSx?: SxProps;
+}
+
+/**
+ * A basic Grid component for rendering CSS grid.
+ */
+
+export const Grid = ({
+  children,
+  gridSx,
+  ...props /* Spread props to allow for Mui Box specific prop overrides. */
+}: GridProps): JSX.Element => {
+  return (
+    <Box display="grid" sx={gridSx} {...props}>
+      {children}
+    </Box>
+  );
+};

package/src/components/common/IconBadge/iconBadge.styles.ts

@@ -0,0 +1,58 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import {
+  alertLightest,
+  alertMain,
+  infoLightest,
+  infoMain,
+  successLightest,
+  successMain,
+  warningLightest,
+  warningMain,
+} from "../../../styles/common/mixins/colors";
+import { IconBadgeColor, ICON_BADGE_COLOR } from "./iconBadge";
+
+interface Props {
+  color: IconBadgeColor;
+}
+
+export const Circle = styled.div<Props>`
+  border-radius: 50%;
+  box-sizing: content-box;
+  display: grid;
+  height: 72px;
+  place-content: center center;
+  width: 72px;
+
+  // Alert.
+  ${({ color, ...props }) =>
+    color === ICON_BADGE_COLOR.ALERT &&
+    css`
+      background-color: ${alertLightest(props)};
+      color: ${alertMain(props)};
+    `};
+
+  // Info.
+  ${({ color, ...props }) =>
+    color === ICON_BADGE_COLOR.INFO &&
+    css`
+      background-color: ${infoLightest(props)};
+      color: ${infoMain(props)};
+    `};
+
+  // Success.
+  ${({ color, ...props }) =>
+    color === ICON_BADGE_COLOR.SUCCESS &&
+    css`
+      background-color: ${successLightest(props)};
+      color: ${successMain(props)};
+    `};
+
+  // Warning.
+  ${({ color, ...props }) =>
+    color === ICON_BADGE_COLOR.WARNING &&
+    css`
+      background-color: ${warningLightest(props)};
+      color: ${warningMain(props)};
+    `};
+`;

package/src/components/common/IconBadge/iconBadge.tsx

@@ -0,0 +1,32 @@
+import React, { ElementType } from "react";
+import { Circle } from "./iconBadge.styles";
+
+/**
+ * Model of icon badge color.
+ */
+export type IconBadgeColor = ICON_BADGE_COLOR;
+
+export enum ICON_BADGE_COLOR {
+  ALERT = "alert",
+  INFO = "info",
+  SUCCESS = "success",
+  WARNING = "warning",
+}
+
+export interface IconBadgeProps {
+  color: IconBadgeColor;
+  Icon: ElementType;
+  iconSize?: string;
+}
+
+export const IconBadge = ({
+  color,
+  Icon,
+  iconSize = "xxlarge",
+}: IconBadgeProps): JSX.Element => {
+  return (
+    <Circle color={color}>
+      <Icon fontSize={iconSize} />
+    </Circle>
+  );
+};

package/src/components/common/IconButton/components/LoadingIconButton/loadingIconButton.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { LoadingIconButton } from "./loadingIconButton";
+
+export default {
+  component: LoadingIconButton,
+  title: "Components/Common/IconButton/Download",
+} as ComponentMeta<typeof LoadingIconButton>;
+
+const LoadingIconButtonTemplate: ComponentStory<
+  typeof LoadingIconButton
+> = () => <LoadingIconButton />;
+
+export const LoadingIconButtonStory = LoadingIconButtonTemplate.bind({});
+LoadingIconButtonStory.args = {};

package/src/components/common/IconButton/components/LoadingIconButton/loadingIconButton.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { LoadingIcon } from "../../../CustomIcon/components/LoadingIcon/loadingIcon";
+import { MockIconButtonPrimary } from "../../iconButton.styles";
+
+/**
+ * Mock "loading" icon button - a placeholder element styled like a primary icon button without the use of a button element.
+ */
+
+export const LoadingIconButton = (): JSX.Element => {
+  return (
+    <MockIconButtonPrimary>
+      <LoadingIcon fontSize="small" />
+    </MockIconButtonPrimary>
+  );
+};

package/src/components/common/IconButton/iconButton.styles.ts

@@ -0,0 +1,90 @@
+import styled from "@emotion/styled";
+import { IconButton as MIconButton } from "@mui/material";
+import { IconButton } from "./iconButton";
+
+// Primary icon button.
+export const IconButtonPrimary = styled(IconButton)`
+  background-color: ${({ theme }) => theme.palette.primary.main};
+  box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.primary.dark};
+  color: ${({ theme }) => theme.palette.common.white};
+
+  // Medium sized primary icon button.
+  &.MuiIconButton-sizeMedium {
+    padding: 6px 8px; // Overrides medium sized button theme top and bottom padding.
+  }
+
+  &:active,
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.primary.dark};
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+
+  &.Mui-disabled {
+    background-color: ${({ theme }) => theme.palette.primary.main};
+    color: ${({ theme }) => theme.palette.common.white};
+    opacity: 0.5;
+  }
+`;
+
+// Secondary icon button.
+export const IconButtonSecondary = styled(IconButton)`
+  background-color: ${({ theme }) => theme.palette.common.white};
+  box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.smoke.dark},
+  0px 1px 0px 0px rgba(0, 0, 0, 0.08);
+  color: ${({ theme }) => theme.palette.ink.main};
+
+  &:active, &:hover {
+    background-color: ${({ theme }) => theme.palette.smoke.lightest};
+  }
+
+  &:active {
+    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.smoke.dark};
+  }
+
+  &:disabled {
+    color: inherit;
+    opacity: 0.5;
+  }
+}
+`;
+
+// Mock icon button.
+export const MockIconButtonPrimary = styled.span`
+  background-color: ${({ theme }) => theme.palette.primary.main};
+  border-radius: 4px;
+  box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.primary.dark};
+  color: ${({ theme }) => theme.palette.common.white};
+  display: flex;
+  flex: none;
+  height: 32px;
+  padding: 6px 8px;
+`;
+
+// Drawer backdrop close icon button.
+export const CloseDrawerIconButton = styled(IconButton)`
+  color: ${({ theme }) => theme.palette.common.white};
+  left: calc(100% + 4px);
+  position: absolute;
+  top: 4px;
+`;
+
+// Socials icon button.
+export const IconButtonSocials = styled(MIconButton)`
+  color: ${({ theme }) => theme.palette.ink.light};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.smoke.light};
+  }
+` as typeof MIconButton;
+
+// Socials icon button - footer component.
+export const IconButtonSocialsFooter = styled(MIconButton)`
+  color: ${({ theme }) => theme.palette.ink.light};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.smoke.main};
+  }
+` as typeof MIconButton;

package/src/components/common/IconButton/iconButton.tsx

@@ -0,0 +1,34 @@
+import {
+  IconButton as MIconButton,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
+import React, { ElementType } from "react";
+
+/**
+ * Basic icon button component.
+ * Use IconButtonSecondary styles to render secondary icon button.
+ */
+
+export interface IconButtonProps extends MIconButtonProps {
+  className?: string;
+  disabled?: boolean;
+  Icon: ElementType;
+}
+
+export const IconButton = ({
+  className,
+  disabled = false,
+  Icon,
+  ...props /* Spread props to allow for Mui IconButtonProps specific prop overrides e.g. "onClick". */
+}: IconButtonProps): JSX.Element => {
+  return (
+    <MIconButton
+      className={className}
+      disabled={disabled}
+      size="large"
+      {...props}
+    >
+      <Icon fontSize="small" />
+    </MIconButton>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { FormControl, OutlinedInput } from "@mui/material";
+
+interface Props {
+  isFilled: boolean;
+}
+
+// Input form control
+export const InputFormControl = styled(FormControl)`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const InputField = styled(OutlinedInput, {
+  shouldForwardProp: (prop) => prop !== "isFilled",
+})<Props>`
+  && ::placeholder {
+    opacity: 0.8;
+  }
+
+  &&.Mui-focused ::placeholder {
+    opacity: 0;
+  }
+
+  // Input filled.
+  ${({ isFilled, theme }) =>
+    isFilled &&
+    css`
+      .MuiOutlinedInput-input,
+      .MuiSvgIcon-root {
+        color: ${theme.palette.ink.main};
+      }
+    `};
+`;

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

@@ -0,0 +1,62 @@
+import { Typography } from "@mui/material";
+import React, { ChangeEvent, ElementType } from "react";
+import { TEXT_BODY_400 } from "../../../theme/common/typography";
+import { SetSearchTermFn } from "../../Filter/common/entities";
+import { InputField, InputFormControl } from "./input.styles";
+
+/**
+ * Basic input component.
+ */
+
+export interface InputProps {
+  className?: string;
+  label?: string;
+  placeholder?: string;
+  searchTerm: string;
+  setSearchTerm: SetSearchTermFn;
+  StartAdornment?: ElementType;
+}
+
+/**
+ * Callback fired when the search term is changed.
+ * - Sets state searchTerm with new search term.
+ * @param changeEvent - Change event on input element.
+ * @param setSearchTerm - Function invoked to update state with the search term.
+ */
+function onChangeInputField(
+  changeEvent: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  setSearchTerm: SetSearchTermFn
+): void {
+  const searchTerm = changeEvent.target.value;
+  setSearchTerm(searchTerm);
+}
+
+export const Input = ({
+  className,
+  label,
+  placeholder,
+  searchTerm,
+  setSearchTerm,
+  StartAdornment,
+  ...props /* Spread props to allow for Mui OutlinedInputProps specific prop overrides e.g. "disabled". */
+}: InputProps): JSX.Element => {
+  return (
+    <InputFormControl className={className}>
+      {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
+      <InputField
+        autoFocus
+        fullWidth
+        inputProps={{ spellCheck: false }}
+        isFilled={!!searchTerm}
+        onChange={(event): void => onChangeInputField(event, setSearchTerm)}
+        placeholder={placeholder}
+        size="small"
+        startAdornment={
+          StartAdornment ? <StartAdornment fontSize="small" /> : undefined
+        }
+        value={searchTerm}
+        {...props}
+      />
+    </InputFormControl>
+  );
+};

package/src/components/common/KeyValuePairs/components/KeyElType/keyElType.tsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+
+/**
+ * Basic KeyValuePairs "key" wrapper component.
+ */
+
+export interface KeyElTypeProps {
+  children: ReactNode;
+}
+
+export const KeyElType = ({
+  children,
+  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
+}: KeyElTypeProps): JSX.Element => {
+  return (
+    <Typography color="ink.light" variant="text-body-400-2lines" {...props}>
+      {children}
+    </Typography>
+  );
+};

package/src/components/common/KeyValuePairs/components/KeyValueElType/keyValueElType.tsx

@@ -0,0 +1,34 @@
+import { Box, SxProps } from "@mui/material";
+import React, { ReactNode } from "react";
+import { KeyValue, KeyValueFn } from "../../keyValuePairs";
+
+/**
+ * Basic KeyValuePairs "key value" component.
+ * Facilitates handling of onClick on the KeyValue element in KeyValuePairs component.
+ */
+
+export interface KeyValueElTypeProps {
+  boxSx?: SxProps;
+  children: ReactNode;
+  keyValue: KeyValue; // From KeyValuePairs component.
+  keyValueFn?: KeyValueFn; // Optional, not all keyValue pairs may have a corresponding function.
+}
+
+export const KeyValueElType = ({
+  boxSx,
+  children,
+  keyValue,
+  keyValueFn,
+  ...props /* Spread props to allow for Mui Box specific prop overrides. */
+}: KeyValueElTypeProps): JSX.Element => {
+  return (
+    <Box
+      onClick={(): void => keyValueFn && keyValueFn(keyValue)}
+      role="button"
+      sx={{ cursor: keyValueFn ? "pointer" : "default", ...boxSx }}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};

package/src/components/common/KeyValuePairs/components/ValueElType/valueElType.tsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+
+/**
+ * Basic KeyValuePairs "value" wrapper component.
+ */
+
+export interface ValueElTypeProps {
+  children: ReactNode;
+}
+
+export const ValueElType = ({
+  children,
+  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
+}: ValueElTypeProps): JSX.Element => {
+  return (
+    <Typography variant="text-body-400-2lines" {...props}>
+      {children}
+    </Typography>
+  );
+};

package/src/components/common/KeyValuePairs/keyValuePairs.tsx

@@ -0,0 +1,45 @@
+import React, { ElementType, Fragment, ReactNode } from "react";
+import { Stack } from "../Stack/stack";
+
+/**
+ * Basic key value pairs component.
+ * Optional wrapper components for the key values, key value tuple, key and value for complete ui flexibility.
+ */
+
+export type Key = ReactNode;
+export type KeyValue = [Key, Value];
+export type Value = ReactNode | ReactNode[];
+export type KeyValueFn = (keyValue: KeyValue) => void; // An KeyValue element onClick function.
+export type KeyValues = Map<Key, Value>;
+
+export interface KeyValuePairsProps {
+  KeyElType?: ElementType; // Wrapper element around key.
+  KeyValueElType?: ElementType; // Wrapper element around key value tuple.
+  keyValuePairs: KeyValues;
+  KeyValuesElType?: ElementType; // Wrapper element around key value pairs.
+  ValueElType?: ElementType; // Wrapper elements around value.
+}
+
+export const KeyValuePairs = ({
+  KeyElType: Key = "span",
+  KeyValueElType: KeyValue = Stack,
+  keyValuePairs,
+  KeyValuesElType: KeyValues = Stack,
+  ValueElType: Value = "span",
+}: KeyValuePairsProps): JSX.Element => {
+  return (
+    <KeyValues>
+      {[...keyValuePairs].map(([key, value], k) => {
+        // Pass through the keyValue to the KeyValue element (for the KeyValueFn if defined).
+        const keyValueProps =
+          KeyValue === Fragment ? {} : { keyValue: [key, value] };
+        return (
+          <KeyValue key={`${key}${k}`} {...keyValueProps}>
+            <Key>{key}</Key>
+            <Value>{value}</Value>
+          </KeyValue>
+        );
+      })}
+    </KeyValues>
+  );
+};

package/src/components/common/MDXMarkdown/components/Section/mdxSection.styles.ts

@@ -0,0 +1,31 @@
+import styled from "@emotion/styled";
+import {
+  textBody4002Lines,
+  textBody500,
+  textBodyLarge500,
+} from "../../../../../styles/common/mixins/fonts";
+
+export const SectionContent = styled.div`
+  h3,
+  h4 {
+    margin: 0 0 8px;
+  }
+
+  h3 {
+    ${textBodyLarge500};
+  }
+
+  h4 {
+    ${textBody500};
+    margin-top: 20px;
+  }
+
+  p {
+    ${textBody4002Lines};
+    margin: 0 0 8px;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+`;

package/src/components/common/Markdown/markdown.tsx

@@ -0,0 +1,13 @@
+// TODO deprecate component if possible (see MDXMarkdown)
+import DOMPurify from "isomorphic-dompurify";
+import React from "react";
+
+export interface MarkdownProps {
+  content: string;
+}
+
+export const Markdown = ({ content }: MarkdownProps): JSX.Element => {
+  return (
+    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }} />
+  );
+};

package/src/components/common/Paper/paper.styles.ts

@@ -0,0 +1,71 @@
+import styled from "@emotion/styled";
+import { TABLET } from "../../../theme/common/breakpoints";
+import { Paper } from "./paper";
+
+/**
+ * Flat paper - typically used when in full stretch or full "bleed" across a container.
+ * e.g. the entire width of mobile viewports.
+ */
+export const FlatPaper = styled(Paper)`
+  align-self: stretch;
+  border-left: none;
+  border-radius: 0;
+  border-right: none;
+  box-shadow: none;
+`;
+
+/**
+ * Rounded paper - typically used when contained within a parent container.
+ * To use RoundedPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
+ */
+export const RoundedPaper = styled(Paper)`
+  align-self: stretch;
+  border-radius: 8px;
+`;
+
+/* eslint-disable valid-jsdoc -- disable require param */
+/**
+ * Fluid paper - typically used to transition between flat paper (mobile) and rounded paper (tablet or desktop).
+ * To use FluidPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
+ */
+/* eslint-enable valid-jsdoc -- disable require param */
+export const FluidPaper = styled(RoundedPaper)`
+  ${({ theme }) => theme.breakpoints.down(TABLET)} {
+    border-left: none;
+    border-radius: 0;
+    border-right: none;
+    box-shadow: none;
+  }
+`;
+
+// See https://github.com/emotion-js/emotion/issues/1105.
+// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
+const ignoreSsrWarning =
+  "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
+
+/**
+ * Grid paper - typically used as a parent (grid) container.
+ * The background color with the grid cap property create the grid "lines" between each grid item.
+ */
+export const GridPaper = styled.div(({ theme }) => ({
+  backgroundColor: `${theme.palette.smoke.main}`,
+  borderRadius: "inherit", // Inherit parent container border radius.
+  display: "grid",
+  gap: "1px",
+  // First child - not <style/> - inherits top left and right border radius.
+  [`> *:first-child:not(style)${ignoreSsrWarning}`]: {
+    borderTopLeftRadius: "inherit",
+    borderTopRightRadius: "inherit",
+  },
+  // First child - after <style/> - inherits top left and right border radius.
+  [`> style:first-child + *${ignoreSsrWarning}`]: {
+    borderTopLeftRadius: "inherit",
+    borderTopRightRadius: "inherit",
+  },
+  // Last child inherits bottom left and right border radius.
+  // eslint-disable-next-line sort-keys -- disabling key order for readability
+  "> *:last-child": {
+    borderBottomLeftRadius: "inherit",
+    borderBottomRightRadius: "inherit",
+  },
+}));

package/src/components/common/Paper/paper.tsx

@@ -0,0 +1,38 @@
+import { Paper as MPaper, PaperProps as MPaperProps } from "@mui/material";
+import React, { forwardRef, ReactNode } from "react";
+
+/**
+ * An extension of the basic Mui Paper component with custom variants e.g. "panel".
+ */
+
+/**
+ * Model of paper variant "panel" style.
+ */
+export type PaperPanelStyle = keyof typeof PAPER_PANEL_STYLE;
+
+/**
+ * Possible set of paper variant "panel" style values.
+ */
+export enum PAPER_PANEL_STYLE {
+  FLAT = "FLAT",
+  FLUID = "FLUID",
+  NONE = "NONE",
+  ROUNDED = "ROUNDED",
+}
+
+export interface PaperProps {
+  children: ReactNode | ReactNode[];
+  className?: string;
+  variant?: MPaperProps["variant"];
+}
+
+export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
+  { children, className, variant = "panel" }: PaperProps,
+  ref
+): JSX.Element {
+  return (
+    <MPaper className={className} ref={ref} variant={variant}>
+      {children}
+    </MPaper>
+  );
+});