@sphereon/ui-components.ssi-react 0.4.1-unstable.2 → 0.4.1-unstable.20

package/dist/components/indicators/ProgressStepIndicator/index.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { elementColors, fontColors, Localization } from '@sphereon/ui-components.core';
 import StepMarker from '../../assets/markers/StepMarker';
 import { gradientColors } from '../../../styles/colors';
@@ -7,7 +8,7 @@ import { StepStatus } from '../../../types';
 const getStepRowElement = (stepNumber, status, step, maxSteps) => {
     const { title, description, required = true } = step;
     const gridRowNumber = stepNumber * 2 - 1;
-    return (_jsxs(_Fragment, { children: [_jsxs(StepMarkerCell, { style: { gridRow: gridRowNumber }, children: [_jsx(StepMarker, { stepNumber: stepNumber, status: status }), stepNumber < maxSteps && (_jsx(StepLine, { style: {
+    return (_jsxs(Fragment, { children: [_jsxs(StepMarkerCell, { style: { gridRow: gridRowNumber }, children: [_jsx(StepMarker, { stepNumber: stepNumber, status: status }), stepNumber < maxSteps && (_jsx(StepLine, { style: {
                             ...(status === StepStatus.COMPLETED && {
                                 backgroundColor: elementColors.purple,
                             }),
@@ -24,7 +25,7 @@ const getStepRowElement = (stepNumber, status, step, maxSteps) => {
                         ...(status === StepStatus.COMPLETED && {
                             backgroundColor: elementColors.purple,
                         }),
-                    } }) }))] }));
+                    } }) }))] }, stepNumber));
 };
 const getStepStatus = (stepNumber, activeStep) => {
     if (stepNumber < activeStep) {

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

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { CredentialRole, IImageAttributes } from '@sphereon/ssi-sdk.data-store';
+import type { IImageAttributes } from '@sphereon/ssi-sdk.data-store';
+import { CredentialRole } from '@sphereon/ssi-types';
 export interface Props {
     name: string;
     uri?: string;

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

@@ -14,7 +14,7 @@ const initializeDefaultValues = (schema, currentData = {}) => {
             if (property.const && (!(key in result) || !result[key])) {
                 result[key] = property.const;
             }
-            if (property.default && (!(key in result) || !result[key])) {
+            if (property.default !== undefined && !(key in result)) {
                 if (property.format?.startsWith('date') || property.format?.startsWith('time')) {
                     result[key] = formatDateToISO(property.default, property.format);
                 }
@@ -35,22 +35,18 @@ const initializeDefaultValues = (schema, currentData = {}) => {
 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 ?? {});
+    const [initialized, setInitialized] = useState(false);
     useEffect(() => {
         const initializedData = initializeDefaultValues(schema, formData);
         setFormData(initializedData);
+        setInitialized(true);
     }, [schema]);
     const onFormStateChanged = (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);
+        if (!initialized) {
+            return;
         }
+        setFormData(state.data);
+        void onFormStateChange?.(state);
     };
     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 }) }));
 };

package/dist/components/views/FormView/styles.css

@@ -0,0 +1,105 @@
+.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #7276F7 !important;
+}
+
+.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+    border-color: #7276F7 !important;
+}
+
+.MuiTypography-h6 {
+    font-size: 16px !important;
+    font-style: normal !important;
+    font-weight: 600 !important;
+}
+
+.MuiGrid-container {
+    padding: 0 !important;
+}
+
+.MuiFormControl-root {
+    padding: 0 !important;
+
+}
+
+.MuiCardContent-root {
+    padding: 0 !important;
+}
+
+.MuiCardHeader-root {
+    padding: 0 !important;
+}
+
+.MuiPaper-root {
+    margin: 0 !important;
+    background-color: #FBFBFB !important;
+    box-shadow: none !important;
+    border-radius: 4px !important;
+}
+
+.MuiCardHeader-title {
+    font-family: Poppins, serif !important;
+    font-size: 16px !important;
+    font-style: normal !important;
+    font-weight: 400 !important;
+    margin-bottom: 10px !important;
+}
+
+.MuiGrid-root.MuiGrid-container.MuiGrid-direction-xs-column {
+    gap: 24px !important;
+}
+
+.MuiFormLabel-root.MuiInputLabel-root {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiInputBase-root.MuiOutlinedInput-root .MuiInputBase-input {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiInputBase-root.MuiOutlinedInput-root {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiTypography-root {
+    font-family: 'Poppins', sans-serif !important;
+    color: #303030 !important;
+}
+
+.MuiDateCalendar-root {
+    background-color: #ECE6F0 !important;
+    border-radius: 16px !important;
+}
+
+.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPickersPopper-paper {
+    border-radius: 16px !important;
+}
+
+.MuiButtonBase-root.MuiPickersDay-root.Mui-selected.MuiPickersDay-dayWithMargin {
+    background-color: #7276F7 !important;
+}
+
+.MuiButtonBase-root.MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover {
+    background-color: #B7B8D9 !important;
+}
+
+.base-Popper-root {
+    border-radius: 4px !important;
+}
+
+.MuiFormGroup-root.MuiFormGroup-row {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    grid-gap: 10px !important;
+}
+
+.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-true:empty {
+    display: none !important;
+}
+
+textarea.MuiInputBase-input.MuiInputBase-inputMultiline {
+    min-height: 112px !important;
+}
+
+.MuiTabs-scroller.MuiTabs-fixed {
+    margin-bottom: 12px !important;
+}

package/dist/index.d.ts

@@ -57,6 +57,7 @@ import RoleViewItem from './components/views/RoleViewItem';
 import Listbox from './components/lists/Listbox';
 import { Row } from '@tanstack/react-table';
 import './styles/css/tailwind.css';
+import './components/views/FormView/styles.css';
 import '@sphereon/ui-components.core/dist/styles/tokens.css';
 export * from './styles/fonts';
 export * from './types';

package/dist/index.js

@@ -56,6 +56,7 @@ import RoleIconView from './components/views/RoleIconView';
 import RoleViewItem from './components/views/RoleViewItem';
 import Listbox from './components/lists/Listbox';
 import './styles/css/tailwind.css';
+import './components/views/FormView/styles.css';
 import '@sphereon/ui-components.core/dist/styles/tokens.css';
 export * from './styles/fonts';
 export * from './types';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.4.1-unstable.2+64023ed",
+  "version": "0.4.1-unstable.20+468cc9f",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -13,10 +13,17 @@
     "Self-sovereign identity (SSI)"
   ],
   "scripts": {
-    "build": "tsc && pnpm run generate-css",
+    "build": "pnpm run copy-css && pnpm run generate-css && tsc",
+    "copy-css": "copy-files-from-to",
     "generate-css": "tailwindcss -i ./src/styles/css/tailwind.css -o ./dist/styles/css/tailwind.css",
     "build:clean": "tsc --build --clean && tsc --build"
   },
+  "copyFiles": [
+    {
+      "from": "src/**/*.css",
+      "to": "dist"
+    }
+  ],
   "source": "src/index.ts",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,8 +48,9 @@
     "@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.33",
-    "@sphereon/ui-components.core": "0.4.1-unstable.2+64023ed",
+    "@sphereon/ssi-sdk.data-store": "0.34.1-feature.SSISDK.45.92",
+    "@sphereon/ssi-types": "0.34.1-feature.SSISDK.45.92",
+    "@sphereon/ui-components.core": "0.4.1-unstable.20+468cc9f",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",
@@ -55,12 +63,11 @@
     "@tailwindcss/cli": "^4.1.11",
     "@types/react": "~18.3.18",
     "ajv": "^8.12.0",
-    "cpy-cli": "^5.0.0",
     "tailwindcss": "^4.1.11",
     "typescript": "4.9.5"
   },
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "64023ed017c2754d1fcfef36d3f3dee0bf428777"
+  "gitHead": "468cc9fff0eeee6c738de603ff454672622383db"
 }