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

package/src/components/CredentialRequestsEditor/components/DataFieldAccordion.tsx

@@ -1,337 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  IconButton,
-  Paper,
-  Stack,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import {
-  CheckCircle,
-  ChevronLeft,
-  Close,
-  Delete,
-  Menu,
-} from '@mui/icons-material';
-import { useDrag, useDrop } from 'react-dnd';
-import { useController, useFormContext } from 'react-hook-form';
-
-import { RequiredLabel } from '../../RequiredLabel';
-
-import { prettyField } from '../utils/prettyField';
-import {
-  type CredentialRequestsEditorForm,
-  type CredentialRequestsWithNew,
-} from '../types/form';
-import { MandatoryEnum } from '../types/mandatoryEnum';
-import { useCredentialRequestField } from '../contexts/CredentialRequestFieldContext';
-import { DataFieldOptionType } from './DataFieldOptionType';
-import { DataFieldDescription } from './DataFieldDescription';
-import { DataFieldMandatory } from './DataFieldMandatory';
-import { DataFieldUserInput } from './DataFieldUserInput';
-import { DataFieldDeleteModal } from './DataFieldDeleteModal';
-import { DataFieldMulti } from './DataFieldMulti';
-
-interface DataFieldAccordionProps {
-  defaultExpanded?: boolean;
-}
-
-export function DataFieldAccordion(
-  props: DataFieldAccordionProps,
-): React.JSX.Element {
-  const { defaultExpanded } = props;
-  const credentialRequestField = useCredentialRequestField();
-  const formContext = useFormContext<CredentialRequestsEditorForm>();
-  const field = useController<CredentialRequestsEditorForm>({
-    name: `${credentialRequestField?.path as any}` as any,
-  });
-  const credentialRequest = field.field.value as CredentialRequestsWithNew;
-  const credentialRequests = formContext.watch('credentialRequests');
-  const isNew: boolean = (credentialRequestField?.field as any).isNew;
-  const [expanded, setOpen] = useState((defaultExpanded ?? isNew) || false);
-  const [modalOpen, setModalOpen] = useState(false);
-
-  const accordionRef = useRef<HTMLDivElement | null>(null);
-
-  const fieldType = String(credentialRequestField?.field.type);
-  const type = prettyField(fieldType || 'Choose a type...');
-
-  const theme = useTheme();
-  const chevronClassName = 'chevron';
-
-  const canDrop = useCallback(
-    (item: typeof credentialRequestField) => {
-      const source = item;
-      const target = credentialRequestField;
-
-      if (!source || !target) return false;
-
-      const getParentPath = (path: string): string =>
-        path.split('.').slice(0, -2).join('.');
-
-      const sourcePath = getParentPath(source?.path ?? '');
-      const targetPath = getParentPath(target?.path ?? '');
-      const isSameGroup = sourcePath === targetPath;
-
-      const fromLevel = source.level;
-      const fromIndex = source.index;
-      const toLevel = target.level;
-      const toIndex = target.index;
-
-      // Allow to drop only on the same level and different index
-      if (fromLevel !== toLevel || fromIndex === toIndex || !isSameGroup) {
-        return false;
-      }
-
-      return true;
-    },
-    [credentialRequestField],
-  );
-
-  const [{ opacity }, drag, preview] = useDrag(
-    () => ({
-      type: 'data-field-drag',
-      item: () => credentialRequestField,
-      collect: (monitor) => ({
-        opacity: monitor.isDragging() ? 0 : 1,
-      }),
-    }),
-    [credentialRequestField, credentialRequests],
-  );
-
-  const [{ opacity: dropOpacity }, drop] = useDrop(
-    () => ({
-      accept: 'data-field-drag',
-      canDrop(item) {
-        return canDrop(item as typeof credentialRequestField);
-      },
-      drop(item) {
-        const source = item as typeof credentialRequestField;
-        const target = credentialRequestField;
-
-        if (!source || !target) return;
-        if (!canDrop(source)) return;
-
-        const fromIndex = source.index;
-        const toIndex = target.index;
-
-        credentialRequestField.fieldArray.move(fromIndex, toIndex);
-      },
-      collect: (monitor) => {
-        if (monitor.isOver()) {
-          return {
-            opacity: monitor.canDrop() ? 0.4 : 1,
-          };
-        }
-        return {
-          opacity: 1,
-        };
-      },
-    }),
-    [credentialRequestField, credentialRequests],
-  );
-
-  const handleRemove = (): void => {
-    if (!credentialRequestField) return;
-    setModalOpen(false);
-
-    // Delete parent when the last field was removed from the stack of form fields.
-    // The validation should be against less or equal than 1 because is against a previous state check.
-    if (credentialRequestField.fieldArray.fields.length <= 1) {
-      credentialRequestField.onAllFieldsDelete();
-      return;
-    }
-
-    credentialRequestField.fieldArray.remove(credentialRequestField.index);
-  };
-
-  const renderTitle = (): React.JSX.Element => {
-    const typographyStyle = {
-      fontStyle: fieldType ? 'normal' : 'italic',
-      fontSize: '16px',
-      fontWeight: '800',
-      textAlign: 'left !important',
-      alignSelf: 'flex-start',
-    };
-
-    return (
-      <Typography variant='body1' sx={typographyStyle}>
-        {credentialRequest.mandatory !== MandatoryEnum.NO ? (
-          <RequiredLabel>{type}</RequiredLabel>
-        ) : (
-          type
-        )}
-      </Typography>
-    );
-  };
-
-  const renderUserInput = (): React.JSX.Element => {
-    const allowUserInput = credentialRequest.allowUserInput;
-
-    return (
-      <Stack direction='row' alignItems='center' spacing={0.5} pl={5.25}>
-        {allowUserInput ? (
-          <CheckCircle
-            sx={{ fontSize: '12px', color: theme.palette.text.disabled }}
-          />
-        ) : (
-          <Close
-            sx={{ fontSize: '12px', color: theme.palette.text.disabled }}
-          />
-        )}
-        <Typography
-          variant='body1'
-          color='text.disabled'
-          sx={{
-            fontSize: '12px',
-            fontWeight: '400',
-            alignSelf: 'flex-start',
-            textAlign: 'left!important',
-          }}
-        >
-          Allow User Input
-        </Typography>
-      </Stack>
-    );
-  };
-
-  useEffect(() => {
-    if (!isNew) return;
-    accordionRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [isNew]);
-
-  return (
-    <Stack
-      ref={drop}
-      sx={{ position: 'relative', width: '100%', opacity: dropOpacity }}
-    >
-      <Paper
-        ref={(element) => preview(element)}
-        sx={{
-          p: '0!important',
-          width: `calc(100% - ${
-            (credentialRequestField?.level ?? 0) * 30
-          }px)!important`,
-          alignSelf: 'flex-end',
-          opacity,
-        }}
-      >
-        <Box>
-          <Accordion
-            defaultExpanded={isNew}
-            expanded={expanded}
-            sx={{
-              boxShadow: 'none',
-              '&::before': {
-                display: 'none',
-              },
-              my: '0px !important',
-              mt: 0,
-              p: '8px !important',
-            }}
-            data-testid='custom-demo-dialog-data-field-accordion'
-          >
-            <AccordionSummary
-              onClick={() => {
-                setOpen((prev) => !prev);
-              }}
-              expandIcon={
-                <>
-                  <IconButton
-                    size='small'
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setModalOpen(true);
-                    }}
-                    data-testid='custom-demo-dialog-data-field-delete-button'
-                  >
-                    <Delete
-                      fontSize='small'
-                      sx={{
-                        transform: 'rotate(0deg)',
-                      }}
-                    />
-                  </IconButton>
-                  <Stack
-                    className={chevronClassName}
-                    sx={{ ml: 1, alignSelf: 'center' }}
-                  >
-                    <ChevronLeft
-                      fontSize='small'
-                      sx={{
-                        color: '#0dbc3d',
-                        transform: 'rotate(0deg)',
-                      }}
-                    />
-                  </Stack>
-                </>
-              }
-              sx={{
-                px: 0,
-                minHeight: 'auto!important',
-                '& .MuiAccordionSummary-content': {
-                  my: '0px !important',
-                },
-                '& .MuiAccordionSummary-expandIconWrapper': {
-                  alignSelf: 'flex-start',
-                  transform: 'rotate(0deg) !important',
-                  [`& .${chevronClassName}`]: {
-                    transition: 'transform .3s',
-                  },
-                  '&.Mui-expanded': {
-                    [`& .${chevronClassName}`]: {
-                      transform: 'rotate(-90deg)',
-                    },
-                  },
-                },
-              }}
-            >
-              <Stack sx={{ alignItems: 'flex-start', mr: 0.5 }}>
-                <Stack direction='column' alignItems='flex-start' spacing={0}>
-                  <Stack direction='row' alignItems='center' spacing={1}>
-                    <IconButton
-                      ref={drag}
-                      size='small'
-                      color='success'
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                      }}
-                      sx={{ cursor: 'grab' }}
-                    >
-                      <Menu />
-                    </IconButton>
-                    {renderTitle()}
-                  </Stack>
-                  {renderUserInput()}
-                </Stack>
-              </Stack>
-            </AccordionSummary>
-            <AccordionDetails sx={{ pt: 3 }}>
-              {expanded && (
-                <Stack spacing={2}>
-                  <DataFieldOptionType />
-                  <DataFieldDescription />
-                  <DataFieldMandatory />
-                  <DataFieldUserInput />
-                  <DataFieldMulti />
-                </Stack>
-              )}
-            </AccordionDetails>
-          </Accordion>
-        </Box>
-      </Paper>
-      <DataFieldDeleteModal
-        open={modalOpen}
-        onClose={() => {
-          setModalOpen(false);
-        }}
-        onConfirm={handleRemove}
-      />
-    </Stack>
-  );
-}

package/src/components/CredentialRequestsEditor/components/DataFieldDeleteModal.tsx

@@ -1,64 +0,0 @@
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  type SxProps,
-  Typography,
-} from '@mui/material';
-
-import { Button } from '../../Button';
-
-const buttonStyle: SxProps = {
-  minHeight: 20,
-  mt: 2,
-  py: 1,
-  px: 1.25,
-  fontWeight: '800',
-  fontSize: '13px',
-};
-
-interface DataFieldDeleteModalProps {
-  open: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-}
-
-export function DataFieldDeleteModal({
-  open,
-  onClose,
-  onConfirm,
-}: DataFieldDeleteModalProps): React.JSX.Element {
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle>Delete Data Field?</DialogTitle>
-      <DialogContent>
-        <Typography>
-          Are you sure you want to delete this data field?
-        </Typography>
-      </DialogContent>
-      <DialogActions sx={{ justifyContent: 'space-between' }}>
-        <Button
-          variant='text'
-          color='neutral'
-          size='small'
-          onClick={onClose}
-          sx={buttonStyle}
-          data-testid='custom-demo-dialog-data-field-delete-cancel-button'
-        >
-          Don't Delete
-        </Button>
-        <Button
-          variant='contained'
-          color='error'
-          size='small'
-          onClick={onConfirm}
-          sx={buttonStyle}
-          data-testid='custom-demo-dialog-data-field-delete-confirm-button'
-        >
-          Delete
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}

package/src/components/CredentialRequestsEditor/components/DataFieldDescription.tsx

@@ -1,68 +0,0 @@
-import { useRef, useState } from 'react';
-import { useController } from 'react-hook-form';
-import debounce from 'lodash/debounce';
-import { TextField } from '@mui/material';
-
-import { type CredentialRequestsEditorForm } from '../types/form';
-import { useCredentialRequestsEditor } from '../CredentialRequestsEditor.context';
-import { useCredentialRequestField } from '../contexts/CredentialRequestFieldContext';
-import { DataFieldSection } from './DataFieldSection';
-
-export function DataFieldDescription(): React.JSX.Element {
-  const { features } = useCredentialRequestsEditor();
-  const isFeatureDisabled = features?.description?.disabled === true;
-
-  const credentialRequestField = useCredentialRequestField();
-  const description = useController<CredentialRequestsEditorForm>({
-    name: `${credentialRequestField?.path as any}.description` as any,
-  });
-  const [value, setValue] = useState(description.field.value ?? '');
-
-  const debounceChange = useRef(
-    debounce((value: string) => {
-      // Update form state
-      description.field.onChange({ target: { value } });
-    }, 500),
-  ).current;
-
-  const handleChange = (e: any): void => {
-    if (isFeatureDisabled) return;
-    setValue(e.target.value);
-    debounceChange(e.target.value);
-  };
-
-  return (
-    <DataFieldSection
-      title='Field Description'
-      description='What text appears under the field'
-      tip={
-        <>
-          <pre>POST /1-click</pre>
-          <pre>{`{\n  description?: string\n}`}</pre>
-        </>
-      }
-      sx={{
-        opacity: isFeatureDisabled ? 0.5 : 1,
-      }}
-    >
-      <TextField
-        {...description.field}
-        value={value}
-        onChange={handleChange}
-        error={!!description.fieldState.error}
-        helperText={
-          description.fieldState.error?.message ??
-          'Optional — defaults to empty'
-        }
-        label='Description'
-        color='success'
-        size='small'
-        className='original'
-        inputProps={{
-          'data-testid': 'custom-demo-dialog-data-field-description-input',
-        }}
-        disabled={isFeatureDisabled}
-      />
-    </DataFieldSection>
-  );
-}

package/src/components/CredentialRequestsEditor/components/DataFieldMandatory.tsx

@@ -1,84 +0,0 @@
-import { useController } from 'react-hook-form';
-import { RadioGroup } from '@mui/material';
-
-import { type CredentialRequestsEditorForm } from '../types/form';
-import { MandatoryEnum } from '../types/mandatoryEnum';
-import { useCredentialRequestsEditor } from '../CredentialRequestsEditor.context';
-import { useCredentialRequestField } from '../contexts/CredentialRequestFieldContext';
-import { RadioOption } from './RadioOption';
-import { DataFieldSection } from './DataFieldSection';
-
-export function DataFieldMandatory(): React.JSX.Element {
-  const { features } = useCredentialRequestsEditor();
-  const isFeatureDisabled = features?.mandatory?.disabled === true;
-
-  const credentialRequestField = useCredentialRequestField();
-  const mandatory = useController<CredentialRequestsEditorForm>({
-    name: `${credentialRequestField?.path as any}.mandatory` as any,
-  });
-
-  return (
-    <DataFieldSection
-      title='Optional or Required'
-      description="Whether it's optional or required for the user to share this data"
-      tip={
-        <>
-          <pre>POST /1-click</pre>
-          <pre>{`{\n  mandatory?: enum\n}`}</pre>
-        </>
-      }
-      sx={{
-        opacity: isFeatureDisabled ? 0.5 : 1,
-      }}
-    >
-      <RadioGroup
-        value={mandatory.field.value}
-        onChange={(e) => {
-          if (isFeatureDisabled) return;
-          const value = e.target.value as MandatoryEnum;
-
-          // Update form state
-          mandatory.field.onChange({ target: { value } });
-        }}
-      >
-        <RadioOption
-          isDefault
-          value={MandatoryEnum.NO}
-          title='Optional'
-          description='Optional for the user to share'
-          tip={MandatoryEnum.NO}
-          inputProps={
-            {
-              'data-testid': 'custom-demo-dialog-mandatory-no-radio',
-            } as any
-          }
-          disabled={isFeatureDisabled}
-        />
-        <RadioOption
-          value={MandatoryEnum.IF_AVAILABLE}
-          title='Required if available'
-          description='Required to share, if the user has it'
-          tip={MandatoryEnum.IF_AVAILABLE}
-          inputProps={
-            {
-              'data-testid': 'custom-demo-dialog-mandatory-if_available-radio',
-            } as any
-          }
-          disabled={isFeatureDisabled}
-        />
-        <RadioOption
-          value={MandatoryEnum.YES}
-          title='Required'
-          description="Required — flow fails if user doesn't have it"
-          tip={MandatoryEnum.YES}
-          inputProps={
-            {
-              'data-testid': 'custom-demo-dialog-mandatory-yes-radio',
-            } as any
-          }
-          disabled={isFeatureDisabled}
-        />
-      </RadioGroup>
-    </DataFieldSection>
-  );
-}

package/src/components/CredentialRequestsEditor/components/DataFieldMulti.tsx

@@ -1,74 +0,0 @@
-import { RadioGroup } from '@mui/material';
-import { useController } from 'react-hook-form';
-
-import { type CredentialRequestsEditorForm } from '../types/form';
-import { useCredentialRequestsEditor } from '../CredentialRequestsEditor.context';
-import { useCredentialRequestField } from '../contexts/CredentialRequestFieldContext';
-import { RadioOption } from './RadioOption';
-import { DataFieldSection } from './DataFieldSection';
-
-export function DataFieldMulti(): React.JSX.Element | null {
-  const { features } = useCredentialRequestsEditor();
-  const isFeatureDisabled = features?.multi?.disabled === true;
-
-  const credentialRequestField = useCredentialRequestField();
-  const multi = useController<CredentialRequestsEditorForm>({
-    name: `${credentialRequestField?.path as any}.multi` as any,
-  });
-
-  if ((credentialRequestField?.level ?? 0) > 0) return null;
-
-  return (
-    <DataFieldSection
-      title='Multiple Values'
-      description='Whether multiple data values should be included if available'
-      tip={
-        <>
-          <pre>POST /1-click</pre>
-          <pre>{`{\n  multi?: boolean\n}`}</pre>
-        </>
-      }
-      sx={{
-        opacity: isFeatureDisabled ? 0.5 : 1,
-      }}
-    >
-      <RadioGroup
-        value={multi.field.value ?? false}
-        onChange={(_, value) => {
-          if (isFeatureDisabled) return;
-
-          // Update form state
-          multi.field.onChange({
-            target: { value: value === 'true' },
-          });
-        }}
-      >
-        <RadioOption
-          value={true}
-          title='Yes'
-          description='Multiple values will be included if available'
-          tip='true'
-          inputProps={
-            {
-              'data-testid': 'custom-demo-dialog-multi-yes-radio',
-            } as any
-          }
-          disabled={isFeatureDisabled}
-        />
-        <RadioOption
-          isDefault
-          value={false}
-          title='No'
-          description="Multiple values won't be included"
-          tip='false'
-          inputProps={
-            {
-              'data-testid': 'custom-demo-dialog-multi-no-radio',
-            } as any
-          }
-          disabled={isFeatureDisabled}
-        />
-      </RadioGroup>
-    </DataFieldSection>
-  );
-}