@beydesign/storybook 0.0.90 → 0.0.91

package/README.md

@@ -1,4 +1,6 @@
 # BeyDesign Storybook
+[![Lint](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml)   [![Deploy Storybook to GitHub Pages](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml)   [![Publish Package to NPM](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml)  
+
 
 A React component library implementing the Beyond Presence Design System. This package provides a collection of reusable components that follow the design specifications from our [Figma Design System](https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4295-3110&p=f&m=dev).
 

package/dist/stories/Agent/AgentCard.js

@@ -16,6 +16,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
     const isDraft = agentState === AgentState.pending;
     const isProcessing = agentState === AgentState.processing;
     const isReady = agentState === AgentState.ready;
+    const agentKey = title?.toLowerCase()?.replace(/\s+/g, '-');
     // Handle image loading and errors
     React.useEffect(() => {
         if (!agentImage) {
@@ -55,7 +56,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
             ? 'var(--colors-light-background-bg-error-subtle)'
             : isDraft
                 ? 'var(--colors-light-background-bg-element)'
-                : 'var(--colors-light-background-bg-component)', boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, children: [_jsx("style", { children: `
+                : 'var(--colors-light-background-bg-component)', boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, "data-testid": `${agentKey}-parent`, children: [_jsx("style", { children: `
           @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -78,7 +79,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
                             position: 'absolute',
                             right: '8px',
                             top: '8px',
-                        } })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--primitives-desktop-primary-white-100)', className: "spin-animation" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)', children: processingText }), showProgressIndicator && (_jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: progressValue, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' }))] })), isError && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-error-solid)', style: { zIndex: 1, opacity: 0.7 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Warning, { size: 74, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)', children: "Something went wrong" })] }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, textStyle: {
+                        }, testKey: agentKey })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--primitives-desktop-primary-white-100)', className: "spin-animation" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)', children: processingText }), showProgressIndicator && (_jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: progressValue, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' }))] })), isError && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-error-solid)', style: { zIndex: 1, opacity: 0.7 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Warning, { size: 74, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)', children: "Something went wrong" })] }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, textStyle: {
                             maxWidth: '140px',
                             overflow: 'hidden',
                             whiteSpace: 'nowrap',

package/dist/stories/Buttons/MainButton.js

@@ -199,7 +199,7 @@ const StyledButton = styled.button `
       var(--global-shadows-shadow-xs-color);
   }
 `;
-export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', }) => {
+export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
     const getIconSize = () => {
         const sizes = {
             [ButtonSize.xl]: 24,
@@ -298,5 +298,5 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                     trailingIcon &&
                     getIconComponent(trailingIcon, iconProps)] }));
     };
-    return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, children: renderContent() }));
+    return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, "data-testid": testId, children: renderContent() }));
 };

package/dist/stories/Buttons/types.d.ts

@@ -101,6 +101,8 @@ export interface MainButtonProps {
     leadingIcon?: IconName;
     /** Icon to show at the end of the button */
     trailingIcon?: IconName;
+    /** Test Id */
+    testId?: string;
 }
 /**
  * Toggle button size variants

package/dist/stories/UI/Menu.js

@@ -4,7 +4,7 @@ import { Fragment, useState } from 'react';
 import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonType, } from '../Buttons';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
-export const Menu = ({ icon = 'DotsThree', items, style, }) => {
+export const Menu = ({ icon = 'DotsThree', items, style, testKey, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
@@ -24,7 +24,7 @@ export const Menu = ({ icon = 'DotsThree', items, style, }) => {
             return 'var(--colors-light-text-text-error)';
         return 'var(--colors-light-text-text-title)';
     };
-    return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.Secondary, style: style }), _jsx(MuiMenu, { id: "basic-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
+    return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.Secondary, style: style, testId: `${testKey}-menu-button` }), _jsx(MuiMenu, { id: "basic-menu", "data-testid": `${testKey}-menu`, anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
                     'aria-labelledby': 'basic-button',
                     style: {
                         padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
@@ -38,7 +38,7 @@ export const Menu = ({ icon = 'DotsThree', items, style, }) => {
                     root: { style: { gap: '4px' } },
                 }, children: items?.map((action, index) => {
                     if (action) {
-                        return (_jsxs(MuiMenuItem, { onClick: (e) => handleMenuItemClick(action, e), sx: { gap: '8px' }, disableRipple: true, children: [action?.icon &&
+                        return (_jsxs(MuiMenuItem, { onClick: (e) => handleMenuItemClick(action, e), sx: { gap: '8px' }, disableRipple: true, "data-testid": `${testKey}-menu-item-${index}`, children: [action?.icon &&
                                     getIconComponent(action.icon, {
                                         width: '20px',
                                         height: '20px',

package/dist/stories/UI/types.d.ts

@@ -159,6 +159,8 @@ export type MenuProps = {
     items?: MenuItemProps[];
     /** Style */
     style?: React.CSSProperties;
+    /** Test key */
+    testKey?: string;
 };
 /**
  * Progress indicator mode variants

package/dist/utils/common.js

@@ -1,4 +1,6 @@
 export const getInitials = (text) => {
+    if (!text)
+        return '';
     return text
         .split(' ')
         .map((word) => word[0]?.toUpperCase())

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.90",
+  "version": "0.0.91",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",