@weavy/uikit-react 12.1.0 → 14.0.0

package/dist/esm/types/client/WeavyClient.d.ts

@@ -1,16 +1,23 @@
 export default class WeavyClient {
     url: string;
-    tokenFactory: () => string | Promise<string>;
     connection: import("@microsoft/signalr").HubConnection;
+    tokenFactory: (refresh: boolean) => Promise<string>;
     groups: string[];
     connectionEvents: any[];
     isConnectionStarted: any;
+    token: string;
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE: string;
     EVENT_CLOSE: string;
     EVENT_RECONNECTING: string;
     EVENT_RECONNECTED: string;
     constructor(options: WeavyClientOptions);
+    get(url: string, retry?: boolean): Promise<Response>;
+    post(url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean): Promise<Response>;
+    getToken(refresh: boolean): Promise<string>;
+    tokenFactoryInternal(refresh?: boolean, fromSR?: boolean): Promise<string>;
     subscribe(group: string, event: string, callback: any): Promise<void>;
     unsubscribe(group: string, event: string, callback: any): Promise<void>;
+    destroy(): void;
     triggerHandler(name: string, ...data: any): void;
 }

package/dist/esm/types/components/Attachment.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     kind: string;
     size: number;
     provider: string;
+    onClick?: (e: any) => void;
 };
-declare const Attachment: ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider }: Props) => JSX.Element;
+declare const Attachment: ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider, onClick }: Props) => JSX.Element;
 export default Attachment;

package/dist/esm/types/components/Chat.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ChatProps } from '../types/Chat';
-declare const Chat: ({ id }: ChatProps) => JSX.Element;
+declare const Chat: ({ uid, className }: ChatProps) => JSX.Element;
 export default Chat;

package/dist/esm/types/components/Messages.d.ts

@@ -4,6 +4,8 @@ declare type Props = {
     members: MembersResult | undefined;
     displayName?: string;
     avatarUrl?: string;
+    lastMessageId: number | null;
+    chatRoom: boolean;
 };
-declare const Messages: ({ id, members, displayName, avatarUrl }: Props) => JSX.Element;
+declare const Messages: ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom }: Props) => JSX.Element;
 export default Messages;

package/dist/esm/types/components/PdfViewer.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 declare type Props = {
     src: string;
+    pdfCMapsUrl: string;
+    pdfWorkerUrl: string;
 };
-declare const PdfViewer: ({ src }: Props) => JSX.Element;
+declare const PdfViewer: ({ src, pdfCMapsUrl, pdfWorkerUrl }: Props) => JSX.Element;
 export default PdfViewer;

package/dist/esm/types/components/Preview.d.ts

@@ -7,20 +7,16 @@ declare type ImageProps = {
 export declare const PreviewImage: ({ src, width, height }: ImageProps) => JSX.Element;
 declare type DocumentProps = {
     src: string;
+    client: any;
 };
-export declare const PreviewDocument: ({ src }: DocumentProps) => JSX.Element;
-declare type VideoProps = {
+export declare const PreviewDocument: ({ src, client }: DocumentProps) => JSX.Element;
+declare type MediaProps = {
+    format: string;
     src: string;
     name: string;
     mediaType?: string;
 };
-export declare const PreviewVideo: ({ src, name, mediaType }: VideoProps) => JSX.Element;
-declare type AudioProps = {
-    src: string;
-    name: string;
-    mediaType?: string;
-};
-export declare const PreviewAudio: ({ src, name, mediaType }: AudioProps) => JSX.Element;
+export declare const PreviewMedia: ({ format, src, name, mediaType }: MediaProps) => JSX.Element;
 declare type TextProps = {
     src: string;
     html?: boolean;
@@ -45,7 +41,9 @@ declare type IconProps = {
 };
 export declare const PreviewIcon: ({ children, src, icon, name, provider, download, className }: IconProps) => JSX.Element;
 declare type PreviewProps = {
+    client: any;
     src: string;
+    link?: string;
     format: PreviewFormatType;
     name: string;
     icon: string;
@@ -54,5 +52,5 @@ declare type PreviewProps = {
     mediaType?: string;
     provider?: string;
 };
-export declare const Preview: ({ src, format, name, icon, width, height, mediaType, provider }: PreviewProps) => JSX.Element;
+export declare const Preview: ({ client, src, link, format, name, icon, width, height, mediaType, provider }: PreviewProps) => JSX.Element;
 export default Preview;

package/dist/esm/types/contexts/PreviewContext.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 export declare const PreviewContext: React.Context<PreviewContextProps>;
 declare type Props = {
+    client: any;
     children: React.ReactNode;
 };
-declare const PreviewProvider: ({ children }: Props) => JSX.Element;
+declare const PreviewProvider: ({ client, children }: Props) => JSX.Element;
 export default PreviewProvider;

package/dist/esm/types/contexts/WeavyContext.d.ts

@@ -1,10 +1,9 @@
 import React from "react";
-import WeavyClient from "../client/WeavyClient";
 export declare const WeavyContext: React.Context<WeavyContextProps>;
-declare type Props = {
+declare type WeavyProviderProperties = {
     children: React.ReactNode;
     client: WeavyClient;
     options?: WeavyContextOptions;
 };
-declare const WeavyProvider: ({ children, client, options }: Props) => JSX.Element;
+declare const WeavyProvider: ({ children, client, options }: WeavyProviderProperties) => JSX.Element;
 export default WeavyProvider;

package/dist/esm/types/hooks/useConversations.d.ts

@@ -1 +1 @@
-export default function useConversations(): import("react-query").UseQueryResult<ConversationsResult, unknown>;
+export default function useConversations(options: any): import("react-query").UseInfiniteQueryResult<ConversationsResult, unknown>;

package/dist/esm/types/hooks/useMutateMessage.d.ts

@@ -1,4 +1,4 @@
-export default function useMutateMessage(): import("react-query").UseMutationResult<any, unknown, {
+export default function useMutateMessage(): import("react-query").UseMutationResult<MessageType, unknown, {
     id: number | null;
     text: string;
     userId: number;

package/dist/esm/types/hooks/useMutateRead.d.ts

@@ -1,4 +1,5 @@
 export default function useMutateRead(): import("react-query").UseMutationResult<any, unknown, {
     id: number | null;
     read: boolean;
+    messageId: number | null;
 }, unknown>;

package/dist/esm/types/types/Chat.d.ts

@@ -1,3 +1,4 @@
 export interface ChatProps {
-    id: string;
+    uid: string;
+    className?: string;
 }

package/dist/esm/types/types/Message.d.ts

@@ -6,10 +6,12 @@ export interface MessageProps {
     avatar?: string;
     name: string;
     created_at: string;
+    created_by: string;
     attachments: AttachmentType[];
     meeting: MeetingCardType;
     parentId: number | null;
     reactions: ReactableType[];
     reactions_count?: number;
     seenBy: MemberType[];
+    chatRoom: boolean;
 }

package/dist/esm/types/types/types.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
 interface WeavyClient {
     url: string;
-    tokenFactory: (() => string | Promise<string>);
+    tokenFactoryInternal: () => Promise<string>;
     subscribe: Function;
     unsubscribe: Function;
+    destroy: Function;
+    get: (url: string, retry?: boolean) => Promise<Response>;
+    post: (url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean) => Promise<Response>;
 }
 declare type WeavyClientOptions = {
     url: string;
-    tokenFactory: (() => string | Promise<string>);
+    tokenFactory: (refresh: boolean) => Promise<string>;
 };
 declare type WeavyContextProps = {
     client: WeavyClient | null;
@@ -19,6 +22,8 @@ declare type WeavyContextOptions = {
     enableCloudFiles?: boolean;
     enableScrollbarDetection?: boolean;
     filebrowserUrl?: string;
+    pdfWorkerUrl?: string;
+    pdfCMapsUrl?: string;
     reactions?: string[];
 };
 declare type MessengerContextProps = {
@@ -73,9 +78,14 @@ declare type MemberType = {
     name: string;
     display_name: string;
     avatar_url: string;
-    delivered_at: string;
-    read_at: string;
+    delivered_at?: string;
+    read_at?: string;
     presence: string;
+    marked_id?: number;
+    marked_at?: string;
+};
+declare type MemberTypingType = MemberType & {
+    time: number;
 };
 declare type MessageType = {
     id: number;
@@ -85,6 +95,7 @@ declare type MessageType = {
     temp?: boolean;
     created_at: string;
     created_by: MemberType;
+    created_by_id: number;
     attachments: AttachmentType[];
     attachment_ids: number[];
     meeting: MeetingCardType;
@@ -93,10 +104,11 @@ declare type MessageType = {
 };
 declare type UserType = {
     id: number;
+    uid: string;
+    name: string;
     username: string;
     email: string;
-    name: string;
-    title: string;
+    display_name: string;
     avatar_url: string;
     presence: string;
 };
@@ -114,11 +126,17 @@ declare type AttachmentType = {
     size: number;
     provider: string;
     download_url: string;
-    preview_url: string;
-    thumbnail_url: string;
+    embed_url: string;
     external_url: string;
+    thumbnail_url: string;
+    preview_format: PreviewFormatType;
+    application_url: string;
+    preview_url: string;
+    created_at: string;
+    created_by?: UserType;
+    createdById?: number;
 };
-declare type PreviewFormatType = "text" | "code" | "markup" | "image" | "video" | "audio" | "document" | "embed" | "link" | "download" | "none";
+declare type PreviewFormatType = "audio" | "code" | "embed" | "html" | "image" | "pdf" | "text" | "video" | "none";
 declare type ReactionType = {
     id: number;
     parent: MessageType;
@@ -153,3 +171,39 @@ declare type BadgeType = {
     rooms: number;
     chat: number;
 };
+declare type EntityType = {
+    id: number;
+    type: string;
+};
+declare type RealtimeMessage = {
+    action: string;
+    id: number;
+    actor: UserType;
+    message: MessageType;
+};
+declare type RealtimeReaction = {
+    action: string;
+    id: number;
+    actor: UserType;
+    entity: EntityType;
+    reaction: string;
+};
+declare type RealtimeApp = {
+    action: string;
+    id: number;
+    actor: UserType;
+    app: ConversationType;
+};
+declare type RealtimeMember = {
+    action: string;
+    id: number;
+    actor: UserType;
+    app: ConversationType;
+    member: MemberType;
+};
+declare type RealtimeTyping = {
+    action: string;
+    id: number;
+    actor: MemberTypingType;
+    conversation: ConversationType;
+};

package/dist/esm/types/ui/Spinner.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type SpinnerProps = {
+    size?: number;
+    spin?: boolean;
+    overlay?: boolean;
+};
+declare const UISpinner: {
+    UI: ({ spin, size, overlay }: SpinnerProps) => JSX.Element;
+};
+export default UISpinner;

package/dist/esm/types/utils/fileUtilities.d.ts

@@ -6,15 +6,12 @@ export declare function isWebImage(path: string): boolean;
 export declare function isBitmap(path: string): boolean;
 export declare function isMetaFile(path: string): boolean;
 export declare function isVideo(ext: string): boolean;
+export declare function isMarkdown(ext: string): boolean;
 export declare function isMarkup(ext: string): boolean;
 export declare function isCode(ext: string): boolean;
 export declare function isText(ext: string): boolean;
 export declare function isOfficeDocument(path: string): boolean;
-export declare function canResize(path: string): boolean;
-export declare function canConvertToImage(filename: string): boolean;
-export declare function canConvertToPdf(filename: string): boolean;
 export declare function getIcon(name: string, mediaType?: string): {
     icon: string;
     color?: string;
 };
-export declare function getPreviewFormat(filename: string): PreviewFormatType;

package/dist/index.d.ts

@@ -3,30 +3,37 @@ import * as _microsoft_signalr from '@microsoft/signalr';
 import React, { FC } from 'react';
 import { Styles } from 'react-modal';
 
-declare class WeavyClient {
+declare class WeavyClient$1 {
     url: string;
-    tokenFactory: () => string | Promise<string>;
     connection: _microsoft_signalr.HubConnection;
+    tokenFactory: (refresh: boolean) => Promise<string>;
     groups: string[];
     connectionEvents: any[];
     isConnectionStarted: any;
+    token: string;
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE: string;
     EVENT_CLOSE: string;
     EVENT_RECONNECTING: string;
     EVENT_RECONNECTED: string;
     constructor(options: WeavyClientOptions);
+    get(url: string, retry?: boolean): Promise<Response>;
+    post(url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean): Promise<Response>;
+    getToken(refresh: boolean): Promise<string>;
+    tokenFactoryInternal(refresh?: boolean, fromSR?: boolean): Promise<string>;
     subscribe(group: string, event: string, callback: any): Promise<void>;
     unsubscribe(group: string, event: string, callback: any): Promise<void>;
+    destroy(): void;
     triggerHandler(name: string, ...data: any): void;
 }
 
 declare const WeavyContext: React.Context<WeavyContextProps>;
-declare type Props$2 = {
+declare type WeavyProviderProperties = {
     children: React.ReactNode;
     client: WeavyClient;
     options?: WeavyContextOptions;
 };
-declare const WeavyProvider: ({ children, client, options }: Props$2) => JSX.Element;
+declare const WeavyProvider: ({ children, client, options }: WeavyProviderProperties) => JSX.Element;
 
 declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props$1 = {
@@ -48,10 +55,11 @@ interface ConversationProps {
 declare const _default: React.MemoExoticComponent<({ id, showBackButton }: ConversationProps) => JSX.Element>;
 
 interface ChatProps {
-    id: string;
+    uid: string;
+    className?: string;
 }
 
-declare const Chat: ({ id }: ChatProps) => JSX.Element;
+declare const Chat: ({ uid, className }: ChatProps) => JSX.Element;
 
 declare const UIButton: {
     UI: any;
@@ -94,4 +102,4 @@ declare const UIOverlay: {
     UI: ({ children, className, isOpen, style }: OverlayProps) => JSX.Element;
 };
 
-export { UIButton as Button, Chat, _default as Conversation, ConversationBadge, ConversationList, UIDropdown as Dropdown, UIIcon as Icon, Messenger, MessengerContext, MessengerProvider, UIOverlay as Overlay, WeavyClient, WeavyContext, WeavyProvider };
+export { UIButton as Button, Chat, _default as Conversation, ConversationBadge, ConversationList, UIDropdown as Dropdown, UIIcon as Icon, Messenger, MessengerContext, MessengerProvider, UIOverlay as Overlay, WeavyClient$1 as WeavyClient, WeavyContext, WeavyProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "12.1.0",
+  "version": "14.0.0",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",
@@ -50,7 +50,7 @@
     "emoji-toolkit": "^6.6.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "pdfjs-dist": "^2.14.305",
+    "pdfjs-dist": "^2.16.105",
     "react-modal": "^3.14.4",
     "react-query": "^3.34.16"
   }

package/rollup.config.js

@@ -24,7 +24,9 @@ export default [
         ],
         plugins: [
             peerDepsExternal(),
-            resolve(),
+            resolve({ 
+                browser: true 
+            }),
             commonjs(),
             typescript({ tsconfig: "./tsconfig.json" }),
             terser(),

package/src/client/WeavyClient.ts

@@ -2,77 +2,153 @@ import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 
 export default class WeavyClient {
     url;
-    tokenFactory;
     connection;
-    groups: string[];
-    connectionEvents: any[];
+    tokenFactory;
+    groups: string[] = [];
+    connectionEvents: any[] = [];
     isConnectionStarted: any;
-
+    token: string = "";
+    tokenPromise: Promise<string> | null;
     EVENT_NAMESPACE = ".connection";
     EVENT_CLOSE = "close";
     EVENT_RECONNECTING = "reconnecting";
     EVENT_RECONNECTED = "reconnected";
 
+
     constructor(options: WeavyClientOptions) {
         this.url = options.url;
-        this.tokenFactory = options.tokenFactory
-        this.groups = [];
-        this.connectionEvents = [];
-         
+        this.tokenFactory = options.tokenFactory;
+        this.tokenPromise = null;        
         this.connection = new HubConnectionBuilder()
             .configureLogging(LogLevel.None)
             .withUrl(this.url + "/hubs/rtm", {
-                accessTokenFactory: this.tokenFactory
+                accessTokenFactory: () => { return this.tokenFactoryInternal.call(this, true, true) }
             })
             .withAutomaticReconnect()
             .build();
-        
-            this.isConnectionStarted = this.connection.start();           
+
+        this.isConnectionStarted = this.connection.start();
 
         this.connection.onclose(error => this.triggerHandler(this.EVENT_CLOSE, error));
         this.connection.onreconnecting(error => this.triggerHandler(this.EVENT_RECONNECTING, error));
         this.connection.onreconnected(connectionId => this.triggerHandler(this.EVENT_RECONNECTED, connectionId));
-        
+
     }
 
+    async get(url: string, retry: boolean = true): Promise<Response> {
+        //const token = await this.tokenFactoryInternal();
+        //console.log("GET:", url, " - t:", token);
+        const response = await fetch(this.url + url, {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await this.tokenFactoryInternal()
+            }
+        });
 
-    async subscribe(group: string, event: string, callback: any) {        
-        await this.isConnectionStarted;
+        if (!response.ok) {            
+            if ((response.status === 401 || response.status === 403) && retry) {
+                await this.tokenFactoryInternal(true);                
+                return await this.get(url, false);
+            }
+
+            console.error(`Error calling endpoint ${url}`, response)
+        }
+
+        return response;
+    }
+
+    async post(url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType: string = "application/json", retry: boolean = true): Promise<Response> {
+        let headers: HeadersInit = {         
+            "Authorization": "Bearer " + await this.tokenFactoryInternal()
+        };
+
+        if(contentType !== ""){
+            headers["content-type"] = contentType
+        }
+        const response = await fetch(this.url + url, {
+            method: method,
+            body: body,
+            headers: headers
+        });
+
+        if (!response.ok) {
+            if ((response.status === 401 || response.status === 403) && retry) {
+                await this.tokenFactoryInternal(true);                
+                return await this.post(url, method, body, contentType, false);
+            }
+
+            console.error(`Error calling endpoint ${url}`, response)
+        }
+
+        return response;
+    }
+
+    async getToken(refresh: boolean) {        
+        if (!this.token || refresh) {        
+            this.token = await this.tokenFactory(true);            
+        }        
+        return this.token;
+    }
+
+    async tokenFactoryInternal(refresh: boolean = false, fromSR: boolean = false): Promise<string> {
+        
+        if(this.token && !refresh) return this.token;
+
+        if(!this.tokenPromise){
         
+            this.tokenPromise = this.tokenFactory(refresh);
+            let token = await this.tokenPromise;
+            
+            this.tokenPromise = null;
+            this.token = token;
+            return this.token;
+        } else{
+            //console.log("Already a promise in action, wait for it to resolve...")
+            return this.tokenPromise;
+        }
+    }
+
+    async subscribe(group: string, event: string, callback: any) {
+        await this.isConnectionStarted;
+
         try {
             var name = group ? group + ":" + event : event;
-            await this.connection.invoke("AddToGroup", name);
+            await this.connection.invoke("Subscribe", name);
             this.groups.push(name);
             this.connection.on(name, callback);
-        } catch(err: any){
-            console.warn("Error in AddToGroup:", err)
+        } catch (err: any) {
+            console.warn("Error in Subscribe:", err)
         }
-        
+
     }
 
     async unsubscribe(group: string, event: string, callback: any) {
         await this.isConnectionStarted;
         var name = group ? group + ":" + event : event;
-        
+
         // get first occurence of group name and remove it                        
         const index = this.groups.findIndex(e => e === name);
-        if(index !== -1){
+        if (index !== -1) {
             this.groups = this.groups.splice(index, 1);
 
-            try {                
+            try {
                 // if no more groups, remove from server
-                if(!this.groups.find(e => e === name)){
-                    await this.connection.invoke("RemoveFromGroup", name);
+                if (!this.groups.find(e => e === name)) {
+                    await this.connection.invoke("Unsubscribe", name);
                 }
-                
-            } catch(err: any){
-                console.warn("Error in RemoveFromGroup:", err)
+
+            } catch (err: any) {
+                console.warn("Error in Unsubscribe:", err)
             }
         }
-            
+
         this.connection.off(name, callback);
     }
- 
+
+    destroy(){
+        this.connection.stop();        
+    }
+
     triggerHandler(name: string, ...data: any) {
         name = name.endsWith(this.EVENT_NAMESPACE) ? name : name + this.EVENT_NAMESPACE;
         let event = new CustomEvent(name, { cancelable: false });
@@ -88,7 +164,7 @@ export default class WeavyClient {
         if (name === this.EVENT_RECONNECTED + this.EVENT_NAMESPACE) {
             // re-add to signalr groups after reconnect
             for (var i = 0; i < this.groups.length; i++) {
-                this.connection.invoke("AddToGroup", this.groups[i]);
+                this.connection.invoke("Subscribe", this.groups[i]);
             }
         }
     }

package/src/components/Attachment.tsx

@@ -10,19 +10,20 @@ type Props = {
     name: string,
     kind: string,
     size: number,
-    provider: string
+    provider: string,
+    onClick?: (e: any) => void
 }
 
-const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider }: Props) => {
+const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider, onClick }: Props) => {
     let fileSize = size > 0 ? fileSizeAsString(size) : null;
     let { icon, color } = getIcon(name, mediaType)
     return (
-        <a href={previewUrl || url} className={'wy-attachment'} target={"_blank"} title={name}>
-            <div className={'wy-attachment-icon'} title={kind}><Icon.UI name={icon} color={color} size={2} /></div>
-            <div className={'wy-attachment-content'}>
-                <div className={'wy-attachment-title'}>{name}</div>
+        <a href={previewUrl || url} className="wy-item wy-item-hover wy-item-lg wy-attachment" target={"_blank"} title={name} onClick={onClick ? (e) => onClick(e) : undefined}>
+            <Icon.UI name={icon} color={color} size={2} />
+            <div className="wy-item-body wy-attachment-content">
+                <div className="wy-item-title wy-attachment-title">{name}</div>
                 {fileSize &&
-                    <div className={'wy-attachment-meta'} title={fileSize}>{fileSize}</div>
+                    <div className="wy-item-text wy-attachment-meta" title={fileSize}>{fileSize}</div>
                 }
             </div>
         </a>