@beydesign/storybook 0.0.80 → 0.0.82
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.
|
@@ -7,7 +7,8 @@ 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
9
|
import { ArrowsClockwise, Warning } from '@phosphor-icons/react';
|
|
10
|
-
|
|
10
|
+
import { getIconComponent } from '../../utils';
|
|
11
|
+
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', agentId = '', onClickAgentId, }) => {
|
|
11
12
|
const [hovered, setHovered] = useState(false);
|
|
12
13
|
const [imageError, setImageError] = useState(false);
|
|
13
14
|
const [isLoading, setIsLoading] = useState(!!agentImage);
|
|
@@ -77,5 +78,23 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
77
78
|
position: 'absolute',
|
|
78
79
|
right: '8px',
|
|
79
80
|
top: '8px',
|
|
80
|
-
} })), 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" })] }))] }),
|
|
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)', 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: {
|
|
82
|
+
maxWidth: '140px',
|
|
83
|
+
overflow: 'hidden',
|
|
84
|
+
whiteSpace: 'nowrap',
|
|
85
|
+
textOverflow: 'ellipsis',
|
|
86
|
+
}, children: title }), agentId && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: [_jsxs(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', textStyle: {
|
|
87
|
+
maxWidth: '100px',
|
|
88
|
+
overflow: 'hidden',
|
|
89
|
+
whiteSpace: 'nowrap',
|
|
90
|
+
textOverflow: 'ellipsis',
|
|
91
|
+
}, title: agentId, children: ["ID ", agentId] }), onClickAgentId &&
|
|
92
|
+
getIconComponent('Copy', {
|
|
93
|
+
width: '20px',
|
|
94
|
+
height: '20px',
|
|
95
|
+
weight: 'bold',
|
|
96
|
+
color: 'var(--colors-light-text-text-accent)',
|
|
97
|
+
style: { cursor: 'pointer' },
|
|
98
|
+
onClick: () => onClickAgentId(agentId),
|
|
99
|
+
})] }))] }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: date })), 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, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: description }))] }));
|
|
81
100
|
};
|
|
@@ -12,6 +12,13 @@ const meta = {
|
|
|
12
12
|
},
|
|
13
13
|
tags: ['autodocs'],
|
|
14
14
|
argTypes: {
|
|
15
|
+
agentId: {
|
|
16
|
+
control: 'text',
|
|
17
|
+
description: 'The id of the agent',
|
|
18
|
+
table: {
|
|
19
|
+
type: { summary: 'string' },
|
|
20
|
+
},
|
|
21
|
+
},
|
|
15
22
|
agentImage: {
|
|
16
23
|
control: 'text',
|
|
17
24
|
description: 'Image of the agent',
|
|
@@ -167,7 +174,7 @@ const meta = {
|
|
|
167
174
|
export default meta;
|
|
168
175
|
export const Placeholder = {
|
|
169
176
|
args: {
|
|
170
|
-
title: 'Agent Card',
|
|
177
|
+
title: 'Agent Card Title',
|
|
171
178
|
active: true,
|
|
172
179
|
showActiveToggle: true,
|
|
173
180
|
showDate: true,
|
|
@@ -189,6 +196,8 @@ export const Placeholder = {
|
|
|
189
196
|
agentState: AgentState.ready,
|
|
190
197
|
showStatusBadge: true,
|
|
191
198
|
statusBadgeText: 'Active',
|
|
199
|
+
agentId: '112657154',
|
|
200
|
+
onClickAgentId: () => { },
|
|
192
201
|
},
|
|
193
202
|
};
|
|
194
203
|
export const CustomPreviewText = {
|
|
@@ -9,6 +9,10 @@ export declare enum AgentState {
|
|
|
9
9
|
* Agent card component props
|
|
10
10
|
*/
|
|
11
11
|
export type AgentCardProps = {
|
|
12
|
+
/** Agent id */
|
|
13
|
+
agentId?: string;
|
|
14
|
+
/** On click agent id */
|
|
15
|
+
onClickAgentId?: (agentId: string) => void;
|
|
12
16
|
/** Agent image */
|
|
13
17
|
agentImage?: string;
|
|
14
18
|
/** Show date */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { TypographySize, TypographyWeight } from './types';
|
|
3
3
|
import { getTextStyles, getTypographySizeToken, getTypographyWeightToken, } from '../../utils';
|
|
4
|
-
export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, textStyle, children, }) => {
|
|
4
|
+
export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, textStyle, children, title, }) => {
|
|
5
5
|
const sizeToken = getTypographySizeToken(size);
|
|
6
6
|
const weightToken = getTypographyWeightToken(weight);
|
|
7
7
|
const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
|
|
@@ -18,5 +18,5 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
|
|
|
18
18
|
textDecoration: textDecoration,
|
|
19
19
|
color: color || 'var(--global-text-text-title)',
|
|
20
20
|
...textStyle,
|
|
21
|
-
}, children: [children || text, required && _jsx("span", { style: { color: requiredColor }, children: ' *' })] }));
|
|
21
|
+
}, title: title, children: [children || text, required && _jsx("span", { style: { color: requiredColor }, children: ' *' })] }));
|
|
22
22
|
};
|