@beydesign/storybook 0.0.88 → 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/Form/TextInput.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, }) => {
+export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, }) => {
     const [focused, setFocused] = useState(false);
     return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
                         ? 'none'
@@ -11,7 +11,7 @@ export const TextInput = ({ label, value, onChange, placeholder, hintText, error
                                 ? '1px solid var(--colors-light-border-border-error)'
                                 : focused
                                     ? '1px solid var(--colors-light-border-border-component-active)'
-                                    : 'transparent'}`, children: _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                    : 'transparent'}`, children: _jsx("input", { type: type, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
                                     border: 'none',
                                     outline: 'none',
                                     width: '100%',

package/dist/stories/Form/TextInput.stories.d.ts

@@ -34,6 +34,16 @@ declare const meta: {
                 };
             };
         };
+        type: {
+            control: "select";
+            description: string;
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
         hintText: {
             control: "text";
             description: string;
@@ -128,3 +138,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Password: Story;
+export declare const Email: Story;

package/dist/stories/Form/TextInput.stories.js

@@ -28,6 +28,14 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        type: {
+            control: 'select',
+            description: 'The type of the text input',
+            options: ['text', 'password', 'email', 'number', 'tel', 'url'],
+            table: {
+                type: { summary: 'string' },
+            },
+        },
         hintText: {
             control: 'text',
             description: 'The hint text of the text input',
@@ -108,3 +116,21 @@ export const Default = {
         hintBubbleText: 'This is a hint bubble',
     },
 };
+export const Password = {
+    args: {
+        label: 'Password',
+        value: 'password',
+        type: 'password',
+        onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
+    },
+};
+export const Email = {
+    args: {
+        label: 'Email',
+        value: 'email',
+        type: 'email',
+        onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
+    },
+};

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

@@ -1,6 +1,7 @@
 import { SxProps, Theme } from '@mui/material';
 import { HintBubbleProps } from '../UI';
 import { IconName } from '../../utils';
+import React from 'react';
 /**
  * Text area component props
  */
@@ -52,6 +53,8 @@ export type TextInputProps = {
     onChange: (value: string) => void;
     /** Text input placeholder */
     placeholder?: string;
+    /** Text input type */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
     /** Text input hint */
     hintText?: string;
     /** Text input error */

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.88",
+  "version": "0.0.91",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",