@beydesign/storybook 0.1.4 → 0.1.6

package/dist/stories/Credits/CreditsCardSkeleton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CreditsCardSkeletonProps } from './types';
+export declare const CreditsCardSkeleton: React.FC<CreditsCardSkeletonProps>;

package/dist/stories/Credits/CreditsCardSkeleton.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import styled from '@emotion/styled';
+import { SkeletonLoader } from '../UI';
+import { CreditsCardSize } from './types';
+const StyledSkeletonCard = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  padding: ${({ $collapsed }) => $collapsed
+    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+    : '8px var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
+  background-color: var(--colors-light-background-bg-card-highlight);
+  border: 1px solid var(--colors-light-border-border-default);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  width: 100%;
+  height: auto;
+  position: relative;
+`;
+const CreditRow = styled.div `
+  display: flex;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'space-between'};
+  align-items: center;
+  width: 100%;
+`;
+export const CreditsCardSkeleton = ({ size = CreditsCardSize.Expanded, style, }) => {
+    const isCollapsed = size === CreditsCardSize.Collapsed;
+    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)" })] }))] }));
+};

package/dist/stories/Credits/CreditsCardSkeleton.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreditsCardSkeleton } from './CreditsCardSkeleton';
+declare const meta: Meta<typeof CreditsCardSkeleton>;
+export default meta;
+type Story = StoryObj<typeof CreditsCardSkeleton>;
+export declare const Default: Story;
+export declare const Collapsed: Story;

package/dist/stories/Credits/CreditsCardSkeleton.stories.js

@@ -0,0 +1,40 @@
+import { CreditsCardSkeleton } from './CreditsCardSkeleton';
+import { CreditsCardSize } from './types';
+const meta = {
+    title: 'Design System/Components/Credits/CreditsCardSkeleton',
+    component: CreditsCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(CreditsCardSize),
+            description: 'Size variant of the skeleton',
+            table: {
+                type: { summary: 'CreditsCardSize' },
+                defaultValue: { summary: 'CreditsCardSize.Expanded' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Optional inline styles',
+            table: {
+                type: { summary: 'React.CSSProperties' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: CreditsCardSize.Expanded,
+    },
+};
+export const Collapsed = {
+    args: {
+        size: CreditsCardSize.Collapsed,
+    },
+};

package/dist/stories/Credits/index.d.ts

@@ -1,2 +1,3 @@
 export * from './CreditsCard';
+export * from './CreditsCardSkeleton';
 export * from './types';

package/dist/stories/Credits/index.js

@@ -1,2 +1,3 @@
 export * from './CreditsCard';
+export * from './CreditsCardSkeleton';
 export * from './types';

package/dist/stories/Credits/types.d.ts

@@ -45,3 +45,13 @@ export interface CreditsCardProps {
      */
     overUsedCredits?: number;
 }
+export interface CreditsCardSkeletonProps {
+    /**
+     * The size of the skeleton card
+     */
+    size?: CreditsCardSize;
+    /**
+     * Optional inline styles
+     */
+    style?: React.CSSProperties;
+}

package/dist/stories/Navigation/Sidebar.js

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { Box } from '@mui/material';
 import { NavItem } from './NavItem';
 import { Logo, LogoVariant } from '../UI';
-import { CreditsCard, CreditsCardSize } from '../Credits';
+import { CreditsCard, CreditsCardSize, CreditsCardSkeleton } from '../Credits';
 import { SidebarSize, NavItemSize, NavItemState, } from './types';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonShape, ButtonSize, } from '../Buttons';
@@ -90,7 +90,7 @@ const NavItemWrapper = ({ item, isCollapsed, }) => {
     };
     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 }));
 };
-export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = { color: 'var(--primitives-desktop-primary-brand-violet-950)' }, }) => {
+export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, loadingCredits = false, onToggle, logoProps = { color: 'var(--primitives-desktop-primary-brand-violet-950)' }, }) => {
     const [sidebarSize, setSidebarSize] = useState(size);
     const handleToggle = () => {
         const newSize = sidebarSize === SidebarSize.Expanded
@@ -105,13 +105,11 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
     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
                                                     ? section.title.split(' ')[0]
                                                     : section.title }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
-                                    section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(Box, { sx: {
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: isCollapsed ? '8px' : '0px 12px',
-                                    }, children: _jsx(CreditsCard, { size: isCollapsed
+                                    section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [_jsx(Box, { display: 'flex', justifyContent: 'center', padding: isCollapsed ? '8px' : '0px 12px', children: credits && !loadingCredits ? (_jsx(CreditsCard, { size: isCollapsed
                                             ? CreditsCardSize.Collapsed
-                                            : 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: {
+                                            : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits })) : (_jsx(CreditsCardSkeleton, { size: isCollapsed
+                                            ? CreditsCardSize.Collapsed
+                                            : 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: {
                         boxShadow: '2px 4px 8px 0px #1D142814',
                     } })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tertiary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
                         boxShadow: '2px 4px 8px 0px #1D142814',

package/dist/stories/Navigation/Sidebar.stories.d.ts

@@ -6,4 +6,6 @@ type Story = StoryObj<typeof Sidebar>;
 export declare const InBoxContainer: Story;
 export declare const Expanded: Story;
 export declare const Collapsed: Story;
+export declare const LoadingCredits: Story;
+export declare const LoadingCreditsCollapsed: Story;
 export declare const WithoutCredits: Story;

package/dist/stories/Navigation/Sidebar.stories.js

@@ -149,6 +149,22 @@ export const Collapsed = {
         },
     },
 };
+export const LoadingCredits = {
+    args: {
+        size: SidebarSize.Expanded,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+        loadingCredits: true,
+    },
+};
+export const LoadingCreditsCollapsed = {
+    args: {
+        size: SidebarSize.Collapsed,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+        loadingCredits: true,
+    },
+};
 export const WithoutCredits = {
     args: {
         size: SidebarSize.Expanded,

package/dist/stories/Navigation/types.d.ts

@@ -150,6 +150,10 @@ export interface SidebarProps {
      * Credits information
      */
     credits?: Omit<CreditsCardProps, 'size' | 'className'>;
+    /**
+     * Whether the credits are loading
+     */
+    loadingCredits?: boolean;
     /**
      * Optional callback when sidebar is toggled
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",