@beydesign/storybook 0.0.83 → 0.0.85

package/dist/assets/animations/loading-animation.json

@@ -0,0 +1 @@
+{ "nm": "Main Scene", "ddd": 0, "h": 8, "w": 302, "meta": { "g": "@lottiefiles/creator 1.45.0" }, "layers": [{ "ty": 4, "nm": "Masque", "sr": 1, "st": 0, "op": 2250.58391725058, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "td": 1, "ao": 0, "ks": { "a": { "a": 0, "k": [-15.75, 16.08405002307892], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [151.25, 4.08405002307892], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Rectangle 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "rc", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Rect", "nm": "Tracé rectangulaire 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "r": { "a": 0, "k": 20, "ix": 4 }, "s": { "a": 0, "k": [300, 4], "ix": 2 } }, { "ty": "st", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Stroke", "nm": "Contour 1", "lc": 1, "lj": 1, "ml": 4, "o": { "a": 0, "k": 100, "ix": 4 }, "w": { "a": 0, "k": 0, "ix": 5 }, "c": { "a": 0, "k": [1, 1, 1], "ix": 3 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fond 1", "c": { "a": 0, "k": [0.9216, 1, 1], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-15.75, 16.062], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 1 }, { "ty": 4, "nm": "Item barre", "sr": 1, "st": 0, "op": 2250.58391725058, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "tt": 1, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [46, -12, 0], "t": 0 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [498, -12, 0], "t": 50 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [46, -12, 0], "t": 51 }, { "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.667, "y": 1 }, "s": [46, -12, 0], "t": 53 }, { "s": [498, -12, 0], "t": 103 }], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 1, "k": [{ "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [100], "t": 46 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [0], "t": 49 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [0], "t": 51 }, { "s": [100], "t": 52 }], "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Rectangle 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "rc", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Rect", "nm": "Tracé rectangulaire 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "r": { "a": 0, "k": 20, "ix": 4 }, "s": { "a": 0, "k": [100, 4], "ix": 2 } }, { "ty": "st", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Stroke", "nm": "Contour 1", "lc": 1, "lj": 1, "ml": 4, "o": { "a": 0, "k": 100, "ix": 4 }, "w": { "a": 0, "k": 0, "ix": 5 }, "c": { "a": 0, "k": [1, 1, 1], "ix": 3 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fond 1", "c": { "a": 0, "k": [0.2902, 0.1216, 0.7216], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-115.75, 16.062], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 2, "tp": 1 }, { "ty": 4, "nm": "Barre", "sr": 1, "st": 0, "op": 2250.58391725058, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-15.75, 16.08405002307892], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [151.25, 4.08405002307892], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Rectangle 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "rc", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Rect", "nm": "Tracé rectangulaire 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "r": { "a": 0, "k": 20, "ix": 4 }, "s": { "a": 0, "k": [300, 4], "ix": 2 } }, { "ty": "st", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Stroke", "nm": "Contour 1", "lc": 1, "lj": 1, "ml": 4, "o": { "a": 0, "k": 100, "ix": 4 }, "w": { "a": 0, "k": 0, "ix": 5 }, "c": { "a": 0, "k": [1, 1, 1], "ix": 3 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fond 1", "c": { "a": 0, "k": [0.7412, 0.7059, 0.9961], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-15.75, 16.062], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 3 }], "v": "5.7.0", "fr": 50, "op": 105, "ip": 0, "assets": [] }

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

@@ -1,14 +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';
 import { ProgressIndicator, ProgressIndicatorMode } from '../../UI';
-export const FileUploading = ({ uploadProgress, uploadingStatus, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
+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')
@@ -41,5 +45,5 @@ export const FileUploading = ({ uploadProgress, uploadingStatus, sx, onCancel, o
                                     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, { 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,
@@ -29,6 +29,12 @@ const meta = {
             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',
@@ -61,16 +67,33 @@ export const Default = {
     args: {
         fileName: 'test.pdf',
         uploadingStatus: FileUploadingStatus.Uploading,
+        showCancel: true,
+        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',
         uploadingStatus: FileUploadingStatus.Success,
-        uploadProgress: 100,
         showCancel: true,
         showRetry: true,
     },
@@ -79,7 +102,6 @@ export const Error = {
     args: {
         fileName: 'test.pdf',
         uploadingStatus: FileUploadingStatus.Error,
-        uploadProgress: 100,
         showCancel: true,
         showRetry: true,
     },

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

@@ -165,14 +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 | null;
+    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.83",
+  "version": "0.0.85",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,6 +31,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lottiefiles/react-lottie-player": "^3.6.0",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@phosphor-icons/react": "^2.1.7",