@beydesign/storybook 0.0.41 → 0.0.42

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

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

package/dist/stories/Form/FileUpload/FileUpload.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import { FileDoc, FilePdf, FileTxt, UploadSimple } from '@phosphor-icons/react';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,.txt', maxFileSizeMB = 10, onFileSelect, }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef(null);
+    const handleFileSelect = (files) => {
+        if (!files || disabled)
+            return;
+        const file = files[0];
+        if (file.size > maxFileSizeMB * 1024 * 1024) {
+            alert(`File size exceeds the maximum limit of ${maxFileSizeMB}MB`);
+            return;
+        }
+        if (onFileSelect)
+            onFileSelect(file);
+    };
+    const handleClick = () => {
+        if (disabled)
+            return;
+        else if (fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        if (!disabled) {
+            setIsDragging(true);
+        }
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (!disabled) {
+            handleFileSelect(e.dataTransfer.files);
+        }
+    };
+    const handleInputChange = (e) => {
+        handleFileSelect(e.target.files);
+    };
+    const iconProps = {
+        height: '20px',
+        width: '20px',
+        color: disabled
+            ? 'var(--colors-light-text-text-subtle)'
+            : 'var(--colors-light-text-text-paragraph)',
+    };
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1.5px dashed ${isDragging ? 'var(--colors-light-background-bg-brand-hover)' : 'var(--colors-light-background-bg-brand)'}`, bgcolor: disabled
+            ? 'var(--colors-light-background-bg-component-contrast-subtle)'
+            : isDragging
+                ? 'var(--colors-light-background-bg-element-hover)'
+                : 'var(--colors-light-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `2px solid ${disabled
+                    ? 'var(--colors-light-border-border-component)'
+                    : isDragging
+                        ? 'var(--colors-light-background-bg-brand-hover)'
+                        : 'var(--colors-light-background-bg-brand)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--primitives-desktop-primary-white-100)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
+                        ? 'var(--colors-light-foreground-fg-disabled)'
+                        : 'var(--colors-light-foreground-fg-brand-primary)' }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Typography, { text: 'Click to upload', size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
+                            ? 'var(--colors-light-text-text-disabled)'
+                            : 'var(--colors-light-text-text-accent)', style: { cursor: disabled ? 'not-allowed' : 'pointer' } }), _jsx(Typography, { text: 'or drag and drop', size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
+                            ? 'var(--colors-light-text-text-subtle)'
+                            : 'var(--colors-light-text-text-paragraph)' }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(FilePdf, { ...iconProps }), _jsx(FileDoc, { ...iconProps }), _jsx(FileTxt, { ...iconProps })] })] })] }));
+};

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

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

package/dist/stories/Form/FileUpload/FileUpload.stories.js

@@ -0,0 +1,51 @@
+import { FileUpload } from './FileUpload';
+const meta = {
+    title: 'Design System/Components/Form/FileUpload',
+    component: FileUpload,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4793-22751&t=rqtBB1YFgMFiNXZa-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Whether the file upload is disabled',
+            table: { type: { summary: 'boolean' } },
+        },
+        acceptedFileTypes: {
+            control: 'text',
+            description: 'Accepted file types',
+            table: { type: { summary: 'string' } },
+        },
+        maxFileSizeMB: {
+            control: 'number',
+            description: 'Max file size in MB',
+            table: { type: { summary: 'number' } },
+        },
+        onFileSelect: {
+            description: 'Callback function when a file is selected',
+            table: { type: { summary: 'function' } },
+        },
+        sx: {
+            control: 'object',
+            description: 'Style of the file upload',
+            table: { type: { summary: 'SxProps' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        disabled: false,
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};

package/dist/stories/Form/FileUpload/FileUploading.d.ts

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

package/dist/stories/Form/FileUpload/FileUploading.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { FileUploadingStatus } from '../types';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+import { getIconComponent } from '../../../utils';
+import { ProgressIndicator, ProgressIndicatorMode } from '../../UI';
+export const FileUploading = ({ uploadProgress, uploadingStatus, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
+    const isUploading = uploadingStatus === FileUploadingStatus.Uploading;
+    const isSuccess = uploadingStatus === FileUploadingStatus.Success;
+    const isError = uploadingStatus === FileUploadingStatus.Error;
+    const fileExtension = fileName.split('.').pop();
+    const getFileIcon = () => {
+        if (fileExtension?.toLowerCase() === 'pdf')
+            return 'FilePdf';
+        if (fileExtension?.toLowerCase().includes('doc'))
+            return 'FileDoc';
+        if (fileExtension?.toLowerCase() === 'txt')
+            return 'FileTxt';
+        return 'File';
+    };
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px solid ${isError ? 'var(--colors-light-border-border-error)' : 'var(--colors-light-border-border-component)'}`, bgcolor: 'var(--colors-light-background-bg-component-contrast-subtle)', minWidth: '300px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [getIconComponent(getFileIcon(), {
+                                width: '24px',
+                                height: '24px',
+                                color: isError
+                                    ? 'var(--colors-light-text-text-error)'
+                                    : 'var(--colors-light-foreground-fg-primary)',
+                            }), _jsx(Typography, { text: fileName, size: TypographySize.TextM, weight: TypographyWeight.Regular, color: isError
+                                    ? 'var(--colors-light-text-text-error)'
+                                    : 'var(--primitives-desktop-primary-gray-950)' })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showCancel &&
+                                onCancel &&
+                                isUploading &&
+                                getIconComponent('X', {
+                                    width: '24px',
+                                    height: '24px',
+                                    color: 'var(--colors-light-text-text-title)',
+                                    onClick: onCancel,
+                                    style: { cursor: 'pointer' },
+                                }), isSuccess &&
+                                getIconComponent('Check', {
+                                    width: '24px',
+                                    height: '24px',
+                                    color: 'var(--colors-light-foreground-fg-success)',
+                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [!isError && uploadProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { text: 'Upload failed, please try again.', size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', style: { lineHeight: '16px' } }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { text: 'Try again', size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-text-text-error)', style: { lineHeight: '16px' } }) }))] }))] })] }));
+};

package/dist/stories/Form/FileUpload/FileUploading.stories.d.ts

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

package/dist/stories/Form/FileUpload/FileUploading.stories.js

@@ -0,0 +1,86 @@
+import { FileUploading } from './FileUploading';
+import { FileUploadingStatus } from '../types';
+const meta = {
+    title: 'Design System/Components/Form/FileUploading',
+    component: FileUploading,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4793-22751&t=rqtBB1YFgMFiNXZa-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        fileName: {
+            control: 'text',
+            description: 'The name of the file',
+            table: { type: { summary: 'string' } },
+        },
+        uploadingStatus: {
+            control: 'select',
+            options: Object.values(FileUploadingStatus),
+            defaultValue: FileUploadingStatus.Uploading,
+            description: 'The status of the file upload',
+            table: { type: { summary: 'FileUploadingStatus' } },
+        },
+        uploadProgress: {
+            control: 'number',
+            description: 'The progress of the file upload',
+            table: { type: { summary: 'number' } },
+        },
+        showCancel: {
+            control: 'boolean',
+            description: 'Whether to show the cancel button',
+            table: { type: { summary: 'boolean' } },
+        },
+        onCancel: {
+            action: 'clicked',
+            description: 'Callback function when the cancel button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        showRetry: {
+            control: 'boolean',
+            description: 'Whether to show the retry button',
+            table: { type: { summary: 'boolean' } },
+        },
+        onRetry: {
+            action: 'clicked',
+            description: 'Callback function when the retry button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        sx: {
+            control: 'object',
+            description: 'Style of the file upload',
+            table: { type: { summary: 'SxProps' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Uploading,
+        uploadProgress: 50,
+        showCancel: true,
+        showRetry: true,
+    },
+};
+export const Success = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Success,
+        uploadProgress: 100,
+        showCancel: true,
+        showRetry: true,
+    },
+};
+export const Error = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Error,
+        uploadProgress: 100,
+        showCancel: true,
+        showRetry: true,
+    },
+};

package/dist/stories/Form/FileUpload/UploadedFile.d.ts

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

package/dist/stories/Form/FileUpload/UploadedFile.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileType } from '../types';
+import { Box } from '@mui/material';
+import { File } from '@phosphor-icons/react';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+import { ButtonDisplayMode, ButtonHierarchy, ButtonSize, MainButton, } from '../../Buttons';
+export const UploadedFile = ({ type = FileType.Default, showDelete = true, onDelete, showDownload = true, onDownload, fileName, sx, }) => {
+    const isSampleFile = type === FileType.Sample;
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', paddingLeft: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: isSampleFile
+            ? 'var(--colors-light-background-bg-card-highlight)'
+            : 'var(--colors-light-background-bg-component-contrast-subtle)', minWidth: '240px', minHeight: '36px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(File, { width: '24px', height: '24px', color: 'var(--colors-light-foreground-fg-primary)' }), _jsx(Typography, { text: fileName, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--colors-light-foreground-fg-primary)' })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showDownload && onDownload && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "DownloadSimple", onClick: onDownload })), showDelete && onDelete && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "X", onClick: onDelete }))] })] }));
+};

package/dist/stories/Form/FileUpload/UploadedFile.stories.d.ts

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

package/dist/stories/Form/FileUpload/UploadedFile.stories.js

@@ -0,0 +1,73 @@
+import { UploadedFile } from './UploadedFile';
+import { FileType } from '../types';
+const meta = {
+    title: 'Design System/Components/Form/UploadedFile',
+    component: UploadedFile,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4793-22751&t=rqtBB1YFgMFiNXZa-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        fileName: {
+            control: 'text',
+            description: 'The name of the file',
+            table: { type: { summary: 'string' } },
+        },
+        type: {
+            control: 'select',
+            options: Object.values(FileType),
+            description: 'The type of the file',
+            table: { type: { summary: 'string' } },
+        },
+        showDelete: {
+            control: 'boolean',
+            description: 'Whether to show the delete button',
+            table: { type: { summary: 'boolean' } },
+        },
+        showDownload: {
+            control: 'boolean',
+            description: 'Whether to show the download button',
+            table: { type: { summary: 'boolean' } },
+        },
+        onDelete: {
+            action: 'onDelete',
+            description: 'Callback function when the delete button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        onDownload: {
+            action: 'onDownload',
+            description: 'Callback function when the download button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        sx: {
+            control: 'object',
+            description: 'Style of the uploaded file',
+            table: { type: { summary: 'SxProps' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        fileName: 'example.pdf',
+        type: FileType.Default,
+        showDelete: true,
+        showDownload: true,
+        onDelete: () => { },
+        onDownload: () => { },
+    },
+};
+export const Sample = {
+    args: {
+        fileName: 'sample.txt',
+        type: FileType.Sample,
+        showDelete: false,
+        showDownload: false,
+        onDelete: () => { },
+        onDownload: () => { },
+    },
+};

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

@@ -0,0 +1,3 @@
+export * from './FileUpload';
+export * from './FileUploading';
+export * from './UploadedFile';

package/dist/stories/Form/FileUpload/index.js

@@ -0,0 +1,3 @@
+export * from './FileUpload';
+export * from './FileUploading';
+export * from './UploadedFile';

package/dist/stories/Form/Toggle.js

@@ -48,7 +48,6 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
             duration: 500,
         }),
         '&:hover': {
-            border: '1px solid red',
             backgroundColor: 'var(--primitives-desktop-primary-gray-200)',
         },
     },

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

@@ -2,4 +2,5 @@ export * from './Checkbox';
 export * from './Toggle';
 export * from './TextArea';
 export * from './TextInput';
+export * from './FileUpload';
 export * from './types';

package/dist/stories/Form/index.js

@@ -2,4 +2,5 @@ export * from './Checkbox';
 export * from './Toggle';
 export * from './TextArea';
 export * from './TextInput';
+export * from './FileUpload';
 export * from './types';

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

@@ -92,3 +92,67 @@ export type CheckboxProps = {
     /** Event handler for the checkbox */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
+export interface FileUploadProps {
+    /** Whether the file upload is disabled */
+    disabled?: boolean;
+    /** Accepted file types */
+    acceptedFileTypes?: string;
+    /** Max file size in MB */
+    maxFileSizeMB?: number;
+    /** Callback function when a file is selected */
+    onFileSelect?: (file: File) => void;
+    /** Style of the file upload */
+    sx?: SxProps<Theme>;
+}
+/**
+ * File type variants
+ */
+export declare enum FileType {
+    Sample = "Sample",
+    Default = "Default"
+}
+export interface UploadedFileProps {
+    /** Type of the uploaded file */
+    type: FileType;
+    /** File name */
+    fileName: string;
+    /** Whether to show the delete button */
+    showDelete?: boolean;
+    /** Callback function when the delete button is clicked */
+    onDelete?: () => void;
+    /** Whether to show the download button */
+    showDownload?: boolean;
+    /** Callback function when the download button is clicked */
+    onDownload?: () => void;
+    /** Style of the uploaded file */
+    sx?: SxProps<Theme>;
+}
+/**
+ * File uploading status variants
+ */
+export declare enum FileUploadingStatus {
+    Uploading = "Uploading",
+    Success = "Success",
+    Error = "Error"
+}
+/**
+ * File uploading component props
+ */
+export interface FileUploadingProps {
+    /** Status of the file uploading */
+    uploadingStatus: FileUploadingStatus;
+    /** Progress of the file uploading */
+    uploadProgress: number | null;
+    /** Style of the file uploading */
+    sx?: SxProps<Theme>;
+    /** Whether to show the cancel button */
+    showCancel?: boolean;
+    /** Callback function when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Whether to show the retry button */
+    showRetry?: boolean;
+    /** Callback function when the retry button is clicked */
+    onRetry?: () => void;
+    /** File name */
+    fileName: string;
+}

package/dist/stories/Form/types.js

@@ -11,3 +11,20 @@ export var CheckboxType;
     CheckboxType["Radio"] = "Radio";
     CheckboxType["Checkbox"] = "Checkbox";
 })(CheckboxType || (CheckboxType = {}));
+/**
+ * File type variants
+ */
+export var FileType;
+(function (FileType) {
+    FileType["Sample"] = "Sample";
+    FileType["Default"] = "Default";
+})(FileType || (FileType = {}));
+/**
+ * File uploading status variants
+ */
+export var FileUploadingStatus;
+(function (FileUploadingStatus) {
+    FileUploadingStatus["Uploading"] = "Uploading";
+    FileUploadingStatus["Success"] = "Success";
+    FileUploadingStatus["Error"] = "Error";
+})(FileUploadingStatus || (FileUploadingStatus = {}));

package/package.json

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