@sphereon/ui-components.ssi-react 0.1.3-unstable.150 → 0.1.3-unstable.153

package/dist/components/fields/ComboBox/index.js

@@ -32,8 +32,7 @@ const ComboBox = (props) => {
             }),
             menu: (provided) => ({
                 ...provided,
-                maxWidth: 455,
-                zIndex: 999,
+                maxWidth: 455
             }),
             option: (provided, state) => ({
                 ...provided,

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

@@ -1,5 +1,6 @@
 import { CSSProperties, FC } from 'react';
 import { CredentialStatus } from '@sphereon/ui-components.core';
+import { CredentialMiniCardViewProps } from '../CredentialMiniCardView';
 type Props = {
     credentialTitle: string;
     credentialStatus: CredentialStatus;
@@ -7,6 +8,8 @@ type Props = {
     issueDate: number;
     expirationDate?: number;
     showTime?: boolean;
+    showCard?: boolean;
+    credentialBranding?: CredentialMiniCardViewProps;
     style?: CSSProperties;
 };
 declare const CredentialViewItem: FC<Props>;

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

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Localization, toLocalDateString, toLocalDateTimeString } from '@sphereon/ui-components.core';
 import SSIStatusLabel from '../../labels/SSIStatusLabel';
-import { CredentialViewItemContainerStyled as Container, SSIFlexDirectionRowViewStyled as ContentRowContainer, CredentialViewItemTitleCaptionStyled as TitleCaption, SSITextH4Styled as IssuerCaption, CredentialViewItemStatusContainerStyled as StatusContainer, SSITextH5Styled as IssueDateCaption, CredentialViewItemExpirationDateCaptionStyled as ExpirationDateCaption, } from '../../../styles';
+import CredentialMiniCardView from '../CredentialMiniCardView';
+import { CredentialViewItemContainerStyled as Container, CredentialViewItemDetailsContainerStyled as DetailsContainer, SSIFlexDirectionRowViewStyled as ContentRowContainer, CredentialViewItemTitleCaptionStyled as TitleCaption, SSITextH4Styled as IssuerCaption, CredentialViewItemStatusContainerStyled as StatusContainer, SSITextH5Styled as IssueDateCaption, CredentialViewItemExpirationDateCaptionStyled as ExpirationDateCaption, } from '../../../styles';
 const CredentialViewItem = (props) => {
-    const { credentialStatus, credentialTitle, issuerName, showTime = false, style } = props;
+    const { credentialStatus, credentialTitle, issuerName, showTime = false, showCard = true, credentialBranding, style } = props;
     const issueDate = showTime ? toLocalDateTimeString(props.issueDate) : toLocalDateString(props.issueDate);
     const expirationDate = props.expirationDate
         ? `${Localization.translate('credentials_view_item_expires_on')} ${showTime
             ? toLocalDateTimeString(props.expirationDate)
             : toLocalDateString(props.expirationDate)}`
         : Localization.translate('credential_status_never_expires_date_label');
-    return (_jsxs(Container, { style: { ...style }, children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] }));
+    return (_jsxs(Container, { style: { ...style }, children: [showCard &&
+                _jsx(CredentialMiniCardView, { ...credentialBranding }), _jsxs(DetailsContainer, { children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] })] }));
 };
 export default CredentialViewItem;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type Props = {
+    data: Record<string, any>;
+    showHeader?: boolean;
+    shouldExpandNodeInitially?: (() => boolean) | boolean;
+};
+declare const JSONDataView: FC<Props>;
+export default JSONDataView;

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

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import { JSONTree } from 'react-json-tree';
+import { backgroundColors, calculateAspectRatio, fontColors, isBase64ImageUri, isBoolean, Localization, parseToBoolean } from '@sphereon/ui-components.core';
+import SSICheckmarkBadge from '../../assets/badges/SSICheckmarkBadge';
+import SSIExclamationMarkBadge from '../../assets/badges/SSIExclamationMarkBadge';
+import { getImageSize } from '../../../utils';
+import { JSONDataViewContainerStyled as Container, JSONDataViewHeaderContainerStyled as HeaderContainer, JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, JSONDataViewDataContainerCaptionStyled as ContainerCaption, JSONDataViewDataImageValueStyled as ImageValue, JSONDataViewDataTextValueStyled as TextValue, JSONDataViewDataLabelStyled as Label } from '../../../styles';
+const JSONDataView = (props) => {
+    const { showHeader = true, shouldExpandNodeInitially = () => false } = props;
+    const expandNodeInitially = typeof shouldExpandNodeInitially === 'function' ? shouldExpandNodeInitially : () => shouldExpandNodeInitially;
+    const [focused, setFocused] = React.useState(false);
+    const [data, setData] = React.useState();
+    const preprocessData = async (data) => {
+        if (typeof data !== 'object' || data === null) {
+            return data;
+        }
+        const processedData = {};
+        await Promise.all(Object.entries(data).map(async ([key, value]) => {
+            if (typeof value === 'object' && value !== null) {
+                processedData[key] = await preprocessData(value);
+            }
+            else if (typeof value === 'string' && isBase64ImageUri(value)) {
+                const base64Uri = value;
+                const dimensions = await getImageSize(base64Uri);
+                processedData[key] = {
+                    uri: base64Uri,
+                    dimensions: {
+                        height: dimensions.height,
+                        width: dimensions.width,
+                        aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height)
+                    }
+                };
+            }
+            else {
+                processedData[key] = value;
+            }
+        }));
+        return processedData;
+    };
+    useEffect(() => {
+        preprocessData(props.data).then((data) => setData(data));
+    }, [props.data]);
+    const getItemString = () => {
+        return null;
+    };
+    const valueRenderer = (valueAsString, value) => {
+        if (isBoolean(value)) {
+            return parseToBoolean(value) ? _jsx(SSICheckmarkBadge, {}) : _jsx(SSIExclamationMarkBadge, {});
+        }
+        if (typeof value === 'object'
+            && value !== null
+            && 'uri' in value) {
+            const imageData = value;
+            return _jsx(ImageValue, { style: {
+                    aspectRatio: imageData.dimensions?.aspectRatio,
+                    backgroundImage: `url(${imageData.uri})`,
+                } });
+        }
+        return _jsx(TextValue, { children: value?.toString() });
+    };
+    const labelRenderer = ([key]) => {
+        return _jsx(Label, { children: key });
+    };
+    const isCustomNode = (value) => {
+        return typeof value === 'object' && value !== null && 'uri' in value && 'dimensions' in value;
+    };
+    return (_jsxs(Container, { children: [showHeader &&
+                _jsxs(HeaderContainer, { children: [_jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_attribute_column_label') }), _jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_value_column_label') })] }), _jsx(ContainerCaption, { onMouseEnter: () => setFocused(true), onMouseLeave: () => setFocused(false), children: data &&
+                    _jsx(JSONTree, { theme: {
+                            base0D: fontColors.dark,
+                            tree: {
+                                margin: 0,
+                                backgroundColor: backgroundColors.primaryLight,
+                            },
+                            arrowContainer: {
+                                paddingRight: 6,
+                            },
+                            arrow: {
+                                fontSize: 10,
+                                ...(!focused && { display: 'none' }),
+                            },
+                        }, hideRoot: true, shouldExpandNodeInitially: expandNodeInitially, getItemString: getItemString, labelRenderer: labelRenderer, valueRenderer: valueRenderer, isCustomNode: isCustomNode, data: data }) })] }));
+};
+export default JSONDataView;

package/dist/components/views/SSITabView/SSITabViewHeader/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles';
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
     const { navigationState, onIndexChange } = props;
     return (_jsx(Container, { children: navigationState.routes.map((value, index) => {

package/dist/index.d.ts

@@ -37,9 +37,10 @@ import CredentialIssuanceWizardView from './components/views/CredentialIssuanceW
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
 import CredentialViewItem from './components/views/CredentialViewItem';
+import JSONDataView from './components/views/JSONDataView';
 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, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView };

package/dist/index.js

@@ -36,8 +36,9 @@ import CredentialIssuanceWizardView from './components/views/CredentialIssuanceW
 import PaginationControls from './components/views/SSITableView/PaginationControls';
 import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
 import CredentialViewItem from './components/views/CredentialViewItem';
+import JSONDataView from './components/views/JSONDataView';
 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, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView };

package/dist/styles/components/components/CredentialViewItem/index.d.ts

@@ -1,4 +1,5 @@
 export declare const CredentialViewItemContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemDetailsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CredentialViewItemTitleCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CredentialViewItemStatusContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CredentialViewItemExpirationDateCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,8 +1,14 @@
 import styled from 'styled-components';
-import { SSIFlexDirectionColumnViewStyled } from '../../containers';
+import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled } from '../../containers';
 import { SSITextH3Styled, SSITextH5Styled } from '../../../fonts';
-export const CredentialViewItemContainerStyled = styled(SSIFlexDirectionColumnViewStyled) `
+export const CredentialViewItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  padding: 18px 24px;
+  gap: 8px;
+  align-items: center;
+`;
+export const CredentialViewItemDetailsContainerStyled = styled(SSIFlexDirectionColumnViewStyled) `
   gap: 6px;
+  min-width: 245px;
 `;
 export const CredentialViewItemTitleCaptionStyled = styled(SSITextH3Styled) `
   display: -webkit-box;

package/dist/styles/components/components/JSONDataView/index.d.ts

@@ -0,0 +1,7 @@
+export declare const JSONDataViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewColumnHeaderCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataContainerCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataImageValueStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JSONDataViewDataTextValueStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const JSONDataViewDataLabelStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors, fontColors, SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
+import { SSITextH2SemiBoldStyledCss, SSITextH5Css, SSITextH7SemiBoldCss } from '../../../css';
+export const JSONDataViewContainerStyled = styled.div `
+  ${SSIRoundedEdgesCss};
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: ${backgroundColors.primaryLight};
+  border: 1px solid ${borderColors.light};
+`;
+export const JSONDataViewHeaderContainerStyled = styled.div `
+  padding: 12px 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 2px solid ${borderColors.light};
+`;
+export const JSONDataViewColumnHeaderCaptionStyled = styled.div `
+  display: flex;
+  flex-grow: 1;
+  ${SSITextH2SemiBoldStyledCss};
+  color: ${fontColors.lightGrey};
+  max-width: 200px;
+`;
+export const JSONDataViewDataContainerCaptionStyled = styled.div `
+  padding-right: 24px;
+  padding-bottom: 24px;
+  padding-left: 12px;
+  display: flex;
+  flex-direction: row;
+`;
+export const JSONDataViewDataImageValueStyled = styled.div `
+  background-size: cover;
+  height: 130px;
+  border-radius: 10px;
+`;
+export const JSONDataViewDataTextValueStyled = styled.span `
+  color: ${fontColors.dark};
+  ${SSITextH7SemiBoldCss}
+`;
+export const JSONDataViewDataLabelStyled = styled.span `
+  color: ${fontColors.dark};
+  ${SSITextH5Css};
+  width: 212px;
+  display: inline-block;
+`;

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

@@ -2,5 +2,5 @@ import styled from 'styled-components';
 export const SSITabViewContainerStyled = styled.div `
   display: flex;
   flex-direction: column;
-  width: 100%;
+  flex-grow: 1;
 `;

package/dist/styles/components/components/SSITabViewHeader/index.d.ts

@@ -1,2 +1,3 @@
 export declare const SSITabViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITabViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITabViewHeaderTitleCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { SSITextH3Styled } from '../../../fonts';
 export const SSITabViewHeaderContainerStyled = styled.div `
   display: flex;
   flex-direction: row;
@@ -7,4 +8,8 @@ export const SSITabViewHeaderContainerStyled = styled.div `
 `;
 export const SSITabViewHeaderTitleContainerStyled = styled.div `
   cursor: pointer;
+  display: flex;
+`;
+export const SSITabViewHeaderTitleCaptionStyled = styled(SSITextH3Styled) `
+  margin-top: auto;
 `;

package/dist/styles/components/components/index.d.ts

@@ -25,3 +25,4 @@ export * from './PassportPhotoControl';
 export * from './CredentialIssuanceWizardView';
 export * from './Pagination';
 export * from './CredentialViewItem';
+export * from './JSONDataView';

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

@@ -25,3 +25,4 @@ export * from './PassportPhotoControl';
 export * from './CredentialIssuanceWizardView';
 export * from './Pagination';
 export * from './CredentialViewItem';
+export * from './JSONDataView';

package/dist/styles/css/index.d.ts

@@ -8,4 +8,5 @@ export declare const SSITextH4SemiBoldCss: import("styled-components").FlattenSi
 export declare const SSITextH5Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH6Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH7RegularCss: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH7SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const gradient100TextCss: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/css/index.js

@@ -71,6 +71,13 @@ export const SSITextH7RegularCss = css `
   line-height: ${fontStyle.h7Regular.lineHeight}px;
   height: auto;
 `;
+export const SSITextH7SemiBoldCss = css `
+  font-family: ${fontStyle.h7SemiBold.fontFamily};
+  font-size: ${fontStyle.h7SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h7SemiBold.fontWeight};
+  line-height: ${fontStyle.h7SemiBold.lineHeight}px;
+  height: auto;
+`;
 export const gradient100TextCss = css `
   background: ${gradientColors['100']};
   background-clip: text;

package/dist/utils/ImageUtils.d.ts

@@ -0,0 +1,2 @@
+import { ImageSize } from '@sphereon/ui-components.core';
+export declare const getImageSize: (uri: string) => Promise<ImageSize>;

package/dist/utils/ImageUtils.js

@@ -0,0 +1,12 @@
+export const getImageSize = (uri) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({ width: img.width, height: img.height });
+        };
+        img.onerror = (error) => {
+            reject(error);
+        };
+        img.src = uri;
+    });
+};

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './FileUtils';
+export * from './ImageUtils';

package/dist/utils/index.js

@@ -1 +1,2 @@
 export * from './FileUtils';
+export * from './ImageUtils';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.150+80103f1",
+  "version": "0.1.3-unstable.153+9c84e89",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -40,8 +40,9 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
-    "@sphereon/ui-components.core": "0.1.3-unstable.150+80103f1",
+    "@sphereon/ui-components.core": "0.1.3-unstable.153+9c84e89",
     "@tanstack/react-table": "^8.9.3",
+    "react-json-tree": "^0.18.0",
     "react-loader-spinner": "^5.4.5",
     "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
@@ -58,5 +59,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "80103f16948012994b466befb4356f438ded92d1"
+  "gitHead": "9c84e89a4f1bd5f506aa6ab21179d7bfe115cdb6"
 }