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

package/src/components/Alert/Alert.tsx

@@ -1,8 +0,0 @@
-import MUIAlert from '@mui/material/Alert';
-import type { AlertProps as MUIAlertProps } from '@mui/material/Alert';
-
-export type AlertProps = MUIAlertProps;
-
-export function Alert(props: AlertProps): React.JSX.Element {
-  return <MUIAlert {...props} />;
-}

package/src/components/Alert/FullWidthAlert.tsx

@@ -1,27 +0,0 @@
-import { Alert, type AlertProps } from '@mui/material';
-
-interface FullWidthAlertProps extends AlertProps {}
-
-export function FullWidthAlert({
-  children,
-  sx,
-  ...props
-}: FullWidthAlertProps): React.JSX.Element {
-  return (
-    <>
-      <Alert
-        severity='info'
-        sx={{
-          maxWidth: '100%',
-          width: '100%',
-          textAlign: 'left',
-          alignItems: 'center',
-          ...sx,
-        }}
-        {...props}
-      >
-        {children}
-      </Alert>
-    </>
-  );
-}

package/src/components/Alert/index.ts

@@ -1,2 +0,0 @@
-export * from './Alert';
-export * from './FullWidthAlert';

package/src/components/Backdrop/index.tsx

@@ -1,34 +0,0 @@
-import {
-  CircularProgress,
-  Backdrop as MUIBackdrop,
-  Stack,
-  type SxProps,
-} from '@mui/material';
-
-interface BackdropProps {
-  open: boolean;
-  sx?: SxProps;
-  children?: React.ReactNode;
-}
-
-export const Backdrop = ({
-  open,
-  sx,
-  children,
-}: BackdropProps): React.JSX.Element => {
-  return (
-    <MUIBackdrop
-      sx={{
-        color: (theme) => theme.palette.primary.main,
-        zIndex: (theme) => theme.zIndex.drawer + 1,
-        ...sx,
-      }}
-      open={open}
-    >
-      <Stack alignItems='center' spacing={3}>
-        <CircularProgress color='inherit' />
-        {children}
-      </Stack>
-    </MUIBackdrop>
-  );
-};

package/src/components/Banners/Banner.tsx

@@ -1,42 +0,0 @@
-import {
-  AlertTitle,
-  Box,
-  type SxProps,
-  useTheme,
-  type AlertColor,
-} from '@mui/material';
-
-import { type ReactNode } from 'react';
-import { FullWidthAlert } from '../Alert/FullWidthAlert';
-import { Typography } from '../Typography';
-
-interface BannerProps {
-  title: string;
-  severity: AlertColor;
-  children: ReactNode;
-  sx?: SxProps;
-}
-
-export function Banner({
-  title,
-  severity,
-  children,
-  sx,
-}: BannerProps): React.JSX.Element {
-  const theme = useTheme();
-  return (
-    <Box sx={{ mt: 3, ...sx }}>
-      <FullWidthAlert severity={severity} sx={{ alignItems: 'start' }}>
-        <AlertTitle>
-          <Typography
-            sx={{ color: theme.palette.info.contrastText }}
-            fontWeight='bold'
-          >
-            {title}
-          </Typography>
-        </AlertTitle>
-        {children}
-      </FullWidthAlert>
-    </Box>
-  );
-}

package/src/components/Banners/ExactBirthdayBanner.tsx

@@ -1,18 +0,0 @@
-import { type SxProps } from '@mui/material';
-import { Banner } from './Banner';
-
-/**
- * "Enter your exact Birthday" Banner
- */
-export function ExactBirthdayBanner({
-  sx,
-}: {
-  sx?: SxProps;
-}): React.JSX.Element {
-  return (
-    <Banner title='Enter your exact Birthday' severity='info' sx={sx}>
-      We need this to verify your identity with your phone carrier and pre-fill
-      your signup info.
-    </Banner>
-  );
-}

package/src/components/Banners/ResendPhoneBanner.tsx

@@ -1,55 +0,0 @@
-import { type SxProps, useTheme } from '@mui/material';
-import { FullWidthAlert } from '../Alert/FullWidthAlert';
-import { Button } from '../Button';
-import { parseToPhoneNational } from '../../utils';
-
-interface ResendPhoneBannerProps {
-  phone: string;
-  onClick: () => void;
-  disabled?: boolean;
-  sx?: SxProps;
-}
-
-/**
- * Banner to verify and resend the phone verification code.
- * @param phone
- * @param onClick
- * @constructor
- */
-export function ResendPhoneBanner({
-  phone,
-  onClick,
-  disabled = false,
-  sx,
-}: ResendPhoneBannerProps): React.JSX.Element {
-  const theme = useTheme();
-  return (
-    <>
-      <FullWidthAlert
-        action={
-          <Button
-            onClick={onClick}
-            disabled={disabled}
-            sx={{
-              color: theme.palette.info.contrastText,
-              fontWeight: 800,
-              fontSize: '13px',
-              padding: '0',
-              '&:hover': {
-                backgroundColor: 'initial',
-              },
-              ...sx,
-            }}
-            size='small'
-            variant='text'
-            color='info'
-          >
-            Resend
-          </Button>
-        }
-      >
-        Use the text we sent to <strong>{parseToPhoneNational(phone)}</strong>{' '}
-      </FullWidthAlert>
-    </>
-  );
-}

package/src/components/Banners/TestPhoneNumbersBanner.tsx

@@ -1,25 +0,0 @@
-import { Box, type SxProps } from '@mui/material';
-import { Banner } from './Banner';
-
-/**
- * Banner to inform about the test phone numbers
- */
-export function TestPhoneNumbersBanner({
-  sx,
-}: {
-  sx?: SxProps;
-}): React.JSX.Element {
-  return (
-    <Banner title='Test Phone Numbers' severity='info' sx={sx}>
-      <Box
-        component='ul'
-        sx={{
-          listStyle: 'inside',
-        }}
-      >
-        <li>Phone Only Input: +10123456789</li>
-        <li>Phone and Birth Date Inputs: +10019999999</li>
-      </Box>
-    </Banner>
-  );
-}

package/src/components/Banners/index.tsx

@@ -1,4 +0,0 @@
-export * from './Banner';
-export * from './ResendPhoneBanner';
-export * from './ExactBirthdayBanner';
-export * from './TestPhoneNumbersBanner';

package/src/components/Button/index.tsx

@@ -1,8 +0,0 @@
-import MUIButton from '@mui/material/Button';
-import type { ButtonProps as MUIButtonProps } from '@mui/material/Button';
-
-export type ButtonProps = MUIButtonProps;
-
-export function Button(props: ButtonProps): React.JSX.Element {
-  return <MUIButton {...props} />;
-}

package/src/components/CredentialRequestsEditor/CredentialRequestsEditor.context.tsx

@@ -1,98 +0,0 @@
-import { createContext, type ReactNode, useContext, useEffect } from 'react';
-import { FormProvider, useForm, type WatchObserver } from 'react-hook-form';
-import debounce from 'lodash/debounce';
-
-import { omitProperties } from '../../utils/omitProperty';
-
-import {
-  type CredentialRequests,
-  type CredentialRequestsEditorForm,
-  type CredentialRequestsWithNew,
-} from './types/form';
-
-export interface CredentialRequestsEditorFeatures {
-  allowUserInput?: {
-    disabled?: boolean;
-  };
-  description?: {
-    disabled?: boolean;
-  };
-  mandatory?: {
-    disabled?: boolean;
-  };
-  multi?: {
-    disabled?: boolean;
-  };
-}
-
-export interface CredentialRequestsEditorProps {
-  addButtonText?: string;
-  credentialRequests: CredentialRequestsWithNew[];
-  schemas: Record<string, any>;
-  children: ReactNode;
-  onChange: (credentialRequests: CredentialRequests[]) => void;
-  features?: CredentialRequestsEditorFeatures;
-}
-
-export interface CredentialRequestsEditorContext {
-  addButtonText?: string;
-  schemas: Record<string, any>;
-  features?: CredentialRequestsEditorFeatures;
-}
-
-const Context = createContext<CredentialRequestsEditorContext | null>(null);
-
-export function useCredentialRequestsEditor(): CredentialRequestsEditorContext {
-  const context = useContext(Context);
-  if (!context) {
-    throw new Error(
-      'useCredentialRequestsEditor must be used within a CredentialRequestsEditorProvider',
-    );
-  }
-  return context;
-}
-
-export function CredentialRequestsEditorProvider(
-  props: CredentialRequestsEditorProps,
-): React.JSX.Element {
-  const form = useForm<CredentialRequestsEditorForm>({
-    defaultValues: { credentialRequests: props.credentialRequests },
-  });
-
-  // Listen to credentialRequests changes and call onChange event
-  useEffect(() => {
-    // Debouncing the watch observer to prevent multiple calls in a short period of time since it may dispatch child object change plus the property change
-    const debouncedWatchObserver = debounce<
-      WatchObserver<CredentialRequestsEditorForm>
-    >((data, { name, type }) => {
-      if (data.credentialRequests) {
-        const credentialRequestsData = data.credentialRequests.filter(
-          (credentialRequest) => !!credentialRequest?.type,
-        );
-
-        props.onChange(
-          omitProperties(credentialRequestsData, [
-            'isNew',
-            'id',
-          ]) as CredentialRequests[],
-        );
-      }
-    }, 100);
-    const subscription = form.watch(debouncedWatchObserver);
-    return subscription.unsubscribe;
-  }, [form.watch]);
-
-  return (
-    <FormProvider {...form}>
-      <Context.Provider
-        value={{
-          addButtonText: props.addButtonText,
-          schemas: props.schemas,
-          features: props.features,
-        }}
-      >
-        {props.children}
-      </Context.Provider>
-    </FormProvider>
-  );
-}

package/src/components/CredentialRequestsEditor/components/CredentialRequestsField.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { Stack } from '@mui/material';
-import { Add } from '@mui/icons-material';
-import {
-  useFieldArray,
-  type UseFieldArrayReturn,
-  useFormContext,
-} from 'react-hook-form';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-
-import { Button } from '../../Button';
-
-import { buildDataFieldValue } from '../utils/buildDataFieldValue';
-import { CredentialRequestFieldProvider } from '../contexts/CredentialRequestFieldContext';
-import { DataFieldAccordion } from './DataFieldAccordion';
-
-import { useCredentialRequestsEditor } from '../CredentialRequestsEditor.context';
-import {
-  type CredentialRequestsEditorForm,
-  type CredentialRequestsWithNew,
-} from '../types/form';
-
-function CredentialRequestField({
-  path = 'credentialRequests',
-  parentFieldArray,
-  parentIndex = 0,
-  level = 0,
-}: Readonly<{
-  path?: string;
-  parentFieldArray?: UseFieldArrayReturn<CredentialRequestsEditorForm>;
-  parentIndex?: number;
-  level?: number;
-}>): React.JSX.Element {
-  const customConfig = useCredentialRequestsEditor();
-  const form = useFormContext<CredentialRequestsEditorForm>();
-  const fieldArray = useFieldArray<CredentialRequestsEditorForm>({
-    control: form.control,
-    name: path as any,
-  });
-
-  return (
-    <>
-      {fieldArray.fields.map((field, index) => {
-        const _path = `${path}.${index}`;
-        return (
-          <CredentialRequestFieldProvider
-            key={_path + field.type}
-            path={_path}
-            field={field}
-            fieldArray={fieldArray}
-            index={index}
-            level={level}
-            onAllFieldsDelete={() => {
-              (parentFieldArray ?? fieldArray)?.remove(parentIndex);
-            }}
-          >
-            <DataFieldAccordion />
-            {Array.isArray(field.children) && (
-              <CredentialRequestField
-                key={`${_path}.children`}
-                path={`${_path}.children`}
-                parentFieldArray={fieldArray}
-                parentIndex={index}
-                level={level + 1}
-              />
-            )}
-          </CredentialRequestFieldProvider>
-        );
-      })}
-      {path === 'credentialRequests' && (
-        <Button
-          type='button'
-          onClick={() => {
-            if (!customConfig) return;
-            const newValue: CredentialRequestsWithNew = {
-              ...buildDataFieldValue('', customConfig.schemas),
-              isNew: true,
-            };
-            fieldArray.append(newValue);
-          }}
-          size='large'
-          variant='outlined'
-          startIcon={<Add />}
-          fullWidth
-          sx={{ width: '100%' }}
-        >
-          {customConfig.addButtonText ?? 'Add Credential Request'}
-        </Button>
-      )}
-    </>
-  );
-}
-
-export function CredentialRequestsField(): React.JSX.Element {
-  return (
-    <DndProvider backend={HTML5Backend}>
-      <Stack spacing={2}>
-        <CredentialRequestField />
-      </Stack>
-    </DndProvider>
-  );
-}