@beydesign/storybook 0.0.90 → 0.0.92
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.
- package/README.md +2 -0
- package/dist/stories/Agent/AgentCard.js +3 -2
- package/dist/stories/Buttons/MainButton.js +2 -2
- package/dist/stories/Buttons/types.d.ts +2 -0
- package/dist/stories/Credits/CreditsCard.js +6 -3
- package/dist/stories/UI/Menu.js +3 -3
- package/dist/stories/UI/types.d.ts +2 -0
- package/dist/utils/common.js +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
# BeyDesign Storybook
|
|
2
|
+
[](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml) [](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml) [](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml)
|
|
3
|
+
|
|
2
4
|
|
|
3
5
|
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).
|
|
4
6
|
|
|
@@ -16,6 +16,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
16
16
|
const isDraft = agentState === AgentState.pending;
|
|
17
17
|
const isProcessing = agentState === AgentState.processing;
|
|
18
18
|
const isReady = agentState === AgentState.ready;
|
|
19
|
+
const agentKey = title?.toLowerCase()?.replace(/\s+/g, '-');
|
|
19
20
|
// Handle image loading and errors
|
|
20
21
|
React.useEffect(() => {
|
|
21
22
|
if (!agentImage) {
|
|
@@ -55,7 +56,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
55
56
|
? 'var(--colors-light-background-bg-error-subtle)'
|
|
56
57
|
: isDraft
|
|
57
58
|
? 'var(--colors-light-background-bg-element)'
|
|
58
|
-
: '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: `
|
|
59
|
+
: '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: `
|
|
59
60
|
@keyframes spin {
|
|
60
61
|
0% { transform: rotate(0deg); }
|
|
61
62
|
100% { transform: rotate(360deg); }
|
|
@@ -78,7 +79,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
78
79
|
position: 'absolute',
|
|
79
80
|
right: '8px',
|
|
80
81
|
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(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
|
+
}, 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: {
|
|
82
83
|
maxWidth: '140px',
|
|
83
84
|
overflow: 'hidden',
|
|
84
85
|
whiteSpace: 'nowrap',
|
|
@@ -199,7 +199,7 @@ const StyledButton = styled.button `
|
|
|
199
199
|
var(--global-shadows-shadow-xs-color);
|
|
200
200
|
}
|
|
201
201
|
`;
|
|
202
|
-
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', }) => {
|
|
202
|
+
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, }) => {
|
|
203
203
|
const getIconSize = () => {
|
|
204
204
|
const sizes = {
|
|
205
205
|
[ButtonSize.xl]: 24,
|
|
@@ -298,5 +298,5 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
|
|
|
298
298
|
trailingIcon &&
|
|
299
299
|
getIconComponent(trailingIcon, iconProps)] }));
|
|
300
300
|
};
|
|
301
|
-
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() }));
|
|
301
|
+
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() }));
|
|
302
302
|
};
|
|
@@ -44,15 +44,18 @@ export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCre
|
|
|
44
44
|
const case1 = overUsageEnabled && overUsedCredits > 0; // if over usage is enabled and over used credits are greater than 0
|
|
45
45
|
const case2 = case1 || !creditsLimitReached; // if case 1 is true or credits limit is not reached
|
|
46
46
|
const case3 = !overUsageEnabled && creditsLimitReached; // if over usage is not enabled and credits limit is reached
|
|
47
|
+
const availableCredits = creditsLimitReached ? 0 : maxCredits - usedCredits;
|
|
47
48
|
return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed &&
|
|
48
49
|
maxCredits !== undefined &&
|
|
49
|
-
|
|
50
|
+
availableCredits !== undefined && (_jsxs(React.Fragment, { children: [_jsxs(CreditRow, { style: {
|
|
50
51
|
gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
|
|
51
|
-
}, children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${
|
|
52
|
+
}, children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "Credits Limit Reached" }) })), _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
|
|
52
53
|
if (onUpgradeClick) {
|
|
53
54
|
onUpgradeClick();
|
|
54
55
|
}
|
|
55
|
-
} })] }), case1 && (_jsx(CreditRow, { children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) }) })), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), isCollapsed &&
|
|
56
|
+
} })] }), case1 && (_jsx(CreditRow, { children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) }) })), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), isCollapsed &&
|
|
57
|
+
maxCredits !== undefined &&
|
|
58
|
+
availableCredits !== undefined && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${overUsedCredits}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
|
|
56
59
|
if (onUpgradeClick) {
|
|
57
60
|
onUpgradeClick();
|
|
58
61
|
}
|
package/dist/stories/UI/Menu.js
CHANGED
|
@@ -4,7 +4,7 @@ import { Fragment, useState } from 'react';
|
|
|
4
4
|
import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonType, } from '../Buttons';
|
|
5
5
|
import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
6
6
|
import { getIconComponent } from '../../utils';
|
|
7
|
-
export const Menu = ({ icon = 'DotsThree', items, style, }) => {
|
|
7
|
+
export const Menu = ({ icon = 'DotsThree', items, style, testKey, }) => {
|
|
8
8
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
9
9
|
const open = Boolean(anchorEl);
|
|
10
10
|
const handleClick = (event) => {
|
|
@@ -24,7 +24,7 @@ export const Menu = ({ icon = 'DotsThree', items, style, }) => {
|
|
|
24
24
|
return 'var(--colors-light-text-text-error)';
|
|
25
25
|
return 'var(--colors-light-text-text-title)';
|
|
26
26
|
};
|
|
27
|
-
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: {
|
|
27
|
+
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: {
|
|
28
28
|
'aria-labelledby': 'basic-button',
|
|
29
29
|
style: {
|
|
30
30
|
padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
|
|
@@ -38,7 +38,7 @@ export const Menu = ({ icon = 'DotsThree', items, style, }) => {
|
|
|
38
38
|
root: { style: { gap: '4px' } },
|
|
39
39
|
}, children: items?.map((action, index) => {
|
|
40
40
|
if (action) {
|
|
41
|
-
return (_jsxs(MuiMenuItem, { onClick: (e) => handleMenuItemClick(action, e), sx: { gap: '8px' }, disableRipple: true, children: [action?.icon &&
|
|
41
|
+
return (_jsxs(MuiMenuItem, { onClick: (e) => handleMenuItemClick(action, e), sx: { gap: '8px' }, disableRipple: true, "data-testid": `${testKey}-menu-item-${index}`, children: [action?.icon &&
|
|
42
42
|
getIconComponent(action.icon, {
|
|
43
43
|
width: '20px',
|
|
44
44
|
height: '20px',
|
package/dist/utils/common.js
CHANGED