@sphereon/ui-components.ssi-react 0.3.1-next.23 → 0.3.1-next.37

package/dist/components/views/ContactViewItem/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SSILogo from '../../assets/logos/SSILogo';
 import { ContactViewItemContactDetailsContainerStyled as ContactDetailsContainer, SSITextH3Styled as ContactNameCaption, SSITextH4Styled as ContactRolesCaption, ContactViewItemContactUriCaptionStyled as ContactUriCaption, ContactViewItemContainerStyled as Container, ContactViewItemLogoContainerStyled as LogoContainer, ContactViewItemNewStatusContainerStyled as StatusContainer, } from '../../../styles';
-import { fontColors } from "@sphereon/ui-components.core";
+import { fontColors } from '@sphereon/ui-components.core';
 const ContactViewItem = (props) => {
     const { name, uri, roles, logo } = props;
     return (_jsxs(Container, { children: [_jsx(StatusContainer, {}), _jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: fontColors.dark }) }), _jsxs("div", { children: [_jsxs(ContactDetailsContainer, { children: [_jsx(ContactNameCaption, { children: name }), _jsx(ContactRolesCaption, { children: roles.join(', ') })] }), _jsx(ContactUriCaption, { children: uri })] })] }));

package/dist/components/views/FormView/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, Middleware, UISchemaElement, ValidationMode } from '@jsonforms/core';
 import { JSONFormState } from '../../../types';
 import Ajv from 'ajv';
@@ -16,5 +16,5 @@ type Props<DataType = Record<any, any>> = {
     readonly?: boolean;
     config?: any;
 };
-declare const FormView: FC<Props>;
+declare const FormView: (props: Props) => ReactElement;
 export default FormView;

package/dist/components/views/FormView/index.js

@@ -1,12 +1,57 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { JsonForms } from '@jsonforms/react';
 import { materialCells } from '@jsonforms/material-renderers';
 import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
+import { formatDateToISO } from '../../../helpers';
+const initializeDefaultValues = (schema, currentData = {}) => {
+    const result = { ...currentData };
+    if (!schema.properties) {
+        return result;
+    }
+    Object.entries(schema.properties).forEach(([key, property]) => {
+        if (typeof property === 'object') {
+            if (property.const && (!(key in result) || !result[key])) {
+                result[key] = property.const;
+            }
+            if (property.default && (!(key in result) || !result[key])) {
+                if (property.format?.startsWith('date') || property.format?.startsWith('time')) {
+                    result[key] = formatDateToISO(property.default, property.format);
+                }
+                else {
+                    result[key] = property.default;
+                }
+            }
+            if (property.properties) {
+                if (!result[key]) {
+                    result[key] = {};
+                }
+                result[key] = initializeDefaultValues(property, result[key]);
+            }
+        }
+    });
+    return result;
+};
 const FormView = (props) => {
     const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv, onFormStateChange, readonly = false, config, } = props;
+    const [formData, setFormData] = useState(data ?? {});
+    useEffect(() => {
+        const initializedData = initializeDefaultValues(schema, formData);
+        setFormData(initializedData);
+    }, [schema]);
     const onFormStateChanged = (state) => {
-        void onFormStateChange?.(state);
+        const updatedData = initializeDefaultValues(schema, state.data);
+        if (JSON.stringify(updatedData) !== JSON.stringify(state.data)) {
+            setFormData(updatedData);
+            void onFormStateChange?.({
+                ...state,
+                data: updatedData,
+            });
+        }
+        else {
+            void onFormStateChange?.(state);
+        }
     };
-    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
+    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: formData, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
 };
 export default FormView;

package/dist/components/views/SSICredentialCardView/index.js

@@ -17,9 +17,8 @@ const SSICredentialCardView = (props) => {
     };
     return (_jsx(Container, { style: { backgroundColor }, children: _jsx(BackgroundImage, { style: {
                 ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [(!backgroundImage || logo) && (_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) })), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [showExpirationDate &&
-                                _jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
-                                        ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
-                                        : Localization.translate('credential_status_never_expires_date_label') }), credentialStatus && (_jsx(StatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
+            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [(!backgroundImage || logo) && (_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) })), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [showExpirationDate && (_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
+                                    ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
+                                    : Localization.translate('credential_status_never_expires_date_label') })), credentialStatus && (_jsx(StatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
 };
 export default SSICredentialCardView;

package/dist/helpers/DateHelper/index.d.ts

@@ -0,0 +1,3 @@
+export type DateFormat = 'date-time' | 'date' | 'time' | undefined;
+export declare const formatDate: (dateString?: string, format?: DateFormat) => string;
+export declare const formatDateToISO: (dateString?: string, format?: DateFormat) => string;

package/dist/helpers/DateHelper/index.js

@@ -0,0 +1,45 @@
+export const formatDate = (dateString, format = 'date-time') => {
+    const userDateTimeOpts = Intl.DateTimeFormat().resolvedOptions();
+    if (!dateString) {
+        return '';
+    }
+    const date = dateString === 'now' ? new Date() : new Date(dateString);
+    if (isNaN(date.getTime())) {
+        console.error('Invalid date:', dateString);
+        return 'Invalid date';
+    }
+    const formatOptions = {
+        timeZone: userDateTimeOpts.timeZone,
+    };
+    if (format === 'date-time') {
+        formatOptions.dateStyle = 'short';
+        formatOptions.timeStyle = 'short';
+    }
+    else if (format === 'date') {
+        formatOptions.dateStyle = 'short';
+    }
+    else if (format === 'time') {
+        formatOptions.timeStyle = 'short';
+    }
+    return new Intl.DateTimeFormat(userDateTimeOpts.locale, formatOptions).format(date);
+};
+export const formatDateToISO = (dateString, format = 'date-time') => {
+    if (!dateString) {
+        return '';
+    }
+    const date = dateString === 'now' ? new Date() : new Date(dateString);
+    if (isNaN(date.getTime())) {
+        console.error('Invalid date:', dateString);
+        return 'Invalid date';
+    }
+    const isoString = date.toISOString();
+    if (format === 'date-time') {
+        return isoString.slice(0, 19).replace('T', ' ');
+    }
+    else if (format === 'date') {
+        return isoString.slice(0, 10);
+    }
+    else {
+        return isoString.slice(11, 19);
+    }
+};

package/dist/helpers/index.d.ts

@@ -1 +1,2 @@
+export * from './DateHelper';
 export * from './toastHelper';

package/dist/helpers/index.js

@@ -1 +1,2 @@
+export * from './DateHelper';
 export * from './toastHelper';

package/dist/index.d.ts

@@ -52,4 +52,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 };
+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, };

package/dist/index.js

@@ -51,4 +51,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 };
+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, };

package/dist/styles/components/components/ContactViewItem/index.js

@@ -19,5 +19,5 @@ export const ContactViewItemContactDetailsContainerStyled = styled.div `
   margin-bottom: 6px;
 `;
 export const ContactViewItemContactUriCaptionStyled = styled(SSITextH5Styled) `
-  color: #4F4F4F;
+  color: #4f4f4f;
 `;

package/dist/styles/components/components/DropDownListItem/index.js

@@ -7,6 +7,16 @@ export const DropDownListItemContainerStyled = styled(SSIFlexDirectionRowViewSty
   align-items: center;
   background-color: ${backgroundColors.primaryLight};
   padding: 10px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: ${backgroundColors.lightGrey};
+  }
+
+  &:active {
+    background-color: ${backgroundColors.secondaryLight};
+  }
 `;
 export const DropDownListItemCaptionContainerStyled = styled(SSITextH2Styled) `
   flex: 1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.3.1-next.23+ef3d35e",
+  "version": "0.3.1-next.37+971d5d7",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -40,8 +40,8 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
-    "@sphereon/ssi-sdk.data-store": "0.29.1-next.47",
-    "@sphereon/ui-components.core": "0.3.1-next.23+ef3d35e",
+    "@sphereon/ssi-sdk.data-store": "0.30.2-next.273",
+    "@sphereon/ui-components.core": "0.3.1-next.37+971d5d7",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "ef3d35e9e76df912ca20db6708930f80226f49a6"
+  "gitHead": "971d5d76d6ade8f3eced3a278c3ba6dec57c1d6c"
 }