@am92/react-design-system 2.9.12 → 2.10.1

package/dist/Components/DsFileUploader/Slots/DsFileUploaderDropZone.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DsBox } from '../../DsBox';
+import { DsButton } from '../../DsButton';
+import { DsInput } from '../../DsInput';
+import { DsRemixIcon } from '../../DsRemixIcon';
+import { DsStack } from '../../DsStack';
+import { DsTypography } from '../../DsTypography';
+import { DsFileUploaderDropzoneDefaultProps } from '../DsFileUploader.Types';
+/**
+ * DsFileUploaderDropZone
+ *
+ * This component renders a drop zone area where users can drag & drop files
+ * or click to upload using a hidden input field. It supports two layout variants:
+ * - 'DEFAULT': Large button with drag and drop space area
+ * - 'COMPRESSED': Smaller area and button size to save space
+ */
+export const DsFileUploaderDropZone = (inProps) => {
+    const props = {
+        ...DsFileUploaderDropzoneDefaultProps,
+        ...inProps
+    };
+    const { variant, IconProps, title, description, InputProps, disabled, ...restDsStackProps } = props;
+    const isCompressed = variant === 'COMPRESSED';
+    const renderDescription = () => {
+        if (!description)
+            return null;
+        const isArray = Array.isArray(description);
+        const isString = typeof description === 'string';
+        const shouldRenderCompressedArray = isArray && isCompressed;
+        const shouldRenderString = isString;
+        if (!shouldRenderCompressedArray && !shouldRenderString)
+            return null;
+        const color = `var(--ds-colour-${isCompressed ? 'typoPrimary' : 'typoTertiary'})`;
+        const containerProps = {
+            direction: isCompressed ? 'row' : undefined,
+            justifyContent: isCompressed
+                ? isArray && description.length > 1
+                    ? 'space-between'
+                    : 'center'
+                : 'center',
+            alignItems: isCompressed ? 'center' : undefined,
+            textAlign: isCompressed ? 'center' : undefined,
+            pb: isCompressed ? undefined : 'var(--ds-spacing-bitterCold)',
+            sx: isCompressed
+                ? {
+                    py: 'var(--ds-spacing-quickFreeze)',
+                    px: 'var(--ds-spacing-glacial)',
+                    backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+                    borderRadius: 'var(--ds-radius-quickFreeze)'
+                }
+                : undefined
+        };
+        const renderTypographies = () => {
+            const descList = isString ? [description] : description;
+            return descList.map((desc, index) => (_jsx(DsTypography, { variant: 'bodyRegularSmall', align: 'center', color: color, children: desc }, index)));
+        };
+        return (_jsx(DsStack, { ...containerProps, children: renderTypographies() }, 'dropzone-description'));
+    };
+    return [
+        _jsxs(DsBox, { sx: {
+                width: '100%',
+                position: 'relative',
+                borderRadius: 'var(--ds-radius-glacial)',
+                borderWidth: '1px',
+                borderStyle: 'dashed',
+                borderColor: 'var(--ds-colour-strokeDefault)',
+                backgroundColor: disabled
+                    ? 'var(--ds-colour-stateDisabledSurface)'
+                    : 'var(--ds-colour-surfacePrimary)',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                '&:hover': {
+                    borderColor: disabled
+                        ? 'var(--ds-colour-strokeDefault)'
+                        : 'var(--ds-colour-strokeSecondarySelected)',
+                    '.dropzone-content-wrapper': {
+                        backgroundColor: disabled
+                            ? 'var(--ds-colour-stateDisabledSurface)'
+                            : isCompressed
+                                ? 'var(--ds-colour-surfaceSecondary)'
+                                : 'var(--ds-colour-stateSelectedSecondaryHover)'
+                    }
+                }
+            }, children: [_jsxs(DsStack, { className: 'dropzone-content-wrapper', flexDirection: isCompressed ? 'row' : 'column', gap: 'var(--ds-spacing-quickFreeze)', justifyContent: 'center', alignItems: 'center', ...restDsStackProps, sx: {
+                        borderRadius: isCompressed
+                            ? 'var(--ds-radius-quickFreeze)'
+                            : 'var(--ds-radius-glacial)',
+                        m: isCompressed
+                            ? 'var(--ds-spacing-frostbite)'
+                            : 'var(--ds-spacing-zero)',
+                        px: isCompressed
+                            ? 'var(--ds-spacing-glacial)'
+                            : 'var(--ds-spacing-bitterCold)',
+                        pt: isCompressed
+                            ? 'var(--ds-spacing-zero)'
+                            : 'var(--ds-spacing-bitterCold)',
+                        backgroundColor: disabled
+                            ? 'var(--ds-colour-stateDisabledSurface)'
+                            : isCompressed
+                                ? 'var(--ds-colour-surfaceSecondary)'
+                                : 'var(--ds-colour-surfacePrimary)',
+                        '&:hover': {
+                            backgroundColor: isCompressed
+                                ? 'var(--ds-colour-surfaceSecondary)'
+                                : 'var(--ds-colour-stateSelectedSecondaryHover)'
+                        },
+                        ...restDsStackProps?.sx
+                    }, children: [_jsx(DsRemixIcon, { className: isCompressed ? 'ri-upload-line' : 'ri-upload-cloud-2-line', fontSize: isCompressed ? 'frostbite' : 'mild', color: disabled ? 'disabled' : 'secondary', ...IconProps }), _jsx(DsButton, { disabled: disabled, variant: 'text', color: 'secondary', children: title }), !isCompressed && renderDescription()] }), _jsx(DsInput, { type: 'file', slot: 'input', disabled: disabled, sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        height: '100%',
+                        width: '100%',
+                        opacity: 0,
+                        margin: 'var(--ds-spacing-zero) !important'
+                    }, onChange: InputProps?.onChange, onDrop: InputProps?.onDrop, onDragOver: InputProps?.onDragOver, disableUnderline: true, inputProps: {
+                        title,
+                        value: '',
+                        ...InputProps,
+                        accept: InputProps?.accept,
+                        multiple: InputProps?.multiple,
+                        style: {
+                            height: '100%',
+                            width: '100%',
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                            ...InputProps?.style
+                        }
+                    } })] }, 'dropzone-box'),
+        isCompressed && renderDescription()
+    ];
+};

package/dist/Components/DsFileUploader/Slots/DsFileUploaderSelectedFilesSegment.d.ts

@@ -0,0 +1,10 @@
+import { TDsFileUploaderSlotProps } from '../DsFileUploader.Types';
+/**
+ * DsFileUploaderSelectedFilesSegment
+ *
+ * This component is a wrapper to render a labeled section
+ * for displaying selected files in a scrollable container.
+ *
+ * It supports slot-level customization via props and merges them with default values.
+ */
+export declare const DsFileUploaderSelectedFilesSegment: (inProps: TDsFileUploaderSlotProps["SelectedItemSegment"]) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsFileUploader/Slots/DsFileUploaderSelectedFilesSegment.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DsStack } from '../../DsStack';
+import { DsTypography } from '../../DsTypography';
+import { DsFileUploaderDefaultProps } from '../DsFileUploader.Types';
+import { cloneElement, isValidElement } from 'react';
+/**
+ * DsFileUploaderSelectedFilesSegment
+ *
+ * This component is a wrapper to render a labeled section
+ * for displaying selected files in a scrollable container.
+ *
+ * It supports slot-level customization via props and merges them with default values.
+ */
+export const DsFileUploaderSelectedFilesSegment = (inProps) => {
+    const props = {
+        ...DsFileUploaderDefaultProps.slotProps?.SelectedItemSegment,
+        ...inProps
+    };
+    const { label, children } = props;
+    return (_jsxs(DsStack, { spacing: 'var(--ds-spacing-frostbite)', children: [_jsx(DsTypography, { py: 'var(--ds-spacing-glacial)', variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoSecondary)', children: label }), _jsx(DsStack, { spacing: 'var(--ds-spacing-frostbite)', sx: { maxHeight: '440px', overflowY: 'auto' }, children: isValidElement(children) && cloneElement(children, { ...props }) })] }));
+};

package/dist/Components/DsFileUploader/Slots/DsFileUploaderUploadedFilesSegment.d.ts

@@ -0,0 +1,10 @@
+import { TDsFileUploaderSlotProps } from '../DsFileUploader.Types';
+/**
+ * DsFileUploaderSelectedFilesSegment
+ *
+ * This component is a wrapper to render a labeled section
+ * for displaying uploaded files in a scrollable container.
+ *
+ * It supports slot-level customization via props and merges them with default values.
+ */
+export declare const DsFileUploaderUploadedFilesSegment: (inProps: TDsFileUploaderSlotProps["UploadedItemSegment"]) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsFileUploader/Slots/DsFileUploaderUploadedFilesSegment.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DsStack } from '../../DsStack';
+import { DsTypography } from '../../DsTypography';
+import { DsFileUploaderDefaultProps } from '../DsFileUploader.Types';
+import { cloneElement, isValidElement } from 'react';
+/**
+ * DsFileUploaderSelectedFilesSegment
+ *
+ * This component is a wrapper to render a labeled section
+ * for displaying uploaded files in a scrollable container.
+ *
+ * It supports slot-level customization via props and merges them with default values.
+ */
+export const DsFileUploaderUploadedFilesSegment = (inProps) => {
+    const props = {
+        ...DsFileUploaderDefaultProps.slotProps?.UploadedItemSegment,
+        ...inProps
+    };
+    const { label, children } = props;
+    return (_jsxs(DsStack, { spacing: 'var(--ds-spacing-frostbite)', children: [_jsx(DsTypography, { py: 'var(--ds-spacing-glacial)', variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoSecondary)', children: label }), _jsx(DsStack, { spacing: 'var(--ds-spacing-frostbite)', sx: { maxHeight: '440px', overflowY: 'auto' }, children: isValidElement(children) && cloneElement(children, { ...props }) })] }));
+};

package/dist/Components/DsFileUploader/converter.d.ts

@@ -0,0 +1,2 @@
+import type { TContentType, TFile } from './DsFileUploader.Types';
+export declare const fileToFileUploader: (file: File, contentType: TContentType) => Promise<TFile<TContentType>>;

package/dist/Components/DsFileUploader/converter.js

@@ -0,0 +1,25 @@
+export const fileToFileUploader = async (file, contentType) => {
+    const { name, type, size } = file;
+    let content = file;
+    if (contentType === 'BASE64') {
+        content = await fileToBase64(file);
+        if (typeof content === 'string' && content.startsWith('data:')) {
+            content = content.substring(content.indexOf(',') + 1);
+        }
+    }
+    const fileUploader = {
+        name,
+        type,
+        size,
+        content
+    };
+    return fileUploader;
+};
+const fileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = error => reject(error);
+    });
+};

package/dist/Components/DsFileUploader/helpers.d.ts

@@ -0,0 +1,9 @@
+import type { IDsFileUploaderProps, TContentType, TErrorValue, TFile, TMultiple, TFileValue } from './DsFileUploader.Types';
+export declare const mergeProps: <T extends Record<string, any>>(inProps: Partial<T>, defaultProps: T) => T;
+export declare const getFileTypeIcon: <ContentType extends TContentType>(file: TFile<ContentType>) => import("react/jsx-runtime").JSX.Element;
+export declare const humanizeFileSize: (bytes: number, decimals?: number) => string;
+export declare const getDefaultValue: <Multiple extends TMultiple, ContentType extends TContentType>(props: IDsFileUploaderProps<Multiple, ContentType>) => TFileValue<Multiple, ContentType> | null;
+export declare const getValidProcessedFile: <Multiple extends TMultiple, ContentType extends TContentType>(filesToProcess: FileList, files: TFileValue<Multiple, ContentType> | null, accept: string, minSize?: number, maxSize?: number, contentType?: TContentType) => Promise<{
+    valid: TFileValue<Multiple, ContentType>;
+    invalid: TErrorValue<Multiple, ContentType>;
+}>;

package/dist/Components/DsFileUploader/helpers.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DsFileUploaderImagePreview } from './DsFileUploaderPreview/DsFileUploaderImagePreview.Component';
+import { getFileValidator } from './validator';
+import { fileToFileUploader } from './converter';
+import { DsRemixIcon } from '../DsRemixIcon';
+export const mergeProps = (inProps, defaultProps) => {
+    return {
+        ...defaultProps,
+        ...inProps,
+        slots: {
+            ...defaultProps.slots,
+            ...inProps.slots
+        },
+        slotProps: {
+            ...defaultProps.slotProps,
+            ...inProps.slotProps,
+            SelectedItemSegment: {
+                ...defaultProps.slotProps?.SelectedItemSegment,
+                ...inProps.slotProps?.SelectedItemSegment
+            },
+            UploadedItemSegment: {
+                ...defaultProps.slotProps?.UploadedItemSegment,
+                ...inProps.slotProps?.UploadedItemSegment
+            },
+            DropZone: {
+                ...defaultProps?.slotProps?.DropZone,
+                ...inProps.slotProps?.DropZone
+            }
+        }
+    };
+};
+export const getFileTypeIcon = (file) => {
+    const { type: mimeType } = file;
+    const IMAGE_REGEX = new RegExp('^image/.*');
+    const VIDEO_REGEX = new RegExp('^video/.*');
+    if (IMAGE_REGEX.test(mimeType)) {
+        return _jsx(DsFileUploaderImagePreview, { file: file });
+    }
+    else if (VIDEO_REGEX.test(mimeType)) {
+        return _jsx(DsRemixIcon, { className: "ri-video-line" });
+    }
+    else {
+        return _jsx(DsRemixIcon, { className: "ri-file-list-2-line" });
+    }
+};
+export const humanizeFileSize = (bytes, decimals = 2) => {
+    if (!+bytes)
+        return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+export const getDefaultValue = (props) => {
+    const { value, multiple } = props;
+    if (value) {
+        return value;
+    }
+    if (multiple) {
+        return [];
+    }
+    return null;
+};
+export const getValidProcessedFile = async (filesToProcess, files, accept, minSize, maxSize, contentType) => {
+    const validator = getFileValidator(accept, minSize, maxSize);
+    const isMultiple = Array.isArray(files);
+    const validFiles = isMultiple ? [...files] : [];
+    const invalidFiles = [];
+    const fileList = [...filesToProcess];
+    for (const file of fileList) {
+        const fileUploader = await fileToFileUploader(file, contentType || 'FILE');
+        const errorCode = validator(file);
+        if (!errorCode) {
+            validFiles.unshift(fileUploader);
+        }
+        else {
+            const temp = {
+                file: fileUploader,
+                errorCode
+            };
+            invalidFiles.push(temp);
+        }
+    }
+    const valid = isMultiple ? validFiles : validFiles[0];
+    const invalid = (isMultiple ? invalidFiles : invalidFiles[0]);
+    return { valid, invalid };
+};

package/dist/Components/DsFileUploader/validator.d.ts

@@ -0,0 +1,2 @@
+import { type TErrorCodes } from './DsFileUploader.Types';
+export declare const getFileValidator: (accept: string, minSize?: number | undefined, maxSize?: number | undefined) => (file: File) => TErrorCodes | undefined;

package/dist/Components/DsFileUploader/validator.js

@@ -0,0 +1,37 @@
+import { ERROR_CODES } from './DsFileUploader.Types';
+export const getFileValidator = (accept, minSize = 0, maxSize = Infinity) => {
+    const validateFileType = getFileTypeValidator(accept);
+    return (file) => {
+        const { size, type } = file;
+        if (!validateMinSize(size, minSize)) {
+            return ERROR_CODES.FILE_SIZE_BELOW_MIN;
+        }
+        if (!validateMaxSize(size, maxSize)) {
+            return ERROR_CODES.MAX_FILE_SIZE_EXCEEDED;
+        }
+        if (!validateFileType(type)) {
+            return ERROR_CODES.INVALID_FILE_TYPE;
+        }
+    };
+};
+const validateMinSize = (size, minSize = 0) => {
+    return size >= minSize;
+};
+const validateMaxSize = (size, maxSize = Infinity) => {
+    return size <= maxSize;
+};
+const getFileTypeValidator = (accept) => {
+    // Escape dots and replace wildcards with .* for regex
+    const typesPattern = accept
+        .split(',')
+        .map(type => type.trim())
+        .map(type => type.replace(/\./g, '\\.').replace(/\*/g, '.*'))
+        .join('|');
+    // Create a regex with start and end anchors
+    const typesRegex = new RegExp(`^(${typesPattern})$`);
+    // Validator function
+    const validateFileType = (mimeType) => {
+        return typesRegex.test(mimeType);
+    };
+    return validateFileType;
+};

package/dist/Theme/componentOverrides.d.ts

@@ -1030,6 +1030,9 @@ declare const componentOverrides: {
             };
         };
     };
+    DsFileUploader: {
+        defaultProps: import("../Components").IDsFileUploaderProps<import("../Components").TMultiple, "FILE">;
+    };
     MuiFab: {
         defaultProps: import("../Components").DsFabProps;
         styleOverrides: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "2.9.12",
+  "version": "2.10.1",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",