@integry/sdk 4.7.39 → 4.7.40

package/src/components/Loader/styles.module.scss

@@ -1,16 +0,0 @@
-.loader {
-  animation-name: ckw;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  transform-origin: 50% 50%;
-}
-
-@keyframes ckw {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/src/components/MediaGallery/MediaGalleryModal.ts

@@ -1,82 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-use-before-define */
-import { html } from 'htm/preact';
-import { useState } from 'preact/hooks';
-import { MediaObject } from '@/interfaces';
-import { Modal } from '../Modal';
-import styles from './styles.module.scss';
-
-
-interface MediaGalleryModalProps {
-    media: MediaObject[];
-    showGallery?: boolean;
-    onClose: () => void;
-    defaultActiveIndex?: number;
-}
-
-const MediaGalleryModal = (props: MediaGalleryModalProps) => {
-    const {
-        media,
-        showGallery = false,
-        onClose,
-        defaultActiveIndex = 0,
-    } = props;
-    const [activeMediaIndex, setActiveMediaIndex] = useState(defaultActiveIndex);
-
-    const currentMedia = media[activeMediaIndex];
- 
-    const handleCloseGallery = (): void => {
-        if (onClose) {
-            onClose();
-        }
-    }
-
-    const prevMedia = (): void => {
-        setActiveMediaIndex((prevIndex) => {
-            if (prevIndex === 0) {
-                return media.length - 1;
-            }
-            return prevIndex - 1;
-        })
-    }
-
-    const nextMedia = (): void => {
-        setActiveMediaIndex((prevIndex) => {
-            if (prevIndex === media.length - 1) {
-                return 0;
-            }
-            return prevIndex + 1;
-        })
-    }
-
-    return html`
-        <${Modal}
-            isOpen=${showGallery}
-            onClose=${handleCloseGallery}
-            className="media-gallery-modal"
-        >
-            <div class="${styles.modalSetup} ${'integry-container__media-gallery-modal'}">
-            <div class="${styles.modalContentWrap}">
-                <div class="${styles.mediaGalleryModal}"> 
-                    <div class="${styles.galleryContent}">
-                        <a class="${styles.prev}" onclick=${prevMedia}>
-                        <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M5.78906 11.5176L0.789062 6.51758L5.78906 1.51758" stroke="#4250F0" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                        </a>                     
-                            <img src=${currentMedia.url} class="${styles.mediaImage}" />
-                        <a class="${styles.next}" onclick=${nextMedia}>
-                            <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M1.0293 1.51758L6.0293 6.51758L1.0293 11.5176" stroke="#4250F0" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-                            </svg>
-                        </a>
-                    </div>
-                    <div class="${styles.mediaCount}">${activeMediaIndex + 1} / ${media.length}</div>
-                </div>
-            </div>
-            </div>
-        <//>
-  `;
-};
-
-export default MediaGalleryModal;

package/src/components/MediaGallery/MediaSlider.ts

@@ -1,76 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-use-before-define */
-import { html } from 'htm/preact';
-import { useRef, useState } from 'preact/hooks';
-import { MediaObject } from '@/interfaces';
-import styles from './styles.module.scss';
-
-
-interface MediaSliderProps {
-    media: MediaObject[];
-}
-
-const MediaSlider = (props: MediaSliderProps) => {
-    const {
-        media,
-    } = props;
-    const [activeMediaIndex, setActiveMediaIndex] = useState(0);
-    const shuffledMediaRef = useRef(media);
-
-    shuffledMediaRef.current = media.slice(activeMediaIndex, activeMediaIndex + 2);
-
-    const prevMedia = (): void => {
-        if (activeMediaIndex > 0) {
-            setActiveMediaIndex((prevIndex) => {
-                if (prevIndex === 0) {
-                    return media.length - 1;
-                }
-                return prevIndex - 1;
-            })
-        }
-    }
-
-    const nextMedia = (): void => {
-        if (activeMediaIndex < media.length - 1) {
-            setActiveMediaIndex((prevIndex) => {
-                if (prevIndex === media.length - 1) {
-                    return 0;
-                }
-                return prevIndex + 1;
-            })
-        }
-    }
-
-    return html`
-    <div class="${styles.mediaSliderGallery}">
-        <a class="${`${styles.prev}`}" onclick=${prevMedia}>
-            <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.78906 11.5176L0.789062 6.51758L5.78906 1.51758" stroke="${activeMediaIndex < 1 ? '#BDBDBD' : '#4250F0'}" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-        </a>                     
-            ${shuffledMediaRef.current && shuffledMediaRef.current.length > 0 && html `
-            <div class="${styles.mediaDisplayWrap}">
-                ${shuffledMediaRef.current.map((mediaItem, index) => {
-                    const { url } = mediaItem;
-                    return (
-                        html`
-                            <img
-                            key=${`m_${mediaItem.id}`}
-                            src=${url} 
-                            class="${styles.mediaImage}" 
-                            />
-                        
-                        `
-                    )
-                })}
-            </div>`}
-        <a class="${`${styles.next}`}" onclick=${nextMedia}>
-            <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1.0293 1.51758L6.0293 6.51758L1.0293 11.5176" stroke="${activeMediaIndex >= media.length - 1 ? '#BDBDBD' : '#4250F0'}" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-        </a>
-    </div>
-  `;
-};
-
-export default MediaSlider;

package/src/components/MediaGallery/index.ts

@@ -1,92 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-use-before-define */
-import { html } from 'htm/preact';
-import { useRef, useState } from 'preact/hooks';
-import { MediaObject, MediaType } from '@/interfaces';
-import MediaGalleryModal from './MediaGalleryModal';
-import MediaSlider from './MediaSlider';
-import styles from './styles.module.scss';
-
-
-interface MediaGalleryProps {
-    media: MediaObject[];
-}
-
-const MediaGallery = (props: MediaGalleryProps) => {
-  const {
-      media,
-    } = props;
-    const [openGallery, setOpenGallery] = useState(false);
-    const activeMediaIndexRef = useRef(0);
-
-    const handleMediaClick = (mediaIndex: number): void => {
-        activeMediaIndexRef.current = mediaIndex;
-        setOpenGallery(true);
-    }
- 
-    return html`
-        <div class="${styles.mediaGallery}"> 
-            ${media.length >= 1 && html`
-                <img onclick=${() => {
-                    handleMediaClick(0);
-                }} 
-                src=${media[0].url} 
-                class="${styles.mediaImage}" />
-            `}
-            ${media.length > 1 && html `
-            <div class="${styles.layout2}">
-                ${media.map((mediaItem, index) => {
-                if (index > 0 && index <=2 ) {
-                    const { url, type } = mediaItem;
-                    if (type === MediaType.IMAGE) {
-                        return (
-                            html`${
-                                media.length > 3 && index === 2 ? html`
-                                <div class="${styles.mediaImageWrap}" onclick=${
-                                        () => {
-                                            handleMediaClick(index);
-                                        }
-                                    } >
-                                    <img src=${url} 
-                                    class="${styles.mediaImage}" 
-                                    />
-                                    <span class="${styles.moreImages}">+ ${media.length - 3} more</span>
-                                </div>
-                             ` : html`
-                                <img onclick=${
-                                () => {
-                                        handleMediaClick(index);
-                                    }
-                                    } 
-                                src=${url} 
-                                class="${styles.mediaImage}" />
-                             `   
-                            }
-                            `
-                        )
-                    }
-                    return (
-                        html`
-                        `
-                    )
-                }
-                return html``
-                })}
-            </div>`}
-            <div class="${styles.mediaSlider}">
-                <${MediaSlider} media=${media} />     
-            </div>
-        </div>
-        ${openGallery && html `
-        <${MediaGalleryModal} 
-            media=${media} 
-            showGallery=${openGallery} 
-            onClose=${() => {
-                setOpenGallery(false);
-            }} 
-            defaultActiveIndex=${activeMediaIndexRef.current}
-        /> `}
-  `;
-};
-
-export default MediaGallery;

package/src/components/MediaGallery/styles.module.scss

@@ -1,156 +0,0 @@
-.mediaGallery {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 16px;
-    .mediaImage {
-        width: 288px;
-        height: 162px;
-        border-radius: 6px;
-        object-fit: cover;
-        cursor: pointer;
-    }
-    .layout2 {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        gap: 16px;
-        .mediaImage {
-            width: 121px;
-            height: 73px;
-            border-radius: 6px;
-        }
-        .mediaImageWrap {
-            width: min-content;
-            position: relative;
-            opacity: 0.7;
-            cursor: pointer;
-            .moreImages {
-                background: #FFFFFF;
-                border-radius: 8px;
-                padding: 5px 12px;
-                font-style: normal;
-                font-weight: 500;
-                font-size: 12px;
-                line-height: 15px;
-                color: #333333;
-                position: absolute;
-                left: 23px;
-                bottom: 14px;
-                cursor: pointer;
-            }
-        }
-    }
-    .mediaSlider {
-        display: none;
-        max-width: 400px;
-    }
-    @media (min-width: 320px ) and (max-width: 856px)  {
-        .layout2 {
-            display: none;
-        }
-        .mediaImage {
-            display: none;
-        }
-        .mediaSlider {
-            display: block;
-        }
-    }
-    @media (min-width: 857px) {
-        .mediaSlider {
-            display: none;
-        }
-        .mediaImage {
-            display: block;
-        }
-    }
-}
-
-.mediaGalleryModal {
-    .galleryContent {
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-        .prev {
-            cursor: pointer;
-            svg {
-                width: 20px;
-                height: 20px;
-            }
-        }
-        .next {
-            cursor: pointer;
-            svg {
-                width: 20px;
-                height: 20px;
-            }
-        }
-    }
-    .mediaCount {
-        font-family: inherit;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 15px;
-        color: #333333;
-        margin-top: 16px;
-        display: flex;
-        justify-content: center;
-    }
-    .mediaImage {
-        height: calc(100vh - 300px);
-        object-fit: contain;
-        width: 522px;
-        margin-top: 34px;
-        @media (min-width: 640px) {
-          width: 200px;
-        }
-        @media (min-width: 857px) {
-          width: 422px;
-          max-width: 422px;
-        }
-        @media (min-width: 1237px) {
-          width: 522px;
-          max-width: 522px;
-        }
-        @media (min-height: 1152px) {
-          max-height: 600px;
-          height: 600px;
-        }
-    }
-}
-
-.mediaSliderGallery {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 8px;
-    .mediaDisplayWrap {
-        display: flex;
-        gap: 24px;
-        overflow: hidden;
-    }
-    .prev {
-        cursor: pointer;
-        svg {
-            width: 20px;
-            height: 20px;
-        }
-    }
-    .next {
-        cursor: pointer;
-        svg {
-            width: 20px;
-            height: 20px;
-        }
-    }
-    .mediaImage {
-        width: 288px;
-        height: 162px;
-        border-radius: 6px;
-        object-fit: cover;
-        cursor: default;
-        display: block;
-    }
-}

package/src/components/MediaUpload/index.ts

@@ -1,233 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-use-before-define */
-import { MediaObject, MediaType, UploadFileObj } from '@/interfaces';
-import { html } from 'htm/preact';
-import { useContext, useState, useRef, useEffect } from 'preact/hooks';
-import AppContext from '@/contexts/AppContext';
-import { Loader } from '../Loader';
-import { Input } from '../Input';
-import styles from './styles.module.scss';
-
-
-interface MediaUplaodProps {
-    media: MediaObject[];
-    allowedUploadMediaType?: string;
-    allowedMediaLabel?: string;
-    singleUpload?: boolean;
-    allowUploadViaURL?: boolean;
-    handleUploadMedia: (files: UploadFileObj[]) => void;
-}
-
-const MediaUplaod = (props: MediaUplaodProps) => {
-  const {
-      media,
-      allowedUploadMediaType = 'image/png,image/jpg,image/jpeg',
-      allowedMediaLabel = 'Supports: JPG, JPEG, PNG',
-      singleUpload = false,
-      allowUploadViaURL = false,
-      handleUploadMedia,
-    } = props;
-    const context = useContext(AppContext);
-    const [uploadFiles, setUploadFiles] = useState<UploadFileObj[]>(media);
-    const fileInpuRef = useRef<HTMLInputElement>();
-    const newFiletoUploadRef = useRef(false);
-
-      useEffect(() => {
-        if (uploadFiles.length > 0) {
-            if (newFiletoUploadRef.current === true) {
-                const anyFileUploading = uploadFiles.findIndex((fileObj) => fileObj.uploading === true);
-                if (anyFileUploading === -1) {
-                handleUploadMedia(uploadFiles);
-                newFiletoUploadRef.current = false;
-                }
-            } else {
-                handleUploadMedia(uploadFiles);
-            }
-        } else {
-            handleUploadMedia([]);
-        }
-    }, [uploadFiles]);
-
-    const triggerFileSelection = (): void => {
-        if (fileInpuRef.current) {
-        fileInpuRef.current.click();
-        }
-    };
-
-     const getFileType = (fileType: string): MediaType | null => {
-        if (fileType.split('/')[0] === 'image') {
-        return MediaType.IMAGE;
-        }
-        if (fileType.split('/')[0] === 'video') {
-        return MediaType.VIDEO;
-        }
-        return null;
-    };
-
-    const removeFile = (fileObj: UploadFileObj): void => {
-        const updatedUploadedFiles = uploadFiles.filter((tempFile) => {
-            if (fileObj.index) {
-                return tempFile.index !== fileObj.index
-            } if (fileObj.id) {
-                return tempFile.id !== fileObj.id
-            }
-            return true;
-        });
-        setUploadFiles([...updatedUploadedFiles]);
-    };
-
-    const setFileUploadingStatus = (
-        fileIndex: number,
-        uploading: boolean,
-        url: string
-    ): void => {
-        setUploadFiles((prev) => {
-        const updatedUploadedFiles = prev.map((fileObj) =>
-            fileObj.index === fileIndex
-            ? { ...fileObj, uploading, url: url || fileObj.url }
-            : fileObj
-        );
-        return [...updatedUploadedFiles];
-        });
-    };
-
-    const sendFileUploadRequest = (fileObj: UploadFileObj): void => {
-        if (fileObj.file) {
-            const requestData = new FormData();
-            requestData.set('file', fileObj.file);
-            context?.apiHandler
-            .uploadFile(requestData)
-            .then((data) => {
-                if (data) {
-                    if (fileObj.index) {
-                        setFileUploadingStatus(fileObj.index, false, data.file_path);
-                    }
-                } else {
-                    console.error(`Failed to upload media`);
-                }
-            })
-        }
-    };
-
-    const validateAndUploadFile = (fileObj: UploadFileObj): void => {
-    const allowedUploadMediaTypeArray = allowedUploadMediaType.split(',');
-    if (allowedUploadMediaTypeArray.includes(fileObj.file.type)) {
-      if (fileObj.file.type.includes('image')) {
-        const { url } = fileObj;
-        const image = new Image();
-        image.onload = () => {
-          newFiletoUploadRef.current = true;
-          if (singleUpload) {
-            setUploadFiles([fileObj]);
-          } else {
-            setUploadFiles((prev) => [...prev, fileObj]);
-          }
-          sendFileUploadRequest(fileObj);
-        };
-        image.src = url;
-      } else {
-        // handle other media types
-      }
-    } else {
-        // display error toast
-    }
-  };
-
-    const handleFileSelection = (e: InputEvent): void => {
-        if (e.currentTarget instanceof HTMLInputElement) {
-            const selectedFilesRaw = Array.from(e.currentTarget.files || []);
-            processSelectedFiles(selectedFilesRaw);
-            if (fileInpuRef.current) {
-                fileInpuRef.current.value = '';
-            }
-        }
-    };
-
-    const processSelectedFiles = (selectedFilesRaw: File[]): void => {
-        selectedFilesRaw?.forEach((file, index) => {
-            const fileObj = {
-                index: Math.floor(Math.random() * 100 + 1) + index,
-                file,
-                url: URL.createObjectURL(file),
-                type: getFileType(file.type),
-                uploading: true,
-            } as UploadFileObj;
-            validateAndUploadFile(fileObj);
-        });
-    }
-
-    const handleRemoveMedia = (mediaItem: UploadFileObj): void => {
-        removeFile(mediaItem);
-    };
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const dropHandler = (ev: any): void => {
-        // Prevent default behavior (Prevent file from being opened)
-        ev.preventDefault();
-        // Use DataTransfer interface to access the file(s)
-        const selectedFilesRaw = [...ev.dataTransfer.files];
-        processSelectedFiles(selectedFilesRaw);
-    };
- 
-    const dragOverHandler = (ev: any) => {
-        // Prevent default behavior (Prevent file from being opened)
-        ev.preventDefault();
-    }
-
-    return html`
-        <div class="${styles.mediaUploadWrap}"> 
-          <div class="${styles.mediaUploader}">
-            <div class="${styles.dropMedia}" ondrop=${dropHandler} ondragover=${dragOverHandler}>
-                <input
-                class="${styles.hiddenFileInput}"
-                type="file"
-                ref=${fileInpuRef}
-                multiple
-                accept=${allowedUploadMediaType}
-                onChange=${handleFileSelection}
-                />
-                <img class="${styles.dropIcon}" />
-                <div class="${styles.dropText}">
-                    Drop your images here
-                    or <span class="${styles.link}" onclick=${triggerFileSelection}>browse</span>
-                    <p class=${styles.allowedMediaLabel}>${allowedMediaLabel}</p>
-                </div>
-            </div>
-            ${allowUploadViaURL && html`
-                <div class="${styles.urlField}">
-                    <${Input} value="" 
-                    className="media-url-field" 
-                    placeholder="Or paste a URL here" />
-                </div>
-            `}
-          </div>
-          ${uploadFiles.length > 0 && html`
-            <div class="${styles.mediaListing}">
-                ${uploadFiles.map((mediaItem, index) => {
-                    const { url, type, uploading = false } = mediaItem;
-                    if (type === MediaType.IMAGE) {
-                        return html`
-                        <div class="${styles.mediaPreview}" key=${`media_${mediaItem.id}_${index}}`}>
-                            ${uploading && html `<span class="${styles.uploadingImg}"><${Loader} fill="#4250F0" /></span>`}
-                            <span class="${styles.backgroundOverlay} ${uploading ? styles.uploading : ''} " />
-                            ${!uploading && html` 
-                            <span class="${styles.delMediaSpan}" onclick=${() => { handleRemoveMedia(mediaItem) }}>
-                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M1 4H14" stroke="#F05C42" stroke-width="1.4"/>
-                                <path d="M11.4829 5.5V6.16667L10.8162 13.5H4.14958L3.48291 6.16667V5.5" stroke="#F05C42" stroke-width="1.4" stroke-linejoin="round"/>
-                                <path d="M5.48291 3.5V2.16667C5.48291 1.79848 5.78139 1.5 6.14958 1.5H8.81624C9.18443 1.5 9.48291 1.79848 9.48291 2.16667V3.5" stroke="#F05C42" stroke-width="1.4"/>
-                                </svg>
-                                Delete
-                            </span>`}
-                            <img src=${url} alt="media-img" class="${styles.mediaImg}" />
-                        </div>
-                    `}
-                    return html``;
-                })}
-            </div>
-          `}
-        </div>
-  `;
-};
-
-export default MediaUplaod;