@beydesign/storybook 0.3.1 → 0.4.1

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export * from './stories/UI';
 export * from './stories/Agent';
 export * from './stories/EntityCard';
-export * from './stories/VideoCard';
 export * from './stories/PlanCard';
 export * from './stories/Form';
 export * from './stories/Buttons';

package/dist/index.js

@@ -1,7 +1,6 @@
 export * from './stories/UI';
 export * from './stories/Agent';
 export * from './stories/EntityCard';
-export * from './stories/VideoCard';
 export * from './stories/PlanCard';
 export * from './stories/Form';
 export * from './stories/Buttons';

package/dist/stories/EntityCard/EntityCard.js

@@ -1,29 +1,65 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box } from '@mui/material';
+import { keyframes } from '@emotion/react';
+import { UserCircle, FilmSlate, ArrowsClockwise, Warning, } from '@phosphor-icons/react';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Menu, Badge, BadgeColor, BadgeSize } from '../UI';
 import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
-import { UserCircle } from '@phosphor-icons/react';
-export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, onPreview, previewButtonText, previewIcon = 'Play', showStatusBadge = false, statusBadgeText = '', statusBadgeColor = BadgeColor.Green, menuItems = [], showMenu = false, width, }) => {
+/** Default card width per view variant. */
+const WIDTH_BY_VIEW = {
+    avatar: '208px',
+    agent: '280px',
+    video: '340px',
+};
+/** Default image aspect ratio per view variant. */
+const ASPECT_RATIO_BY_VIEW = {
+    avatar: '203 / 264',
+    agent: '1 / 1',
+    video: '16 / 9',
+};
+const spin = keyframes `
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+/** A continuously rotating refresh icon, matching the AgentCard processing spinner. */
+const Spinner = () => (_jsx(Box, { display: 'flex', sx: { animation: `${spin} 1.5s linear infinite` }, children: _jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-white)' }) }));
+export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false, processingText = 'Please wait', error = false, errorText = 'Something went wrong', onPreview, previewButtonText, previewIcon = 'Play', showStatusBadge = false, statusBadgeText = '', statusBadgeColor = BadgeColor.Green, menuItems = [], showMenu = false, width, testId, }) => {
     const [hovered, setHovered] = useState(false);
     const [imageError, setImageError] = useState(false);
-    const isAgent = view === 'agent';
-    const cardWidth = width ?? (isAgent ? '280px' : '208px');
-    const imageAspectRatio = isAgent ? '1 / 1' : '203 / 264';
+    const isVideo = view === 'video';
+    const cardWidth = width ?? WIDTH_BY_VIEW[view];
+    const imageAspectRatio = aspectRatio ?? ASPECT_RATIO_BY_VIEW[view];
     const entityKey = name?.toLowerCase()?.replace(/\s+/g, '-');
     const hasMenu = showMenu && menuItems.length > 0;
-    const showActions = hovered && (!!onPreview || hasMenu);
+    const isProcessing = processing && !error;
+    const canPreview = !!onPreview && !isProcessing && !error;
+    const showActions = hovered && (canPreview || hasMenu);
     const showBadge = showStatusBadge && !!statusBadgeText;
+    const showImage = !!image && !imageError;
+    const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
     return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: hovered
             ? 'var(--color-background-bg-card-highlight-hover)'
-            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), sx: { transition: 'background-color 0.15s ease-in-out' }, "data-testid": `${entityKey}-entity-card`, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [image && !imageError ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(UserCircle, { size: 74, weight: 'thin', color: 'var(--color-text-text-subtle)' }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
+            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), sx: { transition: 'background-color 0.15s ease-in-out' }, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: isVideo ? (_jsx(FilmSlate, { size: 64, weight: 'thin', color: 'var(--color-text-text-subtle)' })) : (_jsx(UserCircle, { size: 74, weight: 'thin', color: 'var(--color-text-text-subtle)' })) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
                             backgroundImage: 'linear-gradient(180deg, rgba(21, 0, 73, 0) 0%, rgba(72, 29, 180, 0.152) 16.76%, rgba(32, 13, 82, 0.36) 100%)',
-                            opacity: hovered ? 1 : 0,
+                            opacity: hovered && !isProcessing && !error ? 1 : 0,
                             transition: 'opacity 0.15s ease-in-out',
                             pointerEvents: 'none',
-                        } }), _jsx(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
+                        } }), isProcessing && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-overlay-2)', sx: { zIndex: 1 }, children: [_jsx(Spinner, {}), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: processingText })] })), error && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-error-solid)', sx: { zIndex: 3, opacity: 0.7 }, children: [_jsx(Warning, { size: 74, color: 'var(--color-text-text-white)' }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: errorText })] })), showBadge && (_jsx(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', left: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', iconColor: 'var(--color-foreground-fg-accent-success)' }) })), showActions && (_jsxs(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 4 }, children: [canPreview &&
+                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }))] })), isVideo ? (_jsxs(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
+                            zIndex: 2,
+                            pointerEvents: 'none',
+                            backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',
+                        }, children: [_jsx(Box, { minWidth: 0, flex: 1, children: _jsx(Typography, { text: name, title: name, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', textStyle: {
+                                        display: 'block',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    } }) }), date && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-white)', textStyle: {
+                                    whiteSpace: 'nowrap',
+                                    flexShrink: 0,
+                                    opacity: 0.8,
+                                } }))] })) : (_jsx(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
                             backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',
-                        }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', textStyle: { wordBreak: 'break-word' }, children: name }) }), showBadge && (_jsx(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', left: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', iconColor: 'var(--color-foreground-fg-accent-success)' }) })), showActions && (_jsxs(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: [onPreview &&
-                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }))] }))] }), showDescription && description && (_jsx(Box, { display: 'flex', alignItems: 'center', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', boxSizing: 'border-box', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-label)', textStyle: { wordBreak: 'break-word' }, children: description }) }))] }));
+                        }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', textStyle: { wordBreak: 'break-word' }, children: name }) }))] }), showDescription && description && (_jsx(Box, { display: 'flex', alignItems: 'center', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', boxSizing: 'border-box', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-label)', textStyle: { wordBreak: 'break-word' }, children: description }) }))] }));
 };

package/dist/stories/EntityCard/EntityCard.stories.d.ts

@@ -8,3 +8,9 @@ export declare const AgentView: Story;
 export declare const WithDescription: Story;
 export declare const NoActions: Story;
 export declare const NoImage: Story;
+export declare const VideoView: Story;
+export declare const VideoProcessing: Story;
+export declare const VideoNoImage: Story;
+export declare const ErrorState: Story;
+export declare const VideoError: Story;
+export declare const Processing: Story;

package/dist/stories/EntityCard/EntityCard.stories.js

@@ -14,10 +14,10 @@ const meta = {
     argTypes: {
         view: {
             control: 'select',
-            options: ['avatar', 'agent'],
-            description: 'View variant — drives default width and image aspect ratio',
+            options: ['avatar', 'agent', 'video'],
+            description: 'View variant — drives default width, image aspect ratio and fallback icon',
             table: {
-                type: { summary: "'avatar' | 'agent'" },
+                type: { summary: "'avatar' | 'agent' | 'video'" },
                 defaultValue: { summary: 'avatar' },
             },
         },
@@ -41,6 +41,45 @@ const meta = {
             description: 'Whether to show the description',
             table: { type: { summary: 'boolean' } },
         },
+        date: {
+            control: 'text',
+            description: 'Secondary text shown to the right of the name (video view, e.g. created date)',
+            table: { type: { summary: 'string' } },
+        },
+        aspectRatio: {
+            control: 'text',
+            description: 'Aspect ratio of the image — overrides the per-view default',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '203 / 264 · 1 / 1 · 16 / 9' },
+            },
+        },
+        processing: {
+            control: 'boolean',
+            description: 'Show the processing overlay (spinner + label)',
+            table: { type: { summary: 'boolean' } },
+        },
+        processingText: {
+            control: 'text',
+            description: 'Processing overlay label',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Please wait' },
+            },
+        },
+        error: {
+            control: 'boolean',
+            description: 'Show the error overlay (warning icon + label)',
+            table: { type: { summary: 'boolean' } },
+        },
+        errorText: {
+            control: 'text',
+            description: 'Error overlay label',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Something went wrong' },
+            },
+        },
         showMenu: {
             control: 'boolean',
             description: 'Whether to show the menu on hover',
@@ -91,7 +130,7 @@ const meta = {
             description: 'Width of the card',
             table: {
                 type: { summary: 'string | number' },
-                defaultValue: { summary: '208px' },
+                defaultValue: { summary: '208px · 280px · 340px' },
             },
         },
     },
@@ -185,3 +224,119 @@ export const NoImage = {
         },
     },
 };
+const videoThumbnail = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=800&ixlib=rb-4.0.3';
+const videoMenuItems = [
+    {
+        label: 'Download Video',
+        icon: 'DownloadSimple',
+        onClick: () => { },
+    },
+    { label: 'Copy Video ID', icon: 'Copy', onClick: () => { } },
+    {
+        label: 'Delete Video',
+        icon: 'Trash',
+        onClick: () => { },
+        destructive: true,
+    },
+];
+export const VideoView = {
+    args: {
+        view: 'video',
+        name: 'Product launch announcement',
+        image: videoThumbnail,
+        date: 'Jul 6, 2026',
+        onPreview: () => { },
+        previewButtonText: 'Preview',
+        showMenu: true,
+        menuItems: videoMenuItems,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The video view — a landscape (16:9) media tile with the name and date overlaid on the bottom gradient. Hover to reveal the preview + menu actions.',
+            },
+        },
+    },
+};
+export const VideoProcessing = {
+    args: {
+        view: 'video',
+        name: 'Onboarding walkthrough',
+        image: videoThumbnail,
+        date: 'Jul 6, 2026',
+        processing: true,
+        showMenu: true,
+        menuItems: [videoMenuItems[2]],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'While a video renders, a spinning indicator overlays the thumbnail and the preview action is disabled. The menu stays available.',
+            },
+        },
+    },
+};
+export const VideoNoImage = {
+    args: {
+        view: 'video',
+        name: 'Product launch announcement',
+        date: 'Jul 6, 2026',
+        onPreview: () => { },
+        previewButtonText: 'Preview',
+        showMenu: true,
+        menuItems: videoMenuItems,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Video view fallback placeholder (FilmSlate) shown when no thumbnail is provided or it fails to load.',
+            },
+        },
+    },
+};
+export const ErrorState = {
+    args: {
+        ...Default.args,
+        name: 'Nelly',
+        error: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'An error overlay (warning icon + label) covers the image while the preview action is suppressed. The menu stays accessible so the item can still be retried or removed. Works across every view.',
+            },
+        },
+    },
+};
+export const VideoError = {
+    args: {
+        view: 'video',
+        name: 'Product launch announcement',
+        image: videoThumbnail,
+        date: 'Jul 6, 2026',
+        error: true,
+        showMenu: true,
+        menuItems: videoMenuItems,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Video view in an error state — e.g. a render that failed.',
+            },
+        },
+    },
+};
+export const Processing = {
+    args: {
+        ...Default.args,
+        name: 'Nelly',
+        processing: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A processing overlay (spinner + label) covers the image while the preview action is suppressed. The menu stays accessible. Works across every view.',
+            },
+        },
+    },
+};

package/dist/stories/EntityCard/EntityCardSkeleton.js

@@ -1,9 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { SkeletonLoader } from '../UI';
-export const EntityCardSkeleton = ({ view = 'avatar', width, showDescription = false, style, }) => {
-    const isAgent = view === 'agent';
-    const cardWidth = width ?? (isAgent ? '280px' : '208px');
-    const imageAspectRatio = isAgent ? '1 / 1' : '203 / 264';
+/** Default card width per view variant. */
+const WIDTH_BY_VIEW = {
+    avatar: '208px',
+    agent: '280px',
+    video: '340px',
+};
+/** Default image aspect ratio per view variant. */
+const ASPECT_RATIO_BY_VIEW = {
+    avatar: '203 / 264',
+    agent: '1 / 1',
+    video: '16 / 9',
+};
+export const EntityCardSkeleton = ({ view = 'avatar', aspectRatio, width, showDescription = false, style, }) => {
+    const cardWidth = width ?? WIDTH_BY_VIEW[view];
+    const imageAspectRatio = aspectRatio ?? ASPECT_RATIO_BY_VIEW[view];
     return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', style: style, children: [_jsx(Box, { width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: _jsx(SkeletonLoader, {}) }), showDescription && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', boxSizing: 'border-box', children: [_jsx(SkeletonLoader, { width: '100%', height: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), _jsx(SkeletonLoader, { width: '70%', height: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }))] }));
 };

package/dist/stories/EntityCard/EntityCardSkeleton.stories.d.ts

@@ -6,5 +6,6 @@ type Story = StoryObj<typeof EntityCardSkeleton>;
 export declare const Avatar: Story;
 export declare const AvatarWithDescription: Story;
 export declare const Agent: Story;
+export declare const Video: Story;
 export declare const Grid: Story;
 export declare const LoadingState: Story;

package/dist/stories/EntityCard/EntityCardSkeleton.stories.js

@@ -11,19 +11,26 @@ const meta = {
     argTypes: {
         view: {
             control: 'select',
-            options: ['avatar', 'agent'],
+            options: ['avatar', 'agent', 'video'],
             description: 'View variant — drives default width and image aspect ratio',
             table: {
-                type: { summary: "'avatar' | 'agent'" },
+                type: { summary: "'avatar' | 'agent' | 'video'" },
                 defaultValue: { summary: 'avatar' },
             },
         },
+        aspectRatio: {
+            control: 'text',
+            description: 'Aspect ratio of the placeholder — overrides the per-view default',
+            table: { type: { summary: 'string' } },
+        },
         width: {
             control: 'text',
             description: 'Width of the card (overrides the view default)',
             table: {
                 type: { summary: 'string | number' },
-                defaultValue: { summary: '208px (avatar) / 280px (agent)' },
+                defaultValue: {
+                    summary: '208px (avatar) / 280px (agent) / 340px (video)',
+                },
             },
         },
         showDescription: {
@@ -61,8 +68,13 @@ export const Agent = {
         view: 'agent',
     },
 };
+export const Video = {
+    args: {
+        view: 'video',
+    },
+};
 export const Grid = {
-    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(EntityCardSkeleton, { view: "avatar" }), _jsx(EntityCardSkeleton, { view: "avatar", showDescription: true }), _jsx(EntityCardSkeleton, { view: "agent" })] })),
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(EntityCardSkeleton, { view: "avatar" }), _jsx(EntityCardSkeleton, { view: "avatar", showDescription: true }), _jsx(EntityCardSkeleton, { view: "agent" }), _jsx(EntityCardSkeleton, { view: "video" })] })),
 };
 export const LoadingState = {
     render: () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { children: [_jsx("h3", { children: "Loading state example" }), _jsx("p", { children: "How a row of entity cards appears while data is loading." })] }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: Array(5)

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

@@ -4,13 +4,14 @@ import { IconName } from '../../utils';
  * Entity card view variants.
  * - `avatar`: portrait avatar tile (icon-only preview action)
  * - `agent`: wider, square agent tile (labelled action + status badge)
+ * - `video`: landscape media tile (name + date footer, optional processing overlay)
  */
-export type EntityCardView = 'avatar' | 'agent';
+export type EntityCardView = 'avatar' | 'agent' | 'video';
 /**
  * Entity card component props
  */
 export interface EntityCardProps {
-    /** View variant — drives default width and image aspect ratio */
+    /** View variant — drives default width, image aspect ratio and fallback icon */
     view?: EntityCardView;
     /** Display name shown over the image */
     name: string;
@@ -20,6 +21,18 @@ export interface EntityCardProps {
     description?: string;
     /** Whether to show the description */
     showDescription?: boolean;
+    /** Secondary text shown to the right of the name (`video` view, e.g. formatted created date) */
+    date?: string;
+    /** Aspect ratio of the image — overrides the per-view default (`203 / 264` avatar, `1 / 1` agent, `16 / 9` video) */
+    aspectRatio?: string;
+    /** Show the processing overlay (spinner + label) over the image */
+    processing?: boolean;
+    /** Processing overlay label. Defaults to "Please wait" */
+    processingText?: string;
+    /** Show the error overlay (warning icon + label) over the image */
+    error?: boolean;
+    /** Error overlay label. Defaults to "Something went wrong" */
+    errorText?: string;
     /** Preview handler — renders the action button on hover */
     onPreview?: () => void;
     /** Label for the action button; when set it renders text + icon, otherwise icon-only */
@@ -38,6 +51,8 @@ export interface EntityCardProps {
     showMenu?: boolean;
     /** Width of the card (overrides the view default) */
     width?: string | number;
+    /** Test id (overrides the derived default) */
+    testId?: string;
 }
 /**
  * Entity card skeleton props
@@ -45,6 +60,8 @@ export interface EntityCardProps {
 export interface EntityCardSkeletonProps {
     /** View variant — drives default width and image aspect ratio */
     view?: EntityCardView;
+    /** Aspect ratio of the placeholder — overrides the per-view default */
+    aspectRatio?: string;
     /** Width of the card (overrides the view default) */
     width?: string | number;
     /** Show the description placeholder */

package/package.json

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

package/dist/stories/VideoCard/VideoCard.d.ts

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

package/dist/stories/VideoCard/VideoCard.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box } from '@mui/material';
-import { keyframes } from '@emotion/react';
-import { FilmSlate } from '@phosphor-icons/react';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { Menu } from '../UI';
-import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
-const spin = keyframes `
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-`;
-const SPINNER_SIZE = 28;
-const SPINNER_BARS = 12;
-/** A spoked activity spinner that rotates continuously. */
-const Spinner = () => (_jsx(Box, { position: 'relative', width: `${SPINNER_SIZE}px`, height: `${SPINNER_SIZE}px`, sx: { animation: `${spin} 1s steps(${SPINNER_BARS}, end) infinite` }, children: Array.from({ length: SPINNER_BARS }).map((_, i) => (_jsx(Box, { position: 'absolute', top: 0, left: '50%', width: '2px', height: `${SPINNER_SIZE / 2}px`, borderRadius: '2px', bgcolor: 'var(--color-text-text-white)', sx: {
-            transform: `translateX(-50%) rotate(${i * (360 / SPINNER_BARS)}deg)`,
-            transformOrigin: `50% ${SPINNER_SIZE / 2}px`,
-            opacity: 0.15 + (0.85 * i) / (SPINNER_BARS - 1),
-        } }, i))) }));
-export const VideoCard = ({ name, image, date, aspectRatio = '16 / 9', processing = false, processingText = 'Processing…', onPreview, previewButtonText, previewIcon = 'Play', menuItems = [], showMenu = false, width, testId, }) => {
-    const [hovered, setHovered] = useState(false);
-    const [imageError, setImageError] = useState(false);
-    const entityKey = name?.toLowerCase()?.replace(/\s+/g, '-');
-    const hasMenu = showMenu && menuItems.length > 0;
-    const canPreview = !!onPreview && !processing;
-    const showActions = hovered && (canPreview || hasMenu);
-    const showImage = !!image && !imageError;
-    return (_jsx(Box, { width: width ?? '340px', display: 'flex', flexDirection: 'column', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: hovered
-            ? 'var(--color-background-bg-card-highlight-hover)'
-            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), sx: { transition: 'background-color 0.15s ease-in-out' }, "data-testid": testId ?? `${entityKey}-video-card`, children: _jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio }, children: [showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(FilmSlate, { size: 64, weight: 'thin', color: 'var(--color-text-text-subtle)' }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, sx: {
-                        backgroundImage: 'linear-gradient(180deg, rgba(21, 0, 73, 0) 0%, rgba(72, 29, 180, 0.152) 16.76%, rgba(32, 13, 82, 0.36) 100%)',
-                        opacity: hovered && !processing ? 1 : 0,
-                        transition: 'opacity 0.15s ease-in-out',
-                        pointerEvents: 'none',
-                    } }), processing && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-overlay-2)', sx: { zIndex: 1 }, children: [_jsx(Spinner, {}), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: processingText })] })), showActions && (_jsxs(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 3 }, children: [canPreview &&
-                            (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }))] })), _jsxs(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
-                        zIndex: 2,
-                        pointerEvents: 'none',
-                        backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',
-                    }, children: [_jsx(Box, { minWidth: 0, flex: 1, children: _jsx(Typography, { text: name, title: name, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', textStyle: {
-                                    display: 'block',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                } }) }), date && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-white)', textStyle: { whiteSpace: 'nowrap', flexShrink: 0, opacity: 0.8 } }))] })] }) }));
-};

package/dist/stories/VideoCard/VideoCard.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { VideoCard } from './VideoCard';
-declare const meta: Meta<typeof VideoCard>;
-export default meta;
-type Story = StoryObj<typeof VideoCard>;
-export declare const Ready: Story;
-export declare const Processing: Story;
-export declare const NoImage: Story;
-export declare const NoActions: Story;

package/dist/stories/VideoCard/VideoCard.stories.js

@@ -1,156 +0,0 @@
-import { VideoCard } from './VideoCard';
-const meta = {
-    title: 'Design System/Components/VideoCard/VideoCard',
-    component: VideoCard,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        name: {
-            control: 'text',
-            description: 'Video name shown over the bottom of the thumbnail',
-            table: { type: { summary: 'string' } },
-        },
-        image: {
-            control: 'text',
-            description: 'Thumbnail url (video preview frame, or the avatar image as a fallback)',
-            table: { type: { summary: 'string' } },
-        },
-        date: {
-            control: 'text',
-            description: 'Secondary text shown to the right of the name (e.g. created date)',
-            table: { type: { summary: 'string' } },
-        },
-        aspectRatio: {
-            control: 'text',
-            description: 'Aspect ratio of the thumbnail',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: '16 / 9' },
-            },
-        },
-        processing: {
-            control: 'boolean',
-            description: 'Show the processing overlay (spinner + label)',
-            table: { type: { summary: 'boolean' } },
-        },
-        processingText: {
-            control: 'text',
-            description: 'Processing overlay label',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'Processing…' },
-            },
-        },
-        onPreview: {
-            description: 'Preview handler — reveals the action button on hover and makes the thumbnail clickable',
-            table: { type: { summary: 'function' } },
-        },
-        previewButtonText: {
-            control: 'text',
-            description: 'Label for the preview action; when set it renders text + icon, otherwise icon-only',
-            table: { type: { summary: 'string' } },
-        },
-        previewIcon: {
-            control: 'text',
-            description: 'Icon for the preview action',
-            table: {
-                type: { summary: 'IconName' },
-                defaultValue: { summary: 'Play' },
-            },
-        },
-        showMenu: {
-            control: 'boolean',
-            description: 'Whether to show the menu on hover',
-            table: { type: { summary: 'boolean' } },
-        },
-        menuItems: {
-            description: 'Menu items for the dropdown',
-            table: { type: { summary: 'array' } },
-        },
-        width: {
-            control: 'text',
-            description: 'Width of the card',
-            table: {
-                type: { summary: 'string | number' },
-                defaultValue: { summary: '340px' },
-            },
-        },
-    },
-};
-export default meta;
-const videoThumbnail = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=800&ixlib=rb-4.0.3';
-const menuItems = [
-    {
-        label: 'Download Video',
-        icon: 'DownloadSimple',
-        onClick: () => { },
-    },
-    { label: 'Copy Video ID', icon: 'Copy', onClick: () => { } },
-    {
-        label: 'Delete Video',
-        icon: 'Trash',
-        onClick: () => { },
-        destructive: true,
-    },
-];
-export const Ready = {
-    args: {
-        name: 'Product launch announcement',
-        image: videoThumbnail,
-        date: 'Jul 6, 2026',
-        onPreview: () => { },
-        previewButtonText: 'Preview',
-        showMenu: true,
-        menuItems,
-    },
-};
-export const Processing = {
-    args: {
-        name: 'Onboarding walkthrough',
-        image: videoThumbnail,
-        date: 'Jul 6, 2026',
-        processing: true,
-        showMenu: true,
-        menuItems: [menuItems[2]],
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'While a video renders, a spinning indicator overlays the thumbnail and the preview action is disabled. The menu stays available.',
-            },
-        },
-    },
-};
-export const NoImage = {
-    args: {
-        name: 'Product launch announcement',
-        date: 'Jul 6, 2026',
-        onPreview: () => { },
-        previewButtonText: 'Preview',
-        showMenu: true,
-        menuItems,
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Fallback placeholder shown when no thumbnail is provided or it fails to load.',
-            },
-        },
-    },
-};
-export const NoActions = {
-    args: {
-        name: 'Product launch announcement',
-        image: videoThumbnail,
-        date: 'Jul 6, 2026',
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'A read-only card without preview or menu actions on hover.',
-            },
-        },
-    },
-};

package/dist/stories/VideoCard/VideoCardSkeleton.d.ts

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

package/dist/stories/VideoCard/VideoCardSkeleton.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { SkeletonLoader } from '../UI';
-export const VideoCardSkeleton = ({ aspectRatio = '16 / 9', width, style, }) => {
-    return (_jsx(Box, { width: width ?? '340px', display: 'flex', flexDirection: 'column', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', style: style, children: _jsx(Box, { width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio }, children: _jsx(SkeletonLoader, {}) }) }));
-};

package/dist/stories/VideoCard/VideoCardSkeleton.stories.d.ts

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

package/dist/stories/VideoCard/VideoCardSkeleton.stories.js

@@ -1,31 +0,0 @@
-import { VideoCardSkeleton } from './VideoCardSkeleton';
-const meta = {
-    title: 'Design System/Components/VideoCard/VideoCardSkeleton',
-    component: VideoCardSkeleton,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        aspectRatio: {
-            control: 'text',
-            description: 'Aspect ratio of the thumbnail placeholder',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: '16 / 9' },
-            },
-        },
-        width: {
-            control: 'text',
-            description: 'Width of the card',
-            table: {
-                type: { summary: 'string | number' },
-                defaultValue: { summary: '340px' },
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {},
-};

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

@@ -1,3 +0,0 @@
-export * from './VideoCard';
-export * from './VideoCardSkeleton';
-export * from './types';

package/dist/stories/VideoCard/index.js

@@ -1,3 +0,0 @@
-export * from './VideoCard';
-export * from './VideoCardSkeleton';
-export * from './types';

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

@@ -1,47 +0,0 @@
-import { MenuItemProps } from '../UI';
-import { IconName } from '../../utils';
-/**
- * VideoCard component props — a landscape (16:9 by default) media tile for a
- * generated video. Shows a thumbnail with the video name and date overlaid on
- * the bottom gradient, a hover reveal of the preview + menu actions, and an
- * optional processing overlay.
- */
-export interface VideoCardProps {
-    /** Video name shown in the footer */
-    name: string;
-    /** Thumbnail url (video preview frame, or the avatar image as a fallback) */
-    image?: string;
-    /** Secondary text shown to the right of the name (e.g. formatted created date) */
-    date?: string;
-    /** Aspect ratio of the thumbnail. Defaults to `16 / 9` */
-    aspectRatio?: string;
-    /** Show the processing overlay (spinner + label) over the thumbnail */
-    processing?: boolean;
-    /** Processing overlay label. Defaults to "Processing…" */
-    processingText?: string;
-    /** Preview handler — reveals the action button on hover and makes the thumbnail clickable */
-    onPreview?: () => void;
-    /** Label for the preview action; when set it renders text + icon, otherwise icon-only */
-    previewButtonText?: string;
-    /** Icon for the preview action (defaults to `Play`) */
-    previewIcon?: IconName;
-    /** Menu items for the dropdown — renders the menu button on hover */
-    menuItems?: MenuItemProps[];
-    /** Whether to show the menu */
-    showMenu?: boolean;
-    /** Width of the card (overrides the default) */
-    width?: string | number;
-    /** Test id */
-    testId?: string;
-}
-/**
- * VideoCard skeleton props
- */
-export interface VideoCardSkeletonProps {
-    /** Aspect ratio of the thumbnail placeholder. Defaults to `16 / 9` */
-    aspectRatio?: string;
-    /** Width of the card (overrides the default) */
-    width?: string | number;
-    /** Custom style for the skeleton */
-    style?: React.CSSProperties;
-}

package/dist/stories/VideoCard/types.js

@@ -1 +0,0 @@
-export {};