@weavy/uikit-react 11.0.1 → 12.1.0

package/src/components/SearchUsers.tsx

@@ -4,7 +4,6 @@ import useSearchUsers from "../hooks/useSearchUsers";
 import Avatar from './Avatar';
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
-import { prefix as wy } from "../utils/styles";
 
 type SearchUsersProps = {
     handleSubmit: any,
@@ -42,33 +41,33 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
     }
 
     return (
-        <div className={wy('search scroll-y')}>
-            <div className={wy('search-form pane-group')}>
+        <div className="wy-search wy-scroll-y">
+            <div className="wy-search-form wy-pane-group">
                 <Button.UI><Icon.UI name="magnify" /></Button.UI>
-                <input className={wy('search-input')} value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
+                <input className="wy-search-input" value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
             </div>
 
-            <div className={wy('pane-group')}>
+            <div className="wy-pane-group">
                 {data && data.data.length === 0 &&
-                    <div className={wy('search-no-result')}>Your search did not match any people.</div>
+                    <div className="wy-search-no-result">Your search did not match any people.</div>
                 }
-                <table className={wy('search-result-table')}>
+                <table className="wy-search-result-table">
                     <tbody>
                         {data && data.data.length > 0 && data.data.map((user: MemberType) => {
                             return (
-                                <tr key={user.id} className={wy('search-result-table-checkbox')}>
-                                    <td className={wy('search-result-table-icon')}>
+                                <tr key={user.id} className="wy-search-result-table-checkbox">
+                                    <td className="wy-search-result-table-icon">
                                         <Avatar src={user.avatar_url} size={24} id={user.id} presence={user.presence} name={user.display_name} />
                                     </td>
-                                    <td>{user.display_name}</td>
-                                    <td className={wy('search-result-table-icon')}><input type="checkbox" checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
+                                    <td><label htmlFor={'chk' + user.id}>{user.display_name}</label></td>
+                                    <td className="wy-search-result-table-icon"><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
                                 </tr>
                             )
                         })}
-                    </tbody>
+                    </tbody> 
                 </table>
             </div>
-            {/*<div className={wy('search-group')}>
+            {/*<div className="wy-search-group">
                 <h2>Selected people</h2>
                 <ul>
                     {selected && selected.length > 0 && selected.map((user: UserType) => {
@@ -76,10 +75,12 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
                     })}
                 </ul>
                 </div>*/}
-            <div className={wy('footerbars')}>
-                <div className={wy('footerbar')}>
-                    <div className={wy('pane-group')}>
-                        <button className={wy('button-primary')} type="button" onClick={() => {handleSubmit(selected); clear();}} disabled={selected.length === 0}>{buttonTitle}</button>
+            <div className="wy-footerbars">
+                <div className="wy-footerbar">
+                    <div className="wy-pane-group">
+                        <div className="wy-buttons">
+                            <button className="wy-button wy-button-primary" type="button" onClick={() => {handleSubmit(selected); clear();}} disabled={selected.length === 0}>{buttonTitle}</button>
+                        </div>
                     </div>
                 </div>
             </div>

package/src/components/SeenBy.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Avatar from "./Avatar";
 import dayjs  from 'dayjs';
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     id: number,
@@ -13,7 +12,7 @@ type Props = {
 const SeenBy = ({ seenBy }: Props) => {
    
     return (
-        <div className={wy('readby-status')}>
+        <div className="wy-readby-status">
             {seenBy && seenBy.length > 0 && seenBy.map((member: MemberType) => {
                 const date = dayjs.utc(member.read_at).tz(dayjs.tz.guess());
                 return (<Avatar name={`Seen by ${member.name} at ${date.format('LLLL')}`} src={member.avatar_url} size={16} key={member.id}/>)})

package/src/components/Typing.tsx

@@ -26,12 +26,12 @@ const Typing = ({ children, id, context }: Props) => {
     useEffect(() => {
         setActiveTypers([]);
         
-        client.subscribe(`a${id}`, "typing", handleTyping);        
-        client.subscribe(`a${id}`, "message-inserted", handleStopTyping);
+        client?.subscribe(`a${id}`, "typing", handleTyping);        
+        client?.subscribe(`a${id}`, "message-inserted", handleStopTyping);
 
         return () => {
-            client.unsubscribe(`a${id}`, "typing", handleTyping);            
-            client.unsubscribe(`a${id}`, "message-inserted", handleStopTyping);
+            client?.unsubscribe(`a${id}`, "typing", handleTyping);            
+            client?.unsubscribe(`a${id}`, "message-inserted", handleStopTyping);
         }
     }, [id])
 

package/src/contexts/MessengerContext.tsx

@@ -3,22 +3,14 @@ import usePresence from "../hooks/usePresence";
 
 export const MessengerContext = createContext<MessengerContextProps>({
     selectedConversationId: null,
-    setSelectedConversationId: (id: any) => { },
-    options: {}
+    setSelectedConversationId: (id: any) => { }    
 });
 
 type Props = {
-    children: React.ReactNode,
-    options?: MessengerContextOptions
+    children: React.ReactNode    
 }
 
-const MessengerProvider = ({ children, options }: Props) => {
-
-    let defaultOptions: MessengerContextOptions = {
-        reactions: ['😍', '😎', '😉', '😜', '👍']
-    };
-
-    let opts = { ...defaultOptions, ...options };
+const MessengerProvider = ({ children }: Props) => {
 
     const [selectedConversationId, setSelectedConversation] = useState(null);
 
@@ -31,7 +23,7 @@ const MessengerProvider = ({ children, options }: Props) => {
 
     return (
         <>
-            <MessengerContext.Provider value={{ options: opts, selectedConversationId, setSelectedConversationId }}>
+            <MessengerContext.Provider value={{ selectedConversationId, setSelectedConversationId }}>
                 {children}
             </MessengerContext.Provider>
         </>

package/src/contexts/PreviewContext.tsx

@@ -2,7 +2,6 @@ import React, { createContext, useEffect, useState } from "react";
 import Overlay from '../ui/Overlay';
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
-import { prefix as wy } from "../utils/styles";
 
 export const PreviewContext = createContext<PreviewContextProps>({
     openPreview: Function,
@@ -64,11 +63,11 @@ const PreviewProvider = ({ children }: Props) => {
                 {children}
             </PreviewContext.Provider>
 
-            <Overlay.UI isOpen={modalPreviewOpen} className={wy('dark')}>
-                <header className={wy('appbars')}>
-                    <nav className={wy('appbar')}>
+            <Overlay.UI isOpen={modalPreviewOpen} className={'wy-dark'}>
+                <header className={'wy-appbars'}>
+                    <nav className={'wy-appbar'}>
                         <Button.UI onClick={closePreview}><Icon.UI name='close' /></Button.UI>
-                        <div className={wy('appbar-text')}>
+                        <div className={'wy-appbar-text'}>
                             {activeAttachment &&
                                 <span>{activeAttachment.name}</span>
                             }
@@ -102,4 +101,3 @@ const PreviewProvider = ({ children }: Props) => {
 };
 
 export default PreviewProvider;
-

package/src/contexts/WeavyContext.tsx

@@ -8,6 +8,7 @@ import timezone from 'dayjs/plugin/timezone';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import PreviewProvider from "./PreviewContext";
 import WeavyClient from "../client/WeavyClient";
+import detectScrollbars from '../utils/scrollbarDetection';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -40,11 +41,17 @@ const WeavyProvider = ({ children, client, options }: Props) => {
     zoomAuthenticationUrl: undefined,
     teamsAuthenticationUrl: undefined,
     enableCloudFiles: true,
-    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html"
+    enableScrollbarDetection: true,
+    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html",
+    reactions: ['😍', '😎', '😉', '😜', '👍']
   };
 
   let opts = { ...defaultOptions, ...options }
 
+  if (opts.enableScrollbarDetection) {
+    detectScrollbars();
+  }
+
   return (
     <>
       {client &&

package/src/hooks/useBadge.ts

@@ -12,7 +12,7 @@ export default function useBadge() {
 
     const getBadge = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations/badge", {
+        const response = await fetch(client.url + "/api/conversations/badge", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useChat.ts

@@ -12,7 +12,7 @@ export default function useChat(id: string, options: any) {
 
     const getConversation = async () => {
 
-        const response = await fetch(client.uri + "/api/apps/idf/" + id, {
+        const response = await fetch(client.url + "/api/apps/idf/" + id, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useConversation.ts

@@ -1,5 +1,4 @@
 import { useContext } from "react";
-
 import { useQuery } from "react-query";
 import { WeavyContext } from "../contexts/WeavyContext";
 
@@ -13,7 +12,7 @@ export default function useConversation(id: number | null, options: any) {
 
     const getConversation = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id, {
+        const response = await fetch(client.url + "/api/conversations/" + id, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useConversations.ts

@@ -12,7 +12,7 @@ export default function useConversations() {
 
     const getConversations = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations?contextual=false", {
+        const response = await fetch(client.url + "/api/conversations?contextual=false", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useFileUploader.ts

@@ -7,13 +7,17 @@ export default function useFileUploader(callback: Function) {
 
     const { client } = useContext(WeavyContext);
 
+    if (!client) {
+        throw new Error('useFileUploader must be used within an WeavyProvider');
+    }
+
     return useMutation(
         async ({ request }: any) => {
 
             const formData = new FormData();
             formData.append('blob', request.file);
 
-            var response = await fetch(client.uri + "/api/blobs", {
+            var response = await fetch(client.url + "/api/blobs", {
                 method: 'POST',
                 body: formData,
                 headers: {

package/src/hooks/useMembers.ts

@@ -12,7 +12,7 @@ export default function useMembers(id: number | null, options: any) {
 
     const getConversationMembers = async () => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useMessages.ts

@@ -14,7 +14,7 @@ export default function useMessages(id: number | null, options: any) {
     const getMessages = async (opt: any) => {
         let skip = opt.pageParam || 0;
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/messages?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE, {
+        const response = await fetch(client.url + "/api/apps/" + id + "/messages?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useMutateChat.ts

@@ -21,7 +21,7 @@ export default function useMutateChat() {
     // create new conversation
     const mutateChat = async ({ identifier, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/", {
+        const response = await fetch(client.url + "/api/apps/", {
             method: "POST",
             body: JSON.stringify({ 
                 identifier: identifier,

package/src/hooks/useMutateConversation.ts

@@ -20,7 +20,7 @@ export default function useMutateConversation() {
     // create new conversation
     const mutateConversation = async ({ members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/", {
+        const response = await fetch(client.url + "/api/conversations/", {
             method: "POST",
             body: JSON.stringify({ members: members }),
             headers: {

package/src/hooks/useMutateConversationName.ts

@@ -20,7 +20,7 @@ export default function useMutateConversationName() {
 
     const mutateConversationName = async ({ id, name }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id, {
+        const response = await fetch(client.url + "/api/apps/" + id, {
             method: "PATCH",
             body: JSON.stringify({ name: name }),
             headers: {

package/src/hooks/useMutateDeleteReaction.ts

@@ -22,7 +22,7 @@ export default function useMutateDeleteReaction() {
     const mutateDeleteReaction = async ({ id, reaction }: MutateProps) => {
 
         // remove the existing reaction
-        const response = await fetch(client.uri + "/api/messages/" + id + "/reactions/", {
+        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
             method: "DELETE",
             headers: {
                 "content-type": "application/json",

package/src/hooks/useMutateExternalBlobs.ts

@@ -19,7 +19,7 @@ export default function useMutateExternalBlobs() {
 
     const mutateExternalBlobs = async ({ blobs }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/blobs/external", {
+        const response = await fetch(client.url + "/api/blobs/external", {
             method: "POST",
             body: JSON.stringify(blobs),
             headers: {

package/src/hooks/useMutateMeeting.ts

@@ -19,7 +19,7 @@ export default function useMutateMeeting() {
 
     const mutateMeeting = async ({ provider }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/meetings", {
+        const response = await fetch(client.url + "/api/meetings", {
             method: "POST",
             body: JSON.stringify({provider: provider}),
             headers: {

package/src/hooks/useMutateMembers.ts

@@ -21,7 +21,7 @@ export default function useMutateMembers() {
     // add members to conversation
     const mutateMembers = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members/", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members/", {
             method: "POST",
             body: JSON.stringify(members),
             headers: {

package/src/hooks/useMutateMessage.ts

@@ -22,7 +22,7 @@ export default function useMutateMessage() {
     }
 
     const mutateMessage = async ({ id, text, userId, attachments, meetings }: MutateProps) => {
-        const response = await fetch(client.uri + "/api/apps/" + id + "/messages", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/messages", {
             method: "POST",
             body: JSON.stringify({
                 text: text,
@@ -86,6 +86,7 @@ export default function useMutateMessage() {
                 let pageMessages = [...data, {
                     id: tempId,
                     text: variables.text,
+                    html: variables.text,
                     display_name: "",
                     temp: true,
                     parent_id: null,

package/src/hooks/useMutatePinned.ts

@@ -20,7 +20,7 @@ export default function useMutatePinned() {
 
     const mutatePinned = async ({ id, pin }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/pin", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/pin", {
             method:  + !pin ? "DELETE": "PUT",
             body: "",
             headers: {

package/src/hooks/useMutateReaction.ts

@@ -22,7 +22,7 @@ export default function useMutateReaction() {
     const mutateReaction = async ({id, reaction }: MutateProps) => {
 
       
-        const response = await fetch(client.uri + "/api/messages/" + id + "/reactions/", {
+        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
             method: "POST",
             body: JSON.stringify({ content: reaction}),
             headers: {

package/src/hooks/useMutateRead.ts

@@ -20,7 +20,7 @@ export default function useMutateRead() {
 
     const mutateRead = async ({ id, read }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/read", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/read", {
             method:  !read ? "DELETE": "PUT",
             body: "",
             headers: {

package/src/hooks/useMutateRemoveMembers.ts

@@ -22,7 +22,7 @@ export default function useMutateRemoveMembers() {
 
     const mutateRemove = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members/" + members.join(","), {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members/" + members.join(","), {
             method: "DELETE",        
             body: JSON.stringify(members),    
             headers: {

package/src/hooks/useMutateTyping.ts

@@ -18,7 +18,7 @@ export default function useMutateTyping() {
 
     const mutateTyping = async ({ id }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/typing", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/typing", {
             method: "PUT",
             body: JSON.stringify({}),
             headers: {

package/src/hooks/usePresence.ts

@@ -1,11 +1,14 @@
 import { useContext, useEffect } from "react";
 import { WeavyContext } from "../contexts/WeavyContext";
-import { prefix as wy } from "../utils/styles";
 
 export default function usePresence() {
 
     const {client} = useContext(WeavyContext);
     
+    if (!client) {
+        throw new Error('usePresence must be used within an WeavyProvider');
+    }
+
     useEffect(() => {
         client.subscribe("online", "online", handlePresenceChange)
     }, []);
@@ -13,18 +16,18 @@ export default function usePresence() {
     const handlePresenceChange = (data: any) => {        
         
         if (Array.isArray(data)) {
-            document.querySelectorAll(wy(".presence")).forEach(function (item) {
-                item.classList.remove(wy("presence-active"));
+            document.querySelectorAll(".wy-presence").forEach(function (item) {
+                item.classList.remove("wy-presence-active");
             });
 
             data.forEach(function (id) {
                 document.querySelectorAll("[data-presence-id='" + id + "']").forEach(function (item) {
-                    item.classList.add(wy("presence-active"));
+                    item.classList.add("wy-presence-active");
                 });
             });
         } else {
             document.querySelectorAll("[data-presence-id='" + data + "']").forEach(function (item) {
-                item.classList.add(wy("presence-active"));
+                item.classList.add("wy-presence-active");
             });
         }
     }

package/src/hooks/useReactions.ts

@@ -2,7 +2,6 @@ import { useCallback, useContext, useEffect, useLayoutEffect, useState } from "r
 import { UserContext } from "../contexts/UserContext";
 import useEvents from "./useEvents";
 
-
 export default function useReactions(id: number, reactions: ReactableType[]) {
     const { on, off } = useEvents();
     const { user } = useContext(UserContext);

package/src/hooks/useSearchUsers.ts

@@ -12,7 +12,7 @@ export default function useSearchUsers(text: string, options: any) {
     }
 
     const getUsers = async () => {
-        const response = await fetch(client.uri + "/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE, {
+        const response = await fetch(client.url + "/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useUser.ts

@@ -1,9 +1,10 @@
 //import { useContext } from "react";
 import { useQuery } from "react-query";
+import WeavyClient from "../client/WeavyClient";
 //import { WeavyContext } from "../contexts/WeavyContext";
 
 /// GET current user
-export default function useUser(client: any) {
+export default function useUser(client: WeavyClient) {
     //const { client } = useContext(WeavyContext);
 
     if (!client) {
@@ -13,7 +14,7 @@ export default function useUser(client: any) {
     const getUser = async () => {
 
         try {
-            const response = await fetch(client.uri + "/api/user", {
+            const response = await fetch(client.url + "/api/user", {
                 headers: {
                     "content-type": "application/json",
                     "Authorization": "Bearer " + await client.tokenFactory()
@@ -27,7 +28,7 @@ export default function useUser(client: any) {
             console.error("Could not load Weavy user data...")
             return null;
         } catch(err: any){
-            console.error(`Could not connect to the Weavy backend. Please make sure ${client.uri} is up and running!`)
+            console.error(`Could not connect to the Weavy backend. Please make sure ${client.url} is up and running!`)
         }
         
         

package/src/index.ts

@@ -1,8 +1,8 @@
 import WeavyClient from './client/WeavyClient';
 import WeavyProvider from './contexts/WeavyContext';
-import  { WeavyContext } from './contexts/WeavyContext';
+import { WeavyContext } from './contexts/WeavyContext';
 import MessengerProvider from './contexts/MessengerContext';
-import  { MessengerContext } from './contexts/MessengerContext';
+import { MessengerContext } from './contexts/MessengerContext';
 import Messenger from './components/Messenger';
 import ConversationBadge from './components/ConversationBadge';
 import ConversationList from './components/ConversationList';

package/src/scss/theme/_alert.scss

@@ -0,0 +1,73 @@
+@use "config" as *;
+
+// Global alerts
+
+.wy-alert-message {
+    padding: .25rem .5rem;
+    background-color: $client-alert-background;
+    text-align: center;
+    width: $client-panel-width;
+    color: $client-alert-color;
+    border-radius: .1875rem;
+    margin: 0 auto;
+    margin-top: 1rem;
+    font-family: $font-family-base;
+    position: relative;
+    z-index: 10;
+    box-shadow: $md-shadow-8dp;
+    max-width: calc(100% - 3rem);
+    pointer-events: none;
+    user-select: none;
+
+    a {
+        color: darken($client-alert-color, 10%);
+        text-decoration: $link-decoration;
+        font-weight: $alert-link-font-weight;
+        pointer-events: auto;
+    }
+
+    &.wy-fade {
+        transition: all $md-animation-duration $md-animation-curve-default;
+        opacity: 0;
+        height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-top: 0;
+
+        &.wy-in {
+            transition: opacity $md-animation-duration $md-animation-curve-default;
+            opacity: 1;
+            height: auto;
+            padding-top: .5rem;
+            padding-bottom: .5rem;
+            margin-top: 1rem;
+        }
+    }
+
+    .wy-button {
+        cursor: pointer;
+        display: inline-flex;
+        flex-shrink: 0;
+        flex-grow: 0;
+
+        > * {
+            display: inline-flex;
+        }
+
+        font-weight: 400;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        user-select: none;
+        border: 1px solid transparent;
+        padding: .3125rem .75rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        border-radius: .1875rem;
+        color: $white;
+        background-color: $primary;
+        border-color: $primary;
+        box-shadow: $btn-box-shadow;
+        margin-top: .5rem;
+    }
+}