@beydesign/storybook 0.0.57 → 0.0.58

package/dist/stories/Form/AutoComplete.d.ts

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

package/dist/stories/Form/AutoComplete.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+import { getTypographySizeToken, getTypographyWeightToken, getTextStyles, getTextTransform, } from '../../utils';
+export const AutoComplete = ({ options, value, onChange, leadingIcon = 'MagnifyingGlass', placeholder = 'Search', disabled = false, onBlur, onFocus, }) => {
+    const [searchText, setSearchText] = useState('');
+    const [focused, setFocused] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const optionsContainerRef = useRef(null);
+    useEffect(() => {
+        setSearchText(value || '');
+    }, [value]);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setSearchText(newValue);
+        setHighlightedIndex(-1);
+        if (value !== newValue) {
+            onChange(newValue);
+        }
+    };
+    const handleOptionSelect = (option) => {
+        if (option !== value) {
+            onChange(option);
+        }
+        setSearchText(option);
+        setFocused(false);
+        inputRef.current?.blur();
+    };
+    const handleKeyDown = (e) => {
+        if (!focused)
+            return;
+        const hasOptions = filteredOptions.length > 0;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (hasOptions) {
+                    setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (hasOptions) {
+                    setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                }
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (hasOptions && highlightedIndex >= 0) {
+                    handleOptionSelect(filteredOptions[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setFocused(false);
+                inputRef.current?.blur();
+                break;
+            case 'Tab':
+                setFocused(false);
+                break;
+            default:
+                break;
+        }
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (optionsContainerRef.current &&
+                !optionsContainerRef.current.contains(event.target) &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target)) {
+                setFocused(false);
+            }
+        };
+        if (focused) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [focused]);
+    useEffect(() => {
+        if (highlightedIndex >= 0 && optionsContainerRef.current) {
+            const highlightedElement = optionsContainerRef.current.children[highlightedIndex];
+            if (highlightedElement) {
+                highlightedElement.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [highlightedIndex]);
+    const handleClear = (event) => {
+        event.stopPropagation();
+        if (!disabled) {
+            onChange('');
+            setSearchText('');
+            inputRef.current?.focus();
+        }
+    };
+    const handleFocus = () => {
+        if (!disabled) {
+            setFocused(true);
+            if (onFocus)
+                onFocus();
+        }
+    };
+    const handleBlur = () => {
+        setTimeout(() => {
+            setFocused(false);
+            if (onBlur)
+                onBlur();
+            if (searchText !== value) {
+                setSearchText(value || '');
+            }
+        }, 150);
+    };
+    const filteredOptions = React.useMemo(() => {
+        return options.filter((option) => option.toLowerCase().includes((searchText || '').toLowerCase()));
+    }, [options, searchText]);
+    const sizeToken = getTypographySizeToken(TypographySize.TextS);
+    const weightToken = getTypographyWeightToken(TypographyWeight.Regular);
+    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, } = getTextStyles(sizeToken, weightToken);
+    const textTransform = getTextTransform(sizeToken, weightToken);
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', position: 'relative', width: "100%", children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', alignItems: 'center', justifyContent: 'center', border: `1px solid ${focused ? 'var(--colors-light-border-border-component-active)' : 'var(--colors-light-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
+                    ? 'var(--primitives-desktop-primary-gray-25)'
+                    : 'var(--primitives-desktop-primary-white-100)', children: [getIconComponent(leadingIcon, {
+                        width: '24px',
+                        height: '24px',
+                        color: 'var(--colors-light-foreground-fg-quaternary)',
+                        'aria-hidden': 'true',
+                    }), _jsx("input", { ref: inputRef, type: "text", value: searchText, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, style: {
+                            flexGrow: 1,
+                            border: 'none',
+                            outline: 'none',
+                            fontSize: fontSize,
+                            fontWeight: fontWeight,
+                            fontFamily: fontFamily + ', sans-serif',
+                            lineHeight: lineHeight + 'px',
+                            letterSpacing: letterSpacing,
+                            textIndent: paragraphIndent,
+                            marginBottom: paragraphSpacing,
+                            textTransform: textTransform,
+                            textDecoration: textDecoration,
+                            color: disabled
+                                ? 'var(--colors-light-text-text-disabled)'
+                                : 'var(--colors-light-text-text-title)',
+                            backgroundColor: 'transparent',
+                        }, onFocus: handleFocus, onBlur: handleBlur, "aria-autocomplete": "list", "aria-controls": focused ? 'autocomplete-options' : undefined, "aria-expanded": focused, role: "combobox" }), searchText &&
+                        getIconComponent('X', {
+                            width: '24px',
+                            height: '24px',
+                            color: 'var(--colors-light-foreground-fg-quaternary)',
+                            onClick: handleClear,
+                            style: { cursor: disabled ? 'default' : 'pointer' },
+                            'aria-label': 'Clear input',
+                        })] }), focused && (_jsx(Box, { id: "autocomplete-options", ref: optionsContainerRef, position: 'absolute', top: '100%', left: 0, zIndex: 1000, bgcolor: 'var(--primitives-desktop-primary-white-100)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { text: "No results found", size: TypographySize.TextS, weight: TypographyWeight.Regular }) })) : (filteredOptions.map((option, index) => (_jsx(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', onClick: () => handleOptionSelect(option), sx: {
+                        cursor: 'pointer',
+                        backgroundColor: highlightedIndex === index
+                            ? 'var(--primitives-desktop-primary-gray-25)'
+                            : 'transparent',
+                        '&:hover': {
+                            backgroundColor: 'var(--primitives-desktop-primary-gray-25)',
+                        },
+                    }, role: "option", "aria-selected": highlightedIndex === index, tabIndex: -1, children: _jsx(Typography, { text: option, size: TypographySize.TextS, weight: TypographyWeight.Regular }) }, option)))) }))] }));
+};

package/dist/stories/Form/AutoComplete.stories.d.ts

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

package/dist/stories/Form/AutoComplete.stories.js

@@ -0,0 +1,88 @@
+import { AutoComplete } from './AutoComplete';
+const meta = {
+    title: 'Design System/Components/Form/AutoComplete',
+    component: AutoComplete,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4501-25356&t=XsmO3ZzXQ9rb1lu5-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        options: {
+            control: 'select',
+            description: 'The options to display in the autocomplete',
+            table: {
+                type: { summary: 'string[]' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the selected option',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            description: 'The onChange handler for the selected option',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the autocomplete is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        leadingIcon: {
+            control: 'select',
+            description: 'The leading icon of the autocomplete',
+            options: ['MagnifyingGlass', 'User', 'Calendar', 'Bell'],
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the autocomplete',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onBlur: {
+            description: 'The onBlur handler for the autocomplete',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onFocus: {
+            description: 'The onFocus handler for the autocomplete',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        options: [
+            'Option 1',
+            'Option 2',
+            'Option 3',
+            'Option 4',
+            'Option 5',
+            'Option 6',
+            'Option 7',
+            'Option 8',
+            'Option 9',
+            'Option 10',
+        ],
+        value: '',
+        onChange: () => { },
+    },
+};

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

@@ -1,5 +1,6 @@
 import { SxProps, Theme } from '@mui/material';
 import { HintBubbleProps } from '../UI';
+import { IconName } from '../../utils';
 /**
  * Text area component props
  */
@@ -140,7 +141,7 @@ export declare enum FileType {
 }
 export interface UploadedFileProps {
     /** Type of the uploaded file */
-    type: FileType;
+    type?: FileType;
     /** File name */
     fileName: string;
     /** Whether to show the delete button */
@@ -183,3 +184,21 @@ export interface FileUploadingProps {
     /** File name */
     fileName: string;
 }
+export interface AutoCompleteProps {
+    /** The options to display in the autocomplete */
+    options: string[];
+    /** The value of the selected option */
+    value: string;
+    /** The onChange handler for the selected option */
+    onChange: (value: string) => void;
+    /** The leading icon of the autocomplete */
+    leadingIcon?: IconName;
+    /** The placeholder of the autocomplete */
+    placeholder?: string;
+    /** Whether the autocomplete is disabled */
+    disabled?: boolean;
+    /** The onBlur handler for the autocomplete */
+    onBlur?: () => void;
+    /** The onFocus handler for the autocomplete */
+    onFocus?: () => void;
+}

package/dist/stories/Typography/Typography.js

@@ -1,42 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TypographySize, TypographyWeight } from './types';
 import { Box } from '@mui/material';
+import { getTextStyles, getTextTransform, getTypographySizeToken, getTypographyWeightToken, } from '../../utils';
 export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, trailingElement = null, textStyle, }) => {
-    const getTypographySizeToken = () => {
-        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;
-    };
-    const getTypographyWeightToken = () => {
-        let weightLc = weight?.toLowerCase() || '';
-        if (weightLc.includes('semibold')) {
-            weightLc = weightLc.replace('semibold', 'semi-bold');
-        }
-        return weightLc;
-    };
-    const sizeToken = getTypographySizeToken();
-    const weightToken = getTypographyWeightToken();
-    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 sizeToken = getTypographySizeToken(size);
+    const weightToken = getTypographyWeightToken(weight);
+    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, } = getTextStyles(sizeToken, weightToken);
+    const textTransform = getTextTransform(sizeToken, weightToken);
     const requiredColor = 'var(--colors-light-text-text-error)';
-    const getTextTransform = () => {
-        const computedValue = getComputedStyle(document.documentElement)
-            .getPropertyValue(`--global-${sizeToken}-${weightToken}-text-case`)
-            .trim();
-        return (computedValue === 'uppercase' ? 'uppercase' : 'none');
-    };
     const Label = () => {
         return (_jsxs("span", { className: className, style: {
                 display: 'flex',
@@ -49,7 +20,7 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
                 letterSpacing: letterSpacing,
                 textIndent: paragraphIndent,
                 marginBottom: paragraphSpacing,
-                textTransform: getTextTransform(),
+                textTransform: textTransform,
                 textDecoration: textDecoration,
                 color: color || 'var(--global-text-text-title)',
                 ...textStyle,

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -1,2 +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;
+};
+export declare const getTextTransform: (sizeToken: string, weightToken: string) => "uppercase" | "none";

package/dist/utils/typography.js

@@ -0,0 +1,44 @@
+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;
+};
+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)`;
+    return {
+        fontSize,
+        fontWeight,
+        fontFamily,
+        lineHeight,
+        letterSpacing,
+        paragraphIndent,
+        paragraphSpacing,
+        textDecoration,
+    };
+};
+export const getTextTransform = (sizeToken, weightToken) => {
+    const computedValue = getComputedStyle(document.documentElement)
+        .getPropertyValue(`--global-${sizeToken}-${weightToken}-text-case`)
+        .trim();
+    return computedValue === 'uppercase' ? 'uppercase' : 'none';
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.57",
+  "version": "0.0.58",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",