@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/Agent/AgentCard.stories.js

@@ -0,0 +1,303 @@
+import { AgentCard } from './AgentCard';
+import { AgentState } from './types';
+const meta = {
+    title: 'Design System/Components/Agent/AgentCard',
+    component: AgentCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=5155-1047&t=qmLHvTvP8XX3NuUh-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        agentId: {
+            control: 'text',
+            description: 'The id of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        agentImage: {
+            control: 'text',
+            description: 'Image of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        showDate: {
+            control: 'boolean',
+            description: 'Whether to show the date',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        badges: {
+            description: 'Badges of the agent',
+            table: {
+                type: { summary: 'array' },
+            },
+        },
+        showBadges: {
+            control: 'boolean',
+            description: 'Whether to show the badges',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showTimeBadge: {
+            control: 'boolean',
+            description: 'Whether to show the time badge',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Whether to show the description',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showMenu: {
+            control: 'boolean',
+            description: 'Whether to show the menu',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        active: {
+            control: 'boolean',
+            description: 'Whether the agent is active',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        activeToggleDisabled: {
+            control: 'boolean',
+            description: 'Whether the active toggle is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showActiveToggle: {
+            control: 'boolean',
+            description: 'Whether to show the active toggle',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        onActiveToggleChange: {
+            description: 'Callback function for active toggle change',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        date: {
+            control: 'text',
+            description: 'Date of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: 'text',
+            description: 'Description of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        title: {
+            control: 'text',
+            description: 'Title of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        agentState: {
+            control: 'select',
+            description: 'State of the agent',
+            options: Object.values(AgentState),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        previewButtonText: {
+            control: 'text',
+            description: 'Text for the preview button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Preview' },
+            },
+        },
+        showStatusBadge: {
+            control: 'boolean',
+            description: 'Whether to show the status badge',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        statusBadgeText: {
+            control: 'text',
+            description: 'Text to display in the status badge',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        showProgressIndicator: {
+            control: 'boolean',
+            description: 'Whether to show the progress indicator in processing state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        progressValue: {
+            control: 'number',
+            description: 'Current progress value (0-100)',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '50' },
+            },
+        },
+        processingText: {
+            control: 'text',
+            description: 'Text to display in processing state',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Agent creation in progress' },
+            },
+        },
+    },
+};
+export default meta;
+export const Placeholder = {
+    args: {
+        title: 'Agent Card Title',
+        active: true,
+        showActiveToggle: true,
+        showDate: true,
+        date: '2024-01-01',
+        badges: ['HR', 'Sales', 'Marketing'],
+        showBadges: true,
+        showDescription: true,
+        description: 'This is a very long description that will wrap to the next line',
+        agentImage: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D',
+        showTimeBadge: true,
+        time: '10:00',
+        onPreview: () => { },
+        previewButtonText: 'Preview',
+        menuItems: [
+            { label: 'Edit', icon: 'Pencil', onClick: () => { } },
+            { label: 'Delete', icon: 'Trash', onClick: () => { }, destructive: true },
+        ],
+        showMenu: true,
+        agentState: AgentState.ready,
+        showStatusBadge: true,
+        statusBadgeText: 'Active',
+        agentId: '112657154',
+        onClickAgentId: () => { },
+    },
+};
+export const CustomPreviewText = {
+    args: {
+        ...Placeholder.args,
+        previewButtonText: 'View Agent',
+        agentState: AgentState.ready,
+    },
+};
+export const LoadingPreview = {
+    args: {
+        ...Placeholder.args,
+        title: 'Loading Preview Example',
+        // Using a non-existent image to force loading state
+        agentImage: 'https://example.com/non-existent-image.jpg',
+        active: false,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the loading state of the agent card image.',
+            },
+        },
+    },
+};
+export const NoImage = {
+    args: {
+        ...Placeholder.args,
+        title: 'No Image Example',
+        agentImage: undefined,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card when no image is provided.',
+            },
+        },
+    },
+};
+export const WithStatusBadge = {
+    args: {
+        ...Placeholder.args,
+        title: 'Status Badge Example',
+        showStatusBadge: true,
+        statusBadgeText: 'Draft',
+        agentState: AgentState.pending,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card with a status badge in the top-left corner.',
+            },
+        },
+    },
+};
+export const NoStatusBadge = {
+    args: {
+        ...Placeholder.args,
+        title: 'No Status Badge Example',
+        showStatusBadge: false,
+        statusBadgeText: '',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card without a status badge.',
+            },
+        },
+    },
+};
+export const Processing = {
+    args: {
+        ...Placeholder.args,
+        title: 'Processing Example',
+        agentState: AgentState.processing,
+        showProgressIndicator: true,
+        progressValue: 75,
+        processingText: 'Training in progress',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card in processing state with a custom progress value and text.',
+            },
+        },
+    },
+};
+export const ProcessingWithoutProgress = {
+    args: {
+        ...Placeholder.args,
+        title: 'Processing Without Progress',
+        agentState: AgentState.processing,
+        showProgressIndicator: false,
+        processingText: 'Please wait...',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example shows the processing state without the progress indicator.',
+            },
+        },
+    },
+};

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

@@ -0,0 +1,2 @@
+import { AgentCardSkeletonProps } from './types';
+export declare const AgentCardSkeleton: React.FC<AgentCardSkeletonProps>;

package/dist/stories/Agent/AgentCardSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SkeletonLoader } from '../UI';
+export const AgentCardSkeleton = ({ width = 'auto', showDate = false, showBadges = false, showDescription = false, style, }) => {
+    return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", bgcolor: "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)`, style: style, children: [_jsx(Box, { width: "100%", height: "268px", sx: { aspectRatio: 1 }, borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", overflow: "hidden", children: _jsx(SkeletonLoader, {}) }), _jsx(SkeletonLoader, { width: "70%", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showDate && (_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })), showBadges && (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), showDescription && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", children: [_jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
+};

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AgentCardSkeleton } from './AgentCardSkeleton';
+declare const meta: Meta<typeof AgentCardSkeleton>;
+export default meta;
+type Story = StoryObj<typeof AgentCardSkeleton>;
+export declare const Default: Story;
+export declare const WithDate: Story;
+export declare const WithBadges: Story;
+export declare const WithDescription: Story;
+export declare const Complete: Story;
+export declare const CustomWidth: Story;
+export declare const Grid: Story;
+export declare const LoadingState: Story;

package/dist/stories/Agent/AgentCardSkeleton.stories.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { AgentCardSkeleton } from './AgentCardSkeleton';
+const meta = {
+    title: 'Design System/Components/Agent/AgentCardSkeleton',
+    component: AgentCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Width of the card',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '300px' },
+            },
+        },
+        showDate: {
+            control: 'boolean',
+            description: 'Show date placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showBadges: {
+            control: 'boolean',
+            description: 'Show badges placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Show description placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the skeleton',
+            table: {
+                type: { summary: 'React.CSSProperties' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        width: '300px',
+    },
+};
+export const WithDate = {
+    args: {
+        width: '300px',
+        showDate: true,
+    },
+};
+export const WithBadges = {
+    args: {
+        width: '300px',
+        showBadges: true,
+    },
+};
+export const WithDescription = {
+    args: {
+        width: '300px',
+        showDescription: true,
+    },
+};
+export const Complete = {
+    args: {
+        width: '300px',
+        showDate: true,
+        showBadges: true,
+        showDescription: true,
+    },
+};
+export const CustomWidth = {
+    args: {
+        width: '400px',
+        showDate: true,
+        showBadges: true,
+        showDescription: true,
+    },
+};
+export const Grid = {
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(AgentCardSkeleton, { showDate: true }), _jsx(AgentCardSkeleton, { showBadges: true }), _jsx(AgentCardSkeleton, { showDescription: true }), _jsx(AgentCardSkeleton, { showDate: true, showBadges: true, showDescription: true })] })),
+};
+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: "This demonstrates how multiple skeletons might appear during a loading state" })] }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: Array(6)
+                    .fill(0)
+                    .map((_, index) => (_jsx(AgentCardSkeleton, { showDate: index % 2 === 0, showBadges: index % 3 === 0, showDescription: index % 2 !== 0 }, index))) })] })),
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CreateNewCardProps } from './types';
+/**
+ * CreateNewCard component that displays a card with a plus icon and text
+ * Used for "Create New" actions in a grid of cards
+ */
+export declare const CreateNewCard: React.FC<CreateNewCardProps>;

package/dist/stories/Agent/CreateNewCard.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Plus } from '@phosphor-icons/react';
+/**
+ * CreateNewCard component that displays a card with a plus icon and text
+ * Used for "Create New" actions in a grid of cards
+ */
+export const CreateNewCard = ({ text, onClick, }) => {
+    return (_jsx(Box, { width: 'auto', height: 'auto', sx: {
+            backgroundColor: 'var(--color-background-bg-element)',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease-in-out',
+            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+            '&:hover': {
+                backgroundColor: 'var(--color-background-bg-card-highlight-hover)',
+            },
+            position: 'relative',
+            overflow: 'hidden',
+            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)`,
+        }, onClick: onClick, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px', sx: { gap: '16px' }, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-background-bg-brand-primary)', children: text }), _jsx(Box, { display: 'flex', width: '48px', height: '48px', borderRadius: '50%', sx: {
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: _jsx(Plus, { size: 36, weight: "fill", color: 'var(--color-background-bg-brand-primary)' }) })] }) }));
+};

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

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

package/dist/stories/Agent/CreateNewCard.stories.js

@@ -0,0 +1,23 @@
+import { CreateNewCard } from './CreateNewCard';
+import { action } from '@storybook/addon-actions';
+const meta = {
+    title: 'Design System/Components/Agent/CreateNewCard',
+    component: CreateNewCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'New Text-to-Video',
+        onClick: action('clicked'),
+    },
+};
+export const CustomText = {
+    args: {
+        text: 'Add new item',
+        onClick: action('clicked'),
+    },
+};

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

@@ -0,0 +1,4 @@
+export * from './AgentCard';
+export * from './AgentCardSkeleton';
+export * from './CreateNewCard';
+export * from './types';

package/dist/stories/Agent/index.js

@@ -0,0 +1,4 @@
+export * from './AgentCard';
+export * from './AgentCardSkeleton';
+export * from './CreateNewCard';
+export * from './types';

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

@@ -0,0 +1,96 @@
+import { MenuItemProps } from '../UI';
+export declare enum AgentState {
+    pending = "pending",
+    processing = "processing",
+    error = "error",
+    ready = "ready"
+}
+/**
+ * Agent card component props
+ */
+export type AgentCardProps = {
+    /** Agent id */
+    agentId?: string;
+    /** On click agent id */
+    onClickAgentId?: (agentId: string) => void;
+    /** Agent image */
+    agentImage?: string;
+    /** Show date */
+    showDate?: boolean;
+    /** Badges */
+    badges?: string[];
+    /** Show badges */
+    showBadges?: boolean;
+    /** Time */
+    time?: string;
+    /** Show time badge */
+    showTimeBadge?: boolean;
+    /** Show description */
+    showDescription?: boolean;
+    /** Menu items */
+    menuItems?: MenuItemProps[];
+    /** Show menu */
+    showMenu?: boolean;
+    /** Description */
+    description?: string;
+    /** Title */
+    title: string;
+    /** Date */
+    date?: string;
+    /** Active */
+    active?: boolean;
+    /** Show active toggle */
+    showActiveToggle?: boolean;
+    /** On active toggle change */
+    onActiveToggleChange?: (active: boolean) => void;
+    /** Active toggle disabled */
+    activeToggleDisabled?: boolean;
+    /** On preview */
+    onPreview?: () => void;
+    /** Agent state */
+    agentState?: AgentState;
+    /** Preview button text */
+    previewButtonText?: string;
+    /** Show status badge */
+    showStatusBadge?: boolean;
+    /** Status badge text */
+    statusBadgeText?: string;
+    /** Show progress indicator in processing state */
+    showProgressIndicator?: boolean;
+    /** Current progress value (0-100) */
+    progressValue?: number;
+    /** Processing state text */
+    processingText?: string;
+};
+export interface AgentCardSkeletonProps {
+    /**
+     * Width of the card
+     */
+    width?: string | number;
+    /**
+     * Show date placeholder
+     */
+    showDate?: boolean;
+    /**
+     * Show badges placeholder
+     */
+    showBadges?: boolean;
+    /**
+     * Show description placeholder
+     */
+    showDescription?: boolean;
+    /**
+     * Custom style for the skeleton
+     */
+    style?: React.CSSProperties;
+}
+export interface CreateNewCardProps {
+    /**
+     * The text to display on the card
+     */
+    text: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}

package/dist/stories/Agent/types.js

@@ -0,0 +1,7 @@
+export var AgentState;
+(function (AgentState) {
+    AgentState["pending"] = "pending";
+    AgentState["processing"] = "processing";
+    AgentState["error"] = "error";
+    AgentState["ready"] = "ready";
+})(AgentState || (AgentState = {}));

package/dist/stories/Buttons/MainButton.d.ts

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