@verifiedinc-public/shared-ui-elements 1.3.2 → 2.0.0

package/src/components/form/OTPInput.tsx

@@ -1,254 +0,0 @@
-import {
-  type ChangeEvent,
-  type ForwardedRef,
-  forwardRef,
-  type KeyboardEvent,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Box,
-  Stack,
-  type StackProps,
-  type SxProps,
-  TextField,
-  InputBase,
-  type InputBaseProps,
-  Typography,
-  useTheme,
-  FormControl,
-} from '@mui/material';
-import { v4 as uuid } from 'uuid';
-
-interface OTPInputProps {
-  name?: string;
-  onChange?: (event: { target: { value: string } }) => void;
-  disabled?: boolean;
-  sx?: SxProps;
-}
-
-export type OTPInputInstance = Readonly<{
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-}> & { get value(): string; set value(newValue: string) };
-
-/**
- * OTP input component that displays individual field for each value.
- * @param props
- * @param ref
- * @constructor
- */
-function OTPInputComponent(
-  props: OTPInputProps,
-  ref: ForwardedRef<OTPInputInstance> | null,
-): React.JSX.Element {
-  const theme = useTheme();
-  // Generate unique ids for each input.
-  const ids = useRef(Array.from({ length: 6 }, () => uuid()));
-  const [values, setValues] = useState<string[]>([]);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
-
-  const [isFocused, setIsFocused] = useState(false);
-
-  // Control inputs from outside via ref.
-  useImperativeHandle(
-    ref,
-    () => ({
-      get value() {
-        return values.join('');
-      },
-      set value(newValue: string) {
-        setValues(newValue.split(''));
-        // Trigger onChange when the value is set from outside.
-        props.onChange?.({ target: { value: newValue } });
-      },
-      focus() {
-        inputsRef.current[0]?.click();
-        inputsRef.current[0]?.focus();
-      },
-      blur() {
-        inputsRef.current.forEach((input) => input?.blur());
-      },
-      clear() {
-        setValues([]);
-      },
-    }),
-    [props, values],
-  );
-
-  const inputContainerProps: StackProps = {
-    boxSizing: 'content-box',
-    direction: 'row',
-    alignItems: 'center',
-    spacing: 1.25,
-    sx: {
-      '& input': {
-        textAlign: 'center',
-        fontWeight: 500,
-        height: 30,
-        [theme.breakpoints.down('xs')]: {
-          height: 16,
-          fontSize: 16,
-          pt: 1,
-          pb: 1,
-          px: 1,
-        },
-        [theme.breakpoints.up('xs')]: {
-          fontSize: 28,
-          px: 1,
-        },
-        fontSize: 32,
-        py: 1.75,
-      },
-    },
-  };
-  const inputProps: InputBaseProps = useMemo(
-    () => ({
-      inputProps: {
-        inputMode: 'numeric',
-        pattern: '[0-9]*',
-        autoCorrect: 'off',
-        autoCapitalize: 'off',
-      },
-      sx: {
-        '& input': {
-          borderRadius: 1,
-          borderStyle: 'solid',
-          borderColor: 'rgba(0, 0, 0, 0.23)',
-          borderWidth: 1,
-        },
-        ...(isFocused && {
-          '& input': {
-            borderRadius: 1,
-            borderStyle: 'solid',
-            borderWidth: 1,
-            borderColor: theme.palette.primary.main,
-            boxShadow: `inset 0 0 0 1px ${theme.palette.primary.main}`,
-          },
-        }),
-      },
-    }),
-    [isFocused, theme.palette.primary.main],
-  );
-
-  const focusFirstEmptyInput = useCallback(() => {
-    const valuesString = values.join('');
-    const firstEmptyInput = inputsRef.current[valuesString.length];
-
-    firstEmptyInput?.focus();
-    firstEmptyInput?.select();
-  }, [values]);
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value;
-
-      // Allow up to 6 digits only.
-      if (!value.length || !/^[0-9]{1,6}$/.test(value)) return;
-
-      setValues((prev) => {
-        const newValue = value.length === 6 ? [...value] : [...prev, ...value];
-        const newValueString = newValue.join('');
-
-        if (inputRef.current) {
-          inputRef.current.value = newValue.join('');
-        }
-
-        // Calls onChange when all OTP fields are filled.
-        if (newValueString.length === 6) {
-          inputsRef.current.forEach((input) => input?.blur());
-          props.onChange?.({ target: { value: newValueString } });
-        }
-
-        return newValue;
-      });
-    },
-    [props],
-  );
-
-  const handleKeyUp = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Backspace') {
-      setValues((prev) => {
-        const newValue = [...prev.slice(0, -1)];
-        if (inputRef.current) {
-          inputRef.current.value = newValue.join('');
-        }
-        return newValue;
-      });
-    }
-  }, []);
-
-  const handleFocus = useCallback(() => {
-    focusFirstEmptyInput();
-    setIsFocused(true);
-  }, [focusFirstEmptyInput]);
-
-  const renderInputGroup = useCallback(
-    (startIndex: number) => {
-      return new Array(3).fill(undefined).map((_, index) => {
-        return (
-          // FormControl is required for InputBase to avoid bad setState in handleBlur event, and it is one per input.
-          <FormControl key={ids.current[index + startIndex]}>
-            <InputBase
-              inputRef={(input) =>
-                ((inputsRef.current[index + startIndex] as any) = input)
-              }
-              autoComplete='one-time-code'
-              autoFocus={index + startIndex === 0}
-              value={values[index + startIndex] || ''}
-              disabled={props.disabled}
-              onChange={handleChange}
-              onKeyUp={handleKeyUp}
-              onFocus={handleFocus}
-              onBlur={() => setIsFocused(false)}
-              {...inputProps}
-              data-testid={`otp-input-${index + startIndex}`}
-            />
-          </FormControl>
-        );
-      });
-    },
-    [
-      handleChange,
-      handleFocus,
-      handleKeyUp,
-      inputProps,
-      props.disabled,
-      values,
-    ],
-  );
-
-  // Focus the first empty input when the value changes.
-  useEffect(() => {
-    focusFirstEmptyInput();
-  }, [focusFirstEmptyInput]);
-
-  return (
-    <Box width='100%' sx={props.sx}>
-      {/* Use input facade to update the value and listen to changes */}
-      <div style={{ display: 'none!important', pointerEvents: 'none' }}>
-        <TextField
-          inputRef={inputRef}
-          name={props.name}
-          type='text'
-          value={values.join('') || ''}
-          sx={{ pointerEvents: 'none', display: 'none' }}
-          inputProps={{ hidden: true }}
-        />
-      </div>
-      <Stack {...inputContainerProps} onClick={focusFirstEmptyInput}>
-        {renderInputGroup(0)}
-        <Typography sx={{ fontWeight: '700', fontSize: 32 }}>-</Typography>
-        {renderInputGroup(3)}
-      </Stack>
-    </Box>
-  );
-}
-
-export const OTPInput = forwardRef(OTPInputComponent);

package/src/components/form/PhoneInput.tsx

@@ -1,152 +0,0 @@
-import { Box, InputAdornment, type InputProps } from '@mui/material';
-import { type TextFieldProps } from '../TextField';
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import { getPhoneDataByFieldName } from '../../utils/phone';
-import { phoneSchema } from '../../validations/phone.schema';
-
-import { TextMaskCustom } from './TextMaskCustom';
-import CountrySelector from './CountrySelector';
-import DefaultInput from './DefaultInput';
-import { DataFieldClearAdornment } from './DataFieldClearAdornment';
-
-export interface PhoneInputProps {
-  label?: string;
-  name?: string;
-  helperText?: string;
-  initialValue?: string;
-  onChange?: (value: string) => void;
-  onValidPhone?: (value: string) => void;
-  error?: boolean;
-  handleChangeCountry?: (newCountry: string) => void;
-  value?: string;
-  shouldShowOnlyNorthAmericanCountries?: boolean;
-  shouldHaveClearButton?: boolean;
-  variant?: TextFieldProps['variant'];
-  InputProps?: InputProps;
-}
-
-/**
- * Renders a phone input component with country selector and masking.
- *
- * @param label - The label for the phone input. Defaults to 'Phone'.
- * @param name - The name of the phone input. Defaults to 'phone'.
- * @param helperText - The helper text for the phone input.
- * @param onChange - The callback function to handle the change event of the phone input.
- * @param initialValue - The initial value for the phone input. Defaults to ''.
- * @param error - Whether the phone input has an error. Defaults to false.
- * @param handleChangeCountry - The callback function to handle the change event of the country selector.
- * @param value - The value of the phone input. If passed, it will be used instead of the value from component state.
- */
-export function PhoneInput({
-  label = 'Phone',
-  name = 'phone',
-  helperText,
-  onChange,
-  onValidPhone,
-  initialValue = '',
-  error = false,
-  handleChangeCountry,
-  value: valueProp,
-  InputProps,
-  shouldHaveClearButton = false,
-}: Readonly<PhoneInputProps>): React.JSX.Element {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  /**
-   * Represents the country selected for the phone input. Defaults to US.
-   */
-  const [country, setCountry] = useState<string>('US');
-
-  /**
-   * Represents the value of the phone input. Initially set to the initialValue passed in the props.
-   */
-  const [value, setValue] = useState<string>(initialValue);
-
-  const phoneData = useMemo(
-    () => getPhoneDataByFieldName('countryCode', country),
-    [country],
-  );
-
-  /**
-   * Handles the change of the selected country in the phone input.
-   * @param newCountry - The selected country.
-   */
-  const _handleChangeCountry = (newCountry: string): void => {
-    setCountry(newCountry);
-
-    if (handleChangeCountry) {
-      handleChangeCountry(newCountry);
-    }
-
-    // HACK alert:
-    // Wait a while so focus can take effect.
-    setTimeout(() => {
-      inputRef.current?.focus();
-    }, 10);
-  };
-
-  const checkIsValidPhone = (phone: string): void => {
-    const validation = phoneSchema.safeParse(value);
-    if (validation.success) {
-      onValidPhone?.(phone);
-    }
-  };
-
-  const handleChange = (value: string): void => {
-    setValue(value);
-    onChange?.(value);
-  };
-
-  useEffect(() => {
-    checkIsValidPhone(value);
-  }, [value]);
-
-  const inputProps: TextFieldProps = {
-    inputRef,
-    label,
-    name: `_${name}`,
-    helperText,
-    // if the value prop is passed, use it, otherwise use the value from component state
-    // this allows the parent component to control the value of the input field
-    value: valueProp ?? value,
-    error,
-    onChange: (e) => {
-      handleChange(e.target.value);
-    },
-    inputProps: {
-      // Receive unmasked value on change.
-      unmask: true,
-      // Make placeholder always visible
-      lazy: false,
-      mask: phoneData?.mask,
-      placeholderChar: '_',
-      // Tab index for each block.
-      tabIndex: 0,
-    },
-    InputProps: {
-      ...InputProps,
-      inputComponent: TextMaskCustom as any,
-      startAdornment: (
-        <InputAdornment position='start'>
-          <CountrySelector value={country} onChange={_handleChangeCountry} />
-        </InputAdornment>
-      ),
-      endAdornment: shouldHaveClearButton && (
-        <DataFieldClearAdornment
-          handleClear={() => {
-            handleChange('');
-          }}
-        />
-      ),
-    },
-    fullWidth: true,
-  };
-
-  return (
-    <Box width='100%'>
-      <input name={name} value={value} readOnly type='hidden' hidden />
-      <DefaultInput {...inputProps} />
-    </Box>
-  );
-}

package/src/components/form/SSNInput.tsx

@@ -1,99 +0,0 @@
-import { useState } from 'react';
-import { Box, TextField, type TextFieldProps } from '@mui/material';
-
-import { usePrevious } from '../../hooks/usePrevious';
-import { DataFieldClearAdornment } from './DataFieldClearAdornment';
-import { TextMaskCustom } from './TextMaskCustom';
-
-type TextStyles = Omit<TextFieldProps, 'onChange'> & { onChange: any };
-
-export interface SSNInputProps {
-  onChange?: (event: { target: { value: string } }) => void;
-  name?: string;
-  value?: string;
-  label?: string;
-  error?: boolean;
-  helperText?: string;
-  shouldHaveCloseAdornment?: boolean;
-}
-
-/**
- * This component manages the input of type SSN.
- * @constructor
- */
-export function SSNInput({
-  onChange,
-  label = 'Social Security number',
-  shouldHaveCloseAdornment = false,
-  ...rest
-}: SSNInputProps): React.JSX.Element {
-  // Arbitrary states to allow to empty input field.
-  const [value, setValue] = useState<string | undefined>('');
-  const previousValue = usePrevious(value);
-
-  const handleChange = (value: string): void => {
-    setValue(value);
-    onChange?.({ target: { value } });
-  };
-
-  const handleClear = (): void => {
-    handleChange('');
-    onChange?.({ target: { value: '' } });
-  };
-
-  const textFieldStyle: TextStyles = {
-    value,
-    onChange: (e: any, nativeEvent: any) => {
-      if (!nativeEvent) return;
-      handleChange(e.target.value);
-    },
-    inputProps: {
-      onFocus: () => {
-        handleChange('');
-      },
-      onBlur: () => {
-        if (value?.length) return;
-        handleChange(previousValue ?? '');
-      },
-
-      // Use onChange event.
-      useOnComplete: false,
-      // Use unmasked value.
-      unmask: true,
-      // Mask in the pattern of SSN.
-      mask: 'XXX-XX-0000',
-
-      definitions: {
-        X: {
-          mask: /[0-9•]/,
-          displayChar: '•',
-        },
-      },
-
-      // Set input mode to numeric, so mobile virtual keyboards just show numeric keys.
-      inputMode: 'numeric',
-
-      overwrite: false,
-      // Tab index for each block.
-      tabIndex: 0,
-    },
-    InputProps: {
-      inputComponent: TextMaskCustom as any,
-
-      endAdornment: !!shouldHaveCloseAdornment && (
-        <DataFieldClearAdornment
-          onClick={handleClear}
-          handleClear={handleClear}
-        />
-      ),
-    },
-    fullWidth: true,
-    label,
-  };
-
-  return (
-    <Box width='100%'>
-      <TextField {...textFieldStyle} {...rest} />
-    </Box>
-  );
-}

package/src/components/form/SelectInput.tsx

@@ -1,101 +0,0 @@
-import {
-  Autocomplete,
-  TextField,
-  type TextFieldProps as InternalFieldProps,
-} from '@mui/material';
-import { useState } from 'react';
-
-interface TextFieldProps extends Omit<InternalFieldProps, 'onChange'> {}
-
-interface Option {
-  label: string;
-  id: string;
-}
-
-interface SelectInputProps {
-  name?: string;
-  onChange?: (value: Option | null) => void;
-  onClear?: () => void;
-  options: Option[];
-  value?: Option | null; // Controlled value
-  defaultOption?: Option;
-  InputProps?: TextFieldProps;
-  disableClearable?: boolean;
-}
-
-/**
- * This component manages the input of type Select.
- * @constructor
- */
-export function SelectInput({
-  options,
-  defaultOption,
-  value: controlledValue,
-  onChange,
-  onClear,
-  disableClearable,
-  ...props
-}: SelectInputProps): React.JSX.Element {
-  const [internalValue, setInternalValue] = useState<Option | null>(
-    defaultOption ?? null,
-  );
-
-  // Determine the value to display
-  const isControlled = controlledValue !== undefined;
-  const value = isControlled ? controlledValue : internalValue;
-
-  const handleChange = (option: Option | null): void => {
-    if (!isControlled) {
-      setInternalValue(option); // Update internal state only if uncontrolled
-    }
-    if (onChange) {
-      onChange(option);
-    }
-  };
-
-  const handleClear = (): void => {
-    handleChange(null);
-    if (onClear) {
-      onClear();
-    }
-  };
-
-  const textFieldStyle: TextFieldProps = {
-    inputProps: {
-      tabIndex: 0,
-    },
-    fullWidth: true,
-    ...props.InputProps,
-  };
-
-  return (
-    <Autocomplete
-      disablePortal
-      autoHighlight
-      defaultValue={defaultOption}
-      options={options}
-      disableClearable={disableClearable}
-      isOptionEqualToValue={(option, value) => option?.id === value?.id}
-      value={value}
-      onChange={(_event, newInputValue) => {
-        // User clicked on clear button.
-        if (!newInputValue) {
-          handleClear();
-          return;
-        }
-
-        handleChange(newInputValue);
-      }}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          {...textFieldStyle}
-          inputProps={{
-            ...params.inputProps,
-            ...textFieldStyle.inputProps,
-          }}
-        />
-      )}
-    />
-  );
-}

package/src/components/form/TextMaskCustom.tsx

@@ -1,48 +0,0 @@
-import { forwardRef, type Ref } from 'react';
-import { IMaskInput } from 'react-imask';
-
-export type ChangeEvent = (
-  event: { target: { name: string; value: string } },
-  nativeEvent?: InputEvent,
-) => void;
-
-interface TextMaskCustomProps {
-  onChange: ChangeEvent;
-  name: string;
-  mask: string;
-  definitions?: Record<string, RegExp>;
-  // Value to define which event to handle onAccept(default) or onComplete.
-  useOnComplete?: boolean;
-}
-
-/**
- * Component that mask the input with the given mask pattern.
- * @param props {TextMaskCustomProps}
- * @param ref {Ref<HTMLInputElement>}
- * @constructor
- */
-function TextMaskCustomComponent(
-  props: TextMaskCustomProps,
-  ref: Ref<HTMLInputElement>,
-): React.JSX.Element {
-  const { onChange, useOnComplete, ...other } = props;
-  return (
-    <IMaskInput
-      {...other}
-      inputRef={ref}
-      onAccept={(value, _, event) => {
-        if (useOnComplete) return;
-        onChange({ target: { name: props.name, value } }, event);
-      }}
-      onComplete={(value, _, event) => {
-        if (!useOnComplete) return;
-        onChange({ target: { name: props.name, value } }, event);
-      }}
-      overwrite
-    />
-  );
-}
-
-export const TextMaskCustom = forwardRef<HTMLInputElement, TextMaskCustomProps>(
-  TextMaskCustomComponent,
-);

package/src/components/form/index.ts

@@ -1,5 +0,0 @@
-export * from './DateInput';
-export * from './SSNInput';
-export * from './SelectInput';
-export * from './PhoneInput';
-export * from './OTPInput';

package/src/components/index.ts

@@ -1,13 +0,0 @@
-export * from './Button';
-export * from './Typography';
-export * from './CredentialRequestsEditor';
-export * from './terms/AcceptTermsNotice';
-export * from './When';
-export * from './Alert';
-export * from './Image';
-export * from './form/';
-export * from './verified';
-export * from './QRCodeDisplay';
-export * from './Snackbar';
-export * from './Banners';
-export * from './Backdrop';

package/src/components/terms/AcceptTermsNotice.tsx

@@ -1,27 +0,0 @@
-import { Box, type Theme, Typography, useTheme } from '@mui/material';
-
-import LegalLink from './LegalLink';
-interface AcceptTermsNoticeProps {
-  legalLinkUrl?: string;
-}
-export const AcceptTermsNotice = ({
-  legalLinkUrl = 'https://www.verified.inc/legal#terms-of-use',
-}: AcceptTermsNoticeProps): React.JSX.Element => {
-  const theme: Theme = useTheme();
-  return (
-    <Box display='inline-block'>
-      <Typography
-        align='center'
-        sx={{
-          fontSize: '.75rem',
-          fontWeight: 400,
-          color: theme.palette.neutral.main,
-          lineHeight: 1.25,
-        }}
-      >
-        By continuing, you agree to Verified’s{' '}
-        <LegalLink href={legalLinkUrl}>Terms of Use</LegalLink>.
-      </Typography>
-    </Box>
-  );
-};