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

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

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

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

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

@@ -0,0 +1,74 @@
+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>
+  );
+}

package/src/components/CredentialRequestsEditor/components/DataFieldOptionType.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import { useController } from 'react-hook-form';
+import { Autocomplete, TextField } from '@mui/material';
+
+import { prettyField } from '../utils/prettyField';
+
+import {
+  type CredentialRequests,
+  type CredentialRequestsEditorForm,
+} from '../types/form';
+import { buildDataFieldValue } from '../utils/buildDataFieldValue';
+import { useCredentialRequestField } from '../contexts/CredentialRequestFieldContext';
+import { useCredentialRequestsEditor } from '../CredentialRequestsEditor.context';
+import { DataFieldSection } from './DataFieldSection';
+
+export function DataFieldOptionType(): React.JSX.Element {
+  const credentialRequestField = useCredentialRequestField();
+  const field = useController<CredentialRequestsEditorForm>({
+    name: `${credentialRequestField?.path as any}` as any,
+  });
+
+  const { schemas } = useCredentialRequestsEditor();
+  const schemaValues = useMemo(() => {
+    if (!schemas) return [];
+    return Object.values(schemas)
+      .map((schema) => ({
+        label: prettyField(schema.$id),
+        id: schema.$id as string,
+      }))
+      .filter((schema) => {
+        const blacklist = ['IdentityCredential'];
+        return !blacklist.includes(schema.id);
+      })
+      .sort((a, b) => (a.label < b.label ? -1 : 1));
+  }, [schemas]);
+  const selectedValue = useMemo(() => {
+    const type = (field.field?.value as CredentialRequests)?.type;
+    return schemaValues?.find((value) => value.id === type);
+  }, [field, schemaValues]);
+
+  return (
+    <DataFieldSection
+      key={JSON.stringify(selectedValue)}
+      title='Field Type'
+      description='What type of user data this field is for'
+      tip={
+        <>
+          <pre>POST /1-click</pre>
+          <pre>{`{\n  type: string\n}`}</pre>
+        </>
+      }
+    >
+      <Autocomplete
+        value={selectedValue}
+        onChange={(_, value) => {
+          if (!value) return;
+
+          credentialRequestField?.fieldArray.update(
+            credentialRequestField?.index,
+            buildDataFieldValue(value.id, schemas),
+          );
+        }}
+        options={schemaValues}
+        disablePortal
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label='Type'
+            color='success'
+            size='small'
+            className='original'
+            fullWidth
+            inputProps={{
+              ...params.inputProps,
+              'data-testid': 'custom-demo-dialog-data-field-type-input',
+            }}
+            placeholder='Choose a type...'
+          />
+        )}
+        disabled={(credentialRequestField?.level ?? 0) > 0 || schemas === null}
+      />
+    </DataFieldSection>
+  );
+}

package/src/components/CredentialRequestsEditor/components/DataFieldSection.tsx

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { Stack, SxProps, Typography } from '@mui/material';
+
+import { Tip } from '../../Tip';
+
+interface DataFieldSectionProps {
+  children: ReactNode;
+  title: string;
+  description?: string;
+  tip?: ReactNode;
+  sx?: SxProps;
+}
+
+export function DataFieldSection(
+  props: DataFieldSectionProps,
+): React.JSX.Element {
+  const { children, title, description, tip, sx } = props;
+
+  return (
+    <Stack sx={sx}>
+      <Stack direction='row' alignItems='center' spacing={0.5}>
+        <Typography
+          variant='body1'
+          sx={{ fontSize: '16px', fontWeight: '700' }}
+          data-testid='custom-demo-dialog-data-field-title'
+        >
+          {title}
+        </Typography>
+        <Tip>{tip}</Tip>
+      </Stack>
+      {description && (
+        <Typography
+          variant='body2'
+          color='text.secondary'
+          sx={{
+            textAlign: 'left !important',
+            fontSize: '12px',
+            fontWeight: '400',
+          }}
+          data-testid='custom-demo-dialog-data-field-description'
+        >
+          {description}
+        </Typography>
+      )}
+      <Stack sx={{ mt: 3 }}>{children}</Stack>
+    </Stack>
+  );
+}

package/src/components/CredentialRequestsEditor/components/DataFieldUserInput.tsx

@@ -0,0 +1,71 @@
+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 DataFieldUserInput(): React.JSX.Element {
+  const { features } = useCredentialRequestsEditor();
+  const isFeatureDisabled = features?.description?.disabled === true;
+
+  const credentialRequestField = useCredentialRequestField();
+  const allowUserInput = useController<CredentialRequestsEditorForm>({
+    name: `${credentialRequestField?.path as any}.allowUserInput` as any,
+  });
+
+  return (
+    <DataFieldSection
+      title='Allow User Input'
+      description='Whether the user is allowed to add or edit data for this field'
+      tip={
+        <>
+          <pre>POST /1-click</pre>
+          <pre>{`{\n  allowUserInput?: boolean\n}`}</pre>
+        </>
+      }
+      sx={{
+        opacity: isFeatureDisabled ? 0.5 : 1,
+      }}
+    >
+      <RadioGroup
+        value={allowUserInput.field.value}
+        onChange={(_, value) => {
+          if (isFeatureDisabled) return;
+          // Update form state
+          allowUserInput.field.onChange({
+            target: { value: value === 'true' },
+          });
+        }}
+      >
+        <RadioOption
+          isDefault
+          value={true}
+          title='Yes'
+          description='The user can add or edit data for the user to share'
+          tip='true'
+          inputProps={
+            {
+              'data-testid': 'custom-demo-dialog-user-input-yes-radio',
+            } as any
+          }
+          disabled={isFeatureDisabled}
+        />
+        <RadioOption
+          value={false}
+          title='No'
+          description="The user can't add or edit data"
+          tip='false'
+          inputProps={
+            {
+              'data-testid': 'custom-demo-dialog-user-input-no-radio',
+            } as any
+          }
+          disabled={isFeatureDisabled}
+        />
+      </RadioGroup>
+    </DataFieldSection>
+  );
+}

package/src/components/CredentialRequestsEditor/components/RadioOption.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from 'react';
+import {
+  Chip,
+  Radio,
+  type RadioProps,
+  Stack,
+  type SxProps,
+  Typography,
+  Box,
+} from '@mui/material';
+
+import { Tip } from '../../Tip';
+
+type RadioOptionProps = RadioProps & {
+  isDefault?: boolean;
+  title: string;
+  description?: string;
+  tip?: ReactNode;
+  sx?: SxProps;
+};
+export function RadioOption(props: RadioOptionProps): React.JSX.Element {
+  const { isDefault, title, description, tip, sx, ...radioProps } = props;
+  return (
+    <Stack
+      direction='row'
+      justifyContent='space-between'
+      alignItems='center'
+      sx={{ mb: 1, ...(sx as any) }}
+    >
+      <Stack sx={{ alignItems: 'flex-start' }}>
+        <Stack direction='row' spacing={1}>
+          <Radio
+            {...(radioProps as any)}
+            sx={{
+              mt: '1px',
+              width: 34,
+              height: 34,
+              ...sx,
+              '&.Mui-checked': {
+                color: '#0dbc3d',
+              },
+            }}
+          />
+          <Stack>
+            <Stack direction='row' alignItems='center' spacing={1}>
+              <Typography
+                variant='body1'
+                sx={{
+                  fontSize: '16px',
+                  fontWeight: '400',
+                  textAlign: 'left !important',
+                }}
+              >
+                {title}
+              </Typography>
+              <Tip>{tip}</Tip>
+            </Stack>
+            {description && (
+              <Typography
+                variant='body2'
+                color='text.disabled'
+                sx={{
+                  textAlign: 'left !important',
+                  alignSelf: 'flex-start',
+                  fontSize: '12px',
+                  fontWeight: '400',
+                  mt: 0.5,
+                }}
+              >
+                {description}
+              </Typography>
+            )}
+          </Stack>
+        </Stack>
+      </Stack>
+      <Box sx={{ mt: 1, alignSelf: 'flex-start' }}>
+        {isDefault && (
+          <Chip
+            size='small'
+            label='Default'
+            color='info'
+            variant='outlined'
+            sx={{ fontWeight: 700 }}
+          />
+        )}
+      </Box>
+    </Stack>
+  );
+}

package/src/components/CredentialRequestsEditor/contexts/CredentialRequestFieldContext.tsx

@@ -0,0 +1,36 @@
+import React, {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+} from 'react';
+import {
+  type FieldArrayWithId,
+  type UseFieldArrayReturn,
+} from 'react-hook-form';
+import type { CredentialRequestsEditorForm } from '../types/form';
+
+type CredentialRequestFieldContext = PropsWithChildren & {
+  path: string | undefined;
+  field: FieldArrayWithId<CredentialRequestsEditorForm, 'credentialRequests'>;
+  fieldArray: UseFieldArrayReturn<
+    CredentialRequestsEditorForm,
+    'credentialRequests'
+  >;
+  index: number;
+  level: number;
+  onAllFieldsDelete: () => void;
+};
+
+const Context = createContext<CredentialRequestFieldContext | null>(null);
+
+export const useCredentialRequestField =
+  (): CredentialRequestFieldContext | null => {
+    return useContext(Context);
+  };
+
+export function CredentialRequestFieldProvider({
+  children,
+  ...props
+}: CredentialRequestFieldContext): React.JSX.Element {
+  return <Context.Provider value={props}>{children}</Context.Provider>;
+}

package/src/components/CredentialRequestsEditor/index.tsx

@@ -0,0 +1,15 @@
+import {
+  type CredentialRequestsEditorProps,
+  CredentialRequestsEditorProvider,
+} from './CredentialRequestsEditor.context';
+import { CredentialRequestsField } from './components/CredentialRequestsField';
+
+export function CredentialRequestsEditor(
+  props: Omit<CredentialRequestsEditorProps, 'children'>,
+): React.JSX.Element {
+  return (
+    <CredentialRequestsEditorProvider {...props}>
+      <CredentialRequestsField />
+    </CredentialRequestsEditorProvider>
+  );
+}

package/src/components/CredentialRequestsEditor/types/compositeCredentialSchema.ts

@@ -0,0 +1 @@
+export type CompositeCredentialSchema = Record<string, any>;

package/src/components/CredentialRequestsEditor/types/credentialSchemasDto.ts

@@ -0,0 +1,3 @@
+export interface CredentialSchemaDto {
+  schemas: Record<string, any>;
+}

package/src/components/CredentialRequestsEditor/types/form.ts

@@ -0,0 +1,28 @@
+import { type MandatoryEnum } from './mandatoryEnum';
+
+export interface CredentialRequests {
+  type: string;
+  issuers?: string[];
+  required?: boolean;
+  mandatory?: MandatoryEnum;
+  description?: string;
+  allowUserInput?: boolean;
+  multi?: boolean;
+  children?: CredentialRequests[];
+}
+
+export interface CredentialRequestsWithNew {
+  type: string;
+  issuers?: string[];
+  required?: boolean;
+  mandatory?: MandatoryEnum;
+  description?: string;
+  allowUserInput?: boolean;
+  multi?: boolean;
+  children?: CredentialRequestsWithNew[];
+  isNew?: boolean;
+}
+
+export interface CredentialRequestsEditorForm {
+  credentialRequests: CredentialRequestsWithNew[];
+}

package/src/components/CredentialRequestsEditor/types/mandatoryEnum.ts

@@ -0,0 +1,5 @@
+export enum MandatoryEnum {
+  YES = 'yes',
+  NO = 'no',
+  IF_AVAILABLE = 'if_available',
+}