From 7086435b7bb8116e86175bf235e5583102157c72 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:12:35 +0200 Subject: [PATCH 01/17] chore: InformationRequestView prototype for testing --- .../src/localization/translations/en.json | 4 + .../views/InformationRequestView/index.tsx | 75 +++++++++++++++++ .../InformationRequestView/index.ts | 82 +++++++++++++++++++ .../src/styles/components/components/index.ts | 1 + 4 files changed, 162 insertions(+) create mode 100644 packages/ssi-react/src/components/views/InformationRequestView/index.tsx create mode 100644 packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts diff --git a/packages/core/src/localization/translations/en.json b/packages/core/src/localization/translations/en.json index 9302536..0a86677 100644 --- a/packages/core/src/localization/translations/en.json +++ b/packages/core/src/localization/translations/en.json @@ -29,6 +29,10 @@ "credential_issuance_wizard_credential_type_label": "Credential type", "credential_issuance_wizard_evidence_title": "Evidence", "credential_issuance_wizard_evidence_description": "Optionally, you can upload one or more documents or files that you want to attach to this credential.", + "information_request_title": "Information request", + "information_request_purpose_label": "Purpose", + "information_request_form_label": "Request form", + "information_request_interacting_with": "You're interacting with Relying party {{partyName}}", "file_permission_public_label": "Public", "file_permission_private_label": "Private", "credentials_view_item_expires_on": "Expires on", diff --git a/packages/ssi-react/src/components/views/InformationRequestView/index.tsx b/packages/ssi-react/src/components/views/InformationRequestView/index.tsx new file mode 100644 index 0000000..4acbf47 --- /dev/null +++ b/packages/ssi-react/src/components/views/InformationRequestView/index.tsx @@ -0,0 +1,75 @@ +import React, {FC, ReactElement} from 'react' +import {CredentialStatus, ImageAttributes, Localization} from '@sphereon/ui-components.core' +import { + InformationRequestViewCardSubtitle as CardSubtitle, + InformationRequestViewCardTextContainer as CardTextContainer, + InformationRequestViewCardTitle as CardTitle, + InformationRequestViewContainerStyled as Container, + InformationRequestViewContentContainerStyled as ContentContainer, + InformationRequestViewDescriptionStyled, + InformationRequestViewRPCardContainerStyled as RPCardContainer, + InformationRequestViewFormContainerStyled as FormContainer, + InformationRequestViewFormTitleStyled as FormTitle, + InformationRequestViewLogoContainerStyled as LogoContainer, + InformationRequestViewPurposeContainerStyled as PurposeContainer, + InformationRequestViewPurposeTitleStyled as PurposeTitle, +} from '../../../styles/components' +import SSIStatusLabel from '../../labels/SSIStatusLabel' +import SSILogo from '../../assets/logos/SSILogo' + +type Props = { + relyingPartyName: string; + purpose: string; + credentialStatus: CredentialStatus; + credentialTitle?: string + credentialSubtitle?: string + uri?: string; + logo?: ImageAttributes + textColor?: string +}; + +const InformationRequestView: FC = (args: Props): ReactElement => { + const { + relyingPartyName, + purpose, + uri, + credentialStatus, + logo, + textColor, + } = args + + return ( + + + + {Localization.translate('information_request_title')} + {purpose} + + + {Localization.translate('information_request_form_label')} + {Localization.translate('information_request_interacting_with', { + partyName: relyingPartyName, + })} + + + + + + + + {Localization.translate('information_request_relying_party_name_label')} + {relyingPartyName} + {uri && ( + {uri} + ) + } + + + + + + + ) +} + +export default InformationRequestView diff --git a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts new file mode 100644 index 0000000..736d22d --- /dev/null +++ b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts @@ -0,0 +1,82 @@ +import styled from 'styled-components' +import {SSITextH1Styled, SSITextH2Styled, SSITextH4Styled} from '../../../fonts' + +export const InformationRequestViewContainerStyled = styled.div` + display: flex; + flex-direction: column; + gap: 24px; + width: 100%; + max-width: 800px; + margin: 0 auto; + padding: 24px; +` + +export const InformationRequestViewContentContainerStyled = styled.div` + display: flex; + flex-direction: column; + gap: 24px; +` + +export const InformationRequestViewPurposeContainerStyled = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +` + +export const InformationRequestViewPurposeTitleStyled = styled(SSITextH1Styled)` + text-align: left; +` + +export const InformationRequestViewDescriptionStyled = styled(SSITextH2Styled)` + text-align: left; + font-weight: normal; +` + +export const InformationRequestViewFormContainerStyled = styled.div` + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + border: 1px solid #e0e0e0; + border-radius: 8px; + background-color: #fafafa; +` + +export const InformationRequestViewFormTitleStyled = styled(SSITextH2Styled)` + text-align: left; +` + +export const InformationRequestViewFormDetailsContainerStyled = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +` + +export const InformationRequestViewLogoContainerStyled = styled.div` + margin: 0 12px 0 9px; +` + +export const InformationRequestViewRPCardContainerStyled = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; + padding: 16px; + border: 1px solid #e0e0e0; + border-radius: 8px; + background-color: #ffffff; +`; + + +export const InformationRequestViewCardTextContainer = styled.div` + flex-grow: 1; +`; + +export const InformationRequestViewCardTitle = styled(SSITextH4Styled)` + font-weight: bold; +`; + +export const InformationRequestViewCardSubtitle = styled(SSITextH4Styled)` + font-weight: normal; + color: #555; +`; diff --git a/packages/ssi-react/src/styles/components/components/index.ts b/packages/ssi-react/src/styles/components/components/index.ts index 8bbf2f3..6f26223 100644 --- a/packages/ssi-react/src/styles/components/components/index.ts +++ b/packages/ssi-react/src/styles/components/components/index.ts @@ -27,3 +27,4 @@ export * from './Pagination' export * from './CredentialViewItem' export * from './JSONDataView' export * from './TextInputField' +export * from './InformationRequestView' From 1b2049ed6b38ee75c4959b6ebc8ec7cc530d02d3 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:15:15 +0200 Subject: [PATCH 02/17] chore: lerna version up --- lerna.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lerna.json b/lerna.json index 3c7592a..60390e9 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*"], - "version": "0.2.0", + "version": "0.2.1", "npmClient": "pnpm", "command": { "publish": { From d313c68a17f05dac02787b6c63379c3448ed299f Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:19:48 +0200 Subject: [PATCH 03/17] chore: lerna version up --- lerna.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lerna.json b/lerna.json index 60390e9..28cc2fd 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*"], - "version": "0.2.1", + "version": "0.2.2", "npmClient": "pnpm", "command": { "publish": { From 7104a28f1549d022c833aa7ac680c3152cb05626 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:24:57 +0200 Subject: [PATCH 04/17] feat: components for SIOP VP flow screens --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index ece252f..3bcb093 100644 --- a/package.json +++ b/package.json @@ -47,3 +47,4 @@ } } } + From 8f6e39a4dd62fc3e97dbccdce094f8dd681bafc3 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:27:23 +0200 Subject: [PATCH 05/17] chore: dummy commit for lerna --- lerna.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lerna.json b/lerna.json index 28cc2fd..3c7592a 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*"], - "version": "0.2.2", + "version": "0.2.0", "npmClient": "pnpm", "command": { "publish": { From 8d933afb67b94366913fc0485ee15b21e6a99e8c Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:27:43 +0200 Subject: [PATCH 06/17] chore: dummy commit for lerna --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 3bcb093..7d1d1a1 100644 --- a/package.json +++ b/package.json @@ -48,3 +48,4 @@ } } + From a577f37a52e9a97c1bba36e681f81a4fa86ef234 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:27:53 +0200 Subject: [PATCH 07/17] chore: dummy commit for lerna --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 7d1d1a1..a37767c 100644 --- a/package.json +++ b/package.json @@ -49,3 +49,4 @@ } + From 1098b84954c5945f88053c1ac2d1142fc9fabd86 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:27:58 +0200 Subject: [PATCH 08/17] chore: dummy commit for lerna --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index a37767c..7d1d1a1 100644 --- a/package.json +++ b/package.json @@ -49,4 +49,3 @@ } - From 534c930a4ae334d324962794e72aca0190dfc246 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:28:02 +0200 Subject: [PATCH 09/17] chore: dummy commit for lerna --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 7d1d1a1..3bcb093 100644 --- a/package.json +++ b/package.json @@ -48,4 +48,3 @@ } } - From 1d468a86865cb5b02251891ab4d93d9d34ac370d Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:28:06 +0200 Subject: [PATCH 10/17] chore: dummy commit for lerna --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 3bcb093..ece252f 100644 --- a/package.json +++ b/package.json @@ -47,4 +47,3 @@ } } } - From d51b7933fbb6682fd52a6401b64229e555035a07 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:28:13 +0200 Subject: [PATCH 11/17] chore: dummy commit for lerna --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index ece252f..3bcb093 100644 --- a/package.json +++ b/package.json @@ -47,3 +47,4 @@ } } } + From 430001815157ebe09ea6b10fc66a58068ebbe3e0 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Wed, 26 Jun 2024 17:31:36 +0200 Subject: [PATCH 12/17] chore: export InformationRequestView --- packages/ssi-react/src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/ssi-react/src/index.ts b/packages/ssi-react/src/index.ts index 0722866..eeb1ee9 100644 --- a/packages/ssi-react/src/index.ts +++ b/packages/ssi-react/src/index.ts @@ -45,6 +45,7 @@ import JSONDataView from './components/views/JSONDataView' 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 {Row} from '@tanstack/react-table' @@ -104,4 +105,5 @@ export { TextInputField, WarningImage, FormView, + InformationRequestView, } From 31bebe3cba264d481e8e18618b47c352c50d446c Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Fri, 28 Jun 2024 00:18:17 +0200 Subject: [PATCH 13/17] chore: InformationRequestView tuning --- .../views/InformationRequestView/index.tsx | 30 ++++++++++++------- .../InformationRequestView/index.ts | 22 +++++++++++--- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/packages/ssi-react/src/components/views/InformationRequestView/index.tsx b/packages/ssi-react/src/components/views/InformationRequestView/index.tsx index 4acbf47..bad947d 100644 --- a/packages/ssi-react/src/components/views/InformationRequestView/index.tsx +++ b/packages/ssi-react/src/components/views/InformationRequestView/index.tsx @@ -6,13 +6,15 @@ import { InformationRequestViewCardTitle as CardTitle, InformationRequestViewContainerStyled as Container, InformationRequestViewContentContainerStyled as ContentContainer, - InformationRequestViewDescriptionStyled, - InformationRequestViewRPCardContainerStyled as RPCardContainer, + InformationRequestViewDescriptionStyled as Description, InformationRequestViewFormContainerStyled as FormContainer, - InformationRequestViewFormTitleStyled as FormTitle, + InformationRequestViewFormContainerStyled as PurposeContainer, + InformationRequestViewHeaderContainerStyled as HeaderContainer, InformationRequestViewLogoContainerStyled as LogoContainer, - InformationRequestViewPurposeContainerStyled as PurposeContainer, - InformationRequestViewPurposeTitleStyled as PurposeTitle, + InformationRequestViewRPCardContainerStyled as RPCardContainer, + InformationRequestViewTitleStyled as HeaderTitle, + InformationRequestViewParagraphStyled as PurposeTitle, + InformationRequestViewParagraphStyled as FormTitle, } from '../../../styles/components' import SSIStatusLabel from '../../labels/SSIStatusLabel' import SSILogo from '../../assets/logos/SSILogo' @@ -41,24 +43,30 @@ const InformationRequestView: FC = (args: Props): ReactElement => { return ( + + {Localization.translate('information_request_title')} + {Localization.translate('information_request_header_description', { + partyName: relyingPartyName, + })} + - {Localization.translate('information_request_title')} - {purpose} + {Localization.translate('information_request_purpose_label')} + {purpose} {Localization.translate('information_request_form_label')} - {Localization.translate('information_request_interacting_with', { + {Localization.translate('information_request_interacting_with', { partyName: relyingPartyName, })} - + - {Localization.translate('information_request_relying_party_name_label')} - {relyingPartyName} + {relyingPartyName} + Verifier {uri && ( {uri} ) diff --git a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts index 736d22d..44db70a 100644 --- a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts +++ b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts @@ -1,5 +1,5 @@ import styled from 'styled-components' -import {SSITextH1Styled, SSITextH2Styled, SSITextH4Styled} from '../../../fonts' +import {SSITextH1Styled, SSITextH2Styled, SSITextH3Styled, SSITextH4Styled} from '../../../fonts' export const InformationRequestViewContainerStyled = styled.div` display: flex; @@ -15,19 +15,33 @@ export const InformationRequestViewContentContainerStyled = styled.div` display: flex; flex-direction: column; gap: 24px; + margin-right: auto; ` -export const InformationRequestViewPurposeContainerStyled = styled.div` +export const InformationRequestViewHeaderContainerStyled = styled.div` display: flex; flex-direction: column; gap: 8px; ` +export const InformationRequestViewPurposeContainerStyled = styled.div` + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + border: 1px solid #e0e0e0; + border-radius: 8px; + background-color: #fafafa;` -export const InformationRequestViewPurposeTitleStyled = styled(SSITextH1Styled)` +export const InformationRequestViewTitleStyled = styled(SSITextH1Styled)` text-align: left; + font-weight: bold; ` -export const InformationRequestViewDescriptionStyled = styled(SSITextH2Styled)` +export const InformationRequestViewParagraphStyled = styled(SSITextH2Styled)` + text-align: left; + font-weight: bold; +` +export const InformationRequestViewDescriptionStyled = styled(SSITextH3Styled)` text-align: left; font-weight: normal; ` From 06df6866e8463673a9e4689fe305ff63ee27c196 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Fri, 28 Jun 2024 00:20:59 +0200 Subject: [PATCH 14/17] chore: dummy commit for lerna --- packages/core/src/localization/translations/en.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/localization/translations/en.json b/packages/core/src/localization/translations/en.json index 0a86677..c8db5c3 100644 --- a/packages/core/src/localization/translations/en.json +++ b/packages/core/src/localization/translations/en.json @@ -30,6 +30,7 @@ "credential_issuance_wizard_evidence_title": "Evidence", "credential_issuance_wizard_evidence_description": "Optionally, you can upload one or more documents or files that you want to attach to this credential.", "information_request_title": "Information request", + "information_request_header_description": "{{partyName}} would like to receive the following information from you for verification", "information_request_purpose_label": "Purpose", "information_request_form_label": "Request form", "information_request_interacting_with": "You're interacting with Relying party {{partyName}}", From 1b4c02b59752cff7c5c51a88712131bcffb50e15 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Fri, 28 Jun 2024 14:37:48 +0200 Subject: [PATCH 15/17] chore: tuning VP screen --- .../views/InformationRequestView/index.tsx | 2 +- .../components/InformationRequestView/index.ts | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/ssi-react/src/components/views/InformationRequestView/index.tsx b/packages/ssi-react/src/components/views/InformationRequestView/index.tsx index bad947d..15f04c1 100644 --- a/packages/ssi-react/src/components/views/InformationRequestView/index.tsx +++ b/packages/ssi-react/src/components/views/InformationRequestView/index.tsx @@ -6,7 +6,6 @@ import { InformationRequestViewCardTitle as CardTitle, InformationRequestViewContainerStyled as Container, InformationRequestViewContentContainerStyled as ContentContainer, - InformationRequestViewDescriptionStyled as Description, InformationRequestViewFormContainerStyled as FormContainer, InformationRequestViewFormContainerStyled as PurposeContainer, InformationRequestViewHeaderContainerStyled as HeaderContainer, @@ -15,6 +14,7 @@ import { InformationRequestViewTitleStyled as HeaderTitle, InformationRequestViewParagraphStyled as PurposeTitle, InformationRequestViewParagraphStyled as FormTitle, + InformationRequestViewDescriptionStyled as Description, } from '../../../styles/components' import SSIStatusLabel from '../../labels/SSIStatusLabel' import SSILogo from '../../assets/logos/SSILogo' diff --git a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts index 44db70a..18c79e2 100644 --- a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts +++ b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts @@ -5,8 +5,6 @@ export const InformationRequestViewContainerStyled = styled.div` display: flex; flex-direction: column; gap: 24px; - width: 100%; - max-width: 800px; margin: 0 auto; padding: 24px; ` @@ -15,6 +13,7 @@ export const InformationRequestViewContentContainerStyled = styled.div` display: flex; flex-direction: column; gap: 24px; + width: 500px; /* FIXME */ margin-right: auto; ` @@ -30,7 +29,7 @@ export const InformationRequestViewPurposeContainerStyled = styled.div` padding: 16px; border: 1px solid #e0e0e0; border-radius: 8px; - background-color: #fafafa;` + background-color: #fbfbfb;` export const InformationRequestViewTitleStyled = styled(SSITextH1Styled)` text-align: left; @@ -46,6 +45,11 @@ export const InformationRequestViewDescriptionStyled = styled(SSITextH3Styled)` font-weight: normal; ` +export const InformationRequestViewSubSectionStyled = styled(SSITextH3Styled)` + text-align: left; + font-weight: bold; +` + export const InformationRequestViewFormContainerStyled = styled.div` display: flex; flex-direction: column; @@ -53,7 +57,7 @@ export const InformationRequestViewFormContainerStyled = styled.div` padding: 16px; border: 1px solid #e0e0e0; border-radius: 8px; - background-color: #fafafa; + background-color: #fbfbfb; ` export const InformationRequestViewFormTitleStyled = styled(SSITextH2Styled)` From 26c17d23568ff3cc37e627e01ad36ae9b3bde6c2 Mon Sep 17 00:00:00 2001 From: sanderPostma Date: Fri, 28 Jun 2024 14:46:57 +0200 Subject: [PATCH 16/17] chore: dummy commit lerna --- .../styles/components/components/InformationRequestView/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts index 18c79e2..69f0e7a 100644 --- a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts +++ b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts @@ -17,6 +17,7 @@ export const InformationRequestViewContentContainerStyled = styled.div` margin-right: auto; ` + export const InformationRequestViewHeaderContainerStyled = styled.div` display: flex; flex-direction: column; From 9cddb26b8a2dc52d5bdab44c05ae7b01863c23b1 Mon Sep 17 00:00:00 2001 From: Niels Klomp Date: Sun, 7 Jul 2024 22:15:04 +0200 Subject: [PATCH 17/17] chore: merge in develop and prettier --- packages/core/src/styles/ssi/colors.ts | 4 +- packages/core/src/types/base64/index.ts | 6 +- packages/core/src/types/credential/index.ts | 2 +- packages/core/src/utils/FileUtils.ts | 34 +-- packages/core/src/utils/ImageUtils.ts | 2 +- packages/core/src/utils/TypeUtils.ts | 36 +-- .../buttons/SecondaryButton/index.tsx | 9 +- packages/ssi-react/src/@types/index.d.ts | 4 +- .../assets/icons/CopyIcon/index.tsx | 3 +- .../assets/icons/CrossIcon/index.tsx | 4 +- .../assets/icons/DocumentIcon/index.tsx | 2 +- .../assets/icons/ImageIcon/index.tsx | 34 +-- .../assets/icons/ViewIcon/index.tsx | 9 +- .../assets/images/WarningImage/index.tsx | 6 +- .../placeholders/PersonPlaceholder/index.tsx | 6 +- .../components/buttons/IconButton/index.tsx | 10 +- .../src/components/fields/ComboBox/index.tsx | 15 +- .../fields/DragAndDropBox/index.tsx | 14 +- .../components/fields/FileSelection/index.tsx | 70 ++--- .../JSONForms/PassportPhotoControl/index.tsx | 125 ++++----- .../components/fields/SSICheckbox/index.tsx | 2 +- .../fields/TextInputField/index.tsx | 29 +- .../ProgressStepIndicator/index.tsx | 12 +- .../CredentialIssuanceWizardView/index.tsx | 213 +++++++-------- .../views/CredentialMiniCardView/index.tsx | 10 +- .../views/CredentialViewItem/index.tsx | 110 ++++---- .../src/components/views/FormView/index.tsx | 84 +++--- .../views/InformationRequestView/index.tsx | 39 ++- .../components/views/JSONDataView/index.tsx | 256 +++++++++--------- .../components/views/SSITableView/index.tsx | 23 +- .../ssi-react/src/renders/jsonFormsRenders.ts | 10 +- .../CredentialIssuanceWizardView/index.ts | 6 +- .../components/CredentialViewItem/index.tsx | 6 +- .../components/DragAndDropBox/index.ts | 2 +- .../components/FileSelectionField/index.ts | 2 +- .../InformationRequestView/index.ts | 89 +++--- .../components/JSONDataView/index.ts | 9 +- .../components/PassportPhotoControl/index.ts | 10 +- .../components/ProgressStepIndicator/index.ts | 13 +- .../components/SSITabViewHeader/index.ts | 2 +- .../components/SSITableView/index.ts | 18 +- .../components/SecondaryButton/index.ts | 3 +- packages/ssi-react/src/types/field/index.ts | 23 +- packages/ssi-react/src/types/table/index.ts | 10 +- packages/ssi-react/src/types/view/index.ts | 18 +- packages/ssi-react/src/utils/FileUtils.ts | 10 +- packages/ssi-react/src/utils/ImageUtils.ts | 24 +- 47 files changed, 649 insertions(+), 779 deletions(-) diff --git a/packages/core/src/styles/ssi/colors.ts b/packages/core/src/styles/ssi/colors.ts index 08922f1..d060736 100644 --- a/packages/core/src/styles/ssi/colors.ts +++ b/packages/core/src/styles/ssi/colors.ts @@ -70,7 +70,7 @@ export const borderColors: Record = { light: '#E3E3E3', lightGrey: '#ACACAC', darkGrey: '#303030', - purple: '#7276F7' + purple: '#7276F7', } type Profile = 100 | 200 | 300 | 400 | 500 @@ -107,7 +107,7 @@ export const elementColors: Record = { purple: '#7276F7', 100: '#F25409', 200: '#F78854', - 300: '#8D9099' + 300: '#8D9099', } type Button = 100 diff --git a/packages/core/src/types/base64/index.ts b/packages/core/src/types/base64/index.ts index 0cb12ea..c86ff61 100644 --- a/packages/core/src/types/base64/index.ts +++ b/packages/core/src/types/base64/index.ts @@ -1,5 +1,5 @@ export type ParsedBase64Uri = { - base64Uri: string - base64: string - mimeType: string + base64Uri: string + base64: string + mimeType: string } diff --git a/packages/core/src/types/credential/index.ts b/packages/core/src/types/credential/index.ts index dfc9064..b53ec9d 100644 --- a/packages/core/src/types/credential/index.ts +++ b/packages/core/src/types/credential/index.ts @@ -2,7 +2,7 @@ export enum CredentialStatus { VALID = 'valid', EXPIRED = 'expired', REVOKED = 'revoked', - DRAFT = 'draft' + DRAFT = 'draft', } export enum IssuerStatus { diff --git a/packages/core/src/utils/FileUtils.ts b/packages/core/src/utils/FileUtils.ts index 314538d..c08bf96 100644 --- a/packages/core/src/utils/FileUtils.ts +++ b/packages/core/src/utils/FileUtils.ts @@ -1,24 +1,24 @@ -import {ParsedBase64Uri} from '../types'; +import {ParsedBase64Uri} from '../types' export const getFileSizeDisplay = (bytes: number): string => { - if (bytes < 1024) { - return `${bytes} B` - } else if (bytes <= 1024 * 1024) { - return `${(bytes / 1024).toFixed(1)} KB` - } else if (bytes <= 1024 * 1024 * 1024) { - return `${(bytes / (1024 * 1024)).toFixed(1)} MB` - } else { - return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB` - } + if (bytes < 1024) { + return `${bytes} B` + } else if (bytes <= 1024 * 1024) { + return `${(bytes / 1024).toFixed(1)} KB` + } else if (bytes <= 1024 * 1024 * 1024) { + return `${(bytes / (1024 * 1024)).toFixed(1)} MB` + } else { + return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB` + } } export const parseBase64Uri = (base64Uri: string): ParsedBase64Uri => { - const base64Parts = base64Uri.split(';base64,'); - const mimeType = base64Parts[0].replace('data:', '') + const base64Parts = base64Uri.split(';base64,') + const mimeType = base64Parts[0].replace('data:', '') - return { - base64Uri, - base64: base64Parts[1], - mimeType - } + return { + base64Uri, + base64: base64Parts[1], + mimeType, + } } diff --git a/packages/core/src/utils/ImageUtils.ts b/packages/core/src/utils/ImageUtils.ts index 2123dff..a89a4ed 100644 --- a/packages/core/src/utils/ImageUtils.ts +++ b/packages/core/src/utils/ImageUtils.ts @@ -1,4 +1,4 @@ -import {base64UriValidationRegex} from '../regexes'; +import {base64UriValidationRegex} from '../regexes' export const calculateAspectRatio = (width: number, height: number): number => { return width / height diff --git a/packages/core/src/utils/TypeUtils.ts b/packages/core/src/utils/TypeUtils.ts index 24f7978..a552b18 100644 --- a/packages/core/src/utils/TypeUtils.ts +++ b/packages/core/src/utils/TypeUtils.ts @@ -1,25 +1,25 @@ export const isBoolean = (value: unknown): boolean => { - if (typeof value === 'boolean') { - return true - } else if (typeof value === 'string') { - const lowercaseValue = value.toLowerCase() - return lowercaseValue === 'true' || lowercaseValue === 'false' - } else { - return false - } + if (typeof value === 'boolean') { + return true + } else if (typeof value === 'string') { + const lowercaseValue = value.toLowerCase() + return lowercaseValue === 'true' || lowercaseValue === 'false' + } else { + return false + } } export const parseToBoolean = (value: unknown): boolean | null => { - if (typeof value === 'boolean') { - return value - } else if (typeof value === 'string') { - const lowercaseValue = value.toLowerCase() - if (lowercaseValue === 'true') { - return true - } else if (lowercaseValue === 'false') { - return false - } + if (typeof value === 'boolean') { + return value + } else if (typeof value === 'string') { + const lowercaseValue = value.toLowerCase() + if (lowercaseValue === 'true') { + return true + } else if (lowercaseValue === 'false') { + return false } + } - return null + return null } diff --git a/packages/ssi-react-native/src/components/buttons/SecondaryButton/index.tsx b/packages/ssi-react-native/src/components/buttons/SecondaryButton/index.tsx index 2648f34..4e7d892 100644 --- a/packages/ssi-react-native/src/components/buttons/SecondaryButton/index.tsx +++ b/packages/ssi-react-native/src/components/buttons/SecondaryButton/index.tsx @@ -41,14 +41,7 @@ const SecondaryButton: FC = (props: Props): JSX.Element => { style={{ ...(disabled && {opacity: OpacityStyleEnum.DISABLED}), }}> - - {caption && - {caption} - } - - }> + {caption && {caption}}}> {caption} diff --git a/packages/ssi-react/src/@types/index.d.ts b/packages/ssi-react/src/@types/index.d.ts index 49ef63e..f047902 100644 --- a/packages/ssi-react/src/@types/index.d.ts +++ b/packages/ssi-react/src/@types/index.d.ts @@ -1,4 +1,4 @@ declare module 'uint8arrays' { - export function fromString(input: string, encoding?: string): Uint8Array; - // Add other functions from the uint8arrays module if needed + export function fromString(input: string, encoding?: string): Uint8Array + // Add other functions from the uint8arrays module if needed } diff --git a/packages/ssi-react/src/components/assets/icons/CopyIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/CopyIcon/index.tsx index 2474f81..8f3c617 100644 --- a/packages/ssi-react/src/components/assets/icons/CopyIcon/index.tsx +++ b/packages/ssi-react/src/components/assets/icons/CopyIcon/index.tsx @@ -16,7 +16,8 @@ const CopyIcon: FC = (props: Props): ReactElement => { + fill={color} + /> ) diff --git a/packages/ssi-react/src/components/assets/icons/CrossIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/CrossIcon/index.tsx index aa5f493..668762e 100644 --- a/packages/ssi-react/src/components/assets/icons/CrossIcon/index.tsx +++ b/packages/ssi-react/src/components/assets/icons/CrossIcon/index.tsx @@ -14,8 +14,8 @@ const CrossIcon: FC = (props: Props): ReactElement => {
diff --git a/packages/ssi-react/src/components/assets/icons/DocumentIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/DocumentIcon/index.tsx index 0aba78b..3fa2a65 100644 --- a/packages/ssi-react/src/components/assets/icons/DocumentIcon/index.tsx +++ b/packages/ssi-react/src/components/assets/icons/DocumentIcon/index.tsx @@ -1,5 +1,5 @@ import React, {CSSProperties, FC, ReactElement} from 'react' -import {fontColors} from '@sphereon/ui-components.core'; +import {fontColors} from '@sphereon/ui-components.core' export type Props = { width?: number diff --git a/packages/ssi-react/src/components/assets/icons/ImageIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/ImageIcon/index.tsx index 6bdc6fc..9d57db8 100644 --- a/packages/ssi-react/src/components/assets/icons/ImageIcon/index.tsx +++ b/packages/ssi-react/src/components/assets/icons/ImageIcon/index.tsx @@ -2,27 +2,27 @@ import React, {CSSProperties, FC, ReactElement} from 'react' import {fontColors} from '@sphereon/ui-components.core' type Props = { - width?: number - height?: number - color?: string - style?: CSSProperties + width?: number + height?: number + color?: string + style?: CSSProperties } const ImageIcon: FC = (props: Props): ReactElement => { - const {width = 38, height = 30, color = fontColors.dark, style} = props + const {width = 38, height = 30, color = fontColors.dark, style} = props - return ( -
- - - -
- ) + return ( +
+ + + +
+ ) } export default ImageIcon diff --git a/packages/ssi-react/src/components/assets/icons/ViewIcon/index.tsx b/packages/ssi-react/src/components/assets/icons/ViewIcon/index.tsx index 59550f0..aec0880 100644 --- a/packages/ssi-react/src/components/assets/icons/ViewIcon/index.tsx +++ b/packages/ssi-react/src/components/assets/icons/ViewIcon/index.tsx @@ -14,9 +14,12 @@ const ViewIcon: FC = (props: Props): ReactElement => { return (
- +
) diff --git a/packages/ssi-react/src/components/assets/images/WarningImage/index.tsx b/packages/ssi-react/src/components/assets/images/WarningImage/index.tsx index 93808e9..935494f 100644 --- a/packages/ssi-react/src/components/assets/images/WarningImage/index.tsx +++ b/packages/ssi-react/src/components/assets/images/WarningImage/index.tsx @@ -7,7 +7,7 @@ export type Props = { } const WarningImage: FC = (props: Props): JSX.Element => { - const {height = 162, width = 233, style} = props; + const {height = 162, width = 233, style} = props return (
@@ -95,7 +95,7 @@ const WarningImage: FC = (props: Props): JSX.Element => {
- ); -}; + ) +} export default WarningImage diff --git a/packages/ssi-react/src/components/assets/placeholders/PersonPlaceholder/index.tsx b/packages/ssi-react/src/components/assets/placeholders/PersonPlaceholder/index.tsx index 69195b4..401f7b2 100644 --- a/packages/ssi-react/src/components/assets/placeholders/PersonPlaceholder/index.tsx +++ b/packages/ssi-react/src/components/assets/placeholders/PersonPlaceholder/index.tsx @@ -15,9 +15,9 @@ const PersonPlaceholder: FC = (props: Props): ReactElement => {
diff --git a/packages/ssi-react/src/components/buttons/IconButton/index.tsx b/packages/ssi-react/src/components/buttons/IconButton/index.tsx index fba6636..391eb6a 100644 --- a/packages/ssi-react/src/components/buttons/IconButton/index.tsx +++ b/packages/ssi-react/src/components/buttons/IconButton/index.tsx @@ -23,16 +23,14 @@ const IconButton: FC = (props: Props): ReactElement => { return ( + style={{ + ...(disabled && {opacity: OpacityStyleEnum.DISABLED}), + }} + onClick={onClick}> {getIcon(icon, iconColor)} {caption && {caption}} ) } - export default IconButton diff --git a/packages/ssi-react/src/components/fields/ComboBox/index.tsx b/packages/ssi-react/src/components/fields/ComboBox/index.tsx index a9e88f0..ef80443 100644 --- a/packages/ssi-react/src/components/fields/ComboBox/index.tsx +++ b/packages/ssi-react/src/components/fields/ComboBox/index.tsx @@ -25,14 +25,7 @@ type InlineOption = { } const ComboBox = (props: Props): ReactElement => { - const { - onChange, - noOptionsMessage, - placeholder, - defaultValue, - inlineOption, - options = [] - } = props + const {onChange, noOptionsMessage, placeholder, defaultValue, inlineOption, options = []} = props const [value, setValue] = React.useState(props.value) const creatableProps = inlineOption @@ -46,8 +39,8 @@ const ComboBox = (props: Props): ReactElement => { : {} const onValueChange = async (newValue: any): Promise => { - setValue(newValue) - await onChange?.(newValue) + setValue(newValue) + await onChange?.(newValue) } return ( @@ -68,7 +61,7 @@ const ComboBox = (props: Props): ReactElement => { }), menu: (provided: CSSObjectWithLabel) => ({ ...provided, - maxWidth: 455 + maxWidth: 455, }), option: (provided: CSSObjectWithLabel, state) => ({ ...provided, diff --git a/packages/ssi-react/src/components/fields/DragAndDropBox/index.tsx b/packages/ssi-react/src/components/fields/DragAndDropBox/index.tsx index b9a129d..0763a3b 100644 --- a/packages/ssi-react/src/components/fields/DragAndDropBox/index.tsx +++ b/packages/ssi-react/src/components/fields/DragAndDropBox/index.tsx @@ -4,8 +4,8 @@ import { DragAndDropBoxHiddenInputStyled as HiddenInput, DragAndDropBoxCaptionContainerStyled as CaptionContainer, SSITextH2Styled as Caption, - DragAndDropBoxDescriptionStyled as Description -} from '../../../styles'; + DragAndDropBoxDescriptionStyled as Description, +} from '../../../styles' type Props = { caption: string @@ -45,14 +45,8 @@ const DragAndDropBox: React.FC = (props: Props): ReactElement => { } return ( - - + + {caption} {description} diff --git a/packages/ssi-react/src/components/fields/FileSelection/index.tsx b/packages/ssi-react/src/components/fields/FileSelection/index.tsx index cf586dc..48826a7 100644 --- a/packages/ssi-react/src/components/fields/FileSelection/index.tsx +++ b/packages/ssi-react/src/components/fields/FileSelection/index.tsx @@ -1,9 +1,9 @@ import React, {CSSProperties, ReactElement} from 'react' -import { getFileSizeDisplay, Localization } from '@sphereon/ui-components.core'; -import ComboBox from '../ComboBox'; -import DocumentIcon from '../../assets/icons/DocumentIcon'; -import ImageIcon from '../../assets/icons/ImageIcon'; -import CrossIcon from '../../assets/icons/CrossIcon'; +import {getFileSizeDisplay, Localization} from '@sphereon/ui-components.core' +import ComboBox from '../ComboBox' +import DocumentIcon from '../../assets/icons/DocumentIcon' +import ImageIcon from '../../assets/icons/ImageIcon' +import CrossIcon from '../../assets/icons/CrossIcon' import { FileSelectionFieldContainerStyled as Container, FileSelectionFieldContentContainerStyled as ContentContainer, @@ -14,11 +14,10 @@ import { FileSelectionFieldFileDataContainerStyled as FileDataContainer, FileSelectionFieldFileNameCaptionStyled as FileNameCaption, FileSelectionFieldFileSizeCaptionStyled as FileSizeCaption, - FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer -} from '../../../styles'; + FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer, +} from '../../../styles' import {AssetFilePermission, FileSelectionFieldType, ValueSelection} from '../../../types' - type Props = { file: File fileType?: FileSelectionFieldType @@ -34,14 +33,7 @@ const filePermissions: Array = [ ] const FileSelection: React.FC = (props: Props): ReactElement => { - const { - file, - fileType = FileSelectionFieldType.FILE, - permission, - onPermissionChange, - onRemove, - style - } = props + const {file, fileType = FileSelectionFieldType.FILE, permission, onPermissionChange, onRemove, style} = props const onChange = async (selection: ValueSelection): Promise => { if (onPermissionChange) { @@ -52,45 +44,43 @@ const FileSelection: React.FC = (props: Props): ReactElement => { return ( - - { getIcon(fileType) } - + {getIcon(fileType)} {file.name} {file.size && {getFileSizeDisplay(file.size)}} {permission && ( - - - style={{width: 152, marginLeft: 'auto'}} - defaultValue={filePermissions.find((selection: ValueSelection): boolean => selection.value === permission)} - onChange={onChange} - options={filePermissions} - /> - + + + style={{width: 152, marginLeft: 'auto'}} + defaultValue={filePermissions.find((selection: ValueSelection): boolean => selection.value === permission)} + onChange={onChange} + options={filePermissions} + /> + )} - { onRemove && - - - - - - - - } + {onRemove && ( + + + + + + + + )} ) } const getIcon = (fileType: FileSelectionFieldType): ReactElement => { - switch(fileType) { + switch (fileType) { case FileSelectionFieldType.FILE: - return + return case FileSelectionFieldType.IMAGE: - return + return default: - return
+ return
} } diff --git a/packages/ssi-react/src/components/fields/JSONForms/PassportPhotoControl/index.tsx b/packages/ssi-react/src/components/fields/JSONForms/PassportPhotoControl/index.tsx index 89aa8b2..b761e18 100644 --- a/packages/ssi-react/src/components/fields/JSONForms/PassportPhotoControl/index.tsx +++ b/packages/ssi-react/src/components/fields/JSONForms/PassportPhotoControl/index.tsx @@ -1,85 +1,66 @@ -import React, {FC, ReactElement, useState} from 'react'; +import React, {FC, ReactElement, useState} from 'react' +import {and, isObjectControl, optionIs, RankedTester, rankWith} from '@jsonforms/core' +import {withJsonFormsControlProps} from '@jsonforms/react' +import {Localization, parseBase64Uri} from '@sphereon/ui-components.core' +import DragAndDropBox from '../../DragAndDropBox' +import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder' +import FileSelection from '../../FileSelection' +import {base64UriToFile} from '../../../../utils' import { - and, - isObjectControl, - optionIs, - RankedTester, - rankWith, -} from '@jsonforms/core'; -import { withJsonFormsControlProps } from '@jsonforms/react'; -import { Localization, parseBase64Uri } from '@sphereon/ui-components.core'; -import DragAndDropBox from '../../DragAndDropBox'; -import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder'; -import FileSelection from '../../FileSelection'; -import {base64UriToFile} from '../../../../utils'; -import { - PassportPhotoControlContainerStyled as Container, - PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, - PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, - PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage -} from '../../../../styles'; -import {FileSelectionFieldType, PassportPhoto, PassportPhotoControlData} from '../../../../types'; + PassportPhotoControlContainerStyled as Container, + PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, + PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, + PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage, +} from '../../../../styles' +import {FileSelectionFieldType, PassportPhoto, PassportPhotoControlData} from '../../../../types' type Props = { - data: PassportPhotoControlData - handleChange(path: string, value: any): void - path: string + data: PassportPhotoControlData + handleChange(path: string, value: any): void + path: string } const PassportPhotoControl: FC = (props: Props): ReactElement => { - const { data, handleChange, path } = props - const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri }); + const {data, handleChange, path} = props + const [image, setImage] = useState( + data && {file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri}, + ) - const onAddImage = async (file: File): Promise => { - const reader = new FileReader(); - reader.onload = (): void => { - const result = reader.result; - if (typeof result === 'string') { - const parsedBase64Uri = parseBase64Uri(result) - setImage({ file, base64Uri: result }) - handleChange(path, { fileName: file.name, mimeType: parsedBase64Uri.mimeType, base64Uri: result}) - } - }; - reader.readAsDataURL(file); + const onAddImage = async (file: File): Promise => { + const reader = new FileReader() + reader.onload = (): void => { + const result = reader.result + if (typeof result === 'string') { + const parsedBase64Uri = parseBase64Uri(result) + setImage({file, base64Uri: result}) + handleChange(path, {fileName: file.name, mimeType: parsedBase64Uri.mimeType, base64Uri: result}) + } } + reader.readAsDataURL(file) + } - const onRemoveImage = async (): Promise => { - setImage(undefined) - handleChange(path, undefined) - } + const onRemoveImage = async (): Promise => { + setImage(undefined) + handleChange(path, undefined) + } - return ( - - - - - { image - ? - : - } - - - { image && - - } - - ) + return ( + + + + + {image ? : } + + + {image && } + + ) } -export const passportPhotoControlTester: RankedTester = rankWith( - 3, - and( - isObjectControl, - optionIs('type', 'passportPhoto') - ) -); +export const passportPhotoControlTester: RankedTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto'))) -export default withJsonFormsControlProps(PassportPhotoControl); +export default withJsonFormsControlProps(PassportPhotoControl) diff --git a/packages/ssi-react/src/components/fields/SSICheckbox/index.tsx b/packages/ssi-react/src/components/fields/SSICheckbox/index.tsx index f5221ad..5fbff24 100644 --- a/packages/ssi-react/src/components/fields/SSICheckbox/index.tsx +++ b/packages/ssi-react/src/components/fields/SSICheckbox/index.tsx @@ -32,7 +32,7 @@ const SSICheckbox: FC = (props: IProps): JSX.Element => { selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, - style + style, } = props const [isChecked, setChecked] = React.useState(initialValue) const value = props.isChecked !== undefined ? props.isChecked : isChecked diff --git a/packages/ssi-react/src/components/fields/TextInputField/index.tsx b/packages/ssi-react/src/components/fields/TextInputField/index.tsx index 80dbfa0..d43edb5 100644 --- a/packages/ssi-react/src/components/fields/TextInputField/index.tsx +++ b/packages/ssi-react/src/components/fields/TextInputField/index.tsx @@ -1,9 +1,5 @@ import React, {ChangeEvent, CSSProperties, FC, ReactElement, useState} from 'react' -import { - TextFieldInputContainerStyled as Container, - TextFieldInputInputStyled as Input, - SSITextH2Styled as Label -} from '../../../styles' +import {TextFieldInputContainerStyled as Container, TextFieldInputInputStyled as Input, SSITextH2Styled as Label} from '../../../styles' type Props = { initialValue?: string @@ -16,35 +12,26 @@ type Props = { } const TextInputField: FC = (props: Props): ReactElement => { - const { - initialValue, - label, - placeholder, - maxLength, - onChangeValue, - style, - } = props - const [value, setValue] = React.useState(initialValue); - const [isFocused, setIsFocused] = useState(false); + const {initialValue, label, placeholder, maxLength, onChangeValue, style} = props + const [value, setValue] = React.useState(initialValue) + const [isFocused, setIsFocused] = useState(false) const onChange = async (event: ChangeEvent): Promise => { - setValue(event.target.value); + setValue(event.target.value) await onChangeValue?.(event.target.value) } const onFocus = (): void => { setIsFocused(true) - }; + } const onBlur = (): void => { setIsFocused(false) - }; + } return ( - {label && - - } + {label && } { - const { title, description, required = true } = step + const {title, description, required = true} = step // we calculate the row, because we are also adding rows for spacing between the step items const gridRowNumber: number = stepNumber * 2 - 1 @@ -55,14 +55,8 @@ const getStepRowElement = (stepNumber: number, status: StepStatus, step: Progres ...(status === StepStatus.COMPLETED && {color: fontColors.dark}), ...(status === StepStatus.NEXT && {color: fontColors.lightGrey}), }}> -
- {title} -
- {!required && - - {Localization.translate('optional_label')} - - } +
{title}
+ {!required && {Localization.translate('optional_label')}} )} {description && ( diff --git a/packages/ssi-react/src/components/views/CredentialIssuanceWizardView/index.tsx b/packages/ssi-react/src/components/views/CredentialIssuanceWizardView/index.tsx index fa67759..7fa5dc2 100644 --- a/packages/ssi-react/src/components/views/CredentialIssuanceWizardView/index.tsx +++ b/packages/ssi-react/src/components/views/CredentialIssuanceWizardView/index.tsx @@ -1,126 +1,119 @@ -import React, {FC, ReactElement, SyntheticEvent, useState} from 'react'; -import {Autocomplete, AutocompleteRenderInputParams, AutocompleteValue, TextField} from '@mui/material'; -import {Localization} from '@sphereon/ui-components.core'; -import FileSelection from '../../fields/FileSelection'; -import DragAndDropBox from '../../fields/DragAndDropBox'; +import React, {FC, ReactElement, SyntheticEvent, useState} from 'react' +import {Autocomplete, AutocompleteRenderInputParams, AutocompleteValue, TextField} from '@mui/material' +import {Localization} from '@sphereon/ui-components.core' +import FileSelection from '../../fields/FileSelection' +import DragAndDropBox from '../../fields/DragAndDropBox' import { - CredentialIssuanceWizardViewContainerStyled as Container, - CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, - CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, - CredentialIssuanceWizardViewFormContainerStyled as FormContainer, - CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, - CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, - CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, - SSITextH2SemiBoldStyled as EvidenceTitle, - CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, - SSITextH2Styled as EvidenceDescription, - CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer -} from '../../../styles'; + CredentialIssuanceWizardViewContainerStyled as Container, + CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, + CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, + CredentialIssuanceWizardViewFormContainerStyled as FormContainer, + CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, + CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, + CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, + SSITextH2SemiBoldStyled as EvidenceTitle, + CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, + SSITextH2Styled as EvidenceDescription, + CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer, +} from '../../../styles' -import {CredentialFormData, JSONFormState, CredentialFormSelectionType} from '../../../types'; -import FormView from "../FormView"; +import {CredentialFormData, JSONFormState, CredentialFormSelectionType} from '../../../types' +import FormView from '../FormView' type Props = { - credentialTypes: Array - onSelectCredentialTypeChange?: (credentialType: CredentialFormSelectionType) => Promise - onCredentialFormDataChange?: (credentialFormData: CredentialFormData) => Promise - credentialData?: Record + credentialTypes: Array + onSelectCredentialTypeChange?: (credentialType: CredentialFormSelectionType) => Promise + onCredentialFormDataChange?: (credentialFormData: CredentialFormData) => Promise + credentialData?: Record } const CredentialIssuanceWizardView: FC = (props: Props): ReactElement => { - const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props - const [selectedCredentialType, setSelectedCredentialType] = useState(null); - const [credentialInput, setCredentialInput] = useState(null); - const [evidence, setEvidence] = useState>([]); + const {credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange} = props + const [selectedCredentialType, setSelectedCredentialType] = useState(null) + const [credentialInput, setCredentialInput] = useState(null) + const [evidence, setEvidence] = useState>([]) - const onCredentialTypeChange = (event: SyntheticEvent, value: AutocompleteValue): void => { - setCredentialInput(null) - setEvidence([]); - setSelectedCredentialType(value); - onSelectCredentialTypeChange?.(value) - }; + const onCredentialTypeChange = (event: SyntheticEvent, value: AutocompleteValue): void => { + setCredentialInput(null) + setEvidence([]) + setSelectedCredentialType(value) + onSelectCredentialTypeChange?.(value) + } - const onCredentialFormInputChange = async (state: JSONFormState): Promise => { - setCredentialInput(state) - onCredentialFormDataChange?.({ ...state, evidence }) - }; + const onCredentialFormInputChange = async (state: JSONFormState): Promise => { + setCredentialInput(state) + onCredentialFormDataChange?.({...state, evidence}) + } - const onAddEvidence = async (file: File): Promise => { - // Cloning array to force rerender - const evidenceFiles = [...evidence, file] - setEvidence(evidenceFiles) - onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles }) - } + const onAddEvidence = async (file: File): Promise => { + // Cloning array to force rerender + const evidenceFiles = [...evidence, file] + setEvidence(evidenceFiles) + onCredentialFormDataChange?.({...credentialInput, evidence: evidenceFiles}) + } - const onRemoveEvidence = async (index: number): Promise => { - evidence.splice(index, 1) - // Cloning array to force rerender - const evidenceFiles = [...evidence] - setEvidence(evidenceFiles) - onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles }) - } + const onRemoveEvidence = async (index: number): Promise => { + evidence.splice(index, 1) + // Cloning array to force rerender + const evidenceFiles = [...evidence] + setEvidence(evidenceFiles) + onCredentialFormDataChange?.({...credentialInput, evidence: evidenceFiles}) + } - const getEvidenceElements = (): Array => { - return evidence.map((file: File, index: number) => - => onRemoveEvidence(index)} - /> - ) - } + const getEvidenceElements = (): Array => { + return evidence.map((file: File, index: number) => ( + => onRemoveEvidence(index)} /> + )) + } - return ( - - - {Localization.translate('credential_issuance_wizard_title')} - - - } - onChange={onCredentialTypeChange} + return ( + + + {Localization.translate('credential_issuance_wizard_title')} + ( + + )} + onChange={onCredentialTypeChange} + /> + + {selectedCredentialType && ( + <> + + {selectedCredentialType.schema && selectedCredentialType.uiSchema && ( + + )} + + + +
+ + {Localization.translate('credential_issuance_wizard_evidence_title')} + {Localization.translate('optional_label')} + + {Localization.translate('credential_issuance_wizard_evidence_description')} +
+ + - - {selectedCredentialType && - <> - - {(selectedCredentialType.schema && selectedCredentialType.uiSchema) && - - } - - - -
- - {Localization.translate('credential_issuance_wizard_evidence_title')} - {Localization.translate('optional_label')} - - {Localization.translate('credential_issuance_wizard_evidence_description')} -
- - - { getEvidenceElements() } - - - - - } - - ) + {getEvidenceElements()} + + + + + )} + + ) } -export default CredentialIssuanceWizardView; +export default CredentialIssuanceWizardView diff --git a/packages/ssi-react/src/components/views/CredentialMiniCardView/index.tsx b/packages/ssi-react/src/components/views/CredentialMiniCardView/index.tsx index 55357b1..3474e12 100644 --- a/packages/ssi-react/src/components/views/CredentialMiniCardView/index.tsx +++ b/packages/ssi-react/src/components/views/CredentialMiniCardView/index.tsx @@ -15,13 +15,7 @@ export type CredentialMiniCardViewProps = { } const CredentialMiniCardView: FC = (props: CredentialMiniCardViewProps): ReactElement => { - const { - backgroundColor = credentialCardColors.default, - backgroundImage, - logo, - logoColor, - style - } = props + const {backgroundColor = credentialCardColors.default, backgroundImage, logo, logoColor, style} = props return ( @@ -30,7 +24,7 @@ const CredentialMiniCardView: FC = (props: Credenti // FIXME Putting backgroundSize here as for some reason putting this on the styled component does not work ...(backgroundImage?.uri && {background: `url(${backgroundImage.uri})`, backgroundSize: 'cover'}), }}> - {(!backgroundImage || logo) && } + {(!backgroundImage || logo) && } ) diff --git a/packages/ssi-react/src/components/views/CredentialViewItem/index.tsx b/packages/ssi-react/src/components/views/CredentialViewItem/index.tsx index 139b854..057c46e 100644 --- a/packages/ssi-react/src/components/views/CredentialViewItem/index.tsx +++ b/packages/ssi-react/src/components/views/CredentialViewItem/index.tsx @@ -1,76 +1,60 @@ import {CSSProperties, FC, ReactElement} from 'react' -import { - CredentialStatus, - Localization, - toLocalDateString, - toLocalDateTimeString -} from '@sphereon/ui-components.core' +import {CredentialStatus, Localization, toLocalDateString, toLocalDateTimeString} from '@sphereon/ui-components.core' import SSIStatusLabel from '../../labels/SSIStatusLabel' -import CredentialMiniCardView, {CredentialMiniCardViewProps} from '../CredentialMiniCardView'; +import CredentialMiniCardView, {CredentialMiniCardViewProps} 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'; + 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' type Props = { - credentialTitle: string - credentialStatus: CredentialStatus - issuerName: string - issueDate: number - expirationDate?: number - showTime?: boolean - showCard?: boolean - credentialBranding?: CredentialMiniCardViewProps - style?: CSSProperties + credentialTitle: string + credentialStatus: CredentialStatus + issuerName: string + issueDate: number + expirationDate?: number + showTime?: boolean + showCard?: boolean + credentialBranding?: CredentialMiniCardViewProps + style?: CSSProperties } const CredentialViewItem: FC = (props: Props): ReactElement => { - const { - credentialStatus, - credentialTitle, - issuerName, - showTime = false, - showCard = true, - credentialBranding, - 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') + 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 ( - - { showCard && - - } - - -
- {credentialTitle} - {issuerName} -
- - - - - - {issueDate} - {expirationDate} - - - - ) + return ( + + {showCard && } + + +
+ {credentialTitle} + {issuerName} +
+ + + + + + {issueDate} + {expirationDate} + + + + ) } export default CredentialViewItem diff --git a/packages/ssi-react/src/components/views/FormView/index.tsx b/packages/ssi-react/src/components/views/FormView/index.tsx index 4a492ef..6d1c89d 100644 --- a/packages/ssi-react/src/components/views/FormView/index.tsx +++ b/packages/ssi-react/src/components/views/FormView/index.tsx @@ -1,54 +1,50 @@ -import {CSSProperties, FC, ReactElement} from 'react'; -import {JsonForms} from '@jsonforms/react'; -import { - JsonFormsCellRendererRegistryEntry, - JsonFormsRendererRegistryEntry, - JsonSchema, - UISchemaElement, - ValidationMode -} from '@jsonforms/core'; -import {materialCells} from '@jsonforms/material-renderers'; -import {jsonFormsMaterialRenderers} from '../../../renders/jsonFormsRenders'; -import {JSONFormState} from '../../../types'; +import {CSSProperties, FC, ReactElement} from 'react' +import {JsonForms} from '@jsonforms/react' +import {JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, UISchemaElement, ValidationMode} from '@jsonforms/core' +import {materialCells} from '@jsonforms/material-renderers' +import {jsonFormsMaterialRenderers} from '../../../renders/jsonFormsRenders' +import {JSONFormState} from '../../../types' type Props = { - schema: JsonSchema - uiSchema: UISchemaElement - validationMode?: ValidationMode - data?: Record - renderers?: Array - cells?: Array - onFormStateChange?: (state: JSONFormState) => Promise - style?: CSSProperties + schema: JsonSchema + uiSchema: UISchemaElement + validationMode?: ValidationMode + data?: Record + renderers?: Array + cells?: Array + onFormStateChange?: (state: JSONFormState) => Promise + style?: CSSProperties } const FormView: FC = (props: Props): ReactElement => { - const { - data, - schema, - uiSchema, - validationMode = 'ValidateAndShow', - renderers = jsonFormsMaterialRenderers, - cells = materialCells, - style, - onFormStateChange - } = props + const { + data, + schema, + uiSchema, + validationMode = 'ValidateAndShow', + renderers = jsonFormsMaterialRenderers, + cells = materialCells, + style, + onFormStateChange, + } = props - const onFormStateChanged = (state: JSONFormState): void => { - void onFormStateChange?.(state) - }; + const onFormStateChanged = (state: JSONFormState): void => { + void onFormStateChange?.(state) + } - return
- + return ( +
+
+ ) } -export default FormView; +export default FormView diff --git a/packages/ssi-react/src/components/views/InformationRequestView/index.tsx b/packages/ssi-react/src/components/views/InformationRequestView/index.tsx index 15f04c1..906f1f3 100644 --- a/packages/ssi-react/src/components/views/InformationRequestView/index.tsx +++ b/packages/ssi-react/src/components/views/InformationRequestView/index.tsx @@ -20,34 +20,29 @@ import SSIStatusLabel from '../../labels/SSIStatusLabel' import SSILogo from '../../assets/logos/SSILogo' type Props = { - relyingPartyName: string; - purpose: string; - credentialStatus: CredentialStatus; + relyingPartyName: string + purpose: string + credentialStatus: CredentialStatus credentialTitle?: string credentialSubtitle?: string - uri?: string; + uri?: string logo?: ImageAttributes textColor?: string -}; +} const InformationRequestView: FC = (args: Props): ReactElement => { - const { - relyingPartyName, - purpose, - uri, - credentialStatus, - logo, - textColor, - } = args + const {relyingPartyName, purpose, uri, credentialStatus, logo, textColor} = args return ( {Localization.translate('information_request_title')} - {Localization.translate('information_request_header_description', { - partyName: relyingPartyName, - })} + + {Localization.translate('information_request_header_description', { + partyName: relyingPartyName, + })} + {Localization.translate('information_request_purpose_label')} @@ -55,9 +50,10 @@ const InformationRequestView: FC = (args: Props): ReactElement => { {Localization.translate('information_request_form_label')} - {Localization.translate('information_request_interacting_with', { - partyName: relyingPartyName, - })} + + {Localization.translate('information_request_interacting_with', { + partyName: relyingPartyName, + })} @@ -67,10 +63,7 @@ const InformationRequestView: FC = (args: Props): ReactElement => { {relyingPartyName} Verifier - {uri && ( - {uri} - ) - } + {uri && {uri}} diff --git a/packages/ssi-react/src/components/views/JSONDataView/index.tsx b/packages/ssi-react/src/components/views/JSONDataView/index.tsx index b84aad0..a7844f0 100644 --- a/packages/ssi-react/src/components/views/JSONDataView/index.tsx +++ b/packages/ssi-react/src/components/views/JSONDataView/index.tsx @@ -1,153 +1,147 @@ -import React, {FC, ReactElement, useEffect} from 'react'; -import {JSONTree, LabelRenderer} from 'react-json-tree'; +import React, {FC, ReactElement, useEffect} from 'react' +import {JSONTree, LabelRenderer} from 'react-json-tree' import { - backgroundColors, - calculateAspectRatio, - fontColors, - ImageAttributes, - 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'; + backgroundColors, + calculateAspectRatio, + fontColors, + ImageAttributes, + 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'; + JSONDataViewContainerStyled as Container, + JSONDataViewHeaderContainerStyled as HeaderContainer, + JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, + JSONDataViewDataContainerCaptionStyled as ContainerCaption, + JSONDataViewDataImageValueStyled as ImageValue, + JSONDataViewDataTextValueStyled as TextValue, + JSONDataViewDataLabelStyled as Label, +} from '../../../styles' // This component is still an early WIP. But for now it was mentioned not to focus on it too much type Props = { - data: Record - showHeader?: boolean - shouldExpandNodeInitially?: (() => boolean) | boolean + data: Record + showHeader?: boolean + shouldExpandNodeInitially?: (() => boolean) | boolean } const JSONDataView: FC = (props: Props): ReactElement => { - const { - showHeader = true, - shouldExpandNodeInitially = () => false - } = props - const expandNodeInitially = typeof shouldExpandNodeInitially === 'function' ? shouldExpandNodeInitially : () => shouldExpandNodeInitially - const [focused, setFocused] = React.useState(false) - const [data, setData] = React.useState | undefined>() - - const preprocessData = async (data: Record): Promise> => { - if (typeof data !== 'object' || data === null) { - return data; - } - - const processedData: Record = {}; - await Promise.all(Object.entries(data).map(async ([key, value]: [string, any]): Promise => { - 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((): void => { - preprocessData(props.data).then((data: Record) => setData(data)) - }, [props.data]); - - const getItemString = (): null => { - return null + const {showHeader = true, shouldExpandNodeInitially = () => false} = props + const expandNodeInitially = typeof shouldExpandNodeInitially === 'function' ? shouldExpandNodeInitially : () => shouldExpandNodeInitially + const [focused, setFocused] = React.useState(false) + const [data, setData] = React.useState | undefined>() + + const preprocessData = async (data: Record): Promise> => { + if (typeof data !== 'object' || data === null) { + return data } - const valueRenderer = (valueAsString: unknown, value: unknown): ReactElement => { - if (isBoolean(value)) { - return parseToBoolean(value) ? : + const processedData: Record = {} + await Promise.all( + Object.entries(data).map(async ([key, value]: [string, any]): Promise => { + 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 } + }), + ) - if (typeof value === 'object' - && value !== null - && 'uri' in value - ) { - const imageData = value as ImageAttributes - return - } + return processedData + } - return {value?.toString()} - } + useEffect((): void => { + preprocessData(props.data).then((data: Record) => setData(data)) + }, [props.data]) + const getItemString = (): null => { + return null + } - const labelRenderer: LabelRenderer = ([key]): ReactElement => { - return ; - }; + const valueRenderer = (valueAsString: unknown, value: unknown): ReactElement => { + if (isBoolean(value)) { + return parseToBoolean(value) ? : + } - const isCustomNode = (value: unknown): boolean => { - // returning custom node here for images as we need the object to be considered as 1 value, so we can render it as an image - return typeof value === 'object' && value !== null && 'uri' in value && 'dimensions' in value + if (typeof value === 'object' && value !== null && 'uri' in value) { + const imageData = value as ImageAttributes + return ( + + ) } - return ( - - { showHeader && - - {Localization.translate('json_data_view_attribute_column_label')} - {Localization.translate('json_data_view_value_column_label')} - - } - setFocused(true)} - onMouseLeave={() => setFocused(false)} - > - { data && - - } - - - ) + return {value?.toString()} + } + + const labelRenderer: LabelRenderer = ([key]): ReactElement => { + return + } + + const isCustomNode = (value: unknown): boolean => { + // returning custom node here for images as we need the object to be considered as 1 value, so we can render it as an image + return typeof value === 'object' && value !== null && 'uri' in value && 'dimensions' in value + } + + return ( + + {showHeader && ( + + {Localization.translate('json_data_view_attribute_column_label')} + {Localization.translate('json_data_view_value_column_label')} + + )} + setFocused(true)} onMouseLeave={() => setFocused(false)}> + {data && ( + + )} + + + ) } export default JSONDataView diff --git a/packages/ssi-react/src/components/views/SSITableView/index.tsx b/packages/ssi-react/src/components/views/SSITableView/index.tsx index b52bd78..206c6ad 100644 --- a/packages/ssi-react/src/components/views/SSITableView/index.tsx +++ b/packages/ssi-react/src/components/views/SSITableView/index.tsx @@ -43,11 +43,11 @@ import { TableRowSelection, TextCellOptions, ValueSelection, - TableCellOptions + TableCellOptions, } from '../../../types' import PaginationControls, {PaginationControlsProps} from './PaginationControls' -import ComboBox from "../../fields/ComboBox"; -import CredentialDetailsView from "../CredentialViewItem"; +import ComboBox from '../../fields/ComboBox' +import CredentialDetailsView from '../CredentialViewItem' type Props = { data: Array @@ -77,10 +77,11 @@ function IndeterminateCheckbox({indeterminate, className = '', ...rest}: {indete return } -const getCellFormatting = (type: TableCellType, value: any, row: Row, options?: TableCellOptions): ReactElement => { // FIXME start giving value a type +const getCellFormatting = (type: TableCellType, value: any, row: Row, options?: TableCellOptions): ReactElement => { + // FIXME start giving value a type switch (type) { case TableCellType.TEXT: - const { truncationLength, enableHover = false } = (options as TextCellOptions) ?? {} + const {truncationLength, enableHover = false} = (options as TextCellOptions) ?? {} return case TableCellType.LABEL: { const labels = Array.isArray(value) ? value.map((label: LabelType) => ) : @@ -96,7 +97,7 @@ const getCellFormatting = (type: TableCellType, value: any, row: Row, optio return } case TableCellType.ACTIONS: { - const { actions = [] } = (options as ActionsCellOptions) ?? {} + const {actions = []} = (options as ActionsCellOptions) ?? {} const buttons = actions.map((action: Button) => ({ ...action, onClick: () => action.onClick(row), @@ -104,13 +105,8 @@ const getCellFormatting = (type: TableCellType, value: any, row: Row, optio return } case TableCellType.COMBOBOX: { - const { defaultValue, onChange, selectOptions = [] } = (options as ComboboxCellOptions) ?? {} - return - defaultValue={defaultValue} - value={value} - onChange={onChange} - options={selectOptions} - /> + const {defaultValue, onChange, selectOptions = []} = (options as ComboboxCellOptions) ?? {} + return defaultValue={defaultValue} value={value} onChange={onChange} options={selectOptions} /> } default: return
@@ -140,7 +136,6 @@ const SSITableView = (props: Props): ReactElement => { onRowClick, onDelete, pagination, - } = props const [rowSelection, setRowSelection] = React.useState>([]) const [focusedRowId, setFocusedRowId] = React.useState() diff --git a/packages/ssi-react/src/renders/jsonFormsRenders.ts b/packages/ssi-react/src/renders/jsonFormsRenders.ts index e41bd68..cc95b35 100644 --- a/packages/ssi-react/src/renders/jsonFormsRenders.ts +++ b/packages/ssi-react/src/renders/jsonFormsRenders.ts @@ -1,8 +1,8 @@ -import { JsonFormsRendererRegistryEntry } from '@jsonforms/core'; -import {materialRenderers} from '@jsonforms/material-renderers'; -import PassportPhotoControl, {passportPhotoControlTester} from '../components/fields/JSONForms/PassportPhotoControl'; +import {JsonFormsRendererRegistryEntry} from '@jsonforms/core' +import {materialRenderers} from '@jsonforms/material-renderers' +import PassportPhotoControl, {passportPhotoControlTester} from '../components/fields/JSONForms/PassportPhotoControl' export const jsonFormsMaterialRenderers: Array = [ - ...materialRenderers, - { tester: passportPhotoControlTester, renderer: PassportPhotoControl }, + ...materialRenderers, + {tester: passportPhotoControlTester, renderer: PassportPhotoControl}, ] diff --git a/packages/ssi-react/src/styles/components/components/CredentialIssuanceWizardView/index.ts b/packages/ssi-react/src/styles/components/components/CredentialIssuanceWizardView/index.ts index debcf4f..528ffce 100644 --- a/packages/ssi-react/src/styles/components/components/CredentialIssuanceWizardView/index.ts +++ b/packages/ssi-react/src/styles/components/components/CredentialIssuanceWizardView/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import {backgroundColors, borderColors, SSIRoundedEdgesCss} from "@sphereon/ui-components.core"; -import {SSITextH1SemiBoldStyled, SSITextH2Styled} from "../../../fonts"; +import {backgroundColors, borderColors, SSIRoundedEdgesCss} from '@sphereon/ui-components.core' +import {SSITextH1SemiBoldStyled, SSITextH2Styled} from '../../../fonts' export const CredentialIssuanceWizardViewContainerStyled = styled.div` display: flex; @@ -48,7 +48,7 @@ export const CredentialIssuanceWizardViewEvidenceContentContainerStyled = styled ` export const CredentialIssuanceWizardViewEvidenceTitleContainerStyled = styled.div` - display: flex; + display: flex; flex-direction: row; gap: 4px; ` diff --git a/packages/ssi-react/src/styles/components/components/CredentialViewItem/index.tsx b/packages/ssi-react/src/styles/components/components/CredentialViewItem/index.tsx index c5fc734..1ac5a6f 100644 --- a/packages/ssi-react/src/styles/components/components/CredentialViewItem/index.tsx +++ b/packages/ssi-react/src/styles/components/components/CredentialViewItem/index.tsx @@ -23,14 +23,14 @@ export const CredentialViewItemTitleCaptionStyled = styled(SSITextH3Styled)` overflow: hidden; word-break: break-all; text-overflow: ellipsis; -`; +` export const CredentialViewItemStatusContainerStyled = styled.div` margin-top: 3px; margin-left: auto; padding-left: 9px; -`; +` export const CredentialViewItemExpirationDateCaptionStyled = styled(SSITextH5Styled)` margin-left: auto; -`; +` diff --git a/packages/ssi-react/src/styles/components/components/DragAndDropBox/index.ts b/packages/ssi-react/src/styles/components/components/DragAndDropBox/index.ts index 23ba9f3..39b49ae 100644 --- a/packages/ssi-react/src/styles/components/components/DragAndDropBox/index.ts +++ b/packages/ssi-react/src/styles/components/components/DragAndDropBox/index.ts @@ -1,6 +1,6 @@ import {backgroundColors, borderColors, fontColors} from '@sphereon/ui-components.core' import styled from 'styled-components' -import {SSITextH7RegularStyled} from '../../../fonts'; +import {SSITextH7RegularStyled} from '../../../fonts' export const DragAndDropBoxContainerStyled = styled.div` background-color: ${backgroundColors.lightGrey}; diff --git a/packages/ssi-react/src/styles/components/components/FileSelectionField/index.ts b/packages/ssi-react/src/styles/components/components/FileSelectionField/index.ts index 9d1bb2d..017e87e 100644 --- a/packages/ssi-react/src/styles/components/components/FileSelectionField/index.ts +++ b/packages/ssi-react/src/styles/components/components/FileSelectionField/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' import {borderColors, fontColors} from '@sphereon/ui-components.core' -import {SSITextH2SemiBoldStyled, SSITextH7RegularStyled} from '../../../fonts'; +import {SSITextH2SemiBoldStyled, SSITextH7RegularStyled} from '../../../fonts' export const FileSelectionFieldContainerStyled = styled.div` display: flex; diff --git a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts index 69f0e7a..907e33d 100644 --- a/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts +++ b/packages/ssi-react/src/styles/components/components/InformationRequestView/index.ts @@ -2,73 +2,73 @@ import styled from 'styled-components' import {SSITextH1Styled, SSITextH2Styled, SSITextH3Styled, SSITextH4Styled} from '../../../fonts' export const InformationRequestViewContainerStyled = styled.div` - display: flex; - flex-direction: column; - gap: 24px; - margin: 0 auto; - padding: 24px; + display: flex; + flex-direction: column; + gap: 24px; + margin: 0 auto; + padding: 24px; ` export const InformationRequestViewContentContainerStyled = styled.div` - display: flex; - flex-direction: column; - gap: 24px; - width: 500px; /* FIXME */ - margin-right: auto; + display: flex; + flex-direction: column; + gap: 24px; + width: 500px; /* FIXME */ + margin-right: auto; ` - export const InformationRequestViewHeaderContainerStyled = styled.div` - display: flex; - flex-direction: column; - gap: 8px; + display: flex; + flex-direction: column; + gap: 8px; ` export const InformationRequestViewPurposeContainerStyled = styled.div` - display: flex; - flex-direction: column; - gap: 16px; - padding: 16px; - border: 1px solid #e0e0e0; - border-radius: 8px; - background-color: #fbfbfb;` + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + border: 1px solid #e0e0e0; + border-radius: 8px; + background-color: #fbfbfb; +` export const InformationRequestViewTitleStyled = styled(SSITextH1Styled)` - text-align: left; - font-weight: bold; + text-align: left; + font-weight: bold; ` export const InformationRequestViewParagraphStyled = styled(SSITextH2Styled)` - text-align: left; - font-weight: bold; + text-align: left; + font-weight: bold; ` export const InformationRequestViewDescriptionStyled = styled(SSITextH3Styled)` - text-align: left; - font-weight: normal; + text-align: left; + font-weight: normal; ` export const InformationRequestViewSubSectionStyled = styled(SSITextH3Styled)` - text-align: left; - font-weight: bold; + text-align: left; + font-weight: bold; ` export const InformationRequestViewFormContainerStyled = styled.div` - display: flex; - flex-direction: column; - gap: 16px; - padding: 16px; - border: 1px solid #e0e0e0; - border-radius: 8px; - background-color: #fbfbfb; + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + border: 1px solid #e0e0e0; + border-radius: 8px; + background-color: #fbfbfb; ` export const InformationRequestViewFormTitleStyled = styled(SSITextH2Styled)` - text-align: left; + text-align: left; ` export const InformationRequestViewFormDetailsContainerStyled = styled.div` - display: flex; - flex-direction: column; - gap: 8px; + display: flex; + flex-direction: column; + gap: 8px; ` export const InformationRequestViewLogoContainerStyled = styled.div` @@ -84,18 +84,17 @@ export const InformationRequestViewRPCardContainerStyled = styled.div` border: 1px solid #e0e0e0; border-radius: 8px; background-color: #ffffff; -`; - +` export const InformationRequestViewCardTextContainer = styled.div` flex-grow: 1; -`; +` export const InformationRequestViewCardTitle = styled(SSITextH4Styled)` font-weight: bold; -`; +` export const InformationRequestViewCardSubtitle = styled(SSITextH4Styled)` font-weight: normal; color: #555; -`; +` diff --git a/packages/ssi-react/src/styles/components/components/JSONDataView/index.ts b/packages/ssi-react/src/styles/components/components/JSONDataView/index.ts index e5bbd88..1c2d2b8 100644 --- a/packages/ssi-react/src/styles/components/components/JSONDataView/index.ts +++ b/packages/ssi-react/src/styles/components/components/JSONDataView/index.ts @@ -1,11 +1,6 @@ import styled from 'styled-components' -import { - backgroundColors, - borderColors, - fontColors, - SSIRoundedEdgesCss -} from '@sphereon/ui-components.core'; -import {SSITextH2SemiBoldStyledCss, SSITextH5Css, SSITextH7SemiBoldCss} from '../../../css'; +import {backgroundColors, borderColors, fontColors, SSIRoundedEdgesCss} from '@sphereon/ui-components.core' +import {SSITextH2SemiBoldStyledCss, SSITextH5Css, SSITextH7SemiBoldCss} from '../../../css' export const JSONDataViewContainerStyled = styled.div` ${SSIRoundedEdgesCss}; diff --git a/packages/ssi-react/src/styles/components/components/PassportPhotoControl/index.ts b/packages/ssi-react/src/styles/components/components/PassportPhotoControl/index.ts index a6d6ff6..fe58e6f 100644 --- a/packages/ssi-react/src/styles/components/components/PassportPhotoControl/index.ts +++ b/packages/ssi-react/src/styles/components/components/PassportPhotoControl/index.ts @@ -2,14 +2,14 @@ import styled from 'styled-components' import {backgroundColors, borderColors} from '@sphereon/ui-components.core' export const PassportPhotoControlContainerStyled = styled.div` - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; gap: 12px; ` export const PassportPhotoControlDragAndDropBoxContainerStyled = styled.div` - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; gap: 10px; ` @@ -27,5 +27,5 @@ export const PassportPhotoControlPassportPhotoContainerStyled = styled.div` export const PassportPhotoControlPassportPhotoImageStyled = styled.img` width: 100%; - height: auto + height: auto; ` diff --git a/packages/ssi-react/src/styles/components/components/ProgressStepIndicator/index.ts b/packages/ssi-react/src/styles/components/components/ProgressStepIndicator/index.ts index 3d98b73..ff276e5 100644 --- a/packages/ssi-react/src/styles/components/components/ProgressStepIndicator/index.ts +++ b/packages/ssi-react/src/styles/components/components/ProgressStepIndicator/index.ts @@ -1,14 +1,7 @@ import styled from 'styled-components' -import { - backgroundColors, - borderColors, - elementColors, - fontColors, - fontSize, - fontWeight -} from '@sphereon/ui-components.core' +import {backgroundColors, borderColors, elementColors, fontColors, fontSize, fontWeight} from '@sphereon/ui-components.core' import {SSITextH1SemiBoldStyled, SSITextH3Styled} from '../../../fonts' -import {SSITextH2Css} from "../../../css"; +import {SSITextH2Css} from '../../../css' export const ProgressStepIndicatorContainerStyled = styled.div` background-color: ${backgroundColors.primaryLight}; @@ -51,7 +44,7 @@ export const ProgressStepIndicatorSpacerLineCellStyled = styled.div` export const ProgressStepIndicatorTitleTextStyled = styled(SSITextH1SemiBoldStyled)` word-break: break-word; - + display: flex; flex-direction: row; gap: 4px; diff --git a/packages/ssi-react/src/styles/components/components/SSITabViewHeader/index.ts b/packages/ssi-react/src/styles/components/components/SSITabViewHeader/index.ts index bb6bd99..dabc517 100644 --- a/packages/ssi-react/src/styles/components/components/SSITabViewHeader/index.ts +++ b/packages/ssi-react/src/styles/components/components/SSITabViewHeader/index.ts @@ -1,5 +1,5 @@ import styled from 'styled-components' -import {SSITextH3Styled} from '../../../fonts'; +import {SSITextH3Styled} from '../../../fonts' export const SSITabViewHeaderContainerStyled = styled.div` display: flex; diff --git a/packages/ssi-react/src/styles/components/components/SSITableView/index.ts b/packages/ssi-react/src/styles/components/components/SSITableView/index.ts index c009c8f..90f5f38 100644 --- a/packages/ssi-react/src/styles/components/components/SSITableView/index.ts +++ b/packages/ssi-react/src/styles/components/components/SSITableView/index.ts @@ -26,21 +26,21 @@ export const SSITableViewHeaderRowContainerStyled = styled.tr` background-color: ${backgroundColors.primaryLight}; ` -export const SSITableViewRowContainerStyled = styled.tr<{ enableHover?: boolean }>` +export const SSITableViewRowContainerStyled = styled.tr<{enableHover?: boolean}>` background-color: ${backgroundColors.primaryLight}; &:not(:last-child) { border-bottom: 1px solid ${borderColors.lightGrey}; } - + ${props => - props.enableHover && - css` - &:hover { - background-color: #ececec; // TODO - } - `} -`; + props.enableHover && + css` + &:hover { + background-color: #ececec; // TODO + } + `} +` export const SSITableViewCellContainerStyled = styled.td` ${SSITextH3Css}; diff --git a/packages/ssi-react/src/styles/components/components/SecondaryButton/index.ts b/packages/ssi-react/src/styles/components/components/SecondaryButton/index.ts index 58ab518..cf7f77a 100644 --- a/packages/ssi-react/src/styles/components/components/SecondaryButton/index.ts +++ b/packages/ssi-react/src/styles/components/components/SecondaryButton/index.ts @@ -30,6 +30,7 @@ export const SecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled)` } ` -export const SecondaryButtonCaptionStyled = styled(SSITextH3Styled)` // FIXME H3 vs H2 mobile +export const SecondaryButtonCaptionStyled = styled(SSITextH3Styled)` + // FIXME H3 vs H2 mobile ${gradient100TextCss} ` diff --git a/packages/ssi-react/src/types/field/index.ts b/packages/ssi-react/src/types/field/index.ts index 6418110..b85c3a3 100644 --- a/packages/ssi-react/src/types/field/index.ts +++ b/packages/ssi-react/src/types/field/index.ts @@ -1,26 +1,25 @@ export enum AssetFilePermission { - PUBLIC = 'public', - PRIVATE = 'private', + PUBLIC = 'public', + PRIVATE = 'private', } export type ValueSelection = { - label: string - value: string + label: string + value: string } export enum FileSelectionFieldType { - FILE = 'file', - IMAGE = 'image' + FILE = 'file', + IMAGE = 'image', } - export type PassportPhoto = { - file: File - base64Uri: string + file: File + base64Uri: string } export type PassportPhotoControlData = { - fileName: string - mimeType: string - base64Uri: string + fileName: string + mimeType: string + base64Uri: string } diff --git a/packages/ssi-react/src/types/table/index.ts b/packages/ssi-react/src/types/table/index.ts index 64b134d..d22616f 100644 --- a/packages/ssi-react/src/types/table/index.ts +++ b/packages/ssi-react/src/types/table/index.ts @@ -1,6 +1,6 @@ import {AccessorFn, DeepKeys} from '@tanstack/react-table' import {Button} from '../button' -import {ValueSelection} from '../field'; +import {ValueSelection} from '../field' export enum TableCellType { TEXT = 'text', @@ -13,10 +13,10 @@ export enum TableCellType { } export type ColumnHeader = { - accessor: AccessorFn | DeepKeys; - type: TableCellType; - label?: string; - columnOptions?: TableColumnOptions; + accessor: AccessorFn | DeepKeys + type: TableCellType + label?: string + columnOptions?: TableColumnOptions } export type TableColumnOptions = { diff --git a/packages/ssi-react/src/types/view/index.ts b/packages/ssi-react/src/types/view/index.ts index aa7e729..2024fb0 100644 --- a/packages/ssi-react/src/types/view/index.ts +++ b/packages/ssi-react/src/types/view/index.ts @@ -1,17 +1,17 @@ -import {JsonFormsCore, JsonSchema, UISchemaElement} from '@jsonforms/core'; -import {ErrorObject} from 'ajv'; +import {JsonFormsCore, JsonSchema, UISchemaElement} from '@jsonforms/core' +import {ErrorObject} from 'ajv' export type JSONFormState = Pick export type CredentialFormData = { - data?: any - errors?: ErrorObject[] - evidence: Array + data?: any + errors?: ErrorObject[] + evidence: Array } export type CredentialFormSelectionType = { - label: string - schema?: JsonSchema - uiSchema?: UISchemaElement - credentialType: Array + label: string + schema?: JsonSchema + uiSchema?: UISchemaElement + credentialType: Array } diff --git a/packages/ssi-react/src/utils/FileUtils.ts b/packages/ssi-react/src/utils/FileUtils.ts index 549b265..5d7d859 100644 --- a/packages/ssi-react/src/utils/FileUtils.ts +++ b/packages/ssi-react/src/utils/FileUtils.ts @@ -1,9 +1,9 @@ -import { fromString } from 'uint8arrays' +import {fromString} from 'uint8arrays' export const base64UriToFile = (base64Uri: string, filename: string, mimeType: string): File => { - const base64 = base64Uri.split(',')[1]; - const uint8Array = fromString(base64, 'base64'); - const blob = new Blob([uint8Array]); + const base64 = base64Uri.split(',')[1] + const uint8Array = fromString(base64, 'base64') + const blob = new Blob([uint8Array]) - return new File([blob], filename, { type: mimeType }); + return new File([blob], filename, {type: mimeType}) } diff --git a/packages/ssi-react/src/utils/ImageUtils.ts b/packages/ssi-react/src/utils/ImageUtils.ts index d1f3c42..f96ecf4 100644 --- a/packages/ssi-react/src/utils/ImageUtils.ts +++ b/packages/ssi-react/src/utils/ImageUtils.ts @@ -1,17 +1,17 @@ -import {ImageSize} from '@sphereon/ui-components.core'; +import {ImageSize} from '@sphereon/ui-components.core' export const getImageSize = (uri: string): Promise => { - return new Promise((resolve, reject): void => { - const img = new Image(); + return new Promise((resolve, reject): void => { + const img = new Image() - img.onload = (): void => { - resolve({ width: img.width, height: img.height }); - }; + img.onload = (): void => { + resolve({width: img.width, height: img.height}) + } - img.onerror = (error: string | Event): void => { - reject(error); - }; + img.onerror = (error: string | Event): void => { + reject(error) + } - img.src = uri; - }); -}; + img.src = uri + }) +}