@sphereon/ui-components.ssi-react 0.1.3-unstable.7 → 0.1.3-unstable.70

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

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
 import { Localization } from '@sphereon/ui-components.core';
-import { TableCellTypeEnum } from '../../../types';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
-import SSIText from '../../labels/SSIText';
-import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles/components';
+import SSIHoverText from '../../fields/SSIHoverText';
+import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles';
+import { TableCellType } from '../../../types';
+import { SSIStatusLabel } from '../../../index';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -16,26 +17,30 @@ function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     }, [ref, indeterminate]);
     return _jsx("input", { type: "checkbox", ref: ref, className: className + ' cursor-pointer', ...rest });
 }
-const getCellFormatting = (type, value, truncationLength) => {
+const getCellFormatting = (type, value, opts) => {
     switch (type) {
-        case TableCellTypeEnum.TEXT:
-            return _jsx(SSIText, { value: value, ...(truncationLength && { truncationLength }) });
-        case TableCellTypeEnum.LABEL: {
+        case TableCellType.TEXT:
+            const { truncationLength, enableHover = false } = opts ?? {};
+            return _jsx(SSIHoverText, { text: value, truncationLength: truncationLength, enableHover: enableHover });
+        case TableCellType.LABEL: {
             const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
             return _jsx(LabelCell, { children: labels });
         }
+        case TableCellType.STATUS: {
+            return _jsx(SSIStatusLabel, { status: value });
+        }
         default:
             return _jsx("div", {});
     }
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick } = props;
+    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, } = props;
     const [rowSelection, setRowSelection] = React.useState({});
     const columnHelper = createColumnHelper();
     let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
         id: header.accessor,
         header: header.label,
-        cell: (info) => getCellFormatting(header.type, info.getValue(), header.truncationLength),
+        cell: (info) => getCellFormatting(header.type, info.getValue(), header.opts),
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -72,12 +77,10 @@ const SSITableView = (props) => {
             await onRowClick(row);
         }
     };
-    return (_jsx(Container, { children: _jsxs("div", { className: "overflow-x-auto", children: [enableResultCount &&
-                    _jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
-                            count: data.length,
-                            maxCount: data.length,
-                        }) }), (enableFiltering || enableMostRecent || actions.length > 0) &&
-                    _jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent }), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: { width: header.getSize() }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+    return (_jsx(Container, { children: _jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
+                        count: data.length,
+                        maxCount: data.length,
+                    }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: { width: header.getSize() }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
                                                 transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
                                                     ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
                                                     : '',

package/dist/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './toastHelper';

package/dist/helpers/index.js

@@ -0,0 +1 @@
+export * from './toastHelper';

package/dist/helpers/toastHelper.d.ts

@@ -0,0 +1,3 @@
+import { ToastCustomProps, ToastType } from '@sphereon/ui-components.core';
+import { ToastConfigParams } from '../types';
+export declare const showToast: (type: ToastType, params: ToastConfigParams<ToastCustomProps>) => Promise<void>;

package/dist/helpers/toastHelper.js

@@ -0,0 +1,14 @@
+import { toast } from 'react-toastify';
+import { toastConfig } from '../@config/toasts';
+export const showToast = async (type, params) => {
+    const { title, message, onClick, props } = params;
+    if (!toastConfig.hasOwnProperty(type)) {
+        return Promise.reject('Unknown toast type');
+    }
+    toast(toastConfig[type]({
+        title,
+        message,
+        onClick,
+        props,
+    }));
+};

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+import SSIToastContainer from './components/messageBoxes/toasts/SSIToastContainer';
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
-import SSICardView from './components/views/SSICardView';
-import SSIMiniCardView from './components/views/SSIMiniCardView';
+import SSICredentialCardView from './components/views/SSICredentialCardView';
+import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
 import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
@@ -18,6 +19,11 @@ import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
-export * from './types';
+import SSICheckbox from './components/fields/SSICheckbox';
+import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
+import SSIHoverText from './components/fields/SSIHoverText';
+import { Row } from '@tanstack/react-table';
 export * from './styles/components/fonts';
-export { SSICardView, SSIMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export * from './types';
+export * from './helpers';
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, Row };

package/dist/index.js

@@ -1,6 +1,7 @@
+import SSIToastContainer from './components/messageBoxes/toasts/SSIToastContainer';
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
-import SSICardView from './components/views/SSICardView';
-import SSIMiniCardView from './components/views/SSIMiniCardView';
+import SSICredentialCardView from './components/views/SSICredentialCardView';
+import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
 import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
@@ -18,6 +19,10 @@ import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
-export * from './types';
+import SSICheckbox from './components/fields/SSICheckbox';
+import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
+import SSIHoverText from './components/fields/SSIHoverText';
 export * from './styles/components/fonts';
-export { SSICardView, SSIMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export * from './types';
+export * from './helpers';
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText };

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

@@ -0,0 +1,4 @@
+export declare const SSICheckboxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxUnselectedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxSelectedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxLabelContainerStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { SSITextH4LightStyled } from '../../fonts';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+export const SSICheckboxContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+`;
+export const SSICheckboxUnselectedContainerStyled = styled.div `
+  width: 18px;
+  aspect-ratio: 1;
+  border-radius: 4px;
+  border-width: 1px;
+`;
+export const SSICheckboxSelectedContainerStyled = styled.div `
+  width: 18px;
+  aspect-ratio: 1;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+`;
+export const SSICheckboxLabelContainerStyled = styled(SSITextH4LightStyled) `
+  display: flex;
+  flex-wrap: wrap;
+`;

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

@@ -0,0 +1,13 @@
+export declare const SSICredentialCardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewBackgroundImageStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewHeaderLogoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewContentMainContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewContentSubContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewContentIssueNameContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewContentPropertiesContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewFooterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICredentialCardViewCredentialTitleTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSICredentialCardViewCredentialSubtitleTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSICredentialCardViewStatusContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionColumnViewStyled, SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
+import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../fonts';
+export const SSICredentialCardViewContainerStyled = styled(SSIRoundedContainerStyled) `
+  width: 327px;
+  height: 186px;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+`;
+export const SSICredentialCardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled) `
+  flex-grow: 1;
+`;
+export const SSICredentialCardViewHeaderContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  height: 32px;
+  margin-top: 16px;
+`;
+export const SSICredentialCardViewHeaderLogoContainerStyled = styled.div `
+  margin: 0 12px 0 9px;
+`;
+export const SSICredentialCardViewHeaderTitleContainerStyled = styled.div `
+  text-align: end;
+  margin: 0 13px 0 auto;
+`;
+export const SSICredentialCardViewContentMainContainerStyled = styled.div `
+  display: flex;
+  flex-grow: 1;
+`;
+export const SSICredentialCardViewContentSubContainerStyled = styled.div `
+  margin-top: auto;
+`;
+export const SSICredentialCardViewContentIssueNameContainerStyled = styled.div `
+  padding: 2px 9px 2px 12px;
+`;
+export const SSICredentialCardViewContentPropertiesContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  justify-content: flex-start;
+  margin: 1px 0;
+  padding: 2px 9px 4px 12px;
+`;
+export const SSICredentialCardViewFooterContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  margin-top: auto;
+  backdrop-filter: blur(3px);
+  background-color: rgba(255, 255, 255, 0.25);
+  padding: 12px;
+`;
+export const SSICredentialCardViewCredentialTitleTextStyled = styled(SSITextH4SemiBoldLightStyled) `
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+`;
+export const SSICredentialCardViewCredentialSubtitleTextStyled = styled(SSITextH5LightStyled) `
+  text-align: right;
+`;
+export const SSICredentialCardViewStatusContainerStyled = styled.div `
+  margin-left: auto;
+`;

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

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

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionColumnViewStyled } from '../../containers';
+export const SSICredentialMiniCardViewContainerStyled = styled.div `
+  width: 75px;
+  height: 50px;
+  border-radius: 4.6px;
+  overflow: hidden;
+  display: flex;
+`;
+export const SSICredentialMiniCardViewBackgroundImageStyled = styled(SSIFlexDirectionColumnViewStyled) `
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+`;

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

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

package/dist/styles/components/components/{SSIText → SSIHoverText}/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const SSITruncatedFullTextStyled = styled.span `
+export const SSIHoverTextTextHoverStyled = styled.span `
   display: none;
   position: absolute;
   top: 100%;
@@ -9,13 +9,13 @@ export const SSITruncatedFullTextStyled = styled.span `
   padding: 5px;
   z-index: 1;
 `;
-export const SSITruncatedContainerStyled = styled.div `
+export const SSIHoverTextContainerStyled = styled.div `
   position: relative;
 
-  &:hover ${SSITruncatedFullTextStyled} {
+  &:hover ${SSIHoverTextTextHoverStyled} {
     display: block;
   }
 `;
-export const SSITruncatedTextStyled = styled.span `
-  display: 'inline';
+export const SSIHoverTextTextStyled = styled.span `
+  display: inline;
 `;

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { SSIRoundedContainerStyled } from '../../containers';
 import { gradientColors } from '@sphereon/ui-components.core';
-import { SSITextH3Styled } from "../../fonts";
+import { SSITextH3Styled } from '../../fonts';
 export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
   position: relative;
   display: flex;
@@ -21,10 +21,8 @@ export const SSISecondaryButtonContainerStyled = styled(SSIRoundedContainerStyle
     bottom: 0;
     border-radius: 8px;
     border: 1px solid transparent;
-    background: linear-gradient(135deg, #7276F7, #7C40E8) border-box;
-    -webkit-mask:
-            linear-gradient(#fff 0 0) padding-box,
-            linear-gradient(#fff 0 0);
+    background: linear-gradient(135deg, #7276f7, #7c40e8) border-box;
+    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: destination-out;
     mask-composite: exclude;
   }

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

@@ -4,6 +4,7 @@ import { SSITextH5LightStyled } from '../../fonts';
 export const SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   border-radius: 9px;
   border: 1px solid #000;
+  width: fit-content;
 `;
 export const SSIStatusLabelStatusCaptionStyled = styled(SSITextH5LightStyled) `
   margin-left: 7px;

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

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

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

@@ -0,0 +1,4 @@
+export declare const SSIToastContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSIToastBadgeContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSIToastTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSIToastMessageTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { alertColors } from '@sphereon/ui-components.core';
+import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
+import { SSITextH4DarkStyled } from '../../fonts';
+export const SSIToastContainerStyled = styled(SSIRoundedContainerStyled) `
+  //TODO we need better width, use a max width and use content to scale
+  // 96.8%;
+  width: 326px;
+  background-color: ${alertColors.secondaryLight};
+  border-radius: 8px;
+  justify-content: center;
+  padding: 18px 18px 15px 18px;
+`;
+export const SSIToastBadgeContainerStyled = styled.div `
+  margin-right: 10px;
+  justify-content: center;
+`;
+export const SSIToastTitleContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  margin-bottom: 12px;
+  width: 100%;
+`;
+export const SSIToastMessageTextStyled = styled(SSITextH4DarkStyled) `
+  width: 100%;
+`;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SSIToastContainerContainerStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;