@sphereon/ui-components.ssi-react 0.1.3-unstable.99 → 0.2.1-next.105

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

@@ -0,0 +1,21 @@
+export declare enum AssetFilePermission {
+    PUBLIC = "public",
+    PRIVATE = "private"
+}
+export type ValueSelection = {
+    label: string;
+    value: string;
+};
+export declare enum FileSelectionFieldType {
+    FILE = "file",
+    IMAGE = "image"
+}
+export type PassportPhoto = {
+    file: File;
+    base64Uri: string;
+};
+export type PassportPhotoControlData = {
+    fileName: string;
+    mimeType: string;
+    base64Uri: string;
+};

package/dist/types/field/index.js

@@ -0,0 +1,10 @@
+export var AssetFilePermission;
+(function (AssetFilePermission) {
+    AssetFilePermission["PUBLIC"] = "public";
+    AssetFilePermission["PRIVATE"] = "private";
+})(AssetFilePermission || (AssetFilePermission = {}));
+export var FileSelectionFieldType;
+(function (FileSelectionFieldType) {
+    FileSelectionFieldType["FILE"] = "file";
+    FileSelectionFieldType["IMAGE"] = "image";
+})(FileSelectionFieldType || (FileSelectionFieldType = {}));

package/dist/types/index.d.ts

@@ -2,3 +2,5 @@ export * from './button';
 export * from './table';
 export * from './toast';
 export * from './indicator';
+export * from './field';
+export * from './view';

package/dist/types/index.js

@@ -2,3 +2,5 @@ export * from './button';
 export * from './table';
 export * from './toast';
 export * from './indicator';
+export * from './field';
+export * from './view';

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

@@ -1,6 +1,7 @@
 export type ProgressIndicatorStep = {
     title?: string;
     description?: string;
+    required?: boolean;
 };
 export declare enum StepStatus {
     CURRENT = "current",

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

@@ -1,31 +1,41 @@
 import { AccessorFn, DeepKeys } from '@tanstack/react-table';
-import { ButtonIcon } from '@sphereon/ui-components.core';
+import { Button } from '../button';
+import { ValueSelection } from '../field';
 export declare enum TableCellType {
     TEXT = "text",
     LABEL = "label",
     STATUS = "status",
-    CREDENTIAL_CARD = "credentialCard"
+    CREDENTIAL_CARD = "credentialCard",
+    CREDENTIAL_DETAILS = "credentialDetails",
+    ACTIONS = "actions",
+    COMBOBOX = "combobox"
 }
 export type ColumnHeader<T> = {
     accessor: AccessorFn<T> | DeepKeys<T>;
     type: TableCellType;
     label?: string;
-    opts?: TableCellOptions;
+    columnOptions?: TableColumnOptions;
 };
-export type TableCellOptions = {
-    truncationLength?: number;
-    enableHover?: boolean;
+export type TableColumnOptions = {
     columnMinWidth?: number;
     columnMaxWidth?: number;
     columnWidth?: number;
+    cellOptions?: TableCellOptions;
+};
+export type TableCellOptions = TextCellOptions | ComboboxCellOptions | ActionsCellOptions;
+export type TableRowSelection = {
+    rowId: string;
+    rowData: any;
+};
+export type TextCellOptions = {
+    truncationLength?: number;
+    enableHover?: boolean;
 };
-export type ActionGroup = {
-    caption: string;
-    actions: ActionButton[];
+export type ComboboxCellOptions = {
+    selectOptions?: Array<ValueSelection>;
+    defaultValue?: ValueSelection;
+    onChange?: (value: ValueSelection) => Promise<void>;
 };
-export type ActionButton = {
-    caption: string;
-    onClick: (rowData: any) => Promise<void>;
-    icon?: ButtonIcon;
-    disabled?: boolean;
+export type ActionsCellOptions = {
+    actions: Array<Button>;
 };

package/dist/types/table/index.js

@@ -4,4 +4,7 @@ export var TableCellType;
     TableCellType["LABEL"] = "label";
     TableCellType["STATUS"] = "status";
     TableCellType["CREDENTIAL_CARD"] = "credentialCard";
+    TableCellType["CREDENTIAL_DETAILS"] = "credentialDetails";
+    TableCellType["ACTIONS"] = "actions";
+    TableCellType["COMBOBOX"] = "combobox";
 })(TableCellType || (TableCellType = {}));

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

@@ -0,0 +1,13 @@
+import { JsonFormsCore, JsonSchema, UISchemaElement } from '@jsonforms/core';
+export type JSONFormState<DataType = any> = Pick<JsonFormsCore, 'errors'> & {
+    data: DataType;
+};
+export type CredentialFormData = JSONFormState<Record<any, any>> & {
+    evidence: Array<File>;
+};
+export type CredentialFormSelectionType = {
+    label: string;
+    schema?: JsonSchema;
+    uiSchema?: UISchemaElement;
+    credentialType: Array<string>;
+};

package/dist/types/view/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/FileUtils.d.ts

@@ -0,0 +1 @@
+export declare const base64UriToFile: (base64Uri: string, filename: string, mimeType: string) => File;

package/dist/utils/FileUtils.js

@@ -0,0 +1,7 @@
+import { fromString } from 'uint8arrays';
+export const base64UriToFile = (base64Uri, filename, mimeType) => {
+    const base64 = base64Uri.split(',')[1];
+    const uint8Array = fromString(base64, 'base64');
+    const blob = new Blob([uint8Array]);
+    return new File([blob], filename, { type: mimeType });
+};

package/dist/utils/IconUtils.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+export declare const getIcon: (icon: ButtonIcon, color?: string) => ReactElement;

package/dist/utils/IconUtils.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonIcon, fontColors } from '@sphereon/ui-components.core';
+import SSIAddIcon from '../components/assets/icons/SSIAddIcon';
+import SSIArrowDownIcon from '../components/assets/icons/SSIArrowDownIcon';
+import MeatBallsIcon from '../components/assets/icons/MeatBallsIcon';
+import CopyIcon from '../components/assets/icons/CopyIcon';
+import DeleteIcon from '../components/assets/icons/DeleteIcon';
+import SSIFilterIcon from '../components/assets/icons/SSIFilterIcon';
+import PencilIcon from '../components/assets/icons/PencilIcon';
+import ViewIcon from '../components/assets/icons/ViewIcon';
+export const getIcon = (icon, color = fontColors.dark) => {
+    switch (icon) {
+        case ButtonIcon.ADD:
+            return _jsx(SSIAddIcon, { color: color });
+        case ButtonIcon.ARROW_DOWN:
+            return _jsx(SSIArrowDownIcon, { color: color });
+        case ButtonIcon.MEATBALLS:
+            return _jsx(MeatBallsIcon, { color: color });
+        case ButtonIcon.EDIT:
+            return _jsx(PencilIcon, { color: color });
+        case ButtonIcon.COPY:
+            return _jsx(CopyIcon, { color: color });
+        case ButtonIcon.DELETE:
+            return _jsx(DeleteIcon, { color: color });
+        case ButtonIcon.FILTER:
+            return _jsx(SSIFilterIcon, { color: color });
+        case ButtonIcon.VIEW:
+            return _jsx(ViewIcon, { color: color });
+        default:
+            return _jsx("div", {});
+    }
+};

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

@@ -0,0 +1,3 @@
+export * from './FileUtils';
+export * from './ImageUtils';
+export * from './IconUtils';

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from './FileUtils';
+export * from './ImageUtils';
+export * from './IconUtils';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.99+c8885e8",
+  "version": "0.2.1-next.105+5df824a",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -13,7 +13,8 @@
     "Self-sovereign identity (SSI)"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && pnpm run copy-css",
+    "copy-css": "cpy src/**/*.css dist --parents",
     "build:clean": "tsc --build --clean && tsc --build"
   },
   "source": "src/index.ts",
@@ -28,19 +29,34 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.3-unstable.99+c8885e8",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@jsonforms/core": "^3.3.0",
+    "@jsonforms/material-renderers": "^3.3.0",
+    "@jsonforms/react": "^3.3.0",
+    "@jsonforms/vanilla-renderers": "^3.3.0",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/material": "^5.15.12",
+    "@mui/styled-engine-sc": "^5.14.12",
+    "@mui/system": "^5.15.12",
+    "@mui/x-date-pickers": "^6.19.5",
+    "@sphereon/ui-components.core": "0.2.1-next.105+5df824a",
     "@tanstack/react-table": "^8.9.3",
-    "react-loader-spinner": "^5.4.5",
+    "react-json-tree": "^0.18.0",
+    "react-loader-spinner": "5.4.5",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
-    "styled-components": "^5.3.3"
+    "styled-components": "^6.1.12",
+    "uint8arrays": "^3.1.1"
   },
   "devDependencies": {
-    "@types/react": "~18.0.14",
-    "@types/styled-components": "^5.1.15",
+    "@types/react": "~18.2.67",
+    "ajv": "^8.12.0",
+    "cpy-cli": "^5.0.0",
     "typescript": "4.9.5"
   },
   "peerDependencies": {
-    "react": ">= 16.8.0"
+    "react": ">= 18"
   },
-  "gitHead": "c8885e82d8b36ec6f2564dcc33d4aa4933a759ea"
+  "gitHead": "5df824ab531b535b85e058b673d402a1e8bb940c"
 }

package/dist/components/assets/icons/BitterballenIcon/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { fontColors } from '@sphereon/ui-components.core';
-const BitterballenIcon = (props) => {
-    const { size = 42, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1, display: 'flex' }, children: _jsxs("svg", { width: "42", height: "43", viewBox: "0 0 42 43", fill: color, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "13", cy: "21.5", r: "2", fill: "#303030" }), _jsx("circle", { cx: "21", cy: "21.5", r: "2", fill: "#303030" }), _jsx("circle", { cx: "29", cy: "21.5", r: "2", fill: "#303030" })] }) }));
-};
-export default BitterballenIcon;

package/dist/components/buttons/RowActionMenuButton/index.d.ts

@@ -1,13 +0,0 @@
-import { CSSProperties, FC } from 'react';
-import { ButtonIcon } from '@sphereon/ui-components.core';
-import { ActionButton } from '../../../index';
-import { Row } from '@tanstack/react-table';
-type Props = {
-    actions: ActionButton[];
-    icon: ButtonIcon;
-    color?: string;
-    style?: CSSProperties;
-    rowData?: Row<any>;
-};
-declare const RowActionMenuButton: FC<Props>;
-export default RowActionMenuButton;

package/dist/components/buttons/RowActionMenuButton/index.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { ButtonIcon } from '@sphereon/ui-components.core';
-import { SSIIconButton } from '../../../index';
-import { RowActionMenuButtonContainerStyled as ButtonContainer, RowActionDropdownContainerStyled as DropdownContainer, ActionItemContainerStyled as ActionItemContainer, ActionItemCaptionStyled as ItemCaption, } from '../../../styles';
-const RowActionMenuButton = ({ actions, icon, color, style = {}, rowData }) => {
-    const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-    const dropdownRef = useRef(null);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsDropdownVisible(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [dropdownRef]);
-    const toggleDropdown = async () => {
-        setIsDropdownVisible(!isDropdownVisible);
-    };
-    const renderDropdown = () => {
-        return (_jsx(DropdownContainer, { ref: dropdownRef, style: { display: isDropdownVisible ? 'block' : 'none' }, children: actions.map((action, index) => (_jsxs(ActionItemContainer, { onClick: () => action.onClick(rowData), children: [_jsx(ItemCaption, { style: { marginLeft: '10px' }, children: action.caption }), action.icon && _jsx(SSIIconButton, { onClick: () => action.onClick(rowData), icon: action.icon })] }, index))) }));
-    };
-    return (_jsxs(ButtonContainer, { style: { ...style }, children: [_jsx(SSIIconButton, { icon: icon || ButtonIcon.BITTERBALLEN, color: color, onClick: toggleDropdown }), renderDropdown()] }));
-};
-export default RowActionMenuButton;

package/dist/components/buttons/SSIIconButton/index.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import { ButtonIcon } from '@sphereon/ui-components.core';
-type Props = {
-    icon: ButtonIcon;
-    onClick: () => Promise<void>;
-    disabled?: boolean;
-    color?: string;
-};
-declare const SSIIconButton: FC<Props>;
-export default SSIIconButton;

package/dist/components/buttons/SSIIconButton/index.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ButtonIcon, fontColors } from '@sphereon/ui-components.core';
-import SSIAddIcon from '../../assets/icons/SSIAddIcon';
-import SSIFilterIcon from '../../assets/icons/SSIFilterIcon';
-import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon';
-import { SSIIconButtonContainerStyled as Container } from '../../../styles';
-import BitterballenIcon from '../../assets/icons/BitterballenIcon';
-import DeleteIcon from '../../assets/icons/DeleteIcon';
-const SSIIconButton = (props) => {
-    const { icon, onClick, disabled = false, color = fontColors.dark } = props;
-    return _jsx(Container, { onClick: onClick, children: getIcon(icon, color) });
-};
-const getIcon = (icon, color) => {
-    switch (icon) {
-        case ButtonIcon.ADD:
-            return _jsx(SSIAddIcon, { color: color });
-        case ButtonIcon.ARROW_DOWN:
-            return _jsx(SSIArrowDownIcon, { color: color });
-        case ButtonIcon.BITTERBALLEN:
-            return _jsx(BitterballenIcon, { color: color });
-        case ButtonIcon.DELETE:
-            return _jsx(DeleteIcon, { color: color });
-        case ButtonIcon.FILTER:
-            return _jsx(SSIFilterIcon, { color: color });
-        default:
-            return _jsx("div", {});
-    }
-};
-export default SSIIconButton;

package/dist/components/lists/SSIDropDownList/index.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-type Props = {
-    initialValue: string;
-    label?: string;
-};
-declare const SSIDropDownList: FC<Props>;
-export default SSIDropDownList;

package/dist/components/lists/SSIDropDownList/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { ButtonIcon } from '@sphereon/ui-components.core';
-import SSIIconButton from '../../buttons/SSIIconButton';
-import { SSIDropDownListContainerStyled as Container, SSITextH3Styled as LabelCaption, SSIDropDownListSelectedValueStyled as SelectedValue, } from '../../../styles';
-const SSIDropDownList = (props) => {
-    const { initialValue, label } = props;
-    const [value, setValue] = React.useState(initialValue);
-    return (_jsxs(Container, { children: [label && _jsx(LabelCaption, { children: label }), _jsx(SelectedValue, { children: value }), _jsx(SSIIconButton, { icon: ButtonIcon.ARROW_DOWN, onClick: async () => console.log('drop down clicked') })] }));
-};
-export default SSIDropDownList;

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

@@ -1,4 +0,0 @@
-export declare const RowActionMenuButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionItemContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionItemCaptionStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const RowActionDropdownContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-export const RowActionMenuButtonContainerStyled = styled.div `
-  position: relative;
-`;
-export const ActionItemContainerStyled = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px;
-  cursor: pointer;
-  max-width: 250px;
-`;
-export const ActionItemCaptionStyled = styled.span `
-  font-family: Poppins;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0em;
-  text-align: left;
-`;
-export const RowActionDropdownContainerStyled = styled.div `
-  position: absolute;
-  z-index: 1000;
-  background-color: #fff;
-  width: auto;
-  padding: 10px;
-`;

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

@@ -1,2 +0,0 @@
-export declare const SSIDropDownListContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSIDropDownListSelectedValueStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { SSIFlexDirectionRowViewStyled } from '../../containers';
-import { SSITextH3Styled } from '../../../fonts';
-import { gradient100TextCss } from '../../../css';
-export const SSIDropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
-  text-align: left;
-  align-items: center;
-  gap: 2px;
-`;
-export const SSIDropDownListSelectedValueStyled = styled(SSITextH3Styled) `
-  ${gradient100TextCss}
-`;

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

@@ -1 +0,0 @@
-export declare const SSIIconButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1 +0,0 @@
-export declare const SSIPrimaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,2 +0,0 @@
-export declare const SSISecondaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SSISecondaryButtonCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;