@verifiedinc-public/shared-ui-elements 1.3.3 → 2.1.0

package/src/components/Snackbar/index.tsx

@@ -1,156 +0,0 @@
-import { Close } from '@mui/icons-material';
-import {
-  Alert,
-  type AlertColor,
-  Box,
-  IconButton,
-  type SxProps,
-} from '@mui/material';
-import {
-  closeSnackbar,
-  type CustomContentProps,
-  enqueueSnackbar as _enqueueSnackbar,
-  SnackbarContent,
-  type SnackbarKey,
-  SnackbarProvider,
-} from 'notistack';
-import { forwardRef } from 'react';
-import { When } from '../When';
-
-declare module 'notistack' {
-  interface VariantOverrides {
-    default: false;
-    success: false;
-    info: false;
-    warning: false;
-    error: false;
-    customAlertComponent: {
-      onAction?: (id: SnackbarKey) => void;
-      icon?: JSX.Element;
-      severity?: AlertColor;
-    };
-  }
-}
-
-export { SnackbarProvider };
-export type { SnackbarKey };
-
-interface AlertAction {
-  onAction?: (id: SnackbarKey) => void;
-  icon?: JSX.Element;
-}
-
-interface CustomAlertComponentProps extends Partial<CustomContentProps> {
-  severity: AlertColor;
-  alertAction?: AlertAction;
-  showCloseIcon?: boolean;
-  sx?: SxProps;
-}
-
-/**
- * Hook to manage snackbar messages
- * It wraps the enqueueSnackbar and closeSnackbar functions from the notistack library
- * @returns
- *  - enqueueSnackbar: Function to enqueue a snackbar message
- *  - closeSnackbar: Function to close one or all snackbar messages
- *  @see https://notistack.com/api-reference
- */
-export function useSnackbar(): {
-  enqueueSnackbar: (
-    message: string,
-    severity?: AlertColor,
-    options?: Omit<CustomAlertComponentProps, 'severity'>,
-  ) => void;
-  closeSnackbar: (key?: SnackbarKey) => void;
-} {
-  const enqueueSnackbar = (
-    message: string,
-    severity: AlertColor = 'success',
-    options?: Omit<CustomAlertComponentProps, 'severity'>,
-  ): void => {
-    _enqueueSnackbar(message, {
-      severity,
-      variant: 'customAlertComponent',
-      persist: true,
-      ...options,
-    });
-  };
-
-  return { enqueueSnackbar, closeSnackbar };
-}
-
-/**
- * Custom Alert component to show snackbar messages
- * This is a wrapper around the notistack SnackbarContent component
- *
- * Use it in the SnackbarProvider Components prop:
- * @see https://notistack.com/features/customization#custom-component
- * @example
- * <SnackbarProvider
- *   Components={{ customAlertComponent: CustomAlertComponent }}
- * />
- */
-export const CustomAlertComponent = forwardRef<
-  HTMLDivElement,
-  CustomAlertComponentProps
->(
-  (
-    {
-      id,
-      message,
-      severity,
-      alertAction,
-      sx,
-      showCloseIcon = true,
-
-      // remove these props because they were triggering warnings. They are not used in this component anyway
-      persist,
-      hideIconVariant,
-      autoHideDuration,
-      anchorOrigin,
-      iconVariant,
-
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <SnackbarContent ref={ref} {...props}>
-        <Alert
-          severity={severity}
-          action={
-            <Box ml={1}>
-              <When value={alertAction}>
-                <IconButton
-                  size='small'
-                  onClick={() => id && alertAction?.onAction?.(id)}
-                  color='inherit'
-                >
-                  {alertAction?.icon}
-                </IconButton>
-              </When>
-              <When value={!alertAction && showCloseIcon}>
-                <IconButton
-                  size='small'
-                  onClick={() => {
-                    closeSnackbar(id);
-                  }}
-                  color='inherit'
-                >
-                  <Close />
-                </IconButton>
-              </When>
-            </Box>
-          }
-          sx={{
-            alignItems: 'center',
-            width: '320px',
-            ...sx,
-          }}
-        >
-          {message}
-        </Alert>
-      </SnackbarContent>
-    );
-  },
-);

package/src/components/TextField/index.tsx

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

@@ -1,18 +0,0 @@
-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

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

@@ -1,28 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,78 +0,0 @@
-import { forwardRef, useState, type ChangeEventHandler } from 'react';
-import { Box, TextField, type TextFieldProps } from '@mui/material';
-
-import { masks } from '../../utils/masks';
-
-import { InputMask } from './InputMask';
-
-interface DateInputProps extends Omit<TextFieldProps, 'onBlur' | 'onChange'> {
-  label?: string;
-  value?: string;
-  helperText?: string;
-  onChange?: (value: string) => void;
-  onBlur?: ChangeEventHandler<HTMLInputElement>;
-}
-
-function DateInputComponent(
-  {
-    label = 'Date',
-    value: controlledValue,
-    error,
-    helperText,
-    onChange,
-    onBlur,
-    disabled,
-    ...rest
-  }: Readonly<DateInputProps>,
-  ref: any,
-): React.JSX.Element {
-  const [internalValue, setInternalValue] = useState<string>('');
-
-  // Determine the value to display
-  const isControlled = controlledValue !== undefined;
-  const value = isControlled ? controlledValue : internalValue;
-
-  const handleChange = (e: any): void => {
-    const date = e.target.value;
-    if (!isControlled) {
-      setInternalValue(date); // Update internal state only if uncontrolled
-    }
-
-    if (onChange) {
-      onChange(date);
-    }
-  };
-
-  const textFieldStyle: TextFieldProps = {
-    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,
-    ...rest,
-  };
-
-  return (
-    <Box width='100%'>
-      <InputMask
-        mask={masks.DOB_MASK}
-        maskPlaceholder={null}
-        disabled={disabled}
-        value={value}
-        onBlur={onBlur}
-        onChange={handleChange}
-      >
-        <TextField {...textFieldStyle} inputRef={ref} />
-      </InputMask>
-    </Box>
-  );
-}
-
-export const DateInput = forwardRef(DateInputComponent);

package/src/components/form/DefaultInput.tsx

@@ -1,26 +0,0 @@
-import { forwardRef } from 'react';
-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}
-      variant={variant}
-      margin={margin}
-      fullWidth
-      {...props}
-    />
-  );
-};
-
-export default forwardRef(DefaultInput);

package/src/components/form/InputMask.tsx

@@ -1,41 +0,0 @@
-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} />;
-}