@beydesign/storybook 0.2.23 → 0.2.25

package/dist/stories/Drawer/Drawer.js

@@ -4,7 +4,9 @@ import styled from '@emotion/styled';
 import { DrawerSize, DrawerNavItemState, DrawerNavItemHierarchy, } from './types';
 import { DrawerNavItem } from './DrawerNavItem';
 import { DrawerCreditsCard } from './DrawerCreditsCard';
+import { DrawerCreditsCardSkeleton } from './DrawerCreditsCardSkeleton';
 import { DrawerProfile } from './DrawerProfile';
+import { DrawerProfileSkeleton } from './DrawerProfileSkeleton';
 import { Logo, LogoVariant } from '../UI';
 import { getIconComponent } from '../../utils';
 const EXPANDED_WIDTH = '238px';
@@ -136,7 +138,7 @@ const resolveState = (item, activeKey) => {
  * uncontrolled (`defaultCollapsed`). Every colour, space and radius resolves to
  * `@beydesign/tokens` CSS variables, so it renders correctly in light and dark.
  */
-export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = false, onToggle, showToggle = true, credits, profile, logo, className, style, testId, }) => {
+export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = false, onToggle, showToggle = true, credits, creditsLoading = false, profile, profileLoading = false, logo, className, style, testId, }) => {
     const isControlled = collapsed !== undefined;
     const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
     const isCollapsed = isControlled ? collapsed : internalCollapsed;
@@ -157,5 +159,5 @@ export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = fals
             item.onClick?.();
         }
     };
-    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsxs(Scroll, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: drawerSize, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || profile) && (_jsxs(Footer, { children: [credits && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: _jsx(DrawerCreditsCard, { ...credits, size: drawerSize }) })), profile && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: _jsx(DrawerProfile, { ...profile, size: drawerSize }) }))] }))] })] }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
+    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsxs(Scroll, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: drawerSize, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || creditsLoading || profile || profileLoading) && (_jsxs(Footer, { children: [(credits || creditsLoading) && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: creditsLoading ? (_jsx(DrawerCreditsCardSkeleton, { size: drawerSize })) : (_jsx(DrawerCreditsCard, { ...credits, size: drawerSize })) })), (profile || profileLoading) && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: profileLoading ? (_jsx(DrawerProfileSkeleton, { size: drawerSize })) : (profile && _jsx(DrawerProfile, { ...profile, size: drawerSize })) }))] }))] })] }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
 };

package/dist/stories/Drawer/Drawer.stories.d.ts

@@ -6,4 +6,9 @@ type Story = StoryObj<typeof Drawer>;
 export declare const Expanded: Story;
 export declare const Collapsed: Story;
 export declare const WithSubItems: Story;
+export declare const CreditsLoading: Story;
+export declare const CreditsLoadingCollapsed: Story;
+export declare const ProfileLoading: Story;
+export declare const ProfileLoadingCollapsed: Story;
+export declare const FooterLoading: Story;
 export declare const NoFooter: Story;

package/dist/stories/Drawer/Drawer.stories.js

@@ -42,6 +42,16 @@ const meta = {
             description: 'Show the floating collapse/expand toggle',
             table: { defaultValue: { summary: 'true' } },
         },
+        creditsLoading: {
+            control: 'boolean',
+            description: 'Render the credits card as a loading skeleton',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        profileLoading: {
+            control: 'boolean',
+            description: 'Render the profile footer as a loading skeleton',
+            table: { defaultValue: { summary: 'false' } },
+        },
         navItems: { control: false },
         credits: { control: false },
         profile: { control: false },
@@ -102,6 +112,21 @@ export const WithSubItems = {
         ],
     },
 };
+export const CreditsLoading = {
+    args: { creditsLoading: true },
+};
+export const CreditsLoadingCollapsed = {
+    args: { creditsLoading: true, defaultCollapsed: true },
+};
+export const ProfileLoading = {
+    args: { profileLoading: true },
+};
+export const ProfileLoadingCollapsed = {
+    args: { profileLoading: true, defaultCollapsed: true },
+};
+export const FooterLoading = {
+    args: { creditsLoading: true, profileLoading: true },
+};
 export const NoFooter = {
     args: { credits: undefined, profile: undefined },
 };

package/dist/stories/Drawer/DrawerCreditsCardSkeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DrawerCreditsCardSkeletonProps } from './types';
+/**
+ * Loading placeholder for {@link DrawerCreditsCard}. Reproduces the card's
+ * gem box, title, info icon, progress bar and credits caption (Expanded), or
+ * the single gem box (Collapsed), so it occupies the same footprint while the
+ * credits data is being fetched. Fully theme-aware.
+ */
+export declare const DrawerCreditsCardSkeleton: React.FC<DrawerCreditsCardSkeletonProps>;

package/dist/stories/Drawer/DrawerCreditsCardSkeleton.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { SkeletonLoader } from '../UI';
+import { DrawerSize } from './types';
+/** Mirrors {@link DrawerCreditsCard}'s Card so the skeleton snaps in place. */
+const Card = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+  width: 100%;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)
+    var(--spacing-tokens-size-in-px-spacing-spacing-lg, 12px);
+  background-color: var(--color-background-bg-card-highlight);
+  border: 1px solid var(--color-border-border-divider);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+`;
+const HeaderRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+const HeaderLeft = styled.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+`;
+const ProgressRow = styled.div `
+  display: flex;
+  align-items: center;
+  height: 20px;
+  width: 100%;
+`;
+const RADIUS_XS = 'var(--spacing-tokens-size-in-px-radius-radius-xs, 4px)';
+const RADIUS_FULL = 'var(--spacing-tokens-size-in-px-radius-radius-full, 999px)';
+const RADIUS_BOX = 'var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)';
+/**
+ * Loading placeholder for {@link DrawerCreditsCard}. Reproduces the card's
+ * gem box, title, info icon, progress bar and credits caption (Expanded), or
+ * the single gem box (Collapsed), so it occupies the same footprint while the
+ * credits data is being fetched. Fully theme-aware.
+ */
+export const DrawerCreditsCardSkeleton = ({ size = DrawerSize.Expanded, className, style, testId }) => {
+    if (size === DrawerSize.Collapsed) {
+        return (_jsx(SkeletonLoader, { width: "36px", height: "36px", borderRadius: RADIUS_BOX, style: style }));
+    }
+    return (_jsxs(Card, { className: className, style: style, "data-testid": testId, children: [_jsxs(HeaderRow, { children: [_jsxs(HeaderLeft, { children: [_jsx(SkeletonLoader, { width: "36px", height: "36px", borderRadius: RADIUS_BOX }), _jsx(SkeletonLoader, { width: "96px", height: "20px", borderRadius: RADIUS_XS })] }), _jsx(SkeletonLoader, { width: "20px", height: "20px", borderRadius: RADIUS_FULL })] }), _jsx(ProgressRow, { children: _jsx(SkeletonLoader, { width: "100%", height: "4px", borderRadius: RADIUS_XS }) }), _jsx(SkeletonLoader, { width: "60%", height: "16px", borderRadius: RADIUS_XS })] }));
+};

package/dist/stories/Drawer/DrawerCreditsCardSkeleton.stories.d.ts

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

package/dist/stories/Drawer/DrawerCreditsCardSkeleton.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DrawerCreditsCardSkeleton } from './DrawerCreditsCardSkeleton';
+import { DrawerSize } from './types';
+const meta = {
+    title: 'Design System/Components/Drawer/DrawerCreditsCardSkeleton',
+    component: DrawerCreditsCardSkeleton,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6940-29126',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'inline-radio',
+            options: Object.values(DrawerSize),
+            table: { defaultValue: { summary: 'Expanded' } },
+        },
+    },
+    args: {
+        size: DrawerSize.Expanded,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 230,
+                padding: 16,
+                backgroundColor: 'var(--color-background-bg-page-contrast)',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {};
+export const Collapsed = {
+    args: { size: DrawerSize.Collapsed },
+};

package/dist/stories/Drawer/DrawerProfileSkeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DrawerProfileSkeletonProps } from './types';
+/**
+ * Loading placeholder for {@link DrawerProfile}. Reproduces the footer's avatar
+ * plus name and email lines (Expanded), or just the avatar circle (Collapsed),
+ * so it occupies the same footprint while the user data is being fetched. Fully
+ * theme-aware.
+ */
+export declare const DrawerProfileSkeleton: React.FC<DrawerProfileSkeletonProps>;

package/dist/stories/Drawer/DrawerProfileSkeleton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { SkeletonLoader } from '../UI';
+import { DrawerSize } from './types';
+/**
+ * Mirrors {@link DrawerProfile}'s clickable Row so the skeleton snaps in place:
+ * same 8px padding, gap and alignment as the profile footer's default (menu)
+ * usage.
+ */
+const Row = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  width: 100%;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+`;
+const TextColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+  min-width: 0;
+`;
+const RADIUS_XS = 'var(--spacing-tokens-size-in-px-radius-radius-xs, 4px)';
+const RADIUS_FULL = 'var(--spacing-tokens-size-in-px-radius-radius-full, 999px)';
+/**
+ * Loading placeholder for {@link DrawerProfile}. Reproduces the footer's avatar
+ * plus name and email lines (Expanded), or just the avatar circle (Collapsed),
+ * so it occupies the same footprint while the user data is being fetched. Fully
+ * theme-aware.
+ */
+export const DrawerProfileSkeleton = ({ size = DrawerSize.Expanded, className, style, testId, }) => {
+    if (size === DrawerSize.Collapsed) {
+        return (_jsx(SkeletonLoader, { width: "32px", height: "32px", borderRadius: RADIUS_FULL, style: style }));
+    }
+    return (_jsxs(Row, { className: className, style: style, "data-testid": testId, children: [_jsx(SkeletonLoader, { width: "32px", height: "32px", borderRadius: RADIUS_FULL }), _jsxs(TextColumn, { children: [_jsx(SkeletonLoader, { width: "96px", height: "14px", borderRadius: RADIUS_XS }), _jsx(SkeletonLoader, { width: "128px", height: "12px", borderRadius: RADIUS_XS })] })] }));
+};

package/dist/stories/Drawer/DrawerProfileSkeleton.stories.d.ts

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

package/dist/stories/Drawer/DrawerProfileSkeleton.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DrawerProfileSkeleton } from './DrawerProfileSkeleton';
+import { DrawerSize } from './types';
+const meta = {
+    title: 'Design System/Components/Drawer/DrawerProfileSkeleton',
+    component: DrawerProfileSkeleton,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6940-28398',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'inline-radio',
+            options: Object.values(DrawerSize),
+            table: { defaultValue: { summary: 'Expanded' } },
+        },
+    },
+    args: {
+        size: DrawerSize.Expanded,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 230,
+                padding: 16,
+                backgroundColor: 'var(--color-background-bg-page-contrast)',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {};
+export const Collapsed = {
+    args: { size: DrawerSize.Collapsed },
+};

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

@@ -1,6 +1,8 @@
 export * from './Drawer';
 export * from './DrawerNavItem';
 export * from './DrawerCreditsCard';
+export * from './DrawerCreditsCardSkeleton';
 export * from './DrawerProfile';
+export * from './DrawerProfileSkeleton';
 export * from './DrawerIcons';
 export * from './types';

package/dist/stories/Drawer/index.js

@@ -1,6 +1,8 @@
 export * from './Drawer';
 export * from './DrawerNavItem';
 export * from './DrawerCreditsCard';
+export * from './DrawerCreditsCardSkeleton';
 export * from './DrawerProfile';
+export * from './DrawerProfileSkeleton';
 export * from './DrawerIcons';
 export * from './types';

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

@@ -77,6 +77,16 @@ export interface DrawerCreditsCardProps {
     style?: CSSProperties;
     testId?: string;
 }
+/**
+ * Props for the {@link DrawerCreditsCardSkeleton} loading placeholder.
+ */
+export interface DrawerCreditsCardSkeletonProps {
+    /** Expanded (full card) or Collapsed (icon-only box). */
+    size?: DrawerSize;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}
 /**
  * An item in the {@link DrawerProfile} click menu.
  */
@@ -114,6 +124,16 @@ export interface DrawerProfileProps {
     style?: CSSProperties;
     testId?: string;
 }
+/**
+ * Props for the {@link DrawerProfileSkeleton} loading placeholder.
+ */
+export interface DrawerProfileSkeletonProps {
+    /** Expanded (avatar + text lines) or Collapsed (avatar circle only). */
+    size?: DrawerSize;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}
 /**
  * A single entry in the {@link Drawer}'s `navItems` list.
  */
@@ -150,8 +170,12 @@ export interface DrawerProps {
     showToggle?: boolean;
     /** Credits card configuration. Omit to hide the card. */
     credits?: Omit<DrawerCreditsCardProps, 'size' | 'className' | 'style'>;
+    /** Render the credits card as a loading skeleton instead of its content. */
+    creditsLoading?: boolean;
     /** User profile footer configuration. Omit to hide the footer. */
     profile?: Omit<DrawerProfileProps, 'size' | 'className' | 'style'>;
+    /** Render the profile footer as a loading skeleton instead of its content. */
+    profileLoading?: boolean;
     /** Logo appearance overrides. */
     logo?: {
         color?: string;

package/package.json

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