@sphereon/ui-components.ssi-react 0.3.1-unstable.3 → 0.4.0

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { CredentialRole, IImageAttributes } from '@sphereon/ssi-sdk.data-store';
+export interface Props {
+    name: string;
+    uri?: string;
+    logo?: IImageAttributes;
+    roles: Array<CredentialRole>;
+}
+declare const ContactViewItem: FC<Props>;
+export default ContactViewItem;

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

@@ -0,0 +1,9 @@
+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';
+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 })] })] }));
+};
+export default ContactViewItem;

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.d.ts

@@ -14,6 +14,7 @@ type CardBody = {
     properties?: Array<CardProperty>;
 };
 type CardFooter = {
+    showExpirationDate?: boolean;
     expirationDate?: number;
     credentialStatus?: CredentialStatus;
 };

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

@@ -7,7 +7,7 @@ const SSICredentialCardView = (props) => {
     const { header, body, footer } = props;
     const { credentialTitle, credentialSubtitle, logo } = props.header ?? {};
     const { issuerName, properties } = props.body ?? {};
-    const { credentialStatus, expirationDate } = props.footer ?? {};
+    const { credentialStatus, expirationDate, showExpirationDate = true } = props.footer ?? {};
     const { backgroundColor = credentialCardColors.default, backgroundImage, textColor = backgroundColors.primaryLight } = props.display ?? {};
     const getPropertyElementsFrom = (properties) => {
         return properties.slice(0, 2).map((property, index) => (_jsxs(PropertyContainer, { style: {
@@ -17,8 +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: [_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
+            }, 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 }) }))] }))] }) }) }));
+                                    : 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

@@ -46,9 +46,10 @@ import TextInputField from './components/fields/TextInputField';
 import WarningImage from './components/assets/images/WarningImage';
 import FormView from './components/views/FormView';
 import InformationRequestView from './components/views/InformationRequestView';
+import ContactViewItem from './components/views/ContactViewItem';
 import { Row } from '@tanstack/react-table';
 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, };
+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

@@ -46,8 +46,9 @@ import TextInputField from './components/fields/TextInputField';
 import WarningImage from './components/assets/images/WarningImage';
 import FormView from './components/views/FormView';
 import InformationRequestView from './components/views/InformationRequestView';
+import ContactViewItem from './components/views/ContactViewItem';
 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, };
+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.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const ContactViewItemContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const ContactViewItemNewStatusContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContactViewItemLogoContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContactViewItemContactDetailsContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContactViewItemContactUriCaptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH5Styled } from '../../../fonts';
+export const ContactViewItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  padding: 16px 24px 18px 7px;
+`;
+export const ContactViewItemNewStatusContainerStyled = styled.div `
+  height: 10px;
+  width: 17px;
+  margin: auto 0;
+`;
+export const ContactViewItemLogoContainerStyled = styled.div `
+  width: 78px;
+  margin: 2.5px 4px 2.5px 0;
+  align-items: center;
+  justify-content: center;
+`;
+export const ContactViewItemContactDetailsContainerStyled = styled.div `
+  margin-bottom: 6px;
+`;
+export const ContactViewItemContactUriCaptionStyled = styled(SSITextH5Styled) `
+  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/dist/styles/components/components/index.d.ts

@@ -28,3 +28,4 @@ export * from './CredentialViewItem';
 export * from './JSONDataView';
 export * from './TextInputField';
 export * from './InformationRequestView';
+export * from './ContactViewItem';

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

@@ -28,3 +28,4 @@ export * from './CredentialViewItem';
 export * from './JSONDataView';
 export * from './TextInputField';
 export * from './InformationRequestView';
+export * from './ContactViewItem';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.3.1-unstable.3+9660c06",
+  "version": "0.4.0",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -40,7 +40,8 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
-    "@sphereon/ui-components.core": "0.3.1-unstable.3+9660c06",
+    "@sphereon/ssi-sdk.data-store": "^0.33",
+    "@sphereon/ui-components.core": "0.4.0",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",
@@ -50,7 +51,7 @@
     "uint8arrays": "^3.1.1"
   },
   "devDependencies": {
-    "@types/react": "~18.2.67",
+    "@types/react": "~18.3.18",
     "ajv": "^8.12.0",
     "cpy-cli": "^5.0.0",
     "typescript": "4.9.5"
@@ -58,5 +59,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "9660c060024b8c03e1596043d1259d08eb7d0d14"
+  "gitHead": "c63b21ea1ff8a2aef0b6de301d1a85143d9d8f8e"
 }