@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/UI/SkeletonLoader.stories.js

@@ -0,0 +1,74 @@
+import { SkeletonLoader } from './SkeletonLoader';
+const meta = {
+    title: 'Design System/Components/UI/SkeletonLoader',
+    component: SkeletonLoader,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Width of the skeleton',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '100%' },
+            },
+        },
+        height: {
+            control: 'text',
+            description: 'Height of the skeleton',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '100%' },
+            },
+        },
+        borderRadius: {
+            control: 'text',
+            description: 'Border radius of the skeleton',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: {
+                    summary: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+                },
+            },
+        },
+        animationDuration: {
+            control: 'number',
+            description: 'Animation duration in seconds',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '1.5' },
+            },
+        },
+        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: 200,
+        height: 100,
+    },
+};
+export const CustomAnimation = {
+    args: {
+        width: 200,
+        height: 100,
+        animationDuration: 3,
+    },
+};
+export const RoundedSkeleton = {
+    args: {
+        width: 100,
+        height: 100,
+        borderRadius: '50%',
+    },
+};

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

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

package/dist/stories/UI/Stepper.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+export const Stepper = ({ steps, currentStep, onStepClick, style, testId, connectorWidth, stepStyle, }) => {
+    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, "data-testid": testId, display: 'flex', flexDirection: 'row', alignItems: 'center', children: steps.map((step, index) => (_jsx(Step, { currentStep: currentStep, index: index, title: step, onClick: onStepClick ? () => onStepClick(index + 1) : undefined, totalSteps: steps.length, connectorWidth: connectorWidth, stepStyle: stepStyle }, index))) }));
+};
+const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth = '70px', stepStyle, }) => {
+    const thisStep = index + 1;
+    const isDisabled = currentStep < thisStep;
+    const isCurrent = currentStep === thisStep;
+    const isCompleted = currentStep > thisStep;
+    const getTextColor = () => {
+        if (isDisabled)
+            return 'var(--color-text-text-paragraph)';
+        else if (isCurrent)
+            return 'var(--color-text-text-clicable)';
+        else if (isCompleted)
+            return 'var(--color-text-text-title)';
+        else
+            return 'var(--color-text-text-paragraph)';
+    };
+    const getIconColor = () => {
+        if (isDisabled)
+            return 'var(--color-foreground-fg-disabled)';
+        else if (isCurrent)
+            return 'var(--color-background-bg-brand-primary)';
+        else if (isCompleted)
+            return 'var(--color-background-bg-brand-primary)';
+        else
+            return 'var(--color-foreground-fg-secondary)';
+    };
+    const IconComponent = getIconComponent('CheckCircle', {
+        size: '24px',
+        color: getIconColor(),
+        weight: isCompleted ? 'fill' : 'regular',
+        onClick: () => onClick?.(),
+        style: { cursor: onClick ? 'pointer' : 'default' },
+    });
+    const getConnectorColor = (position) => {
+        if (position === 'left') {
+            if (thisStep === 1)
+                return 'transparent';
+            else if (thisStep <= currentStep)
+                return 'var(--color-background-bg-brand-primary)';
+            else
+                return 'var(--color-foreground-fg-disabled)';
+        }
+        else if (position === 'right') {
+            if (thisStep === totalSteps)
+                return 'transparent';
+            else if (thisStep < currentStep)
+                return 'var(--color-background-bg-brand-primary)';
+            else
+                return 'var(--color-foreground-fg-disabled)';
+        }
+    };
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', onClick: onClick ? () => onClick() : undefined, sx: {
+            cursor: onClick ? 'pointer' : 'default',
+            '&:hover': {
+                border: '1px solid #6938EF33',
+                borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+                backgroundColor: '#6938EF1A',
+            },
+            ...stepStyle,
+        }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Box, { height: '1px', bgcolor: getConnectorColor('left'), width: connectorWidth, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), IconComponent, _jsx(Box, { height: '1px', bgcolor: getConnectorColor('right'), width: connectorWidth, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, color: getTextColor(), children: title })] }));
+};

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

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

package/dist/stories/UI/Stepper.stories.js

@@ -0,0 +1,65 @@
+import { Stepper } from './Stepper';
+const meta = {
+    title: 'Design System/Components/UI/Stepper',
+    component: Stepper,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: '',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        currentStep: {
+            control: 'number',
+            description: 'Current step of the stepper',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        steps: {
+            control: 'object',
+            description: 'Steps of the stepper',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        onStepClick: {
+            description: 'Function to call when a step is clicked',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Style of the stepper',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        testId: {
+            control: 'text',
+            description: 'Test ID of the stepper',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        currentStep: 1,
+        steps: [
+            'Lighting, Audio & Setup',
+            'Beginning',
+            'Speaking Phase',
+            'Ending',
+            'Final Checklist',
+        ],
+        onStepClick: () => { },
+        style: {},
+        testId: 'stepper',
+    },
+};

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, newButtonHidden, className, style, }) => {
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', className: className, sx: style, minWidth: '400px', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, children: title }), badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.xs, color: BadgeColor.Violet, style: { marginBottom: '10px' } }))] }), !newButtonHidden && (_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

@@ -0,0 +1,13 @@
+export * from './Badge';
+export * from './Avatar';
+export * from './CheckIcon';
+export * from './FeatureBanner';
+export * from './HintBubble';
+export * from './Logo';
+export * from './Menu';
+export * from './ProgressIndicator';
+export * from './PromoBanner';
+export * from './SkeletonLoader';
+export * from './Topbar';
+export * from './types';
+export * from './Stepper';

package/dist/stories/UI/index.js

@@ -0,0 +1,13 @@
+export * from './Badge';
+export * from './Avatar';
+export * from './CheckIcon';
+export * from './FeatureBanner';
+export * from './HintBubble';
+export * from './Logo';
+export * from './Menu';
+export * from './ProgressIndicator';
+export * from './PromoBanner';
+export * from './SkeletonLoader';
+export * from './Topbar';
+export * from './types';
+export * from './Stepper';