@beydesign/storybook 0.7.3 → 0.7.4

package/dist/stories/EntityCard/EntityCard.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { Box } from '@mui/material';
 import { keyframes } from '@emotion/react';
 import { ArrowsClockwise, Warning } from '@phosphor-icons/react';
 import { ASPECT_RATIO_BY_VIEW, WIDTH_BY_VIEW } from './constants';
 import { AvatarSilhouette } from './AvatarSilhouette';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { Menu, Badge, BadgeColor, BadgeSize } from '../UI';
+import { Menu, Badge, BadgeColor, BadgeSize, SkeletonLoader } from '../UI';
 import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
 /** Empty-state label per view variant, shown over the silhouette when there is no image. */
 const EMPTY_TEXT_BY_VIEW = {
@@ -34,10 +34,24 @@ const spin = keyframes `
 `;
 /** 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, error = false, onPreview, onCardClick, selected = false, previewButtonText, previewIcon = 'Play', previewButtonClassName, stockAgent = false, menuItems = [], showMenu = false, width, testId, }) => {
+export const EntityCard = ({ view = 'avatar', name, image, videoUrl, description = '', showDescription = false, date, aspectRatio, processing = false, error = false, onPreview, onCardClick, selected = false, previewButtonText, previewIcon = 'Play', previewButtonClassName, stockAgent = false, menuItems = [], showMenu = false, width, testId, }) => {
     const [hovered, setHovered] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     const [imageError, setImageError] = useState(false);
+    const [videoLoading, setVideoLoading] = useState(!!videoUrl);
+    const [videoError, setVideoError] = useState(false);
+    const videoRef = useRef(null);
+    useEffect(() => {
+        setVideoLoading(!!videoUrl);
+        setVideoError(false);
+    }, [videoUrl]);
+    const handleVideoLoadedData = useCallback(() => {
+        setVideoLoading(false);
+    }, []);
+    const handleVideoError = useCallback(() => {
+        setVideoLoading(false);
+        setVideoError(true);
+    }, []);
     const isVideo = view === 'video';
     const isAgent = view === 'agent';
     const cardWidth = width ?? WIDTH_BY_VIEW[view];
@@ -53,6 +67,7 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     const active = hovered || menuOpen;
     const showBadge = isAgent && stockAgent && !error;
     const showImage = !!image && !imageError && !error;
+    const showVideo = !showImage && !!videoUrl && !videoError && !error;
     const emptyText = EMPTY_TEXT_BY_VIEW[view];
     const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
     const handlePreviewButtonClick = (event) => {
@@ -79,7 +94,12 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
                 opacity: 1,
                 pointerEvents: 'auto',
             },
-        }, "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: [error ? (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-badge-accent-red)', display: 'flex', justifyContent: 'center', alignItems: 'center', role: 'img', "aria-label": ERROR_TEXT, title: ERROR_TEXT, children: _jsx(Warning, { size: 50, color: 'var(--color-foreground-fg-error)' }) })) : showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsxs(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor: view === 'agent'
+        }, "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: [error ? (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-badge-accent-red)', display: 'flex', justifyContent: 'center', alignItems: 'center', role: 'img', "aria-label": ERROR_TEXT, title: ERROR_TEXT, children: _jsx(Warning, { size: 50, color: 'var(--color-foreground-fg-error)' }) })) : showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : showVideo ? (_jsxs(Box, { width: '100%', height: '100%', position: 'relative', children: [_jsx("video", { ref: videoRef, src: videoUrl, muted: true, playsInline: true, preload: 'metadata', onLoadedData: handleVideoLoadedData, onError: handleVideoError, style: {
+                                    objectFit: 'cover',
+                                    width: '100%',
+                                    height: '100%',
+                                    display: videoLoading ? 'none' : 'block',
+                                } }), videoLoading && (_jsx(Box, { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', children: _jsx(SkeletonLoader, {}) }))] })) : (_jsxs(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor: view === 'agent'
                             ? 'var(--color-background-bg-component-disabled)'
                             : 'var(--color-background-bg-button-disabled)', children: [_jsx(Box, { position: 'absolute', bottom: 0, left: '50%', sx: {
                                     transform: 'translateX(-50%)',

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

@@ -16,3 +16,6 @@ export declare const VideoNoImage: Story;
 export declare const ErrorState: Story;
 export declare const VideoError: Story;
 export declare const Processing: Story;
+export declare const VideoPreview: Story;
+export declare const VideoPreviewLoading: Story;
+export declare const VideoPreviewFailure: Story;

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

@@ -30,6 +30,11 @@ const meta = {
             description: 'Image url',
             table: { type: { summary: 'string' } },
         },
+        videoUrl: {
+            control: 'text',
+            description: 'Video url — displays a paused video frame when no image is supplied',
+            table: { type: { summary: 'string' } },
+        },
         description: {
             control: 'text',
             description: 'Optional description shown below the image',
@@ -351,3 +356,59 @@ export const Processing = {
         },
     },
 };
+const sampleVideoUrl = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4';
+export const VideoPreview = {
+    args: {
+        view: 'video',
+        name: 'Product launch announcement',
+        videoUrl: sampleVideoUrl,
+        date: 'Jul 6, 2026',
+        onPreview: () => { },
+        previewButtonText: 'Preview',
+        showMenu: true,
+        menuItems: videoMenuItems,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Video view using `videoUrl` instead of a static image — the card displays a paused video frame. The video is muted, inline, and cropped with `object-fit: cover`.',
+            },
+        },
+    },
+};
+export const VideoPreviewLoading = {
+    args: {
+        view: 'video',
+        name: 'Product launch announcement',
+        videoUrl: 'https://httpbin.org/delay/30',
+        date: 'Jul 6, 2026',
+        onPreview: () => { },
+        previewButtonText: 'Preview',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'While the video frame loads, a shimmer skeleton fills the media area.',
+            },
+        },
+    },
+};
+export const VideoPreviewFailure = {
+    args: {
+        view: 'video',
+        name: 'Product launch announcement',
+        videoUrl: 'https://invalid.test/missing.mp4',
+        date: 'Jul 6, 2026',
+        onPreview: () => { },
+        previewButtonText: 'Preview',
+        showMenu: true,
+        menuItems: videoMenuItems,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When the video fails to load, the card falls back to the standard empty-state placeholder (silhouette + "Video is not available").',
+            },
+        },
+    },
+};

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

@@ -17,6 +17,8 @@ export interface EntityCardProps {
     name: string;
     /** Image url */
     image?: string;
+    /** Display a paused video frame when no image is supplied. */
+    videoUrl?: string;
     /** Optional description shown below the image */
     description?: string;
     /** Whether to show the description */

package/package.json

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