@beydesign/storybook 0.0.37 → 0.0.39

package/dist/stories/{Typography.js → Typography/Typography.js}

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TypographySize, TypographyWeight, } from './types/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TypographySize, TypographyWeight } from './types';
 export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, style, }) => {
     const getTypographySizeToken = () => {
         let sizeLc = size?.toLowerCase() || '';
@@ -50,6 +50,3 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
             ...style,
         }, children: text }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Typography" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsxs("div", { children: [_jsx("h2", { children: "Size: Xl (HeadingXL)" }), _jsx(Typography, { text: "HeadingXL", size: TypographySize.HeadingXL, weight: TypographyWeight.Bold })] }) })] }));
-};

package/dist/stories/{Typography.stories.js → Typography/Typography.stories.js}

@@ -1,7 +1,7 @@
 import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { TypographySize, TypographyWeight } from './types';
 const meta = {
-    title: 'Design System/Foundations/Typography',
+    title: 'Design System/Foundations/Typography/Typography',
     component: Typography,
     parameters: {
         layout: 'centered',

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

@@ -0,0 +1,2 @@
+export * from './Typography';
+export * from './types';

package/dist/stories/Typography/index.js

@@ -0,0 +1,2 @@
+export * from './Typography';
+export * from './types';

package/dist/stories/{types/typography.d.ts → Typography/types.d.ts}

@@ -40,8 +40,3 @@ export interface TypographyProps {
     /** Style object for additional styling */
     style?: React.CSSProperties;
 }
-/**
- * Props for the Components wrapper
- */
-export interface ComponentsProps {
-}

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

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

package/dist/stories/{Avatar.js → UI/Avatar.js}

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AvatarImage, AvatarSize, AvatarStyle, getInitials, } from './types/avatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AvatarImage, AvatarSize, AvatarStyle } from './types';
 import { Avatar as MuiAvatar, } from '@mui/material';
 import { User } from '@phosphor-icons/react';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getInitials } from '../../utils';
 export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false, image = AvatarImage, size = AvatarSize.xxl, style: customStyle, text = 'Scarlett Johansson', }) => {
     const getDimensions = (avatarSize) => {
         switch (avatarSize) {
@@ -74,6 +74,3 @@ export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false,
         return (_jsx(MuiAvatar, { ...props, children: _jsx(User, { size: dimensions / 2, weight: "bold" }) }));
     }
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Avatars" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Letters" }), _jsx(Avatar, { text: "Scarlett Johansson", size: AvatarSize.sm, avatarStyle: AvatarStyle.Letters })] }), _jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Picture" }), _jsx(Avatar, { image: AvatarImage, size: AvatarSize.sm, avatarStyle: AvatarStyle.Picture })] }), _jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Placeholder" }), _jsx(Avatar, { size: AvatarSize.sm, avatarStyle: AvatarStyle.Placeholder })] })] })] }));
-};

package/dist/stories/{Avatar.stories.js → UI/Avatar.stories.js}

@@ -1,7 +1,7 @@
 import { Avatar } from './Avatar';
-import { AvatarImage, AvatarSize, AvatarStyle } from './types/avatar';
+import { AvatarStyle, AvatarSize, AvatarImage } from './types';
 const meta = {
-    title: 'Design System/Components/Avatar',
+    title: 'Design System/Components/UI/Avatar',
     component: Avatar,
     parameters: {
         layout: 'centered',

package/dist/stories/{Bagde.d.ts → UI/Badge.d.ts}

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

package/dist/stories/{Bagde.js → UI/Badge.js}

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BadgeColor, BadgeSize } from './types/badge';
+import { BadgeColor, BadgeSize } from './types';
 import { Box } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { getIconComponent } from '../utils/icon';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
 export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, }) => {
     const getBackgroundColor = (color) => {
         switch (color) {

package/dist/stories/{Badge.stories.d.ts → UI/Badge.stories.d.ts}

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

package/dist/stories/{Badge.stories.js → UI/Badge.stories.js}

@@ -1,7 +1,7 @@
-import { Badge } from './Bagde';
-import { BadgeColor, BadgeSize } from './types/badge';
+import { Badge } from './Badge';
+import { BadgeColor, BadgeSize } from './types';
 const meta = {
-    title: 'Design System/Components/Badge',
+    title: 'Design System/Components/UI/Badge',
     component: Badge,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/UI/HintBubble.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { HintBubbleSize, HintBubbleType } from './types';
+export const HintBubble = ({ text, size = HintBubbleSize.md, type = HintBubbleType.Info, }) => {
+    const getPadding = () => {
+        if (size === HintBubbleSize.sm) {
+            return 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+        }
+        return 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+    };
+    const getTypographySize = () => {
+        if (size === HintBubbleSize.sm)
+            return TypographySize.TextXS;
+        return TypographySize.TextM;
+    };
+    const getTypographyWeight = () => {
+        if (size === HintBubbleSize.sm)
+            return TypographyWeight.Regular;
+        return TypographyWeight.Medium;
+    };
+    const getTypographyColor = () => {
+        if (type === HintBubbleType.Error)
+            return 'var(--colors-light-text-text-error)';
+        return 'var(--colors-light-text-text-title)';
+    };
+    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--colors-light-background-bg-card-highlight)', padding: getPadding(), gap: '10px', children: _jsx(Typography, { text: text, size: getTypographySize(), weight: getTypographyWeight(), color: getTypographyColor() }) }));
+};

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

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

package/dist/stories/UI/HintBubble.stories.js

@@ -0,0 +1,68 @@
+import { HintBubble } from './HintBubble';
+import { HintBubbleSize, HintBubbleType } from './types';
+const meta = {
+    title: 'Design System/Components/UI/HintBubble',
+    component: HintBubble,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4717-3779&t=8I9WicYVdJD1jCB1-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(HintBubbleSize),
+            description: 'Size of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        type: {
+            control: 'select',
+            options: Object.values(HintBubbleType),
+            description: 'Type of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        text: {
+            control: 'text',
+            description: 'Text of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'This is a hint bubble',
+        type: HintBubbleType.Info,
+        size: HintBubbleSize.md,
+    },
+};
+export const Small = {
+    args: {
+        text: 'This is a hint bubble',
+        type: HintBubbleType.Info,
+        size: HintBubbleSize.sm,
+    },
+};
+export const Error = {
+    args: {
+        text: 'This is an error hint bubble',
+        type: HintBubbleType.Error,
+        size: HintBubbleSize.md,
+    },
+};
+export const SmallError = {
+    args: {
+        text: 'This is an error hint bubble',
+        type: HintBubbleType.Error,
+        size: HintBubbleSize.sm,
+    },
+};

package/dist/stories/{Logo.d.ts → UI/Logo.d.ts}

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

package/dist/stories/{Logo.js → UI/Logo.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogoVariant } from './types/logo';
+import { LogoVariant } from './types';
 export const Logo = ({ variant = LogoVariant.Horizontal, color = 'var(--colors-light-background-bg-brand)', gradient, className = '', svgUrl, }) => {
     const logoColor = gradient ? 'url(#gradient)' : color;
     if (svgUrl) {

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Logo } from './Logo';
+declare const meta: Meta<typeof Logo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Icon: Story;
+export declare const CustomColor: Story;
+export declare const WithGradient: Story;
+export declare const ExternalSvg: Story;

package/dist/stories/{Logo.stories.js → UI/Logo.stories.js}

@@ -1,7 +1,7 @@
 import { Logo } from './Logo';
-import { LogoVariant } from './types/logo';
+import { LogoVariant } from './types';
 const meta = {
-    title: 'Design System/Foundations/Logo',
+    title: 'Design System/Foundations/UI/Logo',
     component: Logo,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/{Menu.js → UI/Menu.js}

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem as MuiMenuItem, Menu as MuiMenu, } from '@mui/material';
 import { Fragment, useState } from 'react';
-import { MainButton } from './Button';
-import { ButtonDisplayMode, ButtonHierarchy, ButtonType } from './types/button';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { getIconComponent } from '../utils/icon';
+import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonType, } from '../Buttons';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
 export const Menu = ({ icon = 'DotsThree', items, style, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
@@ -49,9 +47,3 @@ export const Menu = ({ icon = 'DotsThree', items, style, }) => {
                     }
                 }) })] }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Menu" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx(Menu, { icon: "DotsThree", items: [
-                        { label: 'Edit', onClick: () => { }, icon: 'Pencil' },
-                        { label: 'Delete', onClick: () => { }, icon: 'Trash' },
-                    ] }) })] }));
-};

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

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

package/dist/stories/{Menu.stories.js → UI/Menu.stories.js}

@@ -1,6 +1,6 @@
 import { Menu } from './Menu';
 const meta = {
-    title: 'Design System/Components/Menu',
+    title: 'Design System/Components/UI/Menu',
     component: Menu,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/{ProgressIndicator.js → UI/ProgressIndicator.js}

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ProgressIndicatorMode, } from './types/progress-indicator';
+import { ProgressIndicatorMode } from './types';
 import { Box } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, }) => {
     let errorText = '';
     const calculateFill = () => {
@@ -35,6 +34,3 @@ export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentV
     }
     return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: 200, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { text: `${currentValue} / ${maxValue} ${text}`, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: '4px', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: '4px', sx: { backgroundColor: fillColor, width: `${calculateFill()}%` } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { text: `${currentValue}%`, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor }))] }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Progress Indicator" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' } })] }));
-};

package/dist/stories/{ProgressIndicator.stories.js → UI/ProgressIndicator.stories.js}

@@ -1,7 +1,7 @@
 import { ProgressIndicator } from './ProgressIndicator';
-import { ProgressIndicatorMode } from './types/progress-indicator';
+import { ProgressIndicatorMode } from './types';
 const meta = {
-    title: 'Design System/Components/ProgressIndicator',
+    title: 'Design System/Components/UI/ProgressIndicator',
     component: ProgressIndicator,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/UI/SkeletonLoader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+export const SkeletonLoader = ({ width = '100%', height = '100%', borderRadius = 'var(--spacing-tokens-size-in-px-spacing-sm)', animationDuration = 1.5, style, }) => {
+    return (_jsx(Box, { width: width, height: height, borderRadius: borderRadius, sx: {
+            background: 'linear-gradient(90deg, var(--colors-light-background-bg-element) 25%, var(--colors-light-background-bg-component) 50%, var(--colors-light-background-bg-element) 75%)',
+            backgroundSize: '200% 100%',
+            animation: `shimmer ${animationDuration}s infinite linear`,
+            ...style,
+        }, children: _jsx("style", { children: `
+        @keyframes shimmer {
+          0% {
+            background-position: 200% 0;
+          }
+          100% {
+            background-position: -200% 0;
+          }
+        }
+      ` }) }));
+};

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

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

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/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Badge';
+export * from './Avatar';
+export * from './HintBubble';
+export * from './Logo';
+export * from './Menu';
+export * from './ProgressIndicator';
+export * from './SkeletonLoader';
+export * from './types';

package/dist/stories/UI/index.js

@@ -0,0 +1,8 @@
+export * from './Badge';
+export * from './Avatar';
+export * from './HintBubble';
+export * from './Logo';
+export * from './Menu';
+export * from './ProgressIndicator';
+export * from './SkeletonLoader';
+export * from './types';