@beydesign/storybook 0.0.1 → 0.0.2

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

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

package/dist/stories/Form/TextInput.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { HintBubble, HintBubbleSize } from '../UI';
+import { getIconComponent } from '../../utils';
+export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, showPasswordToggle = true, }) => {
+    const [focused, setFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const isPassword = type === 'password';
+    const enablePasswordToggle = isPassword && showPasswordToggle;
+    const inputType = enablePasswordToggle && showPassword ? 'text' : type;
+    // Reset visibility whenever the toggle is removed, so the field never
+    // reappears revealed after `type` switches away from password or
+    // `showPasswordToggle` is turned off.
+    useEffect(() => {
+        if (!enablePasswordToggle)
+            setShowPassword(false);
+    }, [enablePasswordToggle]);
+    const togglePasswordVisibility = () => {
+        if (!disabled)
+            setShowPassword((prev) => !prev);
+    };
+    const iconColor = disabled
+        ? 'var(--color-text-text-disabled)'
+        : 'var(--color-foreground-fg-secondary)';
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: errorText
+                        ? 'none'
+                        : '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
+                                ? '1px solid var(--color-border-border-error)'
+                                : focused
+                                    ? '1px solid var(--color-border-border-component-active)'
+                                    : 'transparent'}`, children: [_jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                        border: 'none',
+                                        outline: 'none',
+                                        width: '100%',
+                                        color: disabled
+                                            ? 'var(--color-text-text-disabled)'
+                                            : 'var(--color-text-text-title)',
+                                        backgroundColor: 'transparent',
+                                    }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }), enablePasswordToggle && (_jsx(Box, { component: 'button', type: 'button', onClick: togglePasswordVisibility, disabled: disabled, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, sx: {
+                                        padding: 0,
+                                        border: 'none',
+                                        borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+                                        backgroundColor: 'transparent',
+                                        cursor: disabled ? 'not-allowed' : 'pointer',
+                                        '&:focus-visible': {
+                                            outline: '2px solid var(--color-border-border-component-active)',
+                                            outlineOffset: '2px',
+                                        },
+                                    }, children: getIconComponent(showPassword ? 'EyeSlash' : 'Eye', {
+                                        width: '20px',
+                                        height: '20px',
+                                        color: iconColor,
+                                        'aria-hidden': 'true',
+                                    }) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--color-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText }))] }) }));
+};

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

@@ -0,0 +1,155 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./types").TextInputProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        type: {
+            control: "select";
+            description: string;
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        errorText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        trailingText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintBubbleProps: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintBubbleText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        required: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        style: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        labelTrailingElement: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        showPasswordToggle: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Password: Story;
+export declare const PasswordWithoutToggle: Story;
+export declare const Email: Story;

package/dist/stories/Form/TextInput.stories.js

@@ -0,0 +1,155 @@
+import { TextInput } from './TextInput';
+const meta = {
+    title: 'Design System/Components/Form/TextInput',
+    component: TextInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        type: {
+            control: 'select',
+            description: 'The type of the text input',
+            options: ['text', 'password', 'email', 'number', 'tel', 'url'],
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        hintText: {
+            control: 'text',
+            description: 'The hint text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        errorText: {
+            control: 'text',
+            description: 'The error text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the text input is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        trailingText: {
+            control: 'text',
+            description: 'The trailing text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            description: 'The onChange function of the text input',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        hintBubbleProps: {
+            control: 'object',
+            description: 'The props of the hint bubble',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        hintBubbleText: {
+            control: 'text',
+            description: 'The text of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the text input is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Style of the text input',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        labelTrailingElement: {
+            control: 'object',
+            description: 'The trailing element of the label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+        showPasswordToggle: {
+            control: 'boolean',
+            description: 'Whether to show the password visibility toggle (only applies when type is "password")',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Agent's name",
+        value: 'Anna',
+        onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
+    },
+};
+export const Password = {
+    args: {
+        label: 'Password',
+        value: 'password',
+        type: 'password',
+        placeholder: 'Enter your password',
+        onChange: () => { },
+        hintText: 'Use at least 8 characters',
+    },
+};
+export const PasswordWithoutToggle = {
+    args: {
+        label: 'Password',
+        value: 'password',
+        type: 'password',
+        showPasswordToggle: false,
+        placeholder: 'Enter your password',
+        onChange: () => { },
+    },
+};
+export const Email = {
+    args: {
+        label: 'Email',
+        value: 'email',
+        type: 'email',
+        onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
+    },
+};

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

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

package/dist/stories/Form/Toggle.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TogglePosition } from './types';
+import { Box, styled, Switch } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props })))(({ theme }) => ({
+    width: 36,
+    height: 20,
+    padding: 0,
+    '& .MuiSwitch-switchBase': {
+        padding: 0,
+        margin: 2,
+        transitionDuration: '300ms',
+        '&.Mui-checked': {
+            transform: 'translateX(16px)',
+            color: '#fff',
+            '& + .MuiSwitch-track': {
+                backgroundColor: 'var(--primitives-desktop-primary-success-500)',
+                opacity: 1,
+                border: 0,
+            },
+            '&.Mui-disabled + .MuiSwitch-track': {
+                opacity: 0.5,
+            },
+        },
+        '&.Mui-focusVisible .MuiSwitch-thumb': {
+            color: '#33cf4d',
+            border: '6px solid #fff',
+        },
+        '&.Mui-disabled .MuiSwitch-thumb': {
+            color: theme.palette.grey[100],
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+            backgroundColor: 'var(--color-background-bg-element)',
+            opacity: 0.7,
+        },
+    },
+    '& .MuiSwitch-thumb': {
+        boxSizing: 'border-box',
+        width: 16,
+        height: 16,
+        backgroundColor: 'var(--color-foreground-fg-white)',
+    },
+    '& .MuiSwitch-track': {
+        borderRadius: 26 / 2,
+        backgroundColor: 'var(--color-background-bg-element)',
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: 500,
+        }),
+        '&:hover': {
+            backgroundColor: 'var(--color-border-border-component)',
+        },
+    },
+}));
+export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, textColor = 'var(--color-text-text-title)', titleColor = '#475467', }) => {
+    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: textColor, children: text }), title && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: titleColor, children: title }))] }))] }));
+};

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

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

package/dist/stories/Form/Toggle.stories.js

@@ -0,0 +1,79 @@
+import { TogglePosition } from './types';
+import { Toggle } from './Toggle';
+const meta = {
+    title: 'Design System/Components/Form/Toggle',
+    component: Toggle,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4595-5881&t=3PJghL9RdZ71sldb-1&m=dev',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Whether the toggle is checked',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        onChange: {
+            description: 'Callback function when the toggle is checked',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        text: {
+            description: 'Text of the toggle',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        title: {
+            description: 'Title of the toggle',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the toggle is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        togglePosition: {
+            control: 'select',
+            description: 'Position of the toggle',
+            options: Object.values(TogglePosition),
+            table: { type: { summary: 'string' } },
+        },
+        style: {
+            description: 'Style of the toggle',
+            table: { type: { summary: 'object' } },
+        },
+        textColor: {
+            description: 'Color of the text',
+            table: { type: { summary: 'string' } },
+        },
+        titleColor: {
+            description: 'Color of the title',
+            table: { type: { summary: 'string' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        checked: false,
+        onChange: () => { },
+        text: 'Click me',
+        title: 'This is a toggle',
+        disabled: false,
+        togglePosition: TogglePosition.Right,
+        textColor: 'var(--color-text-text-title)',
+        titleColor: '#475467',
+    },
+};

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

@@ -0,0 +1,8 @@
+export * from './AutoComplete';
+export * from './Checkbox';
+export * from './Toggle';
+export * from './TextArea';
+export * from './TextInput';
+export * from './FileUpload';
+export * from './Dropdown';
+export * from './types';

package/dist/stories/Form/index.js

@@ -0,0 +1,8 @@
+export * from './AutoComplete';
+export * from './Checkbox';
+export * from './Toggle';
+export * from './TextArea';
+export * from './TextInput';
+export * from './FileUpload';
+export * from './Dropdown';
+export * from './types';