@weavy/uikit-react 11.0.0

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    name: string;
+    color?: string;
+    size?: number;
+};
+declare const UIIcon: {
+    UI: ({ name, color, size, ...props }: Props) => JSX.Element;
+};
+export default UIIcon;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Styles } from 'react-modal';
+declare type OverlayProps = {
+    children: React.ReactNode;
+    className?: string;
+    isOpen: boolean;
+    style?: Styles;
+};
+declare const UIOverlay: {
+    UI: ({ children, className, isOpen, style }: OverlayProps) => JSX.Element;
+};
+export default UIOverlay;

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

@@ -0,0 +1,5 @@
+export declare const fileSizeAsString: (size: number) => string;
+export declare const getIcon: (name: string, mediaType?: string) => {
+    icon: string;
+    color?: string;
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Sets the prefix for CSS classes on the HTML element for usage in javascript.
+ * @param {string} prefix
+ */
+export declare function setPrefix(prefix: string): void;
+/**
+ * Prefixes one or more classnames (with or without dot) using the themePrefix
+ * @param {...string} strs
+ * @returns string[]
+ */
+export declare function prefixes(...strs: string[]): string[];
+/**
+ * Prefixes one classname (with or without dot) using the themePrefix
+ * @param {string} str
+ * @returns string
+ */
+export declare function prefix(str: string): string;

package/dist/index.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import * as _microsoft_signalr from '@microsoft/signalr';
+import React, { FC } from 'react';
+import { Styles } from 'react-modal';
+
+declare class WeavyClient {
+    uri: string;
+    tokenFactory: () => string | Promise<string>;
+    connection: _microsoft_signalr.HubConnection;
+    groups: string[];
+    connectionEvents: any[];
+    isConnectionStarted: any;
+    EVENT_NAMESPACE: string;
+    EVENT_CLOSE: string;
+    EVENT_RECONNECTING: string;
+    EVENT_RECONNECTED: string;
+    constructor(options: WeavyClientOptions);
+    subscribe(group: string, event: string, callback: any): Promise<void>;
+    unsubscribe(group: string, event: string, callback: any): Promise<void>;
+    triggerHandler(name: string, ...data: any): void;
+}
+
+declare const WeavyContext: React.Context<WeavyContextProps>;
+declare type Props$2 = {
+    children: React.ReactNode;
+    client: WeavyClient;
+    options?: WeavyContextOptions;
+};
+declare const WeavyProvider: ({ children, client, options }: Props$2) => JSX.Element;
+
+declare const MessengerContext: React.Context<MessengerContextProps>;
+declare type Props$1 = {
+    children: React.ReactNode;
+    options?: MessengerContextOptions;
+};
+declare const MessengerProvider: ({ children, options }: Props$1) => JSX.Element;
+
+declare const Messenger: FC<Messenger>;
+
+declare const ConversationBadge: () => JSX.Element;
+
+declare const ConversationList: () => JSX.Element;
+
+interface ConversationProps {
+    id?: number | null;
+    showBackButton?: boolean;
+}
+
+declare const _default: React.MemoExoticComponent<({ id, showBackButton }: ConversationProps) => JSX.Element>;
+
+interface ChatProps {
+    id: string;
+}
+
+declare const Chat: ({ id }: ChatProps) => JSX.Element;
+
+declare const UIButton: {
+    UI: any;
+};
+
+declare type DropdownProps = {
+    directionX?: "left" | "right";
+    directionY?: "up" | "down";
+    children: React.ReactNode;
+    className?: string;
+    props?: React.HTMLAttributes<HTMLSpanElement>;
+};
+declare type ItemProps = {
+    children: React.ReactNode;
+    className?: string;
+    onClick?: (e: any) => void;
+    props?: React.HTMLAttributes<HTMLDivElement>;
+};
+declare const UIDropdown: {
+    UI: ({ directionX, directionY, children, className, ...props }: DropdownProps) => JSX.Element;
+    Item: ({ children, className, onClick, ...props }: ItemProps) => JSX.Element;
+};
+
+declare type Props = {
+    name: string;
+    color?: string;
+    size?: number;
+};
+declare const UIIcon: {
+    UI: ({ name, color, size, ...props }: Props) => JSX.Element;
+};
+
+declare type OverlayProps = {
+    children: React.ReactNode;
+    className?: string;
+    isOpen: boolean;
+    style?: Styles;
+};
+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 };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@weavy/uikit-react",
+  "version": "11.0.0",
+  "author": "Weavy",
+  "description": "React UI-kit for Weavy",
+  "homepage": "https://github.com/weavy/weavy-uikit-react",
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "./dist/cjs/types/index.d.ts",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "@types/react-modal": "^3.13.1",
+    "rollup": "^2.72.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^4.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c --watch"
+  },
+  "dependencies": {
+    "@mdi/react": "^1.6.0",
+    "@microsoft/signalr": "^6.0.3",
+    "classnames": "^2.3.1",
+    "dayjs": "^1.11.1",
+    "emoji-toolkit": "^6.6.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
+    "react-modal": "^3.14.4",
+    "react-query": "^3.34.16"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,41 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import { terser } from "rollup-plugin-terser";
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import del from 'rollup-plugin-delete';
+
+const packageJson = require("./package.json");
+
+export default [
+    {
+        input: "src/index.ts",
+        output: [
+            {
+                file: packageJson.main,
+                format: "cjs",
+                sourcemap: true,
+            },
+            {
+                file: packageJson.module,
+                format: "esm",
+                sourcemap: true,
+            },
+        ],
+        plugins: [
+            del({ targets: 'dist/*' }),
+            peerDepsExternal(),
+            resolve(),
+            commonjs(),
+            typescript({ tsconfig: "./tsconfig.json" }),
+            terser(),
+        ],
+        external: ["react", "react-dom"]
+    },
+    {
+        input: "dist/esm/types/index.d.ts",
+        output: [{ file: "dist/index.d.ts", format: "esm" }],
+        plugins: [dts()],
+    },
+];

package/src/client/WeavyClient.ts

@@ -0,0 +1,95 @@
+import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
+
+export default class WeavyClient {
+    uri;
+    tokenFactory;
+    connection;
+    groups: string[];
+    connectionEvents: any[];
+    isConnectionStarted: any;
+
+    EVENT_NAMESPACE = ".connection";
+    EVENT_CLOSE = "close";
+    EVENT_RECONNECTING = "reconnecting";
+    EVENT_RECONNECTED = "reconnected";
+
+    constructor(options: WeavyClientOptions) {
+        this.uri = options.uri;
+        this.tokenFactory = options.tokenFactory
+        this.groups = [];
+        this.connectionEvents = [];
+         
+        this.connection = new HubConnectionBuilder()
+            .configureLogging(LogLevel.None)
+            .withUrl(this.uri + "/hubs/rtm", {
+                accessTokenFactory: this.tokenFactory
+            })
+            .withAutomaticReconnect()
+            .build();
+        
+            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 subscribe(group: string, event: string, callback: any) {        
+        await this.isConnectionStarted;
+        
+        try {
+            var name = group ? group + ":" + event : event;
+            await this.connection.invoke("AddToGroup", name);
+            this.groups.push(name);
+            this.connection.on(name, callback);
+        } catch(err: any){
+            console.warn("Error in AddToGroup:", 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){
+            this.groups = this.groups.splice(index, 1);
+
+            try {                
+                // if no more groups, remove from server
+                if(!this.groups.find(e => e === name)){
+                    await this.connection.invoke("RemoveFromGroup", name);
+                }
+                
+            } catch(err: any){
+                console.warn("Error in RemoveFromGroup:", err)
+            }
+        }
+            
+        this.connection.off(name, callback);
+    }
+ 
+    triggerHandler(name: string, ...data: any) {
+        name = name.endsWith(this.EVENT_NAMESPACE) ? name : name + this.EVENT_NAMESPACE;
+        let event = new CustomEvent(name, { cancelable: false });
+
+        console.debug("triggerHandler", name);
+
+        this.connectionEvents.forEach((eventHandler) => {
+            if (eventHandler.name === name) {
+                eventHandler.handler(event, ...data);
+            }
+        });
+
+        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]);
+            }
+        }
+    }
+}

package/src/components/Attachment.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Icon from "../ui/Icon";
+import { fileSizeAsString, getIcon } from "../utils/fileUtilities";
+import { prefix as wy } from "../utils/styles";
+
+type Props = {
+    previewFormat: string,
+    url: string,
+    previewUrl: string,
+    mediaType: string,
+    name: string,
+    kind: string,
+    size: number,
+    provider: string
+}
+
+const Attachment = ({ previewFormat, url, previewUrl, mediaType, name, kind, size, provider }: 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>
+                {fileSize &&
+                    <div className={wy('attachment-meta')} title={fileSize}>{fileSize}</div>
+                }
+            </div>
+        </a>
+    );
+}
+
+export default Attachment;

package/src/components/Avatar.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import classNames from 'classnames';
+import Presence from "./Presence";
+import { prefix as wy } from "../utils/styles";
+
+type Props = {
+    id?: number,
+    name: string,
+    src: string
+    presence?: string,
+    size?: number,
+    className?: string
+}
+
+const Avatar = ({ id, src, name, presence, size = 48, className }: Props) => {
+    return (
+        <div className={classNames(wy('avatar-presence'), className)}>
+            <img alt="" title={name} className={wy('avatar')} height={size} width={size} src={src} />
+            {presence && id &&
+                <Presence id={id} status={presence} />
+            }
+        </div>
+    )
+}
+
+export default Avatar;

package/src/components/Chat.tsx

@@ -0,0 +1,68 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { WeavyContext } from '../contexts/WeavyContext';
+import { ChatProps } from '../types/Chat';
+import useChat from '../hooks/useChat';
+import Messages from './Messages';
+import useMembers from '../hooks/useMembers';
+import Typing from './Typing';
+import useConversation from '../hooks/useConversation';
+import { prefix as wy } from "../utils/styles";
+
+const Chat = ({ id }: ChatProps) => {
+    const { client } = useContext(WeavyContext);
+    const [selectedId, setSelectedId] = useState<number | null>(null)
+
+    if (!client) {
+        throw new Error('Weavy Chat component must be used within an WeavyProvider');
+    }
+
+    const { isLoading: isLoadingChat, data: dataChat } = useChat(id, {});
+
+    const { isLoading: isLoadingMembers, data: dataMembers } = useMembers(selectedId, {
+        // The query will not execute until the activeConversation exists
+        enabled: selectedId != null
+    });
+
+    const { isLoading: isLoadingConversation, data: dataConversation } = useConversation(selectedId, {
+        // The query will not execute until the activeConversation exists
+        enabled: selectedId != null
+    });
+
+    useEffect(() => {
+        if (dataChat) {
+            setSelectedId(dataChat.id);
+        } else {
+            setSelectedId(null);
+        }
+    }, [dataChat]);
+
+    return (
+        <>
+            <header className={wy('appbars')}>
+                <nav className={wy('appbar')}>
+
+                    {selectedId && dataConversation &&
+
+                        <>
+                            <div>
+                                <Typing id={selectedId} context="conversation">
+                                    {dataConversation.display_name}
+                                </Typing>
+                            </div>
+                        </>
+                    }
+                </nav>
+            </header>
+
+            {!isLoadingChat && !dataChat &&
+                <div>No chat with the contextual id <strong>{id}</strong></div>
+            }
+
+            {selectedId && dataMembers &&
+                <Messages id={selectedId} members={dataMembers} />
+            }
+        </>
+    )
+}
+
+export default Chat;

package/src/components/Conversation.tsx

@@ -0,0 +1,220 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import { MessengerContext } from '../contexts/MessengerContext';
+import { WeavyContext } from '../contexts/WeavyContext';
+import useMembers from '../hooks/useMembers';
+import { ConversationProps } from '../types/Conversation';
+import Typing from './Typing';
+import Dropdown from '../ui/Dropdown';
+import Icon from '../ui/Icon';
+import Button from '../ui/Button';
+import Overlay from '../ui/Overlay';
+import SearchUsers from './SearchUsers';
+import useMutateMembers from '../hooks/useMutateMembers';
+import useConversation from '../hooks/useConversation';
+import useMutateConversationName from '../hooks/useMutateConversationName';
+import { prefix as wy } from "../utils/styles";
+import useMutateRemoveMembers from '../hooks/useMutateRemoveMembers';
+import Avatar from './Avatar';
+import { UserContext } from '../contexts/UserContext';
+import Messages from './Messages';
+
+const Conversation = ({ id, showBackButton }: ConversationProps) => {
+
+
+    const queryClient = useQueryClient();
+    const { client } = useContext(WeavyContext);
+    const { selectedConversationId, setSelectedConversationId } = useContext(MessengerContext);
+    const { user } = useContext(UserContext);
+    const [modalAddOpen, setModalAddOpen] = useState(false);
+    const [modalDetailsOpen, setModalDetailsOpen] = useState(false);    
+    const [title, setTitle] = useState<string>("");
+
+    const ChatRoom = "edb400ac-839b-45a7-b2a8-6a01820d1c44";
+
+    if (!client) {
+        throw new Error('Weavy Conversation component must be used within an WeavyProvider');
+    }
+
+    const { isLoading: isLoadingConversation, data: dataConversation } = useConversation(selectedConversationId, {
+        // The query will not execute until the activeConversation exists
+        enabled: selectedConversationId != null
+    });
+
+    const { isLoading: isLoadingMembers, data: dataMembers } = useMembers(selectedConversationId, {
+        // The query will not execute until the activeConversation exists
+        enabled: selectedConversationId != null
+    });
+
+    // react-query (mutation)
+
+    const addMembersMutation = useMutateMembers();
+    const updateNameMutation = useMutateConversationName();
+    const removeMembers = useMutateRemoveMembers();
+
+    const handleRealtimeAppUpdated = useCallback((data: ConversationType) => {
+        if (data.id !== selectedConversationId) return;
+        queryClient.invalidateQueries(['conversation', selectedConversationId]);
+    }, [selectedConversationId]);
+
+    const handleAdd = async (selected: UserType[]) => {
+
+        const membersList = selected.map((m) => m.id);
+        await addMembersMutation.mutateAsync({ id: selectedConversationId, members: membersList });
+        setModalAddOpen(false);
+    }
+
+    const toggleAddModal = (open: boolean) => {
+        setModalAddOpen(open);
+    }
+
+    const toggleDetailsModal = (open: boolean) => {
+        setModalDetailsOpen(open);
+    }
+
+    const handleUpdateTitle = (e: any) => {
+        setTitle(e.target.value);
+        updateNameMutation.mutate({ id: selectedConversationId, name: e.target.value });
+    }
+
+    const handleLeaveConversation = () => {
+        removeMembers.mutate({ id: selectedConversationId, members: [user.id] });
+    }
+
+    const handleBack = () => {
+        setSelectedConversationId(null);
+    }
+
+    
+
+
+
+    // set selected conversation id if id is supplied to component
+    useEffect(() => {
+        if (id) {
+            setSelectedConversationId(id);
+        }
+    }, [id]);
+
+    useEffect(() => {
+
+        if (selectedConversationId) {
+            client.subscribe(`a${selectedConversationId}`, "app-updated", handleRealtimeAppUpdated);
+        }
+
+        return () => {
+
+            if (selectedConversationId) {
+
+                client.unsubscribe(`a${selectedConversationId}`, "app-updated", handleRealtimeAppUpdated);
+            }
+        }
+    }, [selectedConversationId]);
+
+    useEffect(() => {
+        if (dataConversation && dataConversation.type === ChatRoom) {
+            setTitle(dataConversation?.display_name);
+        }
+    }, [dataConversation]);
+
+
+
+
+    return (
+        <>
+            <header className={wy('appbars')}>
+                <nav className={wy('appbar')}>
+                    <div>
+                        {showBackButton &&
+                            <Button.UI onClick={handleBack}><Icon.UI name="back" /></Button.UI>
+                        }</div>
+                    {selectedConversationId && dataConversation &&
+
+                        <>
+                            <div>
+                                <Typing id={selectedConversationId} context="conversation">
+                                    {dataConversation.display_name}
+                                </Typing>
+                            </div>
+                            <Dropdown.UI directionX='left'>
+
+                                <Dropdown.Item onClick={() => toggleDetailsModal(true)}>Details</Dropdown.Item>
+
+                                {dataConversation.type === ChatRoom &&
+                                    <>
+                                        <Dropdown.Item onClick={() => toggleAddModal(true)}>Add people</Dropdown.Item>
+                                        <Dropdown.Item onClick={handleLeaveConversation}>Leave conversation</Dropdown.Item>
+                                    </>
+                                }
+
+                            </Dropdown.UI>
+                        </>
+                    }
+                </nav>
+            </header>
+
+            {!selectedConversationId &&
+                <div className={wy('avatar-header')}>
+                    <Avatar src={user.avatar_url} name={user.title} presence={user.presence} id={user.id} size={256} />
+                    <h2>Welcome {user.name}!</h2>
+                    Select a conversation to get started
+                </div>
+            }
+            {selectedConversationId && dataMembers &&
+                <Messages id={selectedConversationId} members={dataMembers} displayName={dataConversation?.display_name} avatarUrl={dataConversation?.avatar_url} />
+            }
+
+            <Overlay.UI isOpen={modalAddOpen} className={wy('modal')}>
+                <header className={wy('appbars')}>
+                    <nav className={wy('appbar')}>
+                        <Button.UI onClick={() => toggleAddModal(false)}><Icon.UI name='close' /></Button.UI>
+                        <div className={wy('appbar-text')}>Add people</div>
+                    </nav>
+                </header>
+                <SearchUsers handleSubmit={handleAdd} buttonTitle="Add selected" />
+            </Overlay.UI>
+
+            <Overlay.UI isOpen={modalDetailsOpen} className={wy('modal')}>
+                <header className={wy('appbars')}>
+                    <nav className={wy('appbar')}>
+                        <Button.UI onClick={() => toggleDetailsModal(false)}><Icon.UI name='close' /></Button.UI>
+                        <div className={wy('appbar-text')}>Conversation details</div>
+                    </nav>
+                </header>
+                <div>
+                    {dataConversation && <div className={wy('avatar-header')}><Avatar src={dataConversation?.avatar_url} name={title} size={128} /></div>}
+                    {dataConversation?.type !== ChatRoom &&
+                        <h4 className={wy('avatar-display-name')}>{dataConversation?.display_name}</h4>
+                    }
+
+                    {dataConversation?.type === ChatRoom && (
+                        <>
+                            <div className={wy('pane-group')}>
+                                <input className={wy('input')} value={title} onChange={(e) => handleUpdateTitle(e)} />
+                            </div>
+                            <div className={wy('pane-group')}>
+                                <table className={wy('search-result-table')}>
+                                    <tbody>
+                                        {dataMembers?.data.map((m: MemberType) => {
+                                            return (
+                                                <tr key={m.id} className={wy('search-result-table-checkbox')}>
+                                                    <td className={wy('search-result-table-icon')}><Avatar src={m.avatar_url} name={m.display_name} id={m.id} size={24} presence={m.presence} /></td>
+                                                    <td>{m.display_name}</td>
+                                                    <td></td>
+                                                </tr>
+                                            )
+                                        })}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </Overlay.UI>
+
+           
+        </>
+    )
+}
+
+export default React.memo(Conversation);