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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/CredentialRequestsEditor/utils/buildDataFieldValue.ts

@@ -1,65 +0,0 @@
-import _ from 'lodash';
-import { type CompositeCredentialSchema } from '../types/compositeCredentialSchema';
-import { CredentialRequests } from '../types/form';
-import { type CredentialSchemaDto } from '../types/credentialSchemasDto';
-import { MandatoryEnum } from '../types/mandatoryEnum';
-
-const isComposed = (schema: unknown): schema is CompositeCredentialSchema =>
-  Object.prototype.hasOwnProperty.call(schema || {}, 'anyOf') ||
-  Object.prototype.hasOwnProperty.call(schema || {}, 'allOf');
-
-function extractTypes(
-  record: any,
-  result: string[] = [],
-  parentKeys: string[] = [],
-): string[] {
-  _.forOwn(record, (value, key) => {
-    // Check if the current key is $ref or $id and handle accordingly
-    if (key === '$ref' && typeof value === 'string') {
-      result.push(value);
-    } else if (
-      key === '$id' &&
-      typeof value === 'string' &&
-      _.some(parentKeys, (k) => ['allOf', 'anyOf', 'oneOf'].includes(k))
-    ) {
-      result.push(value);
-    }
-
-    // If the value is an object or array, recurse into it
-    if (_.isObject(value)) {
-      extractTypes(value, result, [...parentKeys, key]);
-    }
-  });
-
-  return result;
-}
-
-export function buildDataFieldValue(
-  type: string,
-  schema: CredentialSchemaDto['schemas'],
-): CredentialRequests {
-  const selectedSchema = schema[type];
-  const isComposedSchema = isComposed(selectedSchema);
-
-  if (isComposedSchema) {
-    return {
-      type,
-      mandatory: MandatoryEnum.NO,
-      description: '',
-      allowUserInput: true,
-      multi: false,
-      children: extractTypes(selectedSchema).map((item) =>
-        buildDataFieldValue(item, schema),
-      ),
-    };
-  }
-
-  return {
-    type,
-    mandatory: MandatoryEnum.NO,
-    description: '',
-    allowUserInput: true,
-    // We want to default to true if is email credential.
-    multi: type === 'EmailCredential',
-  };
-}

package/src/components/CredentialRequestsEditor/utils/prettyField.ts

@@ -1,16 +0,0 @@
-// This pattern will split camel cased string out of the credential,
-// when a camel word contain a sequence of uppercase character it is kept to maintain consistency of that word.
-const schemaNamePattern = /([A-Z][a-z0-9]+)/gm;
-
-// Format the camel cased text to a human-readable.
-export const prettyField = (field: string): string =>
-  field
-    .split(schemaNamePattern)
-    .map((word) => {
-      if (word === 'Id') return 'ID';
-      if (word === 'Zip') return 'ZIP';
-      if (word === 'Ssn') return 'SSN';
-      return word;
-    })
-    .filter((e) => e !== 'Credential')
-    .join(' ');

package/src/components/Image.tsx

@@ -1,10 +0,0 @@
-import { Box, type BoxProps } from '@mui/material';
-
-export interface ImageProps extends BoxProps {
-  src: string;
-  alt: string;
-}
-
-export const Image = ({ src, alt, ...props }: ImageProps): JSX.Element => {
-  return <Box src={src} alt={alt} {...props} component='img' />;
-};

package/src/components/QRCodeDisplay/index.tsx

@@ -1,50 +0,0 @@
-import { Box } from '@mui/material';
-
-import { useQRCode } from '../../hooks';
-
-export interface QRCodeDisplayProps {
-  data: string;
-  asset?: string;
-  svgSize?: number;
-  logoSize?: number;
-  fill?: string;
-}
-
-export function QRCodeDisplay({
-  data,
-  asset,
-  svgSize = 300,
-  logoSize = 0,
-  fill = '#000000',
-}: QRCodeDisplayProps) {
-  const svg = useQRCode({
-    data: data,
-    size: svgSize,
-    imageSize: logoSize,
-    fill,
-  });
-
-  return (
-    <Box position='relative'>
-      <Box
-        display='flex'
-        sx={{ '& svg': { width: '100%', height: 'auto', aspectRatio: 1 } }}
-        dangerouslySetInnerHTML={{ __html: svg }}
-      />
-      <Box
-        component='img'
-        src={asset}
-        sx={{
-          position: 'absolute',
-          width: (logoSize / svgSize) * 100 + '%',
-          maxWidth: logoSize + 'px',
-          height: 'auto',
-          inset: 0,
-          aspectRatio: 1,
-          m: 'auto',
-          p: 0.5,
-        }}
-      />
-    </Box>
-  );
-}

package/src/components/RequiredLabel/index.tsx

@@ -1,15 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { Box } from '@mui/material';
-
-export function RequiredLabel(
-  props: Readonly<PropsWithChildren>,
-): React.JSX.Element {
-  return (
-    <span>
-      {props.children}
-      <Box component='span' color='error.main' sx={{ ml: 0.5 }}>
-        *
-      </Box>
-    </span>
-  );
-}