@sphereon/ui-components.ssi-react 0.4.1-unstable.56 → 0.4.1-unstable.59

package/dist/components/fields/JSONForms/CustomArrayControl/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RankedTester } from '@jsonforms/core';
+export declare const customArrayControlTester: RankedTester;
+declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export default _default;

package/dist/components/fields/JSONForms/CustomArrayControl/index.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JsonFormsDispatch, withJsonFormsControlProps } from '@jsonforms/react';
+import { and, isArrayObjectControl, optionIs, rankWith } from '@jsonforms/core';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+import IconButton from '../../../buttons/IconButton';
+import PrimaryButton from '../../../buttons/PrimaryButton';
+import { JsonFormsCustomControlKey } from '../../../../types';
+const CustomArrayControl = (props) => {
+    const { data = [], handleChange, path, schema, uischema, label } = props;
+    const elements = uischema.options?.detail?.elements || [];
+    const itemSchema = schema.items && !Array.isArray(schema.items) ? schema.items : {};
+    const handleAdd = async () => {
+        handleChange(path, [...data, {}]);
+    };
+    const handleRemove = async (index) => {
+        const newData = data.filter((_, i) => i !== index);
+        handleChange(path, newData);
+    };
+    const getItemElements = () => {
+        return data.map((item, index) => _jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: _jsx("div", { style: { display: 'flex', flexDirection: 'row', borderRadius: 8, overflow: 'hidden', width: '100%' }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 24, width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 24, padding: 24, border: '1px solid #C4C4C4', borderRadius: 8, flexGrow: 1, alignItems: 'center' }, children: getFieldElements(elements, `${path}.${index}`) }), _jsx(IconButton, { icon: ButtonIcon.DELETE, onClick: () => handleRemove(index) })] }), item?.type === 'object' &&
+                            _jsx("div", { style: { marginLeft: 24, display: 'flex', flexDirection: 'row' }, children: getChildFieldElements(elements, `${path}.${index}`) })] }) }) }, index));
+    };
+    const getFieldElements = (elements, path) => {
+        return elements
+            .filter(element => element?.options?.type !== JsonFormsCustomControlKey.ARRAY)
+            .map((element, i) => _jsx(JsonFormsDispatch, { uischema: element, schema: itemSchema, path: path }, i));
+    };
+    const getChildFieldElements = (elements, path) => {
+        return elements
+            .filter(element => element?.options?.type === JsonFormsCustomControlKey.ARRAY)
+            .map((element, i) => {
+            const childrenArraySchema = itemSchema.properties?.children;
+            const resolvedChildrenSchema = {
+                ...childrenArraySchema,
+                items: itemSchema
+            };
+            const childrenUiSchema = {
+                ...element,
+                type: "Control",
+                scope: "#",
+                options: {
+                    ...uischema.options,
+                    type: JsonFormsCustomControlKey.ARRAY,
+                    detail: {
+                        elements
+                    }
+                }
+            };
+            return (_jsx(JsonFormsDispatch, { uischema: childrenUiSchema, schema: resolvedChildrenSchema, path: path }, i));
+        });
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("div", { style: { color: 'black', fontSize: 16, fontWeight: '400' }, children: label }), _jsx(PrimaryButton, { caption: uischema.options?.addLabel || '+', onClick: handleAdd, style: {
+                            marginLeft: 'auto',
+                            height: 33,
+                            width: 120
+                        } })] }), getItemElements()] }));
+};
+export const customArrayControlTester = rankWith(5, and(isArrayObjectControl, optionIs('type', JsonFormsCustomControlKey.ARRAY)));
+export default withJsonFormsControlProps(CustomArrayControl);

package/dist/components/fields/JSONForms/PassportPhotoControl/index.js

@@ -8,7 +8,7 @@ import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder';
 import FileSelection from '../../FileSelection';
 import { base64UriToFile } from '../../../../utils';
 import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage, } from '../../../../styles';
-import { FileSelectionFieldType } from '../../../../types';
+import { FileSelectionFieldType, JsonFormsCustomControlKey } from '../../../../types';
 const PassportPhotoControl = (props) => {
     const { data, handleChange, path } = props;
     const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri });
@@ -30,5 +30,5 @@ const PassportPhotoControl = (props) => {
     };
     return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image ? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') }) : _jsx(PersonPlaceholder, {}) })] }), image && _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
 };
-export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto')));
+export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', JsonFormsCustomControlKey.PASSPORT_PHOTO)));
 export default withJsonFormsControlProps(PassportPhotoControl);

package/dist/index.d.ts

@@ -37,6 +37,7 @@ import ComboBox from './components/fields/ComboBox';
 import DragAndDropBox from './components/fields/DragAndDropBox';
 import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
 import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
+import CustomArrayControl, { customArrayControlTester } from './components/fields/JSONForms/CustomArrayControl';
 import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
@@ -67,4 +68,4 @@ export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };

package/dist/index.js

@@ -37,6 +37,7 @@ import ComboBox from './components/fields/ComboBox';
 import DragAndDropBox from './components/fields/DragAndDropBox';
 import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
 import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
+import CustomArrayControl, { customArrayControlTester } from './components/fields/JSONForms/CustomArrayControl';
 import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
@@ -66,4 +67,4 @@ export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };

package/dist/renders/jsonFormsRenders.js

@@ -1,6 +1,8 @@
 import { materialRenderers } from '@jsonforms/material-renderers';
 import PassportPhotoControl, { passportPhotoControlTester } from '../components/fields/JSONForms/PassportPhotoControl';
+import CustomArrayControl, { customArrayControlTester } from '../components/fields/JSONForms/CustomArrayControl';
 export const jsonFormsMaterialRenderers = [
     ...materialRenderers,
     { tester: passportPhotoControlTester, renderer: PassportPhotoControl },
+    { tester: customArrayControlTester, renderer: CustomArrayControl },
 ];

package/dist/styles/css/tailwind.css

@@ -204,6 +204,9 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .inline-block {
     display: inline-block;
   }

package/dist/types/index.d.ts

@@ -5,3 +5,4 @@ export * from './indicator';
 export * from './field';
 export * from './view';
 export * from './icon';
+export * from './jsonForms';

package/dist/types/index.js

@@ -5,3 +5,4 @@ export * from './indicator';
 export * from './field';
 export * from './view';
 export * from './icon';
+export * from './jsonForms';

package/dist/types/jsonForms/index.d.ts

@@ -0,0 +1,4 @@
+export declare enum JsonFormsCustomControlKey {
+    ARRAY = "array",
+    PASSPORT_PHOTO = "passportPhoto"
+}

package/dist/types/jsonForms/index.js

@@ -0,0 +1,5 @@
+export var JsonFormsCustomControlKey;
+(function (JsonFormsCustomControlKey) {
+    JsonFormsCustomControlKey["ARRAY"] = "array";
+    JsonFormsCustomControlKey["PASSPORT_PHOTO"] = "passportPhoto";
+})(JsonFormsCustomControlKey || (JsonFormsCustomControlKey = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.4.1-unstable.56+3af5fcf",
+  "version": "0.4.1-unstable.59+77b096c",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -50,7 +50,7 @@
     "@mui/x-date-pickers": "^6.19.5",
     "@sphereon/ssi-sdk.data-store": "0.34.1-feature.SSISDK.45.94",
     "@sphereon/ssi-types": "0.34.1-feature.SSISDK.45.94",
-    "@sphereon/ui-components.core": "0.4.1-unstable.56+3af5fcf",
+    "@sphereon/ui-components.core": "0.4.1-unstable.59+77b096c",
     "@tanstack/react-table": "^8.9.3",
     "react-dom": "npm:react-dom@18.3.1",
     "react-json-tree": "^0.18.0",
@@ -70,5 +70,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "3af5fcfb478f14655aed548ea279dda3ff8b518f"
+  "gitHead": "77b096c9997543ebe60753da26328678fba4070e"
 }