@beydesign/storybook 0.0.1 → 0.0.2

package/README.md

@@ -1,50 +1,70 @@
-# React + TypeScript + Vite
+# BeyDesign Storybook
+[![Lint](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml)   [![Deploy Storybook to GitHub Pages](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml)   [![Publish Package to NPM](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml)  
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-Currently, two official plugins are available:
+A React component library implementing the Beyond Presence Design System. This package provides a collection of reusable components that follow the design specifications from our [Figma Design System](https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4295-3110&p=f&m=dev).
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Installation
 
-## Expanding the ESLint configuration
+```bash
+# First install the required design tokens package
+npm install @beydesign/tokens
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+# Then install the component library
+npm install @beydesign/storybook
+```
+
+## Prerequisites
+
+This package depends on `@beydesign/tokens` which provides the design tokens (colors, typography, spacing, etc.) used across the components. Make sure to install and configure it first.
+
+After installing the tokens package, you will need to install the figtree font. Link to the font is provided in the [Links](#links) section.
+
+## Usage
+
+1. Import the components you need:
 
-- Configure the top-level `parserOptions` property like this:
+```jsx
+import {
+  MainButton,
+  ButtonHierarchy,
+  ButtonShape,
+  ButtonSize,
+} from '@beydesign/storybook';
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+function App() {
+  return (
+    <MainButton
+      size={ButtonSize.lg}
+      shape={ButtonShape.Square}
+      onClick={rejoin}
+      disabled={buttonsDisabled}
+      hierarchy={ButtonHierarchy.Primary}
+      showLeadingIcon={false}
+      showTrailingIcon={false}
+      text="Rejoin"
+    />
+  );
+}
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+## Development
+
+To run the Storybook development environment locally:
+
+```bash
+npm install
+npm run storybook
 ```
+
+## Links
+
+- [Design System (Figma)](https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4295-3110&p=f&m=dev)
+- [NPM Package](https://www.npmjs.com/package/@beydesign/storybook)
+- [Hosted Storybook](https://beyond-presence.github.io/bey-design-system/)
+- [Design Tokens Package](https://github.com/Beyond-Presence/bey-design-token)
+- [Figtree Font](https://fonts.google.com/specimen/Figtree)
+
+## Support
+
+For issues and feature requests, please use our GitHub issues page.

package/dist/App.js

@@ -1,10 +1,166 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import reactLogo from './assets/react.svg';
-import viteLogo from '/vite.svg';
+import { EntityCard, EntityCardSkeleton } from './stories/EntityCard';
+import { PlanCard, PlanCardSkeleton } from './stories/PlanCard';
+import { BadgeColor } from './stories/UI';
 import './App.css';
+const plans = [
+    {
+        id: 'free',
+        title: 'Free',
+        description: 'Discover what Beyond Presence has to offer.',
+        price: '€0',
+        badgeText: 'Current Plan',
+        badgeColor: BadgeColor.Green,
+        buttonText: 'Current plan',
+        buttonDisabled: true,
+        features: [
+            '1 credit (1 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+        ],
+    },
+    {
+        id: 'personal',
+        title: 'Personal',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '€50',
+        features: [
+            '50 credits (50 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '1 active Conversational Agent',
+        ],
+    },
+    {
+        id: 'pro',
+        title: 'Pro',
+        description: 'Designed for professionals looking to expand their reach.',
+        price: '€210',
+        badgeText: 'Most Popular',
+        badgeColor: BadgeColor.Lemon,
+        highlighted: true,
+        features: [
+            '300 credits (300 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '3 active Conversational Agents',
+            'Priority support',
+        ],
+    },
+];
+const avatars = [
+    {
+        id: 'nelly',
+        name: 'Nelly',
+        image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=600&ixlib=rb-4.0.3',
+    },
+    {
+        id: 'ava',
+        name: 'Ava',
+        image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?fm=jpg&q=60&w=600&ixlib=rb-4.0.3',
+    },
+    {
+        id: 'leo',
+        name: 'Leo',
+        image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?fm=jpg&q=60&w=600&ixlib=rb-4.0.3',
+    },
+    {
+        id: 'maya',
+        name: 'Maya Customer Support',
+        image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?fm=jpg&q=60&w=600&ixlib=rb-4.0.3',
+    },
+    {
+        id: 'no-image',
+        name: 'No Image',
+        image: undefined,
+    },
+];
+const agentMenuItems = [
+    {
+        label: 'Conversation Link',
+        icon: 'ShareNetwork',
+        onClick: () => { },
+    },
+    { label: 'Copy Agent ID', icon: 'CopySimple', onClick: () => { } },
+    { label: 'Embed', icon: 'Code', onClick: () => { } },
+    {
+        label: 'Agent Details',
+        icon: 'IdentificationCard',
+        onClick: () => { },
+    },
+    { label: 'Duplicate', icon: 'Copy', onClick: () => { } },
+    {
+        label: 'Delete',
+        icon: 'Trash',
+        onClick: () => { },
+        destructive: true,
+    },
+];
 function App() {
-    const [count, setCount] = useState(0);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("a", { href: "https://vite.dev", target: "_blank", children: _jsx("img", { src: viteLogo, className: "logo", alt: "Vite logo" }) }), _jsx("a", { href: "https://react.dev", target: "_blank", children: _jsx("img", { src: reactLogo, className: "logo react", alt: "React logo" }) })] }), _jsx("h1", { children: "Vite + React" }), _jsxs("div", { className: "card", children: [_jsxs("button", { onClick: () => setCount((count) => count + 1), children: ["count is ", count] }), _jsxs("p", { children: ["Edit ", _jsx("code", { children: "src/App.tsx" }), " and save to test HMR"] })] }), _jsx("p", { className: "read-the-docs", children: "Click on the Vite and React logos to learn more" })] }));
+    const [loading, setLoading] = useState(false);
+    return (_jsxs("div", { style: { padding: '32px' }, children: [_jsx("button", { type: "button", onClick: () => setLoading((prev) => !prev), style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    marginBottom: '24px',
+                    padding: '8px 16px',
+                    borderRadius: '6px',
+                    border: '1px solid var(--color-border-border-component)',
+                    background: 'var(--color-background-bg-white)',
+                    color: 'var(--color-text-text-title)',
+                    cursor: 'pointer',
+                }, children: loading ? 'Show loaded cards' : 'Show loading skeletons' }), _jsx("h2", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--color-text-text-title)',
+                    marginBottom: '4px',
+                }, children: "Explore our Avatar Library" }), _jsx("p", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--color-text-text-subtle)',
+                    marginBottom: '24px',
+                }, children: "Select the perfect studio-quality digital human to make your interactions feel personal." }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '16px',
+                }, children: avatars.map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "avatar", showDescription: true }, avatar.id)) : (_jsx(EntityCard, { name: avatar.name, image: avatar.image, onPreview: () => console.log('Preview', avatar.name), showMenu: true, menuItems: [
+                        {
+                            label: 'Copy Avatar ID',
+                            icon: 'Copy',
+                            onClick: () => console.log('Copy', avatar.id),
+                        },
+                        {
+                            label: 'Create Agent',
+                            icon: 'UserCirclePlus',
+                            onClick: () => console.log('Create Agent', avatar.name),
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'Trash',
+                            onClick: () => console.log('Delete', avatar.name),
+                            destructive: true,
+                        },
+                    ], description: "daijdaij pa oapopao ao opaop op", showDescription: true }, avatar.id))) }), _jsx("h2", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--color-text-text-title)',
+                    margin: '40px 0 4px',
+                }, children: "Explore our Agent library" }), _jsx("p", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--color-text-text-subtle)',
+                    marginBottom: '24px',
+                }, children: "Your active agents \u2014 hover a card to join a live conversation." }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '16px',
+                }, children: avatars
+                    .slice(0, 4)
+                    .map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image, showStatusBadge: true, statusBadgeText: "Active", onPreview: () => console.log('Join', avatar.name), previewButtonText: "Join", previewIcon: "VideoCamera", showMenu: true, menuItems: agentMenuItems }, `agent-${avatar.id}`))) }), _jsx("h2", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--color-text-text-title)',
+                    margin: '40px 0 4px',
+                }, children: "Subscription plans" }), _jsx("p", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--color-text-text-subtle)',
+                    marginBottom: '24px',
+                }, children: "Choose the plan that's right for you." }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'flex-start',
+                    gap: '16px',
+                }, children: plans.map((plan) => loading ? (_jsx(PlanCardSkeleton, { featuresCount: plan.features.length }, plan.id)) : (_jsx(PlanCard, { title: plan.title, description: plan.description, price: plan.price, badgeText: plan.badgeText, badgeColor: plan.badgeColor, highlighted: plan.highlighted, buttonText: plan.buttonText, buttonDisabled: plan.buttonDisabled, features: plan.features, onButtonClick: () => console.log('Plan action', plan.title) }, plan.id))) })] }));
 }
 export default App;

package/dist/assets/animations/loading-animation.json

@@ -0,0 +1 @@
+{ "nm": "Main Scene", "ddd": 0, "h": 8, "w": 302, "meta": { "g": "@lottiefiles/creator 1.45.0" }, "layers": [{ "ty": 4, "nm": "Masque", "sr": 1, "st": 0, "op": 2250.58391725058, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "td": 1, "ao": 0, "ks": { "a": { "a": 0, "k": [-15.75, 16.08405002307892], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [151.25, 4.08405002307892], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Rectangle 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "rc", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Rect", "nm": "Tracé rectangulaire 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "r": { "a": 0, "k": 20, "ix": 4 }, "s": { "a": 0, "k": [300, 4], "ix": 2 } }, { "ty": "st", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Stroke", "nm": "Contour 1", "lc": 1, "lj": 1, "ml": 4, "o": { "a": 0, "k": 100, "ix": 4 }, "w": { "a": 0, "k": 0, "ix": 5 }, "c": { "a": 0, "k": [1, 1, 1], "ix": 3 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fond 1", "c": { "a": 0, "k": [0.9216, 1, 1], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-15.75, 16.062], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 1 }, { "ty": 4, "nm": "Item barre", "sr": 1, "st": 0, "op": 2250.58391725058, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "tt": 1, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [46, -12, 0], "t": 0 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [498, -12, 0], "t": 50 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [46, -12, 0], "t": 51 }, { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [46, -12, 0], "t": 53 }, { "s": [498, -12, 0], "t": 103 }], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 1, "k": [{ "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [100], "t": 46 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [0], "t": 49 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [0], "t": 51 }, { "s": [100], "t": 52 }], "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Rectangle 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "rc", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Rect", "nm": "Tracé rectangulaire 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "r": { "a": 0, "k": 20, "ix": 4 }, "s": { "a": 0, "k": [100, 4], "ix": 2 } }, { "ty": "st", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Stroke", "nm": "Contour 1", "lc": 1, "lj": 1, "ml": 4, "o": { "a": 0, "k": 100, "ix": 4 }, "w": { "a": 0, "k": 0, "ix": 5 }, "c": { "a": 0, "k": [1, 1, 1], "ix": 3 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fond 1", "c": { "a": 0, "k": [0.2902, 0.1216, 0.7216], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-115.75, 16.062], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 2, "tp": 1 }, { "ty": 4, "nm": "Barre", "sr": 1, "st": 0, "op": 2250.58391725058, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-15.75, 16.08405002307892], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [151.25, 4.08405002307892], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Rectangle 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "rc", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Rect", "nm": "Tracé rectangulaire 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "r": { "a": 0, "k": 20, "ix": 4 }, "s": { "a": 0, "k": [300, 4], "ix": 2 } }, { "ty": "st", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Stroke", "nm": "Contour 1", "lc": 1, "lj": 1, "ml": 4, "o": { "a": 0, "k": 100, "ix": 4 }, "w": { "a": 0, "k": 0, "ix": 5 }, "c": { "a": 0, "k": [1, 1, 1], "ix": 3 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fond 1", "c": { "a": 0, "k": [0.7412, 0.7059, 0.9961], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-15.75, 16.062], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 3 }], "v": "5.7.0", "fr": 50, "op": 105, "ip": 0, "assets": [] }

package/dist/index.d.ts

@@ -1,2 +1,12 @@
-export { MainButton } from './stories/Button';
-export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps } from './stories/types/button';
+export * from './stories/UI';
+export * from './stories/Agent';
+export * from './stories/EntityCard';
+export * from './stories/PlanCard';
+export * from './stories/Form';
+export * from './stories/Buttons';
+export * from './stories/Typography';
+export * from './stories/Credits';
+export * from './stories/Navigation';
+export * from './stories/Typography';
+export * from './stories/UI';
+export * from './stories/StripeProduct';

package/dist/index.js

@@ -1,4 +1,12 @@
-// Components
-export { MainButton } from './stories/Button';
-// Types
-export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType } from './stories/types/button';
+export * from './stories/UI';
+export * from './stories/Agent';
+export * from './stories/EntityCard';
+export * from './stories/PlanCard';
+export * from './stories/Form';
+export * from './stories/Buttons';
+export * from './stories/Typography';
+export * from './stories/Credits';
+export * from './stories/Navigation';
+export * from './stories/Typography';
+export * from './stories/UI';
+export * from './stories/StripeProduct';

package/dist/stories/Agent/AgentCard.d.ts

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

package/dist/stories/Agent/AgentCard.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { AgentState } from './types';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Toggle, TogglePosition } from '../Form';
+import { Badge, ProgressIndicator, ProgressIndicatorMode, BadgeColor, BadgeSize, Menu, } from '../UI';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+import { ArrowsClockwise, Warning } from '@phosphor-icons/react';
+import { getIconComponent } from '../../utils';
+export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, previewButtonText = 'Preview', showStatusBadge = false, statusBadgeText = '', showProgressIndicator = false, progressValue = 50, processingText = 'Creation in progress', agentId = '', onClickAgentId, }) => {
+    const [hovered, setHovered] = useState(false);
+    const [imageError, setImageError] = useState(false);
+    const [isLoading, setIsLoading] = useState(!!agentImage);
+    const isError = agentState === AgentState.error;
+    const isDraft = agentState === AgentState.pending;
+    const isProcessing = agentState === AgentState.processing;
+    const isReady = agentState === AgentState.ready;
+    const agentKey = title?.toLowerCase()?.replace(/\s+/g, '-');
+    // Handle image loading and errors
+    React.useEffect(() => {
+        if (!agentImage) {
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        setImageError(false);
+        // Preload the image to check if it exists
+        const img = new Image();
+        img.onload = () => {
+            setImageError(false);
+            setIsLoading(false);
+        };
+        img.onerror = () => {
+            setImageError(true);
+            setIsLoading(false);
+        };
+        img.src = agentImage;
+        // Cleanup
+        return () => {
+            img.onload = null;
+            img.onerror = null;
+        };
+    }, [agentImage]);
+    // Render loading state or placeholder
+    const renderImageContent = () => {
+        if (isLoading) {
+            return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-subtle)', className: "spin-animation" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: "Loading preview..." })] }) }));
+        }
+        if (imageError || !agentImage) {
+            return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', border: '2px solid var(--color-border-border-component)', boxSizing: 'border-box', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, children: "No Preview Available" }) }));
+        }
+        return (_jsx("img", { src: agentImage, alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' } }));
+    };
+    return (_jsxs(Box, { width: 'auto', display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: isError
+            ? 'var(--color-background-bg-error-subtle)'
+            : isDraft
+                ? 'var(--color-background-bg-element)'
+                : 'var(--color-background-bg-component)', boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, "data-testid": `${agentKey}-parent`, children: [_jsx("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+          .spin-animation {
+            animation: spin 1.5s linear infinite;
+          }
+        ` }), _jsxs(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', sx: { aspectRatio: 1 }, height: '268px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [renderImageContent(), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
+                            position: 'absolute',
+                            right: '8px',
+                            bottom: '8px',
+                            zIndex: 2,
+                        }, color: BadgeColor.Violet })), showStatusBadge && statusBadgeText && (_jsx(Badge, { text: statusBadgeText, size: BadgeSize.md, fill: true, style: {
+                            position: 'absolute',
+                            left: '8px',
+                            top: '8px',
+                            zIndex: 2,
+                        }, color: BadgeColor.Blue })), showMenu && menuItems.length > 0 && (_jsx(Menu, { items: menuItems, style: {
+                            zIndex: 2,
+                            position: 'absolute',
+                            right: '8px',
+                            top: '8px',
+                        }, testKey: agentKey })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' }, testId: `${agentKey}-preview-button` }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-white)', className: "spin-animation" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: processingText }), showProgressIndicator && (_jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: progressValue, maxValue: 100, textColor: 'var(--color-text-text-white)' }))] })), isError && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-error-solid)', style: { zIndex: 1, opacity: 0.7 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', 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: "Something went wrong" })] }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, textStyle: {
+                            maxWidth: '140px',
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis',
+                        }, children: title }), agentId && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: [_jsxs(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-title)', textStyle: {
+                                    maxWidth: '100px',
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                    textOverflow: 'ellipsis',
+                                }, title: agentId, children: ["ID ", agentId] }), onClickAgentId &&
+                                getIconComponent('Copy', {
+                                    width: '20px',
+                                    height: '20px',
+                                    weight: 'bold',
+                                    color: 'var(--color-text-text-accent)',
+                                    style: { cursor: 'pointer' },
+                                    onClick: () => onClickAgentId(agentId),
+                                    'data-testid': `${agentKey}-copy-icon`,
+                                })] }))] }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: date })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: description }))] }));
+};

package/dist/stories/Agent/AgentCard.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AgentCard } from './AgentCard';
+declare const meta: Meta<typeof AgentCard>;
+export default meta;
+type Story = StoryObj<typeof AgentCard>;
+export declare const Placeholder: Story;
+export declare const CustomPreviewText: Story;
+export declare const LoadingPreview: Story;
+export declare const NoImage: Story;
+export declare const WithStatusBadge: Story;
+export declare const NoStatusBadge: Story;
+export declare const Processing: Story;
+export declare const ProcessingWithoutProgress: Story;