@beydesign/storybook 0.0.42 → 0.0.43

package/dist/stories/Agent/AgentCard.js

@@ -6,12 +6,12 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Toggle, TogglePosition } from '../Form';
 import { Badge, ProgressIndicator, ProgressIndicatorMode, BadgeColor, BadgeSize, Menu, } from '../UI';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
-import { ArrowsCounterClockwise } from '@phosphor-icons/react';
-export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, previewButtonText = 'Preview', }) => {
+import { ArrowsCounterClockwise, Warning } from '@phosphor-icons/react';
+export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, previewButtonText = 'Preview', showStatusBadge = false, statusBadgeText = '', }) => {
     const [hovered, setHovered] = useState(false);
     const [imageError, setImageError] = useState(false);
     const [isLoading, setIsLoading] = useState(!!agentImage);
-    // const isError = agentState === AgentState.error;
+    const isError = agentState === AgentState.error;
     const isDraft = agentState === AgentState.pending;
     const isProcessing = agentState === AgentState.processing;
     const isReady = agentState === AgentState.ready;
@@ -59,17 +59,24 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
         }
         return (_jsx("img", { src: agentImage, alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' } }));
     };
-    return (_jsxs(Box, { width: '300px', display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: 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: [_jsxs(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', width: '100%', sx: { aspectRatio: 1 }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [renderImageContent(), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
+    return (_jsxs(Box, { width: '300px', display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: isError
+            ? '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: [_jsxs(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', sx: { aspectRatio: 1 }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [renderImageContent(), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
                             position: 'absolute',
                             right: '8px',
                             bottom: '8px',
                             zIndex: 2,
-                        }, color: BadgeColor.Violet })), showMenu && menuItems.length > 0 && (_jsx(Menu, { items: menuItems, style: {
+                        }, color: BadgeColor.Violet })), showStatusBadge && statusBadgeText && (_jsx(Badge, { text: statusBadgeText, size: BadgeSize.md, fill: true, style: {
+                            position: 'absolute',
+                            left: '8px',
+                            top: '8px',
+                            zIndex: 2,
+                        }, color: BadgeColor.Blue })), showMenu && menuItems.length > 0 && (_jsx(Menu, { items: menuItems, style: {
                             zIndex: 2,
                             position: 'absolute',
                             right: '8px',
                             top: '8px',
-                        } })), isReady && hovered && onPreview && (_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(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Agent creation in progress", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: 50, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' })] }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
+                        } })), 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(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Agent creation in progress", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: 50, 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, { text: "Something went wrong", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' })] }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
 };

package/dist/stories/Agent/AgentCard.stories.d.ts

@@ -7,3 +7,5 @@ export declare const Placeholder: Story;
 export declare const CustomPreviewText: Story;
 export declare const LoadingPreview: Story;
 export declare const NoImage: Story;
+export declare const WithStatusBadge: Story;
+export declare const NoStatusBadge: Story;

package/dist/stories/Agent/AgentCard.stories.js

@@ -124,6 +124,20 @@ const meta = {
                 defaultValue: { summary: 'Preview' },
             },
         },
+        showStatusBadge: {
+            control: 'boolean',
+            description: 'Whether to show the status badge',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        statusBadgeText: {
+            control: 'text',
+            description: 'Text to display in the status badge',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
     },
 };
 export default meta;
@@ -149,6 +163,8 @@ export const Placeholder = {
         ],
         showMenu: true,
         agentState: AgentState.ready,
+        showStatusBadge: true,
+        statusBadgeText: 'Active',
     },
 };
 export const CustomPreviewText = {
@@ -164,6 +180,7 @@ export const LoadingPreview = {
         title: 'Loading Preview Example',
         // Using a non-existent image to force loading state
         agentImage: 'https://example.com/non-existent-image.jpg',
+        active: false,
     },
     parameters: {
         docs: {
@@ -187,3 +204,34 @@ export const NoImage = {
         },
     },
 };
+export const WithStatusBadge = {
+    args: {
+        ...Placeholder.args,
+        title: 'Status Badge Example',
+        showStatusBadge: true,
+        statusBadgeText: 'Draft',
+        agentState: AgentState.pending,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card with a status badge in the top-left corner.',
+            },
+        },
+    },
+};
+export const NoStatusBadge = {
+    args: {
+        ...Placeholder.args,
+        title: 'No Status Badge Example',
+        showStatusBadge: false,
+        statusBadgeText: '',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card without a status badge.',
+            },
+        },
+    },
+};

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

@@ -47,6 +47,10 @@ export type AgentCardProps = {
     agentState?: AgentState;
     /** Preview button text */
     previewButtonText?: string;
+    /** Show status badge */
+    showStatusBadge?: boolean;
+    /** Status badge text */
+    statusBadgeText?: string;
 };
 export interface AgentCardSkeletonProps {
     /**

package/package.json

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