@beydesign/storybook 0.0.1 → 0.0.2

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

@@ -0,0 +1,398 @@
+import { Theme, SxProps } from '@mui/material';
+import { IconName } from '../../utils';
+import { ButtonSize, ButtonHierarchy } from '../Buttons';
+/**
+ * Badge size variants
+ */
+export declare enum BadgeSize {
+    lg = "lg",
+    md = "md",
+    xs = "xs"
+}
+/**
+ * Badge color variants
+ */
+export declare enum BadgeColor {
+    Default = "Default",
+    Violet = "Violet",
+    Lemon = "Lemon",
+    Green = "Green",
+    Red = "Red",
+    Yellow = "Yellow",
+    Blue = "Blue",
+    Cyan = "Cyan",
+    Pink = "Pink",
+    DarkTransparent = "DarkTransparent"
+}
+/**
+ * Badge component props
+ */
+export type BadgeProps = {
+    /** Size variant of the badge */
+    size?: BadgeSize;
+    /** Color variant of the badge */
+    color?: BadgeColor;
+    /** Text content of the badge */
+    text: string;
+    /** Custom style of the badge */
+    style?: SxProps<Theme>;
+    /** Whether to show the Icon */
+    showIcon?: boolean;
+    /** Icon to display in the badge */
+    icon?: IconName;
+    /** Whether to fill the icon */
+    fill?: boolean;
+    /** Custom icon weight (regular, bold, duotone, fill, light, thin) */
+    iconWeight?: 'regular' | 'bold' | 'duotone' | 'fill' | 'light' | 'thin';
+    /** Custom icon size (overrides the default size based on badge size) */
+    iconSize?: string | number;
+    /** Custom icon color (overrides the default color based on badge color) */
+    iconColor?: string;
+    /** Test ID of the badge */
+    testId?: string;
+};
+/**
+ * Avatar size variants
+ */
+export declare enum AvatarSize {
+    xxl = "xxl",
+    xl = "xl",
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs"
+}
+/**
+ * Avatar style variants
+ */
+export declare enum AvatarStyle {
+    Placeholder = "Placeholder",
+    Picture = "Picture",
+    Letters = "Letters"
+}
+export declare const AvatarImage = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAUPUG0r--EDZzf-f9Afj_Jp7N96yIGsWPgCYIkrAS1rCJHIcdm_RCq_me44bJc0dvvY&usqp=CAU";
+/**
+ * Avatar component props
+ */
+export type AvatarProps = {
+    /** Style variant of the avatar */
+    avatarStyle: AvatarStyle;
+    /** Text content of the avatar if avatarStyle is Letters */
+    text?: string;
+    /** Image source of the avatar if avatarStyle is Picture  */
+    image?: string;
+    /** Custom style of the avatar */
+    style?: SxProps<Theme>;
+    /** Size variant of the avatar */
+    size?: AvatarSize;
+    /** Visual hierarchy of the avatar */
+    border?: boolean;
+};
+export declare enum HintBubbleType {
+    Info = "Info",
+    Error = "Error"
+}
+export declare enum HintBubbleSize {
+    md = "md",
+    sm = "sm"
+}
+/**
+ * HintBubble component props
+ */
+export type HintBubbleProps = {
+    /** Type variant of the hint bubble */
+    type?: HintBubbleType;
+    /** Size variant of the hint bubble */
+    size?: HintBubbleSize;
+    /** Text of the hint bubble */
+    text: string;
+    /** Custom style of the hint bubble */
+    style?: SxProps<Theme>;
+};
+export declare enum LogoVariant {
+    Horizontal = "horizontal",
+    Vertical = "vertical",
+    Icon = "icon"
+}
+export interface LogoProps {
+    /**
+     * The variant of the logo to display
+     */
+    variant?: LogoVariant;
+    /**
+     * The color to apply to the logo
+     * If gradient is provided, this will be ignored
+     */
+    color?: string;
+    /**
+     * Optional gradient value to apply to the logo
+     * Example: "linear-gradient(180deg, #3300ff 0%, #d170ff 100%)"
+     */
+    gradient?: string;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+    /**
+     * Optional URL to override the default SVG
+     * If provided, this will be used instead of the built-in SVG
+     */
+    svgUrl?: string;
+}
+/**
+ * Menu item
+ */
+export interface MenuItemProps {
+    /** Label */
+    label: string;
+    /** Icon */
+    icon: IconName;
+    /** On click */
+    onClick: () => void;
+    /** Destructive */
+    destructive?: boolean;
+}
+/**
+ * Menu component props
+ */
+export type MenuProps = {
+    /** Icon */
+    icon?: IconName;
+    /** Items */
+    items?: MenuItemProps[];
+    /** Style */
+    style?: React.CSSProperties;
+    /** Test key */
+    testKey?: string;
+    /** Size of the trigger button */
+    size?: ButtonSize;
+    /** Hierarchy of the trigger button */
+    hierarchy?: ButtonHierarchy;
+};
+/**
+ * Check icon color variants
+ */
+export declare enum CheckIconColor {
+    Violet = "Violet",
+    Green = "Green"
+}
+/**
+ * Check icon size variants (xs = 16px, sm = 20px, md = 24px, lg = 28px)
+ */
+export declare enum CheckIconSize {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg"
+}
+/**
+ * Check icon type variants.
+ * - `Filled`: solid accent background + white check
+ * - `Line`: transparent background, accent ring + accent check
+ * - `Duotone`: light badge background + accent-colored check
+ */
+export declare enum CheckIconType {
+    Filled = "Filled",
+    Line = "Line",
+    Duotone = "Duotone"
+}
+/**
+ * Check icon component props
+ */
+export interface CheckIconProps {
+    /** Color variant */
+    color?: CheckIconColor;
+    /** Size variant (xs = 16px, md = 24px) */
+    size?: CheckIconSize;
+    /** Fill style */
+    type?: CheckIconType;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test id */
+    testId?: string;
+}
+/**
+ * Progress indicator mode variants
+ */
+export declare enum ProgressIndicatorMode {
+    Value = "Value",
+    Percentage = "Percentage"
+}
+/**
+ * Progress indicator component props
+ */
+export type ProgressIndicatorProps = {
+    /** Mode variant of the progress indicator */
+    mode?: ProgressIndicatorMode;
+    /** Value of the progress indicator */
+    currentValue: number;
+    /** Maximum value of the progress indicator */
+    maxValue: number;
+    /** Fill color of the progress indicator */
+    fillColor?: string;
+    /** Background color of the progress indicator */
+    backgroundColor?: string;
+    /** Text of the progress indicator */
+    text?: string;
+    /** Overridden text of the progress indicator */
+    overriddenText?: string;
+    /** Text color of the progress indicator */
+    textColor?: string;
+    /** Style of the progress indicator */
+    style?: SxProps<Theme>;
+    /** Text style of the progress indicator */
+    textStyle?: React.CSSProperties;
+    /** Test ID of the progress indicator */
+    testId?: string;
+};
+export interface SkeletonLoaderProps {
+    /**
+     * Width of the skeleton
+     */
+    width?: string | number;
+    /**
+     * Height of the skeleton
+     */
+    height?: string | number;
+    /**
+     * Border radius of the skeleton
+     */
+    borderRadius?: string;
+    /**
+     * Animation duration in seconds
+     */
+    animationDuration?: number;
+    /**
+     * Custom style for the skeleton
+     */
+    style?: React.CSSProperties;
+}
+export interface TopbarProps {
+    /** Title */
+    title: string;
+    /** Badge */
+    badgeText?: string;
+    /** New button text */
+    newButtonText?: string;
+    /** New button hidden */
+    newButtonHidden?: boolean;
+    /** On click of new button */
+    onNewButtonClick?: () => void;
+    /** Style */
+    style?: SxProps<Theme>;
+    /** Class name */
+    className?: string;
+}
+/**
+ * PromoBanner component props
+ */
+export interface PromoBannerProps {
+    /** Title of the banner */
+    title?: string;
+    /** Description text shown below the title */
+    description?: string;
+    /** Feature highlights rendered as a checkmark list below the description */
+    features?: string[];
+    /** Promo code to display */
+    promoCode?: string;
+    /** Label shown on top of the promo code */
+    promoCodeLabel?: string;
+    /** Called after the promo code is copied to the clipboard */
+    onCopyPromoCode?: (promoCode: string) => void;
+    /** Call-to-action button text */
+    ctaText?: string;
+    /** Called when the call-to-action button is clicked */
+    onCtaClick?: () => void;
+    /** Footer note shown below the actions */
+    footerText?: string;
+    /** Image URL of the avatar collage shown on the left side */
+    leftImage?: string;
+    /** Image URL of the avatar collage shown on the right side */
+    rightImage?: string;
+    /** Whether to show the avatar images */
+    showImages?: boolean;
+    /** Background of the banner */
+    background?: string;
+    /** Custom style of the banner */
+    style?: SxProps<Theme>;
+    /** Test ID of the banner */
+    testId?: string;
+}
+/**
+ * FeatureBanner media variants
+ */
+export declare enum FeatureBannerMedia {
+    Video = "Video",
+    Image = "Image",
+    None = "None"
+}
+/**
+ * FeatureBanner action button
+ */
+export interface FeatureBannerAction {
+    /** Button text */
+    text: string;
+    /** Called when the button is clicked */
+    onClick?: () => void;
+    /** Whether to render as the primary (brand) action */
+    primary?: boolean;
+}
+/**
+ * FeatureBanner component props
+ */
+export interface FeatureBannerProps {
+    /** Title of the banner */
+    title?: string;
+    /** Description shown below the title */
+    description?: string;
+    /** Action buttons */
+    actions?: FeatureBannerAction[];
+    /** Media shown on the right side of the banner */
+    media?: FeatureBannerMedia;
+    /** Image URL for the media (video thumbnail or image column) */
+    mediaImage?: string;
+    /** Called when the play button on the video preview is clicked */
+    onPlayClick?: () => void;
+    /** CTA text overlaid on the video preview */
+    mediaCtaText?: string;
+    /** Called when the media CTA is clicked */
+    onMediaCtaClick?: () => void;
+    /** Background of the banner */
+    background?: string;
+    /** Custom style of the banner */
+    style?: SxProps<Theme>;
+    /** Test ID of the banner */
+    testId?: string;
+}
+export interface StepProps {
+    /** Current step of the stepper */
+    currentStep: number;
+    /** Total steps of the stepper */
+    totalSteps: number;
+    /** Index of the step */
+    index: number;
+    /** Title of the step */
+    title: string;
+    /** On click of the step */
+    onClick?: () => void;
+    /** Connector width of the step */
+    connectorWidth?: string | number;
+    /** Style of the step */
+    stepStyle?: SxProps<Theme>;
+}
+export interface StepperProps {
+    /** Steps of the stepper */
+    steps: string[];
+    /** Current step of the stepper */
+    currentStep: number;
+    /** On click of the step */
+    onStepClick?: (step: number) => void;
+    /** Style of the stepper */
+    style?: SxProps<Theme>;
+    /** Style of the step */
+    stepStyle?: SxProps<Theme>;
+    /** Test ID of the stepper */
+    testId?: string;
+    /** Connector width of the stepper */
+    connectorWidth?: string | number;
+}

package/dist/stories/UI/types.js

@@ -0,0 +1,110 @@
+/**
+ * Badge size variants
+ */
+export var BadgeSize;
+(function (BadgeSize) {
+    BadgeSize["lg"] = "lg";
+    BadgeSize["md"] = "md";
+    BadgeSize["xs"] = "xs";
+})(BadgeSize || (BadgeSize = {}));
+/**
+ * Badge color variants
+ */
+export var BadgeColor;
+(function (BadgeColor) {
+    BadgeColor["Default"] = "Default";
+    BadgeColor["Violet"] = "Violet";
+    BadgeColor["Lemon"] = "Lemon";
+    BadgeColor["Green"] = "Green";
+    BadgeColor["Red"] = "Red";
+    BadgeColor["Yellow"] = "Yellow";
+    BadgeColor["Blue"] = "Blue";
+    BadgeColor["Cyan"] = "Cyan";
+    BadgeColor["Pink"] = "Pink";
+    BadgeColor["DarkTransparent"] = "DarkTransparent";
+})(BadgeColor || (BadgeColor = {}));
+/**
+ * Avatar size variants
+ */
+export var AvatarSize;
+(function (AvatarSize) {
+    AvatarSize["xxl"] = "xxl";
+    AvatarSize["xl"] = "xl";
+    AvatarSize["lg"] = "lg";
+    AvatarSize["md"] = "md";
+    AvatarSize["sm"] = "sm";
+    AvatarSize["xs"] = "xs";
+})(AvatarSize || (AvatarSize = {}));
+/**
+ * Avatar style variants
+ */
+export var AvatarStyle;
+(function (AvatarStyle) {
+    AvatarStyle["Placeholder"] = "Placeholder";
+    AvatarStyle["Picture"] = "Picture";
+    AvatarStyle["Letters"] = "Letters";
+})(AvatarStyle || (AvatarStyle = {}));
+export const AvatarImage = `https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAUPUG0r--EDZzf-f9Afj_Jp7N96yIGsWPgCYIkrAS1rCJHIcdm_RCq_me44bJc0dvvY&usqp=CAU`;
+export var HintBubbleType;
+(function (HintBubbleType) {
+    HintBubbleType["Info"] = "Info";
+    HintBubbleType["Error"] = "Error";
+})(HintBubbleType || (HintBubbleType = {}));
+export var HintBubbleSize;
+(function (HintBubbleSize) {
+    HintBubbleSize["md"] = "md";
+    HintBubbleSize["sm"] = "sm";
+})(HintBubbleSize || (HintBubbleSize = {}));
+export var LogoVariant;
+(function (LogoVariant) {
+    LogoVariant["Horizontal"] = "horizontal";
+    LogoVariant["Vertical"] = "vertical";
+    LogoVariant["Icon"] = "icon";
+})(LogoVariant || (LogoVariant = {}));
+/**
+ * Check icon color variants
+ */
+export var CheckIconColor;
+(function (CheckIconColor) {
+    CheckIconColor["Violet"] = "Violet";
+    CheckIconColor["Green"] = "Green";
+})(CheckIconColor || (CheckIconColor = {}));
+/**
+ * Check icon size variants (xs = 16px, sm = 20px, md = 24px, lg = 28px)
+ */
+export var CheckIconSize;
+(function (CheckIconSize) {
+    CheckIconSize["xs"] = "xs";
+    CheckIconSize["sm"] = "sm";
+    CheckIconSize["md"] = "md";
+    CheckIconSize["lg"] = "lg";
+})(CheckIconSize || (CheckIconSize = {}));
+/**
+ * Check icon type variants.
+ * - `Filled`: solid accent background + white check
+ * - `Line`: transparent background, accent ring + accent check
+ * - `Duotone`: light badge background + accent-colored check
+ */
+export var CheckIconType;
+(function (CheckIconType) {
+    CheckIconType["Filled"] = "Filled";
+    CheckIconType["Line"] = "Line";
+    CheckIconType["Duotone"] = "Duotone";
+})(CheckIconType || (CheckIconType = {}));
+/**
+ * Progress indicator mode variants
+ */
+export var ProgressIndicatorMode;
+(function (ProgressIndicatorMode) {
+    ProgressIndicatorMode["Value"] = "Value";
+    ProgressIndicatorMode["Percentage"] = "Percentage";
+})(ProgressIndicatorMode || (ProgressIndicatorMode = {}));
+/**
+ * FeatureBanner media variants
+ */
+export var FeatureBannerMedia;
+(function (FeatureBannerMedia) {
+    FeatureBannerMedia["Video"] = "Video";
+    FeatureBannerMedia["Image"] = "Image";
+    FeatureBannerMedia["None"] = "None";
+})(FeatureBannerMedia || (FeatureBannerMedia = {}));

package/dist/utils/common.d.ts

@@ -0,0 +1,2 @@
+export declare const getInitials: (text: string) => string;
+export declare const formatNumberShort: (num: number) => string;

package/dist/utils/common.js

@@ -0,0 +1,20 @@
+export const getInitials = (text) => {
+    if (!text)
+        return '';
+    return text
+        .split(' ')
+        .map((word) => word[0]?.toUpperCase())
+        .join('');
+};
+export const formatNumberShort = (num) => {
+    const sign = num < 0 ? '-' : '';
+    num = Math.abs(num);
+    if (num < 1000)
+        return `${sign}${Math.floor(num)}`;
+    const units = ['', 'k', 'm', 'b', 't', 'q'];
+    const tier = Math.min(Math.floor(Math.log10(num) / 3), units.length - 1);
+    const suffix = units[tier];
+    const scale = Math.pow(10, tier * 3);
+    const scaled = Math.floor(num / scale);
+    return `${sign}${scaled}${suffix}`;
+};

package/dist/utils/icon.d.ts

@@ -0,0 +1,6 @@
+import * as PhosphorIcons from '@phosphor-icons/react';
+import type { IconProps } from '@phosphor-icons/react';
+export type IconName = keyof typeof PhosphorIcons;
+export declare const getIconComponent: (iconName: IconName, props: IconProps & {
+    "data-testid"?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/utils/icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PhosphorIcons from '@phosphor-icons/react';
+export const getIconComponent = (iconName, props) => {
+    const Icon = PhosphorIcons[iconName];
+    return Icon ? _jsx(Icon, { ...props }) : null;
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './icon';
+export * from './common';
+export * from './typography';

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from './icon';
+export * from './common';
+export * from './typography';

package/dist/utils/typography.d.ts

@@ -0,0 +1,14 @@
+import { TypographySize, TypographyWeight } from '../stories/Typography';
+export declare const getTypographySizeToken: (size: TypographySize) => string;
+export declare const getTypographyWeightToken: (weight: TypographyWeight) => string;
+export declare const getTextStyles: (sizeToken: string, weightToken: string) => {
+    fontSize: string;
+    fontWeight: string;
+    fontFamily: string;
+    lineHeight: string;
+    letterSpacing: string;
+    paragraphIndent: string;
+    paragraphSpacing: string;
+    textDecoration: string;
+    textTransform: "uppercase" | "none";
+};

package/dist/utils/typography.js

@@ -0,0 +1,46 @@
+export const getTypographySizeToken = (size) => {
+    let sizeLc = size?.toLowerCase() || '';
+    if (sizeLc.includes('heading')) {
+        sizeLc = sizeLc.replace('heading', 'heading-');
+    }
+    else if (sizeLc.includes('text')) {
+        sizeLc = sizeLc.replace('text', 'text-');
+    }
+    sizeLc = sizeLc.replace(/(\d)(\D)/g, '$1-$2');
+    return sizeLc;
+};
+export const getTypographyWeightToken = (weight) => {
+    let weightLc = weight?.toLowerCase() || '';
+    if (weightLc.includes('semibold')) {
+        weightLc = weightLc.replace('semibold', 'semi-bold');
+    }
+    return weightLc;
+};
+const getTextTransform = (sizeToken, weightToken) => {
+    const computedValue = getComputedStyle(document.documentElement)
+        .getPropertyValue(`--global-${sizeToken}-${weightToken}-text-case`)
+        .trim();
+    return computedValue === 'uppercase' ? 'uppercase' : 'none';
+};
+export const getTextStyles = (sizeToken, weightToken) => {
+    const fontSize = `var(--global-${sizeToken}-${weightToken}-font-size)`;
+    const fontWeight = `var(--global-${sizeToken}-${weightToken}-font-weight)`;
+    const fontFamily = `var(--global-${sizeToken}-${weightToken}-font-family)`;
+    const lineHeight = `var(--global-${sizeToken}-${weightToken}-line-height)`;
+    const letterSpacing = `var(--global-${sizeToken}-${weightToken}-letter-spacing)`;
+    const paragraphIndent = `var(--global-${sizeToken}-${weightToken}-paragraph-indent)`;
+    const paragraphSpacing = `var(--global-${sizeToken}-${weightToken}-paragraph-spacing)`;
+    const textDecoration = `var(--global-${sizeToken}-${weightToken}-text-decoration)`;
+    const textTransform = getTextTransform(sizeToken, weightToken);
+    return {
+        fontSize,
+        fontWeight,
+        fontFamily,
+        lineHeight,
+        letterSpacing,
+        paragraphIndent,
+        paragraphSpacing,
+        textDecoration,
+        textTransform,
+    };
+};