@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/Typography/Typography.stories.js

@@ -0,0 +1,225 @@
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types';
+const meta = {
+    title: 'Design System/Components/Typography/Typography',
+    component: Typography,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4312-2152&t=mUqFCoPkymh9swiA-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Text content of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        children: {
+            control: 'text',
+            description: 'Text content of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: Object.values(TypographySize),
+            description: 'Size of the typography',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'HeadingXL' },
+            },
+        },
+        weight: {
+            control: 'select',
+            options: Object.values(TypographyWeight),
+            description: 'Weight of the typography',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Bold' },
+            },
+        },
+        color: {
+            control: 'color',
+            description: 'Color of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the typography is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Class name of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        textStyle: {
+            control: 'object',
+            description: 'Style object of the typography',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        title: {
+            control: 'text',
+            description: 'Title of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+export const HeadingXLBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingXL,
+        weight: TypographyWeight.Bold,
+        required: true,
+    },
+};
+export const HeadingXLSemiBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingXL,
+        weight: TypographyWeight.SemiBold,
+    },
+};
+export const HeadingXLMedium = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingXL,
+        weight: TypographyWeight.Medium,
+    },
+};
+export const HeadingXLRegular = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingXL,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const HeadingLBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingL,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const HeadingLSemiBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingL,
+        weight: TypographyWeight.SemiBold,
+    },
+};
+export const HeadingLMedium = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingL,
+        weight: TypographyWeight.Medium,
+    },
+};
+export const HeadingLRegular = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingL,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const HeadingMBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.HeadingM,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const Heading2XSRegular = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.Heading2XS,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const TextLBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextL,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const TextLSemiBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextL,
+        weight: TypographyWeight.SemiBold,
+    },
+};
+export const TextLMedium = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextL,
+        weight: TypographyWeight.Medium,
+    },
+};
+export const TextLRegular = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextL,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const TextMBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextM,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const TextMSemiBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextM,
+        weight: TypographyWeight.SemiBold,
+    },
+};
+export const TextMMedium = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextM,
+        weight: TypographyWeight.Medium,
+    },
+};
+export const TextMRegular = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextM,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const TextSBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextS,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const TextSSemiBold = {
+    args: {
+        children: 'Typography',
+        size: TypographySize.TextS,
+        weight: TypographyWeight.SemiBold,
+    },
+};

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

@@ -0,0 +1,46 @@
+/**
+ * Typography size variants
+ */
+export declare enum TypographySize {
+    HeadingXL = "HeadingXL",
+    HeadingL = "HeadingL",
+    HeadingM = "HeadingM",
+    HeadingS = "HeadingS",
+    HeadingXS = "HeadingXS",
+    Heading2XS = "Heading2XS",
+    TextL = "TextL",
+    TextM = "TextM",
+    TextS = "TextS",
+    TextXS = "TextXS",
+    Text2XS = "Text2XS"
+}
+/**
+ * Typography weight variants
+ */
+export declare enum TypographyWeight {
+    Bold = "Bold",
+    SemiBold = "SemiBold",
+    Medium = "Medium",
+    Regular = "Regular"
+}
+/**
+ * Typography component props
+ */
+export interface TypographyProps {
+    /** Text content of the typography */
+    text?: string;
+    /** Size variant of the typography */
+    size?: TypographySize;
+    /** Weight variant of the typography */
+    weight?: TypographyWeight;
+    /** Color variant of the typography */
+    color?: string;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Style object for the text */
+    textStyle?: React.CSSProperties;
+    /** Whether the typography is required */
+    required?: boolean;
+    /** Title for the typography */
+    title?: string;
+}

package/dist/stories/Typography/types.js

@@ -0,0 +1,27 @@
+/**
+ * Typography size variants
+ */
+export var TypographySize;
+(function (TypographySize) {
+    TypographySize["HeadingXL"] = "HeadingXL";
+    TypographySize["HeadingL"] = "HeadingL";
+    TypographySize["HeadingM"] = "HeadingM";
+    TypographySize["HeadingS"] = "HeadingS";
+    TypographySize["HeadingXS"] = "HeadingXS";
+    TypographySize["Heading2XS"] = "Heading2XS";
+    TypographySize["TextL"] = "TextL";
+    TypographySize["TextM"] = "TextM";
+    TypographySize["TextS"] = "TextS";
+    TypographySize["TextXS"] = "TextXS";
+    TypographySize["Text2XS"] = "Text2XS";
+})(TypographySize || (TypographySize = {}));
+/**
+ * Typography weight variants
+ */
+export var TypographyWeight;
+(function (TypographyWeight) {
+    TypographyWeight["Bold"] = "Bold";
+    TypographyWeight["SemiBold"] = "SemiBold";
+    TypographyWeight["Medium"] = "Medium";
+    TypographyWeight["Regular"] = "Regular";
+})(TypographyWeight || (TypographyWeight = {}));

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/UI/Avatar.js

@@ -0,0 +1,76 @@
+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, 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) {
+            case AvatarSize.xs:
+                return 24;
+            case AvatarSize.sm:
+                return 32;
+            case AvatarSize.md:
+                return 40;
+            case AvatarSize.lg:
+                return 48;
+            case AvatarSize.xl:
+                return 56;
+            case AvatarSize.xxl:
+                return 64;
+            default:
+                return 40;
+        }
+    };
+    const getColor = (avatarStyle) => {
+        switch (avatarStyle) {
+            case AvatarStyle.Letters:
+                return 'var(--color-foreground-fg-primary)';
+            case AvatarStyle.Placeholder:
+                return 'var(--color-foreground-fg-tertiary)';
+            case AvatarStyle.Picture:
+                return 'var(--color-foreground-fg-secondary)';
+            default:
+                return 'var(--color-foreground-fg-tertiary)';
+        }
+    };
+    const getTextSize = () => {
+        if (size === AvatarSize.xxl)
+            return TypographySize.TextL;
+        else if ([AvatarSize.xl, AvatarSize.lg].includes(size))
+            return TypographySize.TextM;
+        else if (size === AvatarSize.md)
+            return TypographySize.TextS;
+        else if (size === AvatarSize.sm)
+            return TypographySize.TextXS;
+        else if (size === AvatarSize.xs)
+            return TypographySize.Text2XS;
+        else
+            return TypographySize.TextS;
+    };
+    const dimensions = getDimensions(size);
+    const props = {
+        sx: {
+            width: dimensions,
+            height: dimensions,
+            border: border
+                ? '1px solid var(--color-border-border-component)'
+                : 'none',
+            backgroundColor: 'var(--color-background-bg-card-highlight)',
+            color: getColor(avatarStyle),
+            fontSize: getTextSize(),
+            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)',
+            ...customStyle,
+        },
+    };
+    if (avatarStyle === AvatarStyle.Letters) {
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { size: getTextSize(), weight: TypographyWeight.Medium, children: getInitials(text) }) }));
+    }
+    else if (avatarStyle === AvatarStyle.Picture) {
+        return _jsx(MuiAvatar, { ...props, src: image });
+    }
+    else {
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(User, { size: dimensions / 2, weight: "bold" }) }));
+    }
+};

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Placeholder: Story;
+export declare const Picture: Story;
+export declare const Letters: Story;

package/dist/stories/UI/Avatar.stories.js

@@ -0,0 +1,76 @@
+import { Avatar } from './Avatar';
+import { AvatarStyle, AvatarSize, AvatarImage } from './types';
+const meta = {
+    title: 'Design System/Components/UI/Avatar',
+    component: Avatar,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4694-9405&t=HGXFzkH7TV5e4UsD-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Avatar text content',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        image: {
+            control: 'text',
+            description: 'Image URL for the avatar',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        border: {
+            control: 'boolean',
+            description: 'Whether to show a border around the avatar',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'],
+            description: 'Size of the avatar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: AvatarSize.xxl },
+            },
+        },
+        avatarStyle: {
+            control: 'select',
+            options: ['Placeholder', 'Letters', 'Picture'],
+            description: 'Style of the avatar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: AvatarStyle.Placeholder },
+            },
+        },
+    },
+};
+export default meta;
+export const Placeholder = {
+    args: {
+        size: AvatarSize.xxl,
+        avatarStyle: AvatarStyle.Placeholder,
+    },
+};
+export const Picture = {
+    args: {
+        size: AvatarSize.xxl,
+        image: AvatarImage,
+        avatarStyle: AvatarStyle.Picture,
+    },
+};
+export const Letters = {
+    args: {
+        size: AvatarSize.xxl,
+        text: 'Scarlett Johansson',
+        avatarStyle: AvatarStyle.Letters,
+    },
+};

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

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

package/dist/stories/UI/Badge.js

@@ -0,0 +1,118 @@
+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 { getIconComponent } from '../../utils';
+export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, children, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, testId, }) => {
+    const getBackgroundColor = (color) => {
+        switch (color) {
+            case BadgeColor.Default:
+                return 'var(--color-background-bg-badge-accent-gray)';
+            case BadgeColor.Violet:
+                return 'var(--primitives-desktop-primary-brand-violet-100)';
+            case BadgeColor.Lemon:
+                return 'var(--primitives-desktop-primary-brand-lemon-200)';
+            case BadgeColor.Green:
+                return 'var(--primitives-desktop-primary-success-100)';
+            case BadgeColor.Red:
+                return 'var(--primitives-desktop-primary-red-100)';
+            case BadgeColor.Yellow:
+                return 'var(--primitives-desktop-primary-yellow-100)';
+            case BadgeColor.Blue:
+                return 'var(--primitives-desktop-secondary-blue-100)';
+            case BadgeColor.Cyan:
+                return 'var(--primitives-desktop-secondary-cyan-50)';
+            case BadgeColor.Pink:
+                return 'var(--primitives-desktop-secondary-pink-50)';
+            case BadgeColor.DarkTransparent:
+                return `var(--primitives-desktop-primary-transparent-black-60)`;
+        }
+    };
+    const getTextColor = () => {
+        switch (color) {
+            case BadgeColor.Default:
+                return 'var(--color-text-text-title)';
+            case BadgeColor.Violet:
+                return 'var(--primitives-desktop-primary-brand-violet-800)';
+            case BadgeColor.Lemon:
+                return 'var(--primitives-desktop-primary-brand-lemon-900)';
+            case BadgeColor.Green:
+                return 'var(--primitives-desktop-primary-success-800)';
+            case BadgeColor.Red:
+                return 'var(--primitives-desktop-primary-red-800)';
+            case BadgeColor.Yellow:
+                return 'var(--primitives-desktop-primary-yellow-800)';
+            case BadgeColor.Blue:
+                return 'var(--primitives-desktop-secondary-blue-800)';
+            case BadgeColor.Cyan:
+                return 'var(--primitives-desktop-secondary-cyan-800)';
+            case BadgeColor.Pink:
+                return 'var(--primitives-desktop-secondary-pink-800)';
+            case BadgeColor.DarkTransparent:
+                return 'var(--color-text-text-white)';
+        }
+    };
+    const getBorder = (color) => {
+        switch (color) {
+            case BadgeColor.Default:
+                return '1px solid var(--primitives-desktop-primary-gray-100)';
+            case BadgeColor.Violet:
+                return '1px solid var(--primitives-desktop-primary-brand-violet-300)';
+            case BadgeColor.Lemon:
+                return '1px solid var(--primitives-desktop-primary-brand-lemon-300)';
+            case BadgeColor.Green:
+                return '1px solid var(--primitives-desktop-primary-success-300)';
+            case BadgeColor.Red:
+                return '1px solid var(--primitives-desktop-primary-red-300)';
+            case BadgeColor.Yellow:
+                return '1px solid var(--primitives-desktop-primary-yellow-300)';
+            case BadgeColor.Blue:
+                return '1px solid var(--primitives-desktop-secondary-blue-300)';
+            case BadgeColor.Cyan:
+                return '1px solid var(--primitives-desktop-secondary-cyan-300)';
+            case BadgeColor.Pink:
+                return '1px solid var(--primitives-desktop-secondary-pink-300)';
+            case BadgeColor.DarkTransparent:
+                return '1px solid rgba(var(--color-background-bg-component-dark), 0.9)';
+        }
+    };
+    const getPadding = (size) => {
+        switch (size) {
+            case BadgeSize.lg:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+            case BadgeSize.md:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 10px';
+            case BadgeSize.xs:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+        }
+    };
+    const getIconSize = (size) => {
+        switch (size) {
+            case BadgeSize.lg:
+                return '16px';
+            case BadgeSize.md:
+                return '16px';
+            case BadgeSize.xs:
+                return '12px';
+        }
+    };
+    const getTypographySize = (size) => {
+        switch (size) {
+            case BadgeSize.lg:
+                return TypographySize.TextS;
+            case BadgeSize.md:
+                return TypographySize.TextS;
+            case BadgeSize.xs:
+                return TypographySize.TextXS;
+        }
+    };
+    const backgroundColor = getBackgroundColor(color);
+    const border = getBorder(color);
+    const padding = getPadding(size);
+    const iconProps = {
+        size: iconSize || getIconSize(size),
+        color: iconColor || getTextColor(),
+        weight: iconWeight,
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, margin: 0, gap: "4px", sx: customStyle, "data-testid": testId, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text })), children] }));
+};

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const Violet: Story;
+export declare const Lemon: Story;
+export declare const Green: Story;
+export declare const Red: Story;
+export declare const Yellow: Story;