@beydesign/storybook 0.0.72 → 0.0.73

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.72",
+  "version": "0.0.73",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",