@beydesign/storybook 0.0.30 → 0.0.32
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.
|
@@ -16,11 +16,14 @@ import { ProgressIndicator } from './ProgressIndicator';
|
|
|
16
16
|
import { ProgressIndicatorMode } from './types/progress-indicator';
|
|
17
17
|
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, }) => {
|
|
18
18
|
const [hovered, setHovered] = useState(false);
|
|
19
|
+
const [imageError, setImageError] = useState(false);
|
|
19
20
|
// const isError = agentState === AgentState.error;
|
|
20
|
-
|
|
21
|
+
const isDraft = agentState === AgentState.pending;
|
|
21
22
|
const isProcessing = agentState === AgentState.processing;
|
|
22
23
|
const isReady = agentState === AgentState.ready;
|
|
23
|
-
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:
|
|
24
|
+
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
|
|
25
|
+
? 'var(--colors-light-background-bg-element)'
|
|
26
|
+
: 'var(--colors-light-background-bg-component)', boxShadow: '0px 2px 8px 0px #2207380A', 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: [imageError && (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { text: "No Preview Available", size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }) })), agentImage && !imageError && (_jsx("img", { src: 'f', alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover' }, onError: () => setImageError(true), onLoad: () => setImageError(false) })), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
|
|
24
27
|
position: 'absolute',
|
|
25
28
|
right: '8px',
|
|
26
29
|
bottom: '8px',
|
|
@@ -18,7 +18,10 @@ const StyledCard = styled.div `
|
|
|
18
18
|
? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
|
|
19
19
|
: '8px var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
|
|
20
20
|
opacity: 1;
|
|
21
|
-
transition:
|
|
21
|
+
transition:
|
|
22
|
+
padding 0.3s ease-in-out,
|
|
23
|
+
width 0.3s ease-in-out,
|
|
24
|
+
height 0.3s ease-in-out;
|
|
22
25
|
width: 100%;
|
|
23
26
|
height: auto;
|
|
24
27
|
position: relative;
|
|
@@ -28,14 +31,19 @@ const CreditRow = styled.div `
|
|
|
28
31
|
justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'space-between'};
|
|
29
32
|
align-items: center;
|
|
30
33
|
width: 100%;
|
|
34
|
+
transition: justify-content 0.3s ease-in-out;
|
|
35
|
+
`;
|
|
36
|
+
const TextWrapper = styled.span `
|
|
37
|
+
display: inline-block;
|
|
38
|
+
white-space: nowrap;
|
|
31
39
|
`;
|
|
32
40
|
export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, creditInfoText = '1 Credit = 1 min video', }) => {
|
|
33
41
|
const isCollapsed = size === CreditsCardSize.Collapsed;
|
|
34
42
|
return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, children: [!isCollapsed &&
|
|
35
43
|
maxCredits !== undefined &&
|
|
36
|
-
usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap:
|
|
44
|
+
usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { text: "My Credits: ", size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { text: `${usedCredits}/`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { text: `${maxCredits}`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)" }) })] }), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
|
|
37
45
|
if (onUpgradeClick) {
|
|
38
46
|
onUpgradeClick();
|
|
39
47
|
}
|
|
40
|
-
} }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(Typography, { text: `${usedCredits}`, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }) }) }))] }));
|
|
48
|
+
} }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(TextWrapper, { children: _jsx(Typography, { text: `${usedCredits}`, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }) }) }) }))] }));
|
|
41
49
|
};
|
package/dist/stories/NavItem.js
CHANGED
|
@@ -12,12 +12,12 @@ const StyledNavItem = styled.div `
|
|
|
12
12
|
flex-direction: row;
|
|
13
13
|
align-items: center;
|
|
14
14
|
gap: 12px;
|
|
15
|
-
padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '0px
|
|
15
|
+
padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '0px 22px 0px 0px' : '0px 60px 0px 0px'};
|
|
16
16
|
border-radius: 8px;
|
|
17
17
|
cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
|
|
18
18
|
opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
|
|
19
|
-
transition:
|
|
20
|
-
justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? '
|
|
19
|
+
transition: padding 0.3s ease-in-out;
|
|
20
|
+
justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? 'center' : 'flex-start'};
|
|
21
21
|
|
|
22
22
|
&:hover {
|
|
23
23
|
.nav-item-icon {
|
|
@@ -39,7 +39,11 @@ const IconWrapper = styled.span `
|
|
|
39
39
|
color: ${({ $state }) => $state === NavItemState.Active
|
|
40
40
|
? 'var(--colors-light-background-bg-brand)'
|
|
41
41
|
: 'var(--primitives-desktop-primary-gray-500)'};
|
|
42
|
-
transition: color 0.
|
|
42
|
+
transition: color 0.3s ease-in-out;
|
|
43
|
+
`;
|
|
44
|
+
const TextWrapper = styled.span `
|
|
45
|
+
display: inline-block;
|
|
46
|
+
white-space: nowrap;
|
|
43
47
|
`;
|
|
44
48
|
export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavItemSize.Expanded, showBadge = false, onClick, className, }) => {
|
|
45
49
|
const handleClick = () => {
|
|
@@ -50,11 +54,11 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
|
|
|
50
54
|
const isCollapsed = size === NavItemSize.Collapsed;
|
|
51
55
|
return (_jsxs(StyledNavItem, { "$state": state, "$size": size, onClick: handleClick, className: className, title: isCollapsed ? text : undefined, children: [_jsx("svg", { width: "5", height: "36", viewBox: "0 0 5 36", fill: state === NavItemState.Active
|
|
52
56
|
? 'var(--colors-light-background-bg-brand)'
|
|
53
|
-
: 'transparent', xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems:
|
|
57
|
+
: 'transparent', xmlns: "http://www.w3.org/2000/svg", style: { transition: 'fill 0.3s ease-in-out' }, children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", sx: { transition: 'gap 0.3s ease-in-out' }, children: [_jsx(IconWrapper, { className: "nav-item-icon", "$state": state, children: getIconComponent(icon, {
|
|
54
58
|
size: 20,
|
|
55
|
-
}) }), !isCollapsed && (_jsx(
|
|
59
|
+
}) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { text: text, size: TypographySize.TextS, weight: state === NavItemState.Active
|
|
56
60
|
? TypographyWeight.Medium
|
|
57
61
|
: TypographyWeight.Regular, className: "nav-item-text", color: state === NavItemState.Active
|
|
58
62
|
? 'var(--colors-light-background-bg-brand)'
|
|
59
|
-
: 'var(--colors-light-text-text-subtle)' }) })), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", text:
|
|
63
|
+
: 'var(--colors-light-text-text-subtle)' }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", text: "Coming Soon", color: BadgeColor.Default }))] })] }));
|
|
60
64
|
};
|
package/dist/stories/Sidebar.js
CHANGED
|
@@ -20,8 +20,8 @@ const StyledSidebar = styled.div `
|
|
|
20
20
|
background-color: var(--colors-light-background-bg-surface);
|
|
21
21
|
border-right: 1px solid var(--colors-light-border-border-default);
|
|
22
22
|
height: 100vh;
|
|
23
|
-
width:
|
|
24
|
-
transition: width 0.3s ease;
|
|
23
|
+
width: ${({ $size }) => ($size === SidebarSize.Expanded ? 'auto' : '64px')};
|
|
24
|
+
transition: width 0.3s ease-in-out;
|
|
25
25
|
overflow-x: hidden;
|
|
26
26
|
overflow-y: scroll;
|
|
27
27
|
position: relative;
|
|
@@ -40,6 +40,7 @@ const LogoContainer = styled.div `
|
|
|
40
40
|
margin-bottom: 32px;
|
|
41
41
|
min-height: 38px;
|
|
42
42
|
height: 38px;
|
|
43
|
+
transition: all 0.3s ease-in-out;
|
|
43
44
|
`;
|
|
44
45
|
const ToggleButtonWrapper = styled.div `
|
|
45
46
|
position: absolute;
|
|
@@ -50,6 +51,7 @@ const ToggleButtonWrapper = styled.div `
|
|
|
50
51
|
visibility: visible;
|
|
51
52
|
filter: drop-shadow(0px 2px 4px rgba(29, 20, 40, 0.08));
|
|
52
53
|
contain: layout;
|
|
54
|
+
transition: transform 0.3s ease-in-out;
|
|
53
55
|
`;
|
|
54
56
|
const NavItemsContainer = styled.div `
|
|
55
57
|
display: flex;
|
|
@@ -61,6 +63,7 @@ const NavSection = styled.div `
|
|
|
61
63
|
display: flex;
|
|
62
64
|
flex-direction: column;
|
|
63
65
|
gap: 8px;
|
|
66
|
+
transition: all 0.3s ease-in-out;
|
|
64
67
|
`;
|
|
65
68
|
const SectionTitle = styled.div `
|
|
66
69
|
color: var(--colors-light-text-text-subtle);
|
|
@@ -68,6 +71,7 @@ const SectionTitle = styled.div `
|
|
|
68
71
|
display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
|
|
69
72
|
opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
|
|
70
73
|
justify-content: ${({ $size }) => $size === SidebarSize.Collapsed ? 'center' : 'flex-start'};
|
|
74
|
+
transition: all 0.3s ease-in-out;
|
|
71
75
|
`;
|
|
72
76
|
const Separator = styled.div `
|
|
73
77
|
height: 0.31px;
|
|
@@ -75,9 +79,11 @@ const Separator = styled.div `
|
|
|
75
79
|
padding: 0 28px;
|
|
76
80
|
margin: 10px;
|
|
77
81
|
opacity: 0.05;
|
|
82
|
+
transition: all 0.3s ease-in-out;
|
|
78
83
|
`;
|
|
79
84
|
const BottomContainer = styled.div `
|
|
80
85
|
margin-top: 16px;
|
|
86
|
+
transition: all 0.3s ease-in-out;
|
|
81
87
|
`;
|
|
82
88
|
// Wrapper component to handle links
|
|
83
89
|
const NavItemWrapper = ({ item, isCollapsed, }) => {
|