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

package/README.md

@@ -29,3 +29,44 @@ This project utilizes alias only for the storybook implementation, the modules t
 ## Adding dependencies
 
 Ensure that new dependencies are added to both devDependencies and peerDependencies if required in the client's project.
+
+## Installing in Your Client Session
+
+When installing the `@verifiedinc/shared-ui-elements` package, you have access to different export paths optimized for specific use cases.
+
+### Default ESM Export (Recommended)
+
+The package’s default export path `'./'` uses ECMAScript modules (ESM), providing an optimized build for modern JavaScript environments. This approach is recommended for most applications:
+
+```bash
+npm install @verifiedinc/shared-ui-elements
+```
+
+```typescript
+import { SomeComponent } from '@verifiedinc/shared-ui-elements';
+```
+
+This setup is efficient and works seamlessly with frameworks like Next.js, Vite, and other ESM-compatible environments.
+
+### Using with Remix
+
+Some frontend frameworks, such as Remix, have partial compatibility with ESM-only packages. To address this, the package also exposes the source files directly. This approach ensures that the Remix transpiler can properly bundle the package.
+
+To utilize the source files in Remix, reference them directly in your import statements and adjust your `remix.config.js` as follows:
+
+```typescript
+import { SomeComponent } from '@verifiedinc/shared-ui-elements/src';
+```
+
+```js
+// remix.config.js
+export default {
+  serverDependenciesToBundle: [/@verifiedinc\/shared-ui-elements/],
+};
+```
+
+### Why Two Exports?
+
+The default `'./'` export is optimized for environments that support ESM, providing better performance and tree-shaking. However, by also exposing the raw source files, we ensure compatibility with tools like Remix, where ESM-only packages might not work seamlessly without additional configuration.
+
+Choose the export method that best suits your project setup.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "0.11.6",
+  "version": "0.12.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "keywords": [],
@@ -12,33 +12,16 @@
   "main": "/dist/shared-ui-elements.mjs",
   "types": "/dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/shared-ui-elements.mjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/shared-ui-elements.mjs"
     },
-    "./components": {
-      "import": "./dist/shared-ui-elements.mjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./hooks": {
-      "import": "./dist/shared-ui-elements.mjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./utils": {
-      "import": "./dist/shared-ui-elements.mjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./validations": {
-      "import": "./dist/shared-ui-elements.mjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./styles": {
-      "import": "./dist/shared-ui-elements.mjs",
-      "types": "./dist/index.d.ts"
-    }
+    "./src": "./src/index.ts"
   },
   "scripts": {
     "vitest": "vitest",
@@ -116,7 +99,6 @@
     "@mona-health/react-input-mask": "^3.0.3",
     "@mui/icons-material": "^5",
     "@mui/material": "^5",
-    "jsdom": "^24.1.0",
     "libphonenumber-js": "^1.11.11",
     "qrcode": "^1.5.4",
     "react": "^18",

package/src/components/Alert/Alert.tsx

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

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

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

package/src/components/Button/index.tsx

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

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

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

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

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