@appquality/unguess-design-system 3.1.106-attachments → 3.1.107-attachments

package/build/index.js

@@ -2339,7 +2339,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
         setThumbnails,
         afterUploadCallback: (failed) => {
             setThumbnails(thumbnails.map((file) => {
-                if (failed.includes(file.name)) {
+                if (failed.includes(file.id)) {
                     file.isLoadingMedia = false;
                     //file.isError = true;
                 }
@@ -2359,7 +2359,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
                     setThumbnails((prev) => {
                         return prev.map((file) => {
                             file.isLoadingMedia = false;
-                            if ((failed === null || failed === void 0 ? void 0 : failed.length) && failed.includes(file.name)) {
+                            if ((failed === null || failed === void 0 ? void 0 : failed.length) && failed.includes(file.id)) {
                                 file.isError = true;
                             }
                             else {
@@ -3056,8 +3056,9 @@ function useMedia() {
     function getMedia(data) {
         return getValidMedia(data).map((file) => {
             return Object.assign(file, {
+                url: URL.createObjectURL(file),
                 isLoadingMedia: true,
-                internal_id: uuid.v4(),
+                id: uuid.v4(),
             });
         });
     }
@@ -3517,8 +3518,8 @@ const ThumbnailContainer = ({ openLightbox }) => {
         return thumbnails.map((file) => ({
             fileName: file.name,
             fileType: file.type,
-            previewUrl: URL.createObjectURL(file),
-            internal_id: file.internal_id,
+            previewUrl: file.url,
+            id: file.id,
             isLoadingMedia: file.isLoadingMedia,
         }));
     }, [thumbnails]);
@@ -3527,10 +3528,10 @@ const ThumbnailContainer = ({ openLightbox }) => {
     }
     return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, showX: true, type: file.fileType, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
                         removeThumbnail(index);
-                        onDeleteThumbnail(file.internal_id);
+                        onDeleteThumbnail(file.id);
                     }, clickThumbnail: () => {
-                        openLightbox(thumbnails[index], index);
-                    } }, file.internal_id) })))) })) }));
+                        openLightbox(index);
+                    } }, file.id) })))) })) }));
 };
 
 const UgModalBody = styled__default["default"](reactModals.Body) `
@@ -4719,9 +4720,9 @@ const MediaLightBox = ({ header, onClose, slideChange, selectedImageIndex, thumb
     if (!isOpen) {
         return null;
     }
-    return (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: onClose }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: header }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: details ? 2 : 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: thumbnails.map((item) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: item.url || URL.createObjectURL(item), alt: `media ${item.name}`, style: { maxHeight: "100%", height: "auto" } })), item.type.includes("video") && (jsxRuntime.jsx(Player, { ref: (ref) => {
+    return (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: onClose }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: header }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: details ? 2 : 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: thumbnails.map((item) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: item.url, alt: `media ${item.name}`, style: { maxHeight: "100%", height: "auto" } })), item.type.includes("video") && item.url && (jsxRuntime.jsx(Player, { ref: (ref) => {
                                             videoRefs.current.push(ref);
-                                        }, url: item.url || URL.createObjectURL(item) }))] }, item.internal_id))) })) })), details && (jsxRuntime.jsx(Lightbox.Body.Details, Object.assign({ style: { flex: 1 } }, { children: details })))] }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] })));
+                                        }, url: item.url }))] }, item.id))) })) })), details && (jsxRuntime.jsx(Lightbox.Body.Details, Object.assign({ style: { flex: 1 } }, { children: details })))] }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] })));
 };
 
 const ChatBoxContainer = styled__default["default"].div `
@@ -4768,9 +4769,7 @@ const CommentBox = (_a) => {
             }
         });
     }, [videoRefs]);
-    const handleOpenLightbox = (file, index) => {
-        if (!file)
-            throw Error("Error with the image");
+    const handleOpenLightbox = (index) => {
         setSelectedImageIndex(index);
         setIsOpen(true);
     };
@@ -4848,9 +4847,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedImageIndex, setSelectedImageIndex] = React.useState(0);
     const ext = editorExtensions({ mentionableUsers });
-    const handleClickThumbnail = (file, index) => {
-        if (!file)
-            throw Error("Error with the image");
+    const handleClickThumbnail = (index) => {
         setSelectedImageIndex(index);
         setIsOpen(true);
     };
@@ -4875,8 +4872,8 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     ed.setOptions({
         editable: false,
     });
-    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", " ", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.url || URL.createObjectURL(file), type: file.type, showX: false, isLoadingMedia: false, clickThumbnail: () => {
-                                handleClickThumbnail(file, index);
+    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", " ", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.url, type: file.type, showX: false, isLoadingMedia: false, clickThumbnail: () => {
+                                handleClickThumbnail(index);
                             } }) }), index))) })) }), jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })), onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: media, videoRefs: videoRefs, details: jsxRuntime.jsx(Comment, Object.assign({ header: header, author: {
                         avatar: author.avatar,
                         name: author.name,

package/build/stories/chat/_types.d.ts

@@ -37,10 +37,12 @@ export interface EditorHeaderArgs {
     title?: string;
     validation?: validationStatus;
 }
-export interface FileItem extends File {
-    isLoadingMedia: boolean;
+export interface CommentMedia {
+    id: string;
+    type: string;
+    name?: string;
+    isLoadingMedia?: boolean;
     isError?: boolean;
-    internal_id: string;
     url?: string;
 }
 export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {

package/build/stories/chat/context/chatContext.d.ts

@@ -1,15 +1,15 @@
 import { Editor } from "@tiptap/react";
 import React from "react";
-import { FileItem, SuggestedUser } from "../_types";
+import { CommentMedia, SuggestedUser } from "../_types";
 export type ChatContextType = {
     triggerSave: () => void;
     editor?: Editor;
     setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
     addThumbnails: (props: {
-        files: FileItem[];
+        files: CommentMedia[];
     }) => void;
     removeThumbnail: (index: number) => void;
-    thumbnails: FileItem[];
+    thumbnails: CommentMedia[];
     mentionableUsers: (props: {
         query: string;
     }) => SuggestedUser[];
@@ -29,7 +29,7 @@ export interface Data {
 }
 export declare const ChatContextProvider: ({ onSave, onFileUpload, onDeleteThumbnail, setMentionableUsers, children, }: {
     onSave?: ((editor: Editor, mentions: SuggestedUser[]) => void) | undefined;
-    onFileUpload?: ((files: FileItem[]) => Promise<Data>) | undefined;
+    onFileUpload?: ((files: CommentMedia[]) => Promise<Data>) | undefined;
     onDeleteThumbnail: (id: string) => void;
     children: React.ReactNode;
     setMentionableUsers: (props: {

package/build/stories/chat/hooks/useMedia.d.ts

@@ -1,5 +1,5 @@
-import { FileItem } from "../_types";
+import { CommentMedia } from "../_types";
 export declare const acceptedMediaTypes: RegExp;
 export declare function useMedia(): {
-    getMedia: (data: FileList) => FileItem[];
+    getMedia: (data: FileList) => CommentMedia[];
 };

package/build/stories/chat/index.stories.d.ts

@@ -1,6 +1,6 @@
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { Editor as TipTapEditor } from "@tiptap/react";
-import { ChatEditorArgs, FileItem, SuggestedUser } from "./_types";
+import { ChatEditorArgs, CommentMedia, SuggestedUser } from "./_types";
 import { Data } from "./context/chatContext";
 interface EditorStoryArgs extends ChatEditorArgs {
     children?: any;
@@ -12,12 +12,12 @@ interface EditorStoryArgs extends ChatEditorArgs {
         };
         message: string;
         date: string;
-        media?: FileItem[];
+        media?: CommentMedia[];
     }[];
     editorText?: string;
     background?: string;
     onSave: (editor: TipTapEditor, mentions: SuggestedUser[]) => void;
-    onFileUpload?: (files: FileItem[]) => Promise<Data>;
+    onFileUpload?: (files: CommentMedia[]) => Promise<Data>;
     placeholderOptions?: Partial<PlaceholderOptions>;
 }
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, EditorStoryArgs>;

package/build/stories/chat/parts/MediaLightbox.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { FileItem } from "../_types";
+import { CommentMedia } from "../_types";
 interface MediaLightBoxProps {
     isOpen: boolean;
     header: React.ReactNode;
     onClose: () => void;
     slideChange: (index: number) => void;
     selectedImageIndex: number;
-    thumbnails: FileItem[];
+    thumbnails: CommentMedia[];
     videoRefs: React.MutableRefObject<Array<HTMLVideoElement | null>>;
     details?: React.ReactNode;
 }

package/build/stories/chat/parts/ThumbnailContainer/Thumbnail.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    src: string;
+    src?: string;
     type: string;
     clickThumbnail?: () => void;
     isLoadingMedia?: boolean;

package/build/stories/chat/parts/ThumbnailContainer/index.d.ts

@@ -7,7 +7,7 @@ export interface FileElement {
     isLoadingMedia: boolean;
 }
 interface Props {
-    openLightbox: (file: File, index: number) => void;
+    openLightbox: (index: number) => void;
 }
 declare const ThumbnailContainer: ({ openLightbox }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default ThumbnailContainer;

package/build/stories/chat/parts/comment.d.ts

@@ -1,10 +1,10 @@
 import { PropsWithChildren } from "react";
-import { Author, FileItem } from "../_types";
+import { Author, CommentMedia } from "../_types";
 export declare const Comment: ({ author, message, children, date, media, header, }: PropsWithChildren<{
     author: Author;
     message: string;
     date: string;
-    media?: FileItem[] | undefined;
+    media?: CommentMedia[] | undefined;
     header: {
         title: string;
         message?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.106-attachments",
+  "version": "3.1.107-attachments",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",