@beydesign/storybook 0.1.5 → 0.1.7
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/dist/stories/Credits/CreditsCard.js +2 -3
- package/dist/stories/Credits/CreditsCard.stories.d.ts +0 -1
- package/dist/stories/Credits/CreditsCard.stories.js +0 -6
- package/dist/stories/Credits/CreditsCardSkeleton.d.ts +3 -0
- package/dist/stories/Credits/CreditsCardSkeleton.js +30 -0
- package/dist/stories/Credits/CreditsCardSkeleton.stories.d.ts +7 -0
- package/dist/stories/Credits/CreditsCardSkeleton.stories.js +40 -0
- package/dist/stories/Credits/index.d.ts +1 -0
- package/dist/stories/Credits/index.js +1 -0
- package/dist/stories/Credits/types.d.ts +8 -2
- package/dist/stories/Navigation/Sidebar.js +7 -9
- package/dist/stories/Navigation/Sidebar.stories.d.ts +2 -0
- package/dist/stories/Navigation/Sidebar.stories.js +16 -0
- package/dist/stories/Navigation/types.d.ts +4 -0
- package/package.json +1 -1
|
@@ -6,7 +6,6 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
|
6
6
|
import { Box } from '@mui/material';
|
|
7
7
|
import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
|
|
8
8
|
import { formatNumberShort } from '../../utils';
|
|
9
|
-
import { SkeletonLoader } from '../UI';
|
|
10
9
|
const StyledCard = styled.div `
|
|
11
10
|
display: flex;
|
|
12
11
|
flex-direction: column;
|
|
@@ -42,7 +41,7 @@ const TextWrapper = styled.span `
|
|
|
42
41
|
display: inline-block;
|
|
43
42
|
white-space: nowrap;
|
|
44
43
|
`;
|
|
45
|
-
export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, managedAgentsInfoText = 'Managed Agents 1 Min = 100 Credits', speechToVideoInfoText = 'Speech-to-Video 1 Min = 50 Credits', overUsageEnabled = false, overUsedCredits = 0,
|
|
44
|
+
export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, managedAgentsInfoText = 'Managed Agents 1 Min = 100 Credits', speechToVideoInfoText = 'Speech-to-Video 1 Min = 50 Credits', overUsageEnabled = false, overUsedCredits = 0, }) => {
|
|
46
45
|
const isCollapsed = size === CreditsCardSize.Collapsed;
|
|
47
46
|
const creditsLimitReached = usedCredits >= maxCredits;
|
|
48
47
|
const case1 = overUsageEnabled && overUsedCredits > 0; // if over usage is enabled and over used credits are greater than 0
|
|
@@ -50,5 +49,5 @@ export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCre
|
|
|
50
49
|
const case3 = !overUsageEnabled && creditsLimitReached; // if over usage is not enabled and credits limit is reached
|
|
51
50
|
const availableCredits = creditsLimitReached ? 0 : maxCredits - usedCredits;
|
|
52
51
|
const isValid = maxCredits !== undefined && availableCredits !== undefined;
|
|
53
|
-
return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [
|
|
52
|
+
return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed && isValid && (_jsxs(React.Fragment, { children: [case2 && (_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })), _jsxs(CreditRow, { 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" }) })), !case2 && (_jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }))] }), case1 && (_jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) })), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: managedAgentsInfoText }) }) }), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: speechToVideoInfoText }) }) })] })), isCollapsed && isValid && (_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: `${formatNumberShort(availableCredits)}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${formatNumberShort(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: `${formatNumberShort(overUsedCredits)}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })] }))] }));
|
|
54
53
|
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Box } from '@mui/material';
|
|
4
|
+
import styled from '@emotion/styled';
|
|
5
|
+
import { SkeletonLoader } from '../UI';
|
|
6
|
+
import { CreditsCardSize } from './types';
|
|
7
|
+
const StyledSkeletonCard = styled.div `
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
gap: var(--spacing-tokens-size-in-px-spacing-spacing-md);
|
|
11
|
+
padding: ${({ $collapsed }) => $collapsed
|
|
12
|
+
? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
|
|
13
|
+
: '8px var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
|
|
14
|
+
background-color: var(--colors-light-background-bg-card-highlight);
|
|
15
|
+
border: 1px solid var(--colors-light-border-border-default);
|
|
16
|
+
border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md);
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: auto;
|
|
19
|
+
position: relative;
|
|
20
|
+
`;
|
|
21
|
+
const CreditRow = styled.div `
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'space-between'};
|
|
24
|
+
align-items: center;
|
|
25
|
+
width: 100%;
|
|
26
|
+
`;
|
|
27
|
+
export const CreditsCardSkeleton = ({ size = CreditsCardSize.Expanded, style, }) => {
|
|
28
|
+
const isCollapsed = size === CreditsCardSize.Collapsed;
|
|
29
|
+
return (_jsxs(StyledSkeletonCard, { "$collapsed": isCollapsed, "$size": size, style: style, children: [!isCollapsed && (_jsxs(React.Fragment, { children: [_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(SkeletonLoader, { width: "80px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }), _jsx(CreditRow, { children: _jsx(Box, { gap: "4px", display: "flex", flexDirection: "row", children: _jsx(SkeletonLoader, { width: "140px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }) }), _jsx(CreditRow, { children: _jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }), _jsx(CreditRow, { children: _jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) })] })), isCollapsed && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [_jsx(CreditRow, { "$collapsed": true, children: _jsx(SkeletonLoader, { width: "40px", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }), _jsx(SkeletonLoader, { width: "60px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
|
|
30
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { CreditsCardSkeleton } from './CreditsCardSkeleton';
|
|
3
|
+
declare const meta: Meta<typeof CreditsCardSkeleton>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof CreditsCardSkeleton>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Collapsed: Story;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { CreditsCardSkeleton } from './CreditsCardSkeleton';
|
|
2
|
+
import { CreditsCardSize } from './types';
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'Design System/Components/Credits/CreditsCardSkeleton',
|
|
5
|
+
component: CreditsCardSkeleton,
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: 'centered',
|
|
8
|
+
},
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
argTypes: {
|
|
11
|
+
size: {
|
|
12
|
+
control: 'select',
|
|
13
|
+
options: Object.values(CreditsCardSize),
|
|
14
|
+
description: 'Size variant of the skeleton',
|
|
15
|
+
table: {
|
|
16
|
+
type: { summary: 'CreditsCardSize' },
|
|
17
|
+
defaultValue: { summary: 'CreditsCardSize.Expanded' },
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
style: {
|
|
21
|
+
control: 'object',
|
|
22
|
+
description: 'Optional inline styles',
|
|
23
|
+
table: {
|
|
24
|
+
type: { summary: 'React.CSSProperties' },
|
|
25
|
+
defaultValue: { summary: 'undefined' },
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
export default meta;
|
|
31
|
+
export const Default = {
|
|
32
|
+
args: {
|
|
33
|
+
size: CreditsCardSize.Expanded,
|
|
34
|
+
},
|
|
35
|
+
};
|
|
36
|
+
export const Collapsed = {
|
|
37
|
+
args: {
|
|
38
|
+
size: CreditsCardSize.Collapsed,
|
|
39
|
+
},
|
|
40
|
+
};
|
|
@@ -44,8 +44,14 @@ export interface CreditsCardProps {
|
|
|
44
44
|
* Over used credits
|
|
45
45
|
*/
|
|
46
46
|
overUsedCredits?: number;
|
|
47
|
+
}
|
|
48
|
+
export interface CreditsCardSkeletonProps {
|
|
49
|
+
/**
|
|
50
|
+
* The size of the skeleton card
|
|
51
|
+
*/
|
|
52
|
+
size?: CreditsCardSize;
|
|
47
53
|
/**
|
|
48
|
-
*
|
|
54
|
+
* Optional inline styles
|
|
49
55
|
*/
|
|
50
|
-
|
|
56
|
+
style?: React.CSSProperties;
|
|
51
57
|
}
|
|
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
|
|
|
4
4
|
import { Box } from '@mui/material';
|
|
5
5
|
import { NavItem } from './NavItem';
|
|
6
6
|
import { Logo, LogoVariant } from '../UI';
|
|
7
|
-
import { CreditsCard, CreditsCardSize } from '../Credits';
|
|
7
|
+
import { CreditsCard, CreditsCardSize, CreditsCardSkeleton } from '../Credits';
|
|
8
8
|
import { SidebarSize, NavItemSize, NavItemState, } from './types';
|
|
9
9
|
import { Typography, TypographySize, TypographyWeight } from '../Typography';
|
|
10
10
|
import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonShape, ButtonSize, } from '../Buttons';
|
|
@@ -90,7 +90,7 @@ const NavItemWrapper = ({ item, isCollapsed, }) => {
|
|
|
90
90
|
};
|
|
91
91
|
return (_jsx(NavItem, { text: item.text, icon: item.icon, state: item.state || NavItemState.Default, size: isCollapsed ? NavItemSize.Collapsed : NavItemSize.Expanded, showBadge: isCollapsed ? false : item.showBadge, onClick: handleClick }));
|
|
92
92
|
};
|
|
93
|
-
export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = { color: 'var(--primitives-desktop-primary-brand-violet-950)' }, }) => {
|
|
93
|
+
export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, loadingCredits = false, onToggle, logoProps = { color: 'var(--primitives-desktop-primary-brand-violet-950)' }, }) => {
|
|
94
94
|
const [sidebarSize, setSidebarSize] = useState(size);
|
|
95
95
|
const handleToggle = () => {
|
|
96
96
|
const newSize = sidebarSize === SidebarSize.Expanded
|
|
@@ -105,13 +105,11 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
|
|
|
105
105
|
return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", className: isCollapsed ? 'hidden' : '', children: isCollapsed
|
|
106
106
|
? section.title.split(' ')[0]
|
|
107
107
|
: section.title }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
|
|
108
|
-
section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
? CreditsCardSize.Collapsed
|
|
114
|
-
: CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits }) })), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tertiary, style: {
|
|
108
|
+
section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [_jsxs(Box, { display: 'flex', justifyContent: 'center', padding: isCollapsed ? '8px' : '0px 12px', children: [credits && !loadingCredits && (_jsx(CreditsCard, { size: isCollapsed
|
|
109
|
+
? CreditsCardSize.Collapsed
|
|
110
|
+
: CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits })), !credits && loadingCredits && (_jsx(CreditsCardSkeleton, { size: isCollapsed
|
|
111
|
+
? CreditsCardSize.Collapsed
|
|
112
|
+
: CreditsCardSize.Expanded }))] }), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tertiary, style: {
|
|
115
113
|
boxShadow: '2px 4px 8px 0px #1D142814',
|
|
116
114
|
} })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tertiary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
|
|
117
115
|
boxShadow: '2px 4px 8px 0px #1D142814',
|
|
@@ -6,4 +6,6 @@ type Story = StoryObj<typeof Sidebar>;
|
|
|
6
6
|
export declare const InBoxContainer: Story;
|
|
7
7
|
export declare const Expanded: Story;
|
|
8
8
|
export declare const Collapsed: Story;
|
|
9
|
+
export declare const LoadingCredits: Story;
|
|
10
|
+
export declare const LoadingCreditsCollapsed: Story;
|
|
9
11
|
export declare const WithoutCredits: Story;
|
|
@@ -149,6 +149,22 @@ export const Collapsed = {
|
|
|
149
149
|
},
|
|
150
150
|
},
|
|
151
151
|
};
|
|
152
|
+
export const LoadingCredits = {
|
|
153
|
+
args: {
|
|
154
|
+
size: SidebarSize.Expanded,
|
|
155
|
+
navSections: defaultNavSections,
|
|
156
|
+
bottomNavItems: defaultBottomNavItems,
|
|
157
|
+
loadingCredits: true,
|
|
158
|
+
},
|
|
159
|
+
};
|
|
160
|
+
export const LoadingCreditsCollapsed = {
|
|
161
|
+
args: {
|
|
162
|
+
size: SidebarSize.Collapsed,
|
|
163
|
+
navSections: defaultNavSections,
|
|
164
|
+
bottomNavItems: defaultBottomNavItems,
|
|
165
|
+
loadingCredits: true,
|
|
166
|
+
},
|
|
167
|
+
};
|
|
152
168
|
export const WithoutCredits = {
|
|
153
169
|
args: {
|
|
154
170
|
size: SidebarSize.Expanded,
|
|
@@ -150,6 +150,10 @@ export interface SidebarProps {
|
|
|
150
150
|
* Credits information
|
|
151
151
|
*/
|
|
152
152
|
credits?: Omit<CreditsCardProps, 'size' | 'className'>;
|
|
153
|
+
/**
|
|
154
|
+
* Whether the credits are loading
|
|
155
|
+
*/
|
|
156
|
+
loadingCredits?: boolean;
|
|
153
157
|
/**
|
|
154
158
|
* Optional callback when sidebar is toggled
|
|
155
159
|
*/
|