@beydesign/storybook 0.2.19 → 0.2.21

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 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,6 +1,7 @@
 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/VideoCard/VideoCard.d.ts

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

package/dist/stories/VideoCard/VideoCard.js

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,156 @@
+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

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

package/dist/stories/VideoCard/VideoCardSkeleton.js

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,31 @@
+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

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

package/dist/stories/VideoCard/index.js

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

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

@@ -0,0 +1,47 @@
+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

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

package/package.json

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