@beydesign/storybook 0.0.46 → 0.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,8 +6,8 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
|
6
6
|
import { Toggle, TogglePosition } from '../Form';
|
|
7
7
|
import { Badge, ProgressIndicator, ProgressIndicatorMode, BadgeColor, BadgeSize, Menu, } from '../UI';
|
|
8
8
|
import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
|
|
9
|
-
import {
|
|
10
|
-
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 = '', }) => {
|
|
9
|
+
import { ArrowsClockwise, Warning } from '@phosphor-icons/react';
|
|
10
|
+
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 = '', showProgressIndicator = false, progressValue = 50, processingText = 'Creation in progress', }) => {
|
|
11
11
|
const [hovered, setHovered] = useState(false);
|
|
12
12
|
const [imageError, setImageError] = useState(false);
|
|
13
13
|
const [isLoading, setIsLoading] = useState(!!agentImage);
|
|
@@ -43,7 +43,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
43
43
|
// Render loading state or placeholder
|
|
44
44
|
const renderImageContent = () => {
|
|
45
45
|
if (isLoading) {
|
|
46
|
-
return (_jsxs(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(
|
|
46
|
+
return (_jsxs(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--colors-light-text-text-subtle)', style: { animation: 'spin 1.5s linear infinite' } }), _jsx(Typography, { text: "Loading preview...", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })] }), _jsx("style", { children: `
|
|
47
47
|
@keyframes spin {
|
|
48
48
|
0% {
|
|
49
49
|
transform: rotate(0deg);
|
|
@@ -78,5 +78,5 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
78
78
|
position: 'absolute',
|
|
79
79
|
right: '8px',
|
|
80
80
|
top: '8px',
|
|
81
|
-
} })), 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(
|
|
81
|
+
} })), 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)', style: { animation: 'spin 1.5s linear infinite' } }), _jsx(Typography, { text: processingText, size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), 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, { 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)' }))] }));
|
|
82
82
|
};
|
|
@@ -9,3 +9,5 @@ export declare const LoadingPreview: Story;
|
|
|
9
9
|
export declare const NoImage: Story;
|
|
10
10
|
export declare const WithStatusBadge: Story;
|
|
11
11
|
export declare const NoStatusBadge: Story;
|
|
12
|
+
export declare const Processing: Story;
|
|
13
|
+
export declare const ProcessingWithoutProgress: Story;
|
|
@@ -138,6 +138,30 @@ const meta = {
|
|
|
138
138
|
type: { summary: 'string' },
|
|
139
139
|
},
|
|
140
140
|
},
|
|
141
|
+
showProgressIndicator: {
|
|
142
|
+
control: 'boolean',
|
|
143
|
+
description: 'Whether to show the progress indicator in processing state',
|
|
144
|
+
table: {
|
|
145
|
+
type: { summary: 'boolean' },
|
|
146
|
+
defaultValue: { summary: 'true' },
|
|
147
|
+
},
|
|
148
|
+
},
|
|
149
|
+
progressValue: {
|
|
150
|
+
control: 'number',
|
|
151
|
+
description: 'Current progress value (0-100)',
|
|
152
|
+
table: {
|
|
153
|
+
type: { summary: 'number' },
|
|
154
|
+
defaultValue: { summary: '50' },
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
processingText: {
|
|
158
|
+
control: 'text',
|
|
159
|
+
description: 'Text to display in processing state',
|
|
160
|
+
table: {
|
|
161
|
+
type: { summary: 'string' },
|
|
162
|
+
defaultValue: { summary: 'Agent creation in progress' },
|
|
163
|
+
},
|
|
164
|
+
},
|
|
141
165
|
},
|
|
142
166
|
};
|
|
143
167
|
export default meta;
|
|
@@ -235,3 +259,36 @@ export const NoStatusBadge = {
|
|
|
235
259
|
},
|
|
236
260
|
},
|
|
237
261
|
};
|
|
262
|
+
export const Processing = {
|
|
263
|
+
args: {
|
|
264
|
+
...Placeholder.args,
|
|
265
|
+
title: 'Processing Example',
|
|
266
|
+
agentState: AgentState.processing,
|
|
267
|
+
showProgressIndicator: true,
|
|
268
|
+
progressValue: 75,
|
|
269
|
+
processingText: 'Training in progress',
|
|
270
|
+
},
|
|
271
|
+
parameters: {
|
|
272
|
+
docs: {
|
|
273
|
+
description: {
|
|
274
|
+
story: 'This example demonstrates the agent card in processing state with a custom progress value and text.',
|
|
275
|
+
},
|
|
276
|
+
},
|
|
277
|
+
},
|
|
278
|
+
};
|
|
279
|
+
export const ProcessingWithoutProgress = {
|
|
280
|
+
args: {
|
|
281
|
+
...Placeholder.args,
|
|
282
|
+
title: 'Processing Without Progress',
|
|
283
|
+
agentState: AgentState.processing,
|
|
284
|
+
showProgressIndicator: false,
|
|
285
|
+
processingText: 'Please wait...',
|
|
286
|
+
},
|
|
287
|
+
parameters: {
|
|
288
|
+
docs: {
|
|
289
|
+
description: {
|
|
290
|
+
story: 'This example shows the processing state without the progress indicator.',
|
|
291
|
+
},
|
|
292
|
+
},
|
|
293
|
+
},
|
|
294
|
+
};
|
|
@@ -51,6 +51,12 @@ export type AgentCardProps = {
|
|
|
51
51
|
showStatusBadge?: boolean;
|
|
52
52
|
/** Status badge text */
|
|
53
53
|
statusBadgeText?: string;
|
|
54
|
+
/** Show progress indicator in processing state */
|
|
55
|
+
showProgressIndicator?: boolean;
|
|
56
|
+
/** Current progress value (0-100) */
|
|
57
|
+
progressValue?: number;
|
|
58
|
+
/** Processing state text */
|
|
59
|
+
processingText?: string;
|
|
54
60
|
};
|
|
55
61
|
export interface AgentCardSkeletonProps {
|
|
56
62
|
/**
|