@beydesign/storybook 0.0.82 → 0.0.84

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

@@ -4,8 +4,9 @@ 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, }) => {
+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, }) => {
     const isUploading = uploadingStatus === FileUploadingStatus.Uploading;
     const isSuccess = uploadingStatus === FileUploadingStatus.Success;
     const isError = uploadingStatus === FileUploadingStatus.Error;
@@ -41,5 +42,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: '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" }) }))] }))] })] }));
 };

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

@@ -24,11 +24,6 @@ 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' } },
-        },
         showCancel: {
             control: 'boolean',
             description: 'Whether to show the cancel button',
@@ -61,7 +56,6 @@ export const Default = {
     args: {
         fileName: 'test.pdf',
         uploadingStatus: FileUploadingStatus.Uploading,
-        uploadProgress: 50,
         showCancel: true,
         showRetry: true,
     },
@@ -70,7 +64,6 @@ export const Success = {
     args: {
         fileName: 'test.pdf',
         uploadingStatus: FileUploadingStatus.Success,
-        uploadProgress: 100,
         showCancel: true,
         showRetry: true,
     },
@@ -79,7 +72,6 @@ export const Error = {
     args: {
         fileName: 'test.pdf',
         uploadingStatus: FileUploadingStatus.Error,
-        uploadProgress: 100,
         showCancel: true,
         showRetry: true,
     },

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

@@ -171,8 +171,6 @@ export declare enum FileUploadingStatus {
 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 */

package/dist/stories/UI/ProgressIndicator.js

@@ -5,6 +5,8 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, }) => {
     let errorText = '';
     const calculateFill = () => {
+        if (currentValue > maxValue)
+            return 100;
         return (currentValue / maxValue) * 100;
     };
     if (isNaN(currentValue) || !isFinite(currentValue)) {
@@ -16,13 +18,13 @@ export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentV
     else if (currentValue < 0) {
         errorText = 'Invalid current value';
     }
-    else if (currentValue > maxValue) {
-        errorText = 'Current value is greater than max value';
-    }
     else if (mode === ProgressIndicatorMode.Percentage) {
         if (maxValue > 100 || maxValue < 0) {
             errorText = 'Invalid max value for percentage mode';
         }
+        else if (currentValue > maxValue) {
+            errorText = 'Current value is greater than max value for percentage mode';
+        }
     }
     if (errorText) {
         return (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, children: errorText }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.82",
+  "version": "0.0.84",
   "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",