From 58cab483e859578515255bf5e0ff44cf7a2df743 Mon Sep 17 00:00:00 2001 From: Niels Klomp Date: Fri, 26 Apr 2024 20:36:33 +0200 Subject: [PATCH] chore: esm import fixes --- packages/core/src/utils/ImageUtils.ts | 2 +- packages/core/src/utils/TypeUtils.ts | 36 +-- packages/ssi-react/package.json | 2 +- .../assets/icons/ImageIcon/index.tsx | 2 +- .../src/components/fields/ComboBox/index.tsx | 15 +- .../indicators/SSIActivityIndicator/index.tsx | 3 +- .../CredentialIssuanceWizardView/index.tsx | 2 +- .../views/CredentialMiniCardView/index.tsx | 8 +- .../views/CredentialViewItem/index.tsx | 110 ++++---- .../components/views/JSONDataView/index.tsx | 256 +++++++++--------- .../components/views/SSITableView/index.tsx | 27 +- packages/ssi-react/src/index.ts | 2 +- .../components/CredentialViewItem/index.tsx | 6 +- .../components/JSONDataView/index.ts | 9 +- .../components/SSITabViewHeader/index.ts | 2 +- .../components/SSITableView/index.ts | 18 +- packages/ssi-react/src/types/table/index.ts | 10 +- packages/ssi-react/src/utils/ImageUtils.ts | 24 +- pnpm-lock.yaml | 136 +++------- 19 files changed, 284 insertions(+), 386 deletions(-) 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/package.json b/packages/ssi-react/package.json index f7ec8c4..5370a38 100644 --- a/packages/ssi-react/package.json +++ b/packages/ssi-react/package.json @@ -44,7 +44,7 @@ "@sphereon/ui-components.core": "workspace:*", "@tanstack/react-table": "^8.9.3", "react-json-tree": "^0.18.0", - "react-loader-spinner": "^5.4.5", + "react-loader-spinner": "^6.1.6", "react-select": "^5.8.0", "react-toastify": "^9.1.3", "uint8arrays": "^3.1.1" 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 d0c98a9..9d57db8 100644 --- a/packages/ssi-react/src/components/assets/icons/ImageIcon/index.tsx +++ b/packages/ssi-react/src/components/assets/icons/ImageIcon/index.tsx @@ -9,7 +9,7 @@ type Props = { } 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 (
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/indicators/SSIActivityIndicator/index.tsx b/packages/ssi-react/src/components/indicators/SSIActivityIndicator/index.tsx index e211d67..ce01646 100644 --- a/packages/ssi-react/src/components/indicators/SSIActivityIndicator/index.tsx +++ b/packages/ssi-react/src/components/indicators/SSIActivityIndicator/index.tsx @@ -1,8 +1,7 @@ import React, {FC} from 'react' import {elementColors} from '@sphereon/ui-components.core' -// @ts-ignore -import {Oval} from "react-loader-spinner"; +import {Oval} from 'react-loader-spinner' interface Props { size?: string | number diff --git a/packages/ssi-react/src/components/views/CredentialIssuanceWizardView/index.tsx b/packages/ssi-react/src/components/views/CredentialIssuanceWizardView/index.tsx index a4bed72..a951ebf 100644 --- a/packages/ssi-react/src/components/views/CredentialIssuanceWizardView/index.tsx +++ b/packages/ssi-react/src/components/views/CredentialIssuanceWizardView/index.tsx @@ -14,7 +14,7 @@ import { CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, - SSITextH2SemiBoldStyled as EvidenceTitle, + SSITextH2SemiBoldStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2Styled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer, diff --git a/packages/ssi-react/src/components/views/CredentialMiniCardView/index.tsx b/packages/ssi-react/src/components/views/CredentialMiniCardView/index.tsx index 6a57cb6..e163488 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 ( diff --git a/packages/ssi-react/src/components/views/CredentialViewItem/index.tsx b/packages/ssi-react/src/components/views/CredentialViewItem/index.tsx index f57adc2..1e8e268 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/index.js' -import CredentialMiniCardView, {CredentialMiniCardViewProps} from '../CredentialMiniCardView/index.js'; +import CredentialMiniCardView, {CredentialMiniCardViewProps} from '../CredentialMiniCardView/index.js' 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/index.js'; + 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/index.js' 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/JSONDataView/index.tsx b/packages/ssi-react/src/components/views/JSONDataView/index.tsx index 5f3f31f..6fa317c 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/index.js'; -import SSIExclamationMarkBadge from '../../assets/badges/SSIExclamationMarkBadge/index.js'; -import {getImageSize} from '../../../utils/index.js'; + backgroundColors, + calculateAspectRatio, + fontColors, + ImageAttributes, + isBase64ImageUri, + isBoolean, + Localization, + parseToBoolean, +} from '@sphereon/ui-components.core' +import SSICheckmarkBadge from '../../assets/badges/SSICheckmarkBadge/index.js' +import SSIExclamationMarkBadge from '../../assets/badges/SSIExclamationMarkBadge/index.js' +import {getImageSize} from '../../../utils/index.js' import { - JSONDataViewContainerStyled as Container, - JSONDataViewHeaderContainerStyled as HeaderContainer, - JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, - JSONDataViewDataContainerCaptionStyled as ContainerCaption, - JSONDataViewDataImageValueStyled as ImageValue, - JSONDataViewDataTextValueStyled as TextValue, - JSONDataViewDataLabelStyled as Label -} from '../../../styles/index.js'; + JSONDataViewContainerStyled as Container, + JSONDataViewHeaderContainerStyled as HeaderContainer, + JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, + JSONDataViewDataContainerCaptionStyled as ContainerCaption, + JSONDataViewDataImageValueStyled as ImageValue, + JSONDataViewDataTextValueStyled as TextValue, + JSONDataViewDataLabelStyled as Label, +} from '../../../styles/index.js' // 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 5d9a888..9f7852e 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/index.js' import PaginationControls, {PaginationControlsProps} from './PaginationControls/index.js' -import ComboBox from "../../fields/ComboBox/index.js"; -import CredentialDetailsView from "../CredentialViewItem/index.js"; +import ComboBox from '../../fields/ComboBox/index.js' +import CredentialDetailsView from '../CredentialViewItem/index.js' 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() @@ -169,7 +164,7 @@ const SSITableView = (props: Props): ReactElement => { checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), - columnMaxWidth: 50 + columnMaxWidth: 50, }} /> ), @@ -182,7 +177,7 @@ const SSITableView = (props: Props): ReactElement => { disabled: !row.getCanSelect(), indeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), - columnMaxWidth: 50 + columnMaxWidth: 50, }} /> )} diff --git a/packages/ssi-react/src/index.ts b/packages/ssi-react/src/index.ts index c551416..1c04d38 100644 --- a/packages/ssi-react/src/index.ts +++ b/packages/ssi-react/src/index.ts @@ -88,5 +88,5 @@ export { passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, - JSONDataView + JSONDataView, } 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 87df0b0..10d821c 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/JSONDataView/index.ts b/packages/ssi-react/src/styles/components/components/JSONDataView/index.ts index bdb4a75..e15c2f4 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/index.js'; +import {backgroundColors, borderColors, fontColors, SSIRoundedEdgesCss} from '@sphereon/ui-components.core' +import {SSITextH2SemiBoldStyledCss, SSITextH5Css, SSITextH7SemiBoldCss} from '../../../css/index.js' export const JSONDataViewContainerStyled = styled.div` ${SSIRoundedEdgesCss}; 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 6464087..2cd5e98 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/index.js'; +import {SSITextH3Styled} from '../../../fonts/index.js' 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 874d3e0..8fcdcb5 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/types/table/index.ts b/packages/ssi-react/src/types/table/index.ts index 8bdee33..0eadc49 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/index.js' -import {ValueSelection} from '../field/index.js'; +import {ValueSelection} from '../field/index.js' 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/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 + }) +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index beec375..1ec0208 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -110,8 +110,8 @@ importers: specifier: ^0.18.0 version: 0.18.0(@types/react@18.2.79)(react@18.3.0) react-loader-spinner: - specifier: ^5.4.5 - version: 5.5.0(@babel/core@7.24.4)(react-dom@18.3.0)(react@18.3.0) + specifier: ^6.1.6 + version: 6.1.6(react-dom@18.3.0)(react@18.3.0) react-select: specifier: ^5.8.0 version: 5.8.0(@types/react@18.2.79)(react-dom@18.3.0)(react@18.3.0) @@ -219,10 +219,10 @@ packages: '@babel/helpers': 7.24.4 '@babel/parser': 7.24.4 '@babel/template': 7.24.0 - '@babel/traverse': 7.24.1(supports-color@5.5.0) + '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 convert-source-map: 2.0.0 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -296,7 +296,7 @@ packages: '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 '@babel/helper-plugin-utils': 7.24.0 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 lodash.debounce: 4.0.8 resolve: 1.22.8 transitivePeerDependencies: @@ -419,7 +419,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.24.0 - '@babel/traverse': 7.24.1(supports-color@5.5.0) + '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 transitivePeerDependencies: - supports-color @@ -1553,7 +1553,7 @@ packages: '@babel/parser': 7.24.4 '@babel/types': 7.24.0 - /@babel/traverse@7.24.1(supports-color@5.5.0): + /@babel/traverse@7.24.1: resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==} engines: {node: '>=6.9.0'} dependencies: @@ -1565,7 +1565,7 @@ packages: '@babel/helper-split-export-declaration': 7.22.6 '@babel/parser': 7.24.4 '@babel/types': 7.24.0 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -1700,14 +1700,6 @@ packages: react: 18.3.0 dev: false - /@emotion/stylis@0.8.5: - resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==} - dev: false - - /@emotion/unitless@0.7.5: - resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==} - dev: false - /@emotion/unitless@0.8.0: resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==} dev: false @@ -1773,7 +1765,7 @@ packages: chalk: 4.1.2 ci-info: 3.9.0 connect: 3.7.0 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 env-editor: 0.4.2 find-yarn-workspace-root: 2.0.0 form-data: 3.0.1 @@ -1849,7 +1841,7 @@ packages: '@expo/sdk-runtime-versions': 1.0.0 '@react-native/normalize-color': 2.1.0 chalk: 4.1.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 find-up: 5.0.0 getenv: 1.0.0 glob: 7.1.6 @@ -1909,7 +1901,7 @@ packages: resolution: {integrity: sha512-a+uJ/e6MAVxPVVN/HbXU5qxzdqrqDwNQYxCfxtAufgmd5VZj54e5f3TJA3LEEUW3pTSZR8xK0H0EtVN297AZnw==} dependencies: chalk: 4.1.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 dotenv: 16.4.5 dotenv-expand: 11.0.6 getenv: 1.0.0 @@ -1923,7 +1915,7 @@ packages: dependencies: '@expo/spawn-async': 1.7.2 chalk: 4.1.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 find-up: 5.0.0 minimatch: 3.1.2 p-limit: 3.1.0 @@ -1973,7 +1965,7 @@ packages: '@react-native/babel-preset': 0.74.81(@babel/core@7.24.4)(@babel/preset-env@7.24.4) babel-preset-fbjs: 3.4.0(@babel/core@7.24.4) chalk: 4.1.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 find-yarn-workspace-root: 2.0.0 fs-extra: 9.1.0 getenv: 1.0.0 @@ -1991,7 +1983,7 @@ packages: resolution: {integrity: sha512-bOhuFnlRaS7CU33+rFFIWdcET/Vkyn1vsN8BYFwCDEF5P1fVVvYN7bFOsQLTMD3nvi35C1AGmtqUr/Wfv8Xaow==} engines: {node: '>=12'} dependencies: - '@expo/spawn-async': 1.5.0 + '@expo/spawn-async': 1.7.2 exec-async: 2.2.0 dev: false @@ -2030,7 +2022,7 @@ packages: '@expo/config-types': 50.0.1 '@expo/image-utils': 0.4.2 '@expo/json-file': 8.3.1 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 expo-modules-autolinking: 1.10.3 fs-extra: 9.1.0 resolve-from: 5.0.0 @@ -3467,7 +3459,7 @@ packages: '@babel/template': 7.24.0 '@react-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.24.4) babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.4) - react-refresh: 0.14.0 + react-refresh: 0.14.1 transitivePeerDependencies: - '@babel/preset-env' - supports-color @@ -3714,7 +3706,7 @@ packages: conventional-changelog-angular: 5.0.13 conventional-commits-filter: 2.0.7 conventional-commits-parser: 3.2.4 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 import-from: 4.0.0 lodash: 4.17.21 micromatch: 4.0.5 @@ -3740,7 +3732,7 @@ packages: '@octokit/plugin-throttling': 5.2.3(@octokit/core@4.2.4) '@semantic-release/error': 3.0.0 aggregate-error: 3.1.0 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 dir-glob: 3.0.1 fs-extra: 11.2.0 globby: 11.1.0 @@ -3789,7 +3781,7 @@ packages: conventional-changelog-writer: 5.0.1 conventional-commits-filter: 2.0.7 conventional-commits-parser: 3.2.4 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 get-stream: 6.0.1 import-from: 4.0.0 into-stream: 6.0.0 @@ -4104,7 +4096,7 @@ packages: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} dependencies: - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 transitivePeerDependencies: - supports-color @@ -4112,7 +4104,7 @@ packages: resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==} engines: {node: '>= 14'} dependencies: - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 transitivePeerDependencies: - supports-color dev: true @@ -4416,21 +4408,6 @@ packages: resolution: {integrity: sha512-4djr9G6fMdwQoD6LQ7hOKAm39+y12flWgovAqS1k5O8f42YQ3A1FFMyV5kKfetZuGhZO5BmNmOdRRZQ1TixtDw==} dev: false - /babel-plugin-styled-components@2.1.4(@babel/core@7.24.4)(styled-components@5.3.11): - resolution: {integrity: sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==} - peerDependencies: - styled-components: '>= 2' - dependencies: - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-module-imports': 7.24.3 - '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.4) - lodash: 4.17.21 - picomatch: 2.3.1 - styled-components: 5.3.11(@babel/core@7.24.4)(react-dom@18.3.0)(react-is@18.3.0)(react@18.3.0) - transitivePeerDependencies: - - '@babel/core' - dev: false - /babel-plugin-syntax-trailing-function-commas@7.0.0-beta.0: resolution: {integrity: sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==} dev: false @@ -5446,7 +5423,7 @@ packages: ms: 2.1.3 dev: false - /debug@4.3.4(supports-color@5.5.0): + /debug@4.3.4: resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} peerDependencies: @@ -5456,7 +5433,6 @@ packages: optional: true dependencies: ms: 2.1.2 - supports-color: 5.5.0 /decamelize-keys@1.1.1: resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==} @@ -5520,7 +5496,7 @@ packages: engines: {node: '>=10'} dependencies: globby: 11.1.0 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 is-glob: 4.0.3 is-path-cwd: 2.2.0 is-path-inside: 3.0.3 @@ -6809,7 +6785,7 @@ packages: dependencies: '@tootallnate/once': 1.1.2 agent-base: 6.0.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 transitivePeerDependencies: - supports-color dev: true @@ -6820,7 +6796,7 @@ packages: dependencies: '@tootallnate/once': 2.0.0 agent-base: 6.0.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 transitivePeerDependencies: - supports-color dev: true @@ -6830,7 +6806,7 @@ packages: engines: {node: '>= 14'} dependencies: agent-base: 7.1.1 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 transitivePeerDependencies: - supports-color dev: true @@ -6840,7 +6816,7 @@ packages: engines: {node: '>= 6'} dependencies: agent-base: 6.0.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 transitivePeerDependencies: - supports-color @@ -6849,7 +6825,7 @@ packages: engines: {node: '>= 14'} dependencies: agent-base: 7.1.1 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 transitivePeerDependencies: - supports-color dev: true @@ -7562,7 +7538,7 @@ packages: dependencies: universalify: 2.0.1 optionalDependencies: - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 /jsonparse@1.3.1: resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==} @@ -8254,7 +8230,7 @@ packages: resolution: {integrity: sha512-+OVISBkPNxjD4eEKhblRpBf463nTMk3KMEeYS8Z4xM/z3qujGJGSsWUGRtH27+c6zElaSGtZFiDMshEb8mMKQg==} engines: {node: '>=18'} dependencies: - '@babel/traverse': 7.24.1(supports-color@5.5.0) + '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 invariant: 2.2.4 metro-symbolicate: 0.80.8 @@ -8286,7 +8262,7 @@ packages: '@babel/core': 7.24.4 '@babel/generator': 7.24.4 '@babel/template': 7.24.0 - '@babel/traverse': 7.24.1(supports-color@5.5.0) + '@babel/traverse': 7.24.1 nullthrows: 1.1.1 transitivePeerDependencies: - supports-color @@ -8323,7 +8299,7 @@ packages: '@babel/generator': 7.24.4 '@babel/parser': 7.24.4 '@babel/template': 7.24.0 - '@babel/traverse': 7.24.1(supports-color@5.5.0) + '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 accepts: 1.3.8 chalk: 4.1.2 @@ -9898,9 +9874,9 @@ packages: react-base16-styling: 0.9.1 dev: false - /react-loader-spinner@5.5.0(@babel/core@7.24.4)(react-dom@18.3.0)(react@18.3.0): - resolution: {integrity: sha512-3y+l6RPbkfW8EMs/X7MtfiPlAPwYp+WbCtls3gZn+fDJCt0SW4TakRoj2/lExbCVxSxA6Y5M8Nly+WfhNxnFcw==} - deprecated: Breaking changes was include so major version was use + /react-loader-spinner@6.1.6(react-dom@18.3.0)(react@18.3.0): + resolution: {integrity: sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==} + engines: {node: '>= 12'} peerDependencies: react: ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 @@ -9908,10 +9884,7 @@ packages: react: 18.3.0 react-dom: 18.3.0(react@18.3.0) react-is: 18.3.0 - styled-components: 5.3.11(@babel/core@7.24.4)(react-dom@18.3.0)(react-is@18.3.0)(react@18.3.0) - styled-tools: 1.7.2 - transitivePeerDependencies: - - '@babel/core' + styled-components: 6.1.8(react-dom@18.3.0)(react@18.3.0) dev: false /react-native-fast-image@8.6.3(react-native@0.74.0)(react@18.3.0): @@ -10464,7 +10437,7 @@ packages: '@semantic-release/release-notes-generator': 10.0.3(semantic-release@19.0.5) aggregate-error: 3.1.0 cosmiconfig: 7.1.0 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 env-ci: 5.5.0 execa: 5.1.1 figures: 3.2.0 @@ -10736,7 +10709,7 @@ packages: engines: {node: '>= 10'} dependencies: agent-base: 6.0.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 socks: 2.8.3 transitivePeerDependencies: - supports-color @@ -10747,7 +10720,7 @@ packages: engines: {node: '>= 10'} dependencies: agent-base: 6.0.2 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 socks: 2.8.3 transitivePeerDependencies: - supports-color @@ -11013,31 +10986,6 @@ packages: resolution: {integrity: sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==} dev: false - /styled-components@5.3.11(@babel/core@7.24.4)(react-dom@18.3.0)(react-is@18.3.0)(react@18.3.0): - resolution: {integrity: sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==} - engines: {node: '>=10'} - peerDependencies: - react: '>= 16.8.0' - react-dom: '>= 16.8.0' - react-is: '>= 16.8.0' - dependencies: - '@babel/helper-module-imports': 7.24.3 - '@babel/traverse': 7.24.1(supports-color@5.5.0) - '@emotion/is-prop-valid': 1.2.2 - '@emotion/stylis': 0.8.5 - '@emotion/unitless': 0.7.5 - babel-plugin-styled-components: 2.1.4(@babel/core@7.24.4)(styled-components@5.3.11) - css-to-react-native: 3.2.0 - hoist-non-react-statics: 3.3.2 - react: 18.3.0 - react-dom: 18.3.0(react@18.3.0) - react-is: 18.3.0 - shallowequal: 1.1.0 - supports-color: 5.5.0 - transitivePeerDependencies: - - '@babel/core' - dev: false - /styled-components@6.1.8(react-dom@18.3.0)(react@18.3.0): resolution: {integrity: sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==} engines: {node: '>= 16'} @@ -11058,10 +11006,6 @@ packages: tslib: 2.5.0 dev: false - /styled-tools@1.7.2: - resolution: {integrity: sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==} - dev: false - /stylis@4.2.0: resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} dev: false @@ -11344,7 +11288,7 @@ packages: engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dependencies: '@tufjs/models': 1.0.4 - debug: 4.3.4(supports-color@5.5.0) + debug: 4.3.4 make-fetch-happen: 11.1.1 transitivePeerDependencies: - supports-color