@verifiedinc-public/shared-ui-elements 0.11.6 → 0.12.0

package/src/components/CredentialRequestsEditor/utils/buildDataFieldValue.ts

@@ -0,0 +1,65 @@
+import _ from 'lodash';
+import { type CompositeCredentialSchema } from '../types/compositeCredentialSchema';
+import { CredentialRequests } from '../types/form';
+import { type CredentialSchemaDto } from '../types/credentialSchemasDto';
+import { MandatoryEnum } from '../types/mandatoryEnum';
+
+const isComposed = (schema: unknown): schema is CompositeCredentialSchema =>
+  Object.prototype.hasOwnProperty.call(schema || {}, 'anyOf') ||
+  Object.prototype.hasOwnProperty.call(schema || {}, 'allOf');
+
+function extractTypes(
+  record: any,
+  result: string[] = [],
+  parentKeys: string[] = [],
+): string[] {
+  _.forOwn(record, (value, key) => {
+    // Check if the current key is $ref or $id and handle accordingly
+    if (key === '$ref' && typeof value === 'string') {
+      result.push(value);
+    } else if (
+      key === '$id' &&
+      typeof value === 'string' &&
+      _.some(parentKeys, (k) => ['allOf', 'anyOf', 'oneOf'].includes(k))
+    ) {
+      result.push(value);
+    }
+
+    // If the value is an object or array, recurse into it
+    if (_.isObject(value)) {
+      extractTypes(value, result, [...parentKeys, key]);
+    }
+  });
+
+  return result;
+}
+
+export function buildDataFieldValue(
+  type: string,
+  schema: CredentialSchemaDto['schemas'],
+): CredentialRequests {
+  const selectedSchema = schema[type];
+  const isComposedSchema = isComposed(selectedSchema);
+
+  if (isComposedSchema) {
+    return {
+      type,
+      mandatory: MandatoryEnum.NO,
+      description: '',
+      allowUserInput: true,
+      multi: false,
+      children: extractTypes(selectedSchema).map((item) =>
+        buildDataFieldValue(item, schema),
+      ),
+    };
+  }
+
+  return {
+    type,
+    mandatory: MandatoryEnum.NO,
+    description: '',
+    allowUserInput: true,
+    // We want to default to true if is email credential.
+    multi: type === 'EmailCredential',
+  };
+}

package/src/components/CredentialRequestsEditor/utils/prettyField.ts

@@ -0,0 +1,16 @@
+// This pattern will split camel cased string out of the credential,
+// when a camel word contain a sequence of uppercase character it is kept to maintain consistency of that word.
+const schemaNamePattern = /([A-Z][a-z0-9]+)/gm;
+
+// Format the camel cased text to a human-readable.
+export const prettyField = (field: string): string =>
+  field
+    .split(schemaNamePattern)
+    .map((word) => {
+      if (word === 'Id') return 'ID';
+      if (word === 'Zip') return 'ZIP';
+      if (word === 'Ssn') return 'SSN';
+      return word;
+    })
+    .filter((e) => e !== 'Credential')
+    .join(' ');

package/src/components/Image.tsx

@@ -0,0 +1,10 @@
+import { Box, type BoxProps } from '@mui/material';
+
+export interface ImageProps extends BoxProps {
+  src: string;
+  alt: string;
+}
+
+export const Image = ({ src, alt, ...props }: ImageProps): JSX.Element => {
+  return <Box src={src} alt={alt} {...props} component='img' />;
+};

package/src/components/QRCodeDisplay/index.tsx

@@ -0,0 +1,50 @@
+import { Box } from '@mui/material';
+
+import { useQRCode } from '../../hooks';
+
+export interface QRCodeDisplayProps {
+  data: string;
+  asset?: string;
+  svgSize?: number;
+  logoSize?: number;
+  fill?: string;
+}
+
+export function QRCodeDisplay({
+  data,
+  asset,
+  svgSize = 300,
+  logoSize = 0,
+  fill = '#000000',
+}: QRCodeDisplayProps) {
+  const svg = useQRCode({
+    data: data,
+    size: svgSize,
+    imageSize: logoSize,
+    fill,
+  });
+
+  return (
+    <Box position='relative'>
+      <Box
+        display='flex'
+        sx={{ '& svg': { width: '100%', height: 'auto', aspectRatio: 1 } }}
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+      <Box
+        component='img'
+        src={asset}
+        sx={{
+          position: 'absolute',
+          width: (logoSize / svgSize) * 100 + '%',
+          maxWidth: logoSize + 'px',
+          height: 'auto',
+          inset: 0,
+          aspectRatio: 1,
+          m: 'auto',
+          p: 0.5,
+        }}
+      />
+    </Box>
+  );
+}

package/src/components/RequiredLabel/index.tsx

@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from 'react';
+import { Box } from '@mui/material';
+
+export function RequiredLabel(
+  props: Readonly<PropsWithChildren>,
+): React.JSX.Element {
+  return (
+    <span>
+      {props.children}
+      <Box component='span' color='error.main' sx={{ ml: 0.5 }}>
+        *
+      </Box>
+    </span>
+  );
+}

package/src/components/TextField/index.tsx

@@ -0,0 +1,8 @@
+import MUITextField from '@mui/material/TextField';
+import type { TextFieldProps as MUITextFieldProps } from '@mui/material/TextField';
+
+export type TextFieldProps = MUITextFieldProps;
+
+export function TextField(props: TextFieldProps): JSX.Element {
+  return <MUITextField {...props} />;
+}

package/src/components/Tip/index.tsx

@@ -0,0 +1,18 @@
+import { type PropsWithChildren } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { Code } from '@mui/icons-material';
+
+export function Tip({ children }: PropsWithChildren): React.JSX.Element {
+  return (
+    <Tooltip title={children} arrow enterTouchDelay={0}>
+      <IconButton
+        size='small'
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <Code />
+      </IconButton>
+    </Tooltip>
+  );
+}

package/src/components/Typography/index.tsx

@@ -0,0 +1,8 @@
+import MUITypography from '@mui/material/Typography';
+import type { TypographyProps as MUITypographyProps } from '@mui/material/Typography';
+
+export type TypographyProps = MUITypographyProps;
+
+export function Typography(props: TypographyProps): JSX.Element {
+  return <MUITypography {...props} />;
+}

package/src/components/When.tsx

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+
+export interface WhenProps<T = unknown> {
+  value: T;
+  children: ReactNode | ((condition: NonNullable<T>) => ReactNode);
+}
+
+/**
+ * This component can be used when using value is truthy to render some other component,
+ * instead of using ternary operators you can use this.
+ *
+ * This is particularly useful when you have nested conditional rendering. Also, it allows for safer falsy conditions
+ * while in a ternary you can risk rendering falsy values in the react tree if you use `&&`.
+ * @param value
+ * @param children Children can be direct ReactNode or a function returning ReactNode, when a function,
+ * the value is being passed as param and is guarantee to be non-nullable excluding undefined and null from the inferred type.
+ * @constructor
+ */
+export function When<T>({
+  value,
+  children,
+}: WhenProps<T>): React.JSX.Element | null {
+  if (!value) return null;
+
+  if (typeof children === 'function') return <>{children(value)}</>;
+
+  return <>{children}</>;
+}

package/src/components/form/CountrySelector.tsx

@@ -0,0 +1,96 @@
+import { useMemo, useState } from 'react';
+import { Button, Menu, MenuItem } from '@mui/material';
+
+import { KeyboardArrowDown } from '@mui/icons-material';
+import {
+  countries,
+  getPhoneDataByFieldName,
+  sortByCountryName,
+} from '../../utils/phone';
+
+interface CountrySelectorProps {
+  value: string;
+  onChange: (value: string) => void;
+  shouldShowOnlyNorthAmericanCountries?: boolean;
+}
+
+/**
+ * Component that renders and allows to manage the desired phone country format.
+ * @constructor
+ */
+export default function CountrySelector({
+  shouldShowOnlyNorthAmericanCountries = true,
+  ...props
+}: Readonly<CountrySelectorProps>): React.JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const options = useMemo(() => {
+    // Remove Brazil from the list of countries, we allow only North American numbers.
+    let _countries = [
+      ...countries.filter((country) => country.countryCode !== 'BR'),
+    ];
+
+    // Show all countries in development mode.
+    if (!shouldShowOnlyNorthAmericanCountries) {
+      _countries = [...countries];
+    }
+
+    return [..._countries].sort(sortByCountryName);
+  }, [shouldShowOnlyNorthAmericanCountries]);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Button
+        id='demo-customized-button'
+        aria-controls={open ? 'country-select-button' : undefined}
+        aria-haspopup='true'
+        aria-expanded={open ? 'true' : undefined}
+        variant='text'
+        disableElevation
+        onClick={handleClick}
+        endIcon={<KeyboardArrowDown />}
+      >
+        {getPhoneDataByFieldName('countryCode', props.value)?.emoji}
+      </Button>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'country-select-button',
+        }}
+        slotProps={{
+          paper: {
+            style: {
+              maxHeight: 48 * 4.5,
+              width: '20ch',
+              minWidth: '300px',
+            },
+          },
+        }}
+      >
+        {/* spread to avoid mutating the original countries array with sort method */}
+        {options.map((country) => (
+          <MenuItem
+            role='menuitem'
+            key={country.countryCode}
+            onClick={() => {
+              props.onChange(country.countryCode);
+              handleClose();
+            }}
+          >
+            {country.emoji} {country.countryName}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}

package/src/components/form/DataFieldClearAdornment.tsx

@@ -0,0 +1,28 @@
+import { Close } from '@mui/icons-material';
+import { InputAdornment, IconButton } from '@mui/material';
+
+type DataFieldClearAdornmentProps = Readonly<{
+  onClick?: () => void;
+  handleClear: () => void;
+}>;
+
+export function DataFieldClearAdornment({
+  onClick,
+  handleClear,
+}: DataFieldClearAdornmentProps): React.JSX.Element {
+  return (
+    <InputAdornment position='end'>
+      <IconButton
+        aria-label='clear value'
+        edge='end'
+        size='small'
+        onClick={() => {
+          handleClear();
+          onClick?.();
+        }}
+      >
+        <Close fontSize='small' />
+      </IconButton>
+    </InputAdornment>
+  );
+}

package/src/components/form/DateInput.tsx

@@ -0,0 +1,117 @@
+import { Box, TextField } from '@mui/material';
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ChangeEventHandler,
+} from 'react';
+import {
+  formatDateMMDDYYYY,
+  getMaxDateInstance,
+  getMinDateInstance,
+} from '../../utils/date';
+import { masks } from '../../utils/masks';
+import { USDateSchema } from '../../validations';
+import { type TextFieldProps } from '../TextField';
+import { InputMask } from './InputMask';
+import { inputStyle } from './styles/input';
+
+interface DateInputProps {
+  name?: string;
+  value?: string;
+  label?: string;
+  error?: boolean;
+  helperText?: string;
+  onChange?: (event: { target: { value: string } }) => void;
+  onBlur?: ChangeEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+  allowFutureDates?: boolean;
+}
+
+/**
+ * The input with date format.
+ * @constructor
+ */
+function DateInputComponent(
+  {
+    label = 'Date of Birth',
+    value = '',
+    error,
+    helperText,
+    onChange,
+    onBlur,
+    disabled,
+    allowFutureDates = true,
+    ...rest
+  }: Readonly<DateInputProps>,
+  ref: any,
+): React.JSX.Element {
+  // Arbitrary value to format the timestamp into human-readable date.
+  const [localValue, setLocalValue] = useState<string>(
+    value ? formatDateMMDDYYYY(value) : '',
+  );
+
+  useEffect(() => {
+    if (value === '') {
+      setLocalValue('');
+    }
+  }, [value]);
+
+  const minDateInstance = getMinDateInstance();
+  const maxDateInstance = getMaxDateInstance(allowFutureDates);
+
+  const textFieldStyle: TextFieldProps = {
+    ...inputStyle,
+    label,
+    error,
+    helperText,
+    inputProps: {
+      // Set the input mode to numeric.
+      inputMode: 'numeric',
+      // Tab index for each block.
+      tabIndex: 0,
+      // Mask type date.
+      mask: masks.DOB_MASK,
+    },
+    fullWidth: true,
+  };
+
+  return (
+    <Box width='100%'>
+      <InputMask
+        mask={masks.DOB_MASK}
+        maskPlaceholder={null}
+        disabled={disabled}
+        value={localValue}
+        onBlur={onBlur}
+        onChange={(e) => {
+          const value = e.target.value;
+          const valid = USDateSchema.safeParse(value);
+
+          // Update the facade input value, so it let user input wrong/right values.
+          setLocalValue(value);
+
+          if (!valid.success) {
+            // A way to make sure the data field state is invalid is to empty the value.
+            return onChange?.({ target: { value: '' } });
+          }
+
+          const date = new Date(value);
+          if (date < minDateInstance || date > maxDateInstance) {
+            // A way to make sure the data field state is invalid is to empty the value.
+            return onChange?.({ target: { value: '' } });
+          }
+
+          date.setUTCHours(12);
+
+          // The date is valid in the US date format and is in between the valid min-max date range.
+          onChange?.({ target: { value: String(+date) } });
+        }}
+      >
+        <TextField {...textFieldStyle} inputRef={ref} {...rest} />
+      </InputMask>
+    </Box>
+  );
+}
+
+export const DateInput = forwardRef(DateInputComponent);

package/src/components/form/DefaultInput.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { inputStyle } from './styles/input';
+import { TextField, type TextFieldProps } from '../TextField';
+
+/**
+ * A wrapper around the MUI TextField component to encapsulate some common defaults.
+ * Primarily intended for use creating more specific Input components rather than for direct use.
+ *
+ * @param {TextFieldProps} props DefaultInput takes the same props as the MUI TextField component.
+ * It sets default values for variant ('outlined') and margin ('normal').
+ */
+const DefaultInput = (
+  { variant = 'outlined', margin = 'normal', ...props }: TextFieldProps,
+  ref: any,
+): React.JSX.Element => {
+  return (
+    <TextField
+      inputRef={ref}
+      {...inputStyle}
+      variant={variant}
+      margin={margin}
+      fullWidth
+      {...props}
+    />
+  );
+};
+
+export default forwardRef(DefaultInput);

package/src/components/form/InputMask.tsx

@@ -0,0 +1,41 @@
+import { type ChangeEventHandler, type ReactNode } from 'react';
+import RInputMask from '@mona-health/react-input-mask';
+
+interface Selection {
+  start: string;
+  end: string;
+}
+
+interface State {
+  value: string;
+  selection: Selection;
+}
+
+interface BeforeMaskedStateChangeOptions {
+  previousState: State;
+  currentState: State;
+  nextState: State;
+}
+
+interface InputMaskProps {
+  // Custom render function for integration with other input components.
+  children: ReactNode;
+  // Mask format.
+  mask: string | Array<RegExp | string>;
+  // Input value.
+  value: string;
+  // Change event handler.
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  // Function to modify value and selection before applying mask.
+  onBlur?: ChangeEventHandler<HTMLInputElement>;
+  beforeMaskedStateChange?: (options: BeforeMaskedStateChangeOptions) => void;
+  // Placeholder to cover unfilled parts of the mask, null to remove the default "_" placeholder.
+  maskPlaceholder?: string | null;
+  // Whether mask prefix and placeholder should be displayed when input is empty and has no focus.
+  alwaysShowMask?: boolean;
+  disabled?: boolean;
+}
+
+export function InputMask(props: Readonly<InputMaskProps>): React.JSX.Element {
+  return <RInputMask {...props} />;
+}