@beydesign/storybook 0.0.84 → 0.0.85

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

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { FileUploadingStatus } from '../types';
+import { FileUploadingStatus, FileUploadingProgressMode, } from '../types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../../Typography';
 import { getIconComponent } from '../../../utils';
 import { Player } from '@lottiefiles/react-lottie-player';
 import loadingAnimation from '../../../assets/animations/loading-animation.json';
-export const FileUploading = ({ uploadingStatus, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
+import { ProgressIndicator, ProgressIndicatorMode } from '../../UI';
+export const FileUploading = ({ uploadProgress, uploadingStatus, progressMode = FileUploadingProgressMode.Animation, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
     const isUploading = uploadingStatus === FileUploadingStatus.Uploading;
     const isSuccess = uploadingStatus === FileUploadingStatus.Success;
     const isError = uploadingStatus === FileUploadingStatus.Error;
+    const isPercentageProgress = progressMode === FileUploadingProgressMode.Percentage;
+    const isAnimationProgress = progressMode === FileUploadingProgressMode.Animation;
     const fileExtension = fileName.split('.').pop();
     const getFileIcon = () => {
         if (fileExtension?.toLowerCase() === 'pdf')
@@ -42,5 +45,5 @@ export const FileUploading = ({ uploadingStatus, sx, onCancel, onRetry, fileName
                                     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 && uploadingStatus === FileUploadingStatus.Uploading && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: "Upload failed, please try again." }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-text-text-error)', children: "Try again" }) }))] }))] })] }));
+                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: '100%', children: [isUploading && isAnimationProgress && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { height: '100%', width: '100%' } })), isUploading && isPercentageProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress || 0, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: "Upload failed, please try again." }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-text-text-error)', children: "Try again" }) }))] }))] })] }));
 };

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

@@ -4,5 +4,7 @@ declare const meta: Meta<typeof FileUploading>;
 export default meta;
 type Story = StoryObj<typeof FileUploading>;
 export declare const Default: Story;
+export declare const PercentageProgress: Story;
+export declare const AnimationProgress: Story;
 export declare const Success: Story;
 export declare const Error: Story;

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

@@ -1,5 +1,5 @@
 import { FileUploading } from './FileUploading';
-import { FileUploadingStatus } from '../types';
+import { FileUploadingStatus, FileUploadingProgressMode } from '../types';
 const meta = {
     title: 'Design System/Components/Form/FileUpload/FileUploading',
     component: FileUploading,
@@ -24,6 +24,17 @@ const meta = {
             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' } },
+        },
+        progressMode: {
+            control: 'select',
+            options: Object.values(FileUploadingProgressMode),
+            description: 'The mode of the file upload progress',
+            table: { type: { summary: 'ProgressMode' } },
+        },
         showCancel: {
             control: 'boolean',
             description: 'Whether to show the cancel button',
@@ -60,6 +71,25 @@ export const Default = {
         showRetry: true,
     },
 };
+export const PercentageProgress = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Uploading,
+        showCancel: true,
+        showRetry: true,
+        progressMode: FileUploadingProgressMode.Percentage,
+        uploadProgress: 50,
+    },
+};
+export const AnimationProgress = {
+    args: {
+        fileName: 'test.pdf',
+        uploadingStatus: FileUploadingStatus.Uploading,
+        showCancel: true,
+        showRetry: true,
+        progressMode: FileUploadingProgressMode.Animation,
+    },
+};
 export const Success = {
     args: {
         fileName: 'test.pdf',

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

@@ -165,12 +165,23 @@ export declare enum FileUploadingStatus {
     Success = "Success",
     Error = "Error"
 }
+/**
+ * Progress mode variants
+ */
+export declare enum FileUploadingProgressMode {
+    Percentage = "Percentage",
+    Animation = "Animation"
+}
 /**
  * File uploading component props
  */
 export interface FileUploadingProps {
     /** Status of the file uploading */
     uploadingStatus: FileUploadingStatus;
+    /** Progress mode of the file uploading */
+    progressMode?: FileUploadingProgressMode;
+    /** Progress of the file uploading */
+    uploadProgress?: number;
     /** Style of the file uploading */
     sx?: SxProps<Theme>;
     /** Whether to show the cancel button */

package/dist/stories/Form/types.js

@@ -28,3 +28,11 @@ export var FileUploadingStatus;
     FileUploadingStatus["Success"] = "Success";
     FileUploadingStatus["Error"] = "Error";
 })(FileUploadingStatus || (FileUploadingStatus = {}));
+/**
+ * Progress mode variants
+ */
+export var FileUploadingProgressMode;
+(function (FileUploadingProgressMode) {
+    FileUploadingProgressMode["Percentage"] = "Percentage";
+    FileUploadingProgressMode["Animation"] = "Animation";
+})(FileUploadingProgressMode || (FileUploadingProgressMode = {}));

package/package.json

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