@beydesign/storybook 0.0.71 → 0.0.73

package/dist/stories/Form/TextArea.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
+export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, allowMaxLength = false, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
     const [focused, setFocused] = useState(false);
     return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, trailingElement: labelTrailingElement, style: labelContainerStyle })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
                         ? 'var(--colors-light-border-border-error)'
@@ -19,5 +19,5 @@ export const TextArea = ({ label, value, onChange, placeholder, hintText, errorT
                                 : 'var(--colors-light-text-text-title)',
                             backgroundColor: 'transparent',
                             resize: 'none',
-                        }, maxLength: maxLength, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })) : hintText ? (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && maxLength && (_jsx(Typography, { text: `${maxLength - value.length}`, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { alignSelf: 'flex-end' } }))] })] }) }));
+                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })) : hintText ? (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { text: `${maxLength - value.length}`, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { alignSelf: 'flex-end' } }))] })] }) }));
 };

package/dist/stories/Form/TextArea.stories.d.ts

@@ -141,8 +141,21 @@ declare const meta: {
                 };
             };
         };
+        allowMaxLength: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithMaxLength: Story;

package/dist/stories/Form/TextArea.stories.js

@@ -111,6 +111,14 @@ const meta = {
                 type: { summary: 'ReactNode' },
             },
         },
+        allowMaxLength: {
+            control: 'boolean',
+            description: 'Whether to apply max length restriction',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
     },
 };
 export default meta;
@@ -118,6 +126,17 @@ export const Default = {
     args: {
         label: "Agent's name",
         value: 'Anna',
-        onChange: () => { },
+        onChange: (_value) => { },
+    },
+};
+export const WithMaxLength = {
+    args: {
+        label: 'Limited Text Area',
+        value: '',
+        onChange: (_value) => { },
+        allowMaxLength: true,
+        maxLength: 100,
+        showMaxLengthIndicator: true,
+        placeholder: 'Enter text (max 100 characters)',
     },
 };

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

@@ -19,6 +19,8 @@ export type TextAreaProps = {
     errorText?: string;
     /** Text input disabled */
     disabled?: boolean;
+    /** Whether to apply max length restriction */
+    allowMaxLength?: boolean;
     /** Text input max length */
     maxLength?: number;
     /** Text input show max length indicator */

package/dist/stories/Navigation/ComplexHeader.d.ts

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

package/dist/stories/Navigation/ComplexHeader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LayoutType } from './types';
+import { Box } from '@mui/material';
+import { ButtonDisplayMode, ButtonSize, MainButton } from '../Buttons';
+import { ButtonHierarchy } from '../Buttons';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+import { AutoComplete } from '../Form/AutoComplete';
+export const ComplexHeader = ({ title = 'Title', badgeText = '22', newButtonText = 'New', onNewClick, onOutputFileClick, onDownloadAllClick, onLayoutChange, className, sx, }) => {
+    const [layoutType, setLayoutType] = useState(LayoutType.Grid);
+    const handleLayoutChange = (type) => {
+        setLayoutType(type);
+        onLayoutChange?.(type);
+    };
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--primitives-desktop-primary-gray-200)', bgcolor: 'var(--colors-light-background-bg-white)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', sx: sx, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsx(Typography, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.Bold, trailingElement: badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.md, color: BadgeColor.Violet })), style: { gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' } }), onNewClick && (_jsx(MainButton, { text: newButtonText, hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, showTrailingIcon: true, trailingIcon: 'Plus', onClick: onNewClick }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsx(AutoComplete, { options: [], placeholder: "Search", onChange: () => { }, value: '' }), _jsx(MainButton, { text: 'Output File', hierarchy: ButtonHierarchy.SecondaryColor, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onOutputFileClick }), _jsx(MainButton, { text: 'Download All', hierarchy: ButtonHierarchy.Primary, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onDownloadAllClick }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', children: [_jsx(MainButton, { hierarchy: layoutType === LayoutType.Grid
+                                    ? ButtonHierarchy.TetriaryColor
+                                    : ButtonHierarchy.Tetriary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "GridFour", onClick: () => handleLayoutChange(LayoutType.Grid) }), _jsx(MainButton, { hierarchy: layoutType === LayoutType.List
+                                    ? ButtonHierarchy.TetriaryColor
+                                    : ButtonHierarchy.Tetriary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "List", onClick: () => handleLayoutChange(LayoutType.List) })] })] })] }));
+};

package/dist/stories/Navigation/ComplexHeader.stories.d.ts

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

package/dist/stories/Navigation/ComplexHeader.stories.js

@@ -0,0 +1,82 @@
+import styles from './Header.module.css';
+import { ComplexHeader } from './ComplexHeader';
+const meta = {
+    title: 'Design System/Components/Navigation/ComplexHeader',
+    component: ComplexHeader,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4781-5713&t=vdrrXyG9txidDmlc-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        badgeText: {
+            control: 'text',
+            description: 'Text of the badge',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        newButtonText: {
+            control: 'text',
+            description: 'Text of the new button',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onNewClick: {
+            description: 'Callback function to handle new button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onOutputFileClick: {
+            description: 'Callback function to handle output file button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onDownloadAllClick: {
+            description: 'Callback function to handle download all button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onLayoutChange: {
+            description: 'Callback function to handle layout change',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Custom class name for the header',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: styles['responsive-width'] },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Beyond Presence',
+        badgeText: '22',
+        newButtonText: 'New Agent',
+        onNewClick: () => { },
+        onOutputFileClick: () => { },
+        onDownloadAllClick: () => { },
+        onLayoutChange: () => { },
+        className: styles['responsive-width'],
+    },
+};

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

@@ -3,3 +3,4 @@ export * from './NavItem';
 export * from './Sidebar';
 export * from './types';
 export * from './ProcessHeader';
+export * from './ComplexHeader';

package/dist/stories/Navigation/index.js

@@ -3,3 +3,4 @@ export * from './NavItem';
 export * from './Sidebar';
 export * from './types';
 export * from './ProcessHeader';
+export * from './ComplexHeader';

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

@@ -20,6 +20,30 @@ export type HeaderProps = {
     /** Callback function to handle logout button click */
     onLogoutClick?: () => void;
 };
+export declare enum LayoutType {
+    List = "list",
+    Grid = "grid"
+}
+export type ComplexHeaderProps = {
+    /** Title of the header */
+    title: string;
+    /** Text of the badge */
+    badgeText?: string;
+    /** Text of the new button */
+    newButtonText?: string;
+    /** Callback function to handle new button click */
+    onNewClick?: () => void;
+    /** Callback function to handle output file button click */
+    onOutputFileClick?: () => void;
+    /** Callback function to handle download all button click */
+    onDownloadAllClick?: () => void;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Callback function to handle layout change */
+    onLayoutChange?: (layoutType: LayoutType) => void;
+    /** Style object to apply to the component */
+    sx?: SxProps<Theme>;
+};
 export declare enum NavItemState {
     Default = "default",
     Active = "active",

package/dist/stories/Navigation/types.js

@@ -1,3 +1,8 @@
+export var LayoutType;
+(function (LayoutType) {
+    LayoutType["List"] = "list";
+    LayoutType["Grid"] = "grid";
+})(LayoutType || (LayoutType = {}));
 export var NavItemState;
 (function (NavItemState) {
     NavItemState["Default"] = "default";

package/dist/stories/UI/Topbar.d.ts

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

package/dist/stories/UI/Topbar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BadgeColor, BadgeSize } from './types';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Badge } from './Badge';
+import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
+export const Topbar = ({ title, badgeText, newButtonText, onNewButtonClick, className, style, }) => {
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-sm)', className: className, sx: style, minWidth: '400px', children: [_jsx(Typography, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, trailingElement: badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.xs, color: BadgeColor.Violet, style: { marginBottom: '10px' } })), style: { gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)' } }), _jsx(MainButton, { size: ButtonSize.lg, text: newButtonText, onClick: onNewButtonClick, hierarchy: ButtonHierarchy.Primary, trailingIcon: 'Plus', showTrailingIcon: true })] }));
+};

package/dist/stories/UI/Topbar.stories.d.ts

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

package/dist/stories/UI/Topbar.stories.js

@@ -0,0 +1,71 @@
+import { Topbar } from './Topbar';
+const meta = {
+    title: 'Design System/Components/UI/Topbar',
+    component: Topbar,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/Ze4bBHgBQYinBDZr1COHuk/Agents?node-id=1006-13664&t=CyBQppCouqmiQpIk-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the topbar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        badgeText: {
+            control: 'text',
+            description: 'Text of the badge',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        newButtonText: {
+            control: 'text',
+            description: 'Text of the new button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        onNewButtonClick: {
+            description: 'Function to call when the new button is clicked',
+            table: {
+                type: { summary: 'function' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Style of the topbar',
+            table: {
+                type: { summary: 'object' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Class name of the topbar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'My Agents',
+        badgeText: '10',
+        newButtonText: 'New Agent',
+        onNewButtonClick: () => { },
+    },
+};

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

@@ -5,4 +5,5 @@ export * from './Logo';
 export * from './Menu';
 export * from './ProgressIndicator';
 export * from './SkeletonLoader';
+export * from './Topbar';
 export * from './types';

package/dist/stories/UI/index.js

@@ -5,4 +5,5 @@ export * from './Logo';
 export * from './Menu';
 export * from './ProgressIndicator';
 export * from './SkeletonLoader';
+export * from './Topbar';
 export * from './types';

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

@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material';
-import { SxProps } from '@mui/material';
+import { Theme, SxProps } from '@mui/material';
 import { IconName } from '../../utils';
 /**
  * Badge size variants
@@ -205,3 +204,17 @@ export interface SkeletonLoaderProps {
      */
     style?: React.CSSProperties;
 }
+export interface TopbarProps {
+    /** Title */
+    title: string;
+    /** Badge */
+    badgeText?: string;
+    /** New button */
+    newButtonText?: string;
+    /** On click of new button */
+    onNewButtonClick?: () => void;
+    /** Style */
+    style?: SxProps<Theme>;
+    /** Class name */
+    className?: string;
+}

package/package.json

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