@weavy/uikit-react 11.1.0 → 13.0.0

package/src/hooks/useMutateReaction.ts

@@ -16,20 +16,14 @@ export default function useMutateReaction() {
 
     type MutateProps = {
         id: number | null,
-        reaction: string        
+        reaction: string
     }
 
-    const mutateReaction = async ({id, reaction }: MutateProps) => {
-
-      
-        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
-            method: "POST",
-            body: JSON.stringify({ content: reaction}),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+    const mutateReaction = async ({ id, reaction }: MutateProps) => {
+
+        const response = await client.post("/api/messages/" + id + "/reactions/",
+            "POST",
+            JSON.stringify({ content: reaction }));
 
         return response;
     };

package/src/hooks/useMutateRead.ts

@@ -19,16 +19,7 @@ export default function useMutateRead() {
     }
 
     const mutateRead = async ({ id, read }: MutateProps) => {
-
-        const response = await fetch(client.url + "/api/conversations/" + id + "/read", {
-            method:  !read ? "DELETE": "PUT",
-            body: "",
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
-
+        const response = await client.post("/api/conversations/" + id + "/read", !read ? "DELETE": "PUT", "")
         return response.json();
     };
 

package/src/hooks/useMutateRemoveMembers.ts

@@ -16,28 +16,23 @@ export default function useMutateRemoveMembers() {
 
 
     type MutateProps = {
-        id:  number | null, 
+        id: number | null,
         members: number[]
     }
 
     const mutateRemove = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/apps/" + id + "/members/" + members.join(","), {
-            method: "DELETE",        
-            body: JSON.stringify(members),    
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/apps/" + id + "/members/" + members.join(","),
+            "DELETE",
+            JSON.stringify(members));
 
         return response;
     };
 
     return useMutation(mutateRemove, {
         onSuccess: () => {
-            queryClient.invalidateQueries("conversations");         
-            setSelectedConversationId(null);   
-        }        
+            queryClient.invalidateQueries("conversations");
+            setSelectedConversationId(null);
+        }
     });
 }

package/src/hooks/useMutateTyping.ts

@@ -6,29 +6,24 @@ import { WeavyContext } from "../contexts/WeavyContext";
 export default function useMutateTyping() {
 
     const { client } = useContext(WeavyContext);
-    
+
     if (!client) {
         throw new Error('useMutateTyping must be used within an WeavyProvider');
     }
 
 
     type MutateProps = {
-        id: number | null        
+        id: number | null
     }
 
     const mutateTyping = async ({ id }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/conversations/" + id + "/typing", {
-            method: "PUT",
-            body: JSON.stringify({}),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/conversations/" + id + "/typing",
+            "PUT",
+            JSON.stringify({}));
 
         return response;
     };
 
-    return useMutation(mutateTyping, { });
+    return useMutation(mutateTyping, {});
 }

package/src/hooks/usePresence.ts

@@ -1,6 +1,5 @@
 import { useContext, useEffect } from "react";
 import { WeavyContext } from "../contexts/WeavyContext";
-import { prefix as wy } from "../utils/styles";
 
 export default function usePresence() {
 
@@ -17,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,12 +12,7 @@ export default function useSearchUsers(text: string, options: any) {
     }
 
     const getUsers = async () => {
-        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()
-            }
-        });
+        const response = await client.get("/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE);        
         const data = await response.json();
         return data;
     };

package/src/hooks/useUser.ts

@@ -1,12 +1,8 @@
-//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: WeavyClient) {
-    //const { client } = useContext(WeavyContext);
-
+export default function useUser(client: WeavyClient) {    
     if (!client) {
         throw new Error('useUser must be used within an WeavyProvider');
     }
@@ -14,17 +10,10 @@ export default function useUser(client: WeavyClient) {
     const getUser = async () => {
 
         try {
-            const response = await fetch(client.url + "/api/user", {
-                headers: {
-                    "content-type": "application/json",
-                    "Authorization": "Bearer " + await client.tokenFactory()
-                }
-            });
-    
+            const response = await client.get("/api/user");            
             if(response.ok){
                 return await response.json();            
-            }
-    
+            }    
             console.error("Could not load Weavy user data...")
             return null;
         } catch(err: any){

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;
+    }
+}

package/src/scss/theme/_appbar.scss

@@ -0,0 +1,114 @@
+@use "config" as *;
+@use "mixins/backdrop";
+@use "mixins/position";
+
+.wy-appbars {
+  @include position.sticky-top;
+
+  @include backdrop.filter {
+    > .wy-appbar {
+      backdrop-filter: none;
+    }
+  }
+}
+
+.wy-appbar {
+  display: grid;
+  align-items: center;
+  justify-content: space-between;
+  height: $appbar-height;
+  padding: $navbar-padding-y $navbar-padding-x;
+  flex: 0 0 $appbar-height;
+  grid-template-columns: minmax(2rem, max-content) minmax(0, max-content) minmax(2rem, max-content);
+  column-gap: .5rem;
+  font-family: $font-family-base;
+  line-height: $line-height-base;
+
+  @include backdrop.filter;
+
+  .wy-badge {
+    align-self: center;
+  }
+
+  .wy-button {
+    max-height: 2rem;
+  }
+}
+
+.wy-appbar-buttons {
+  display: flex;
+  flex: 0 0 1rem;
+}
+
+.wy-appbar-text {
+  @include text-truncate();
+  color: inherit !important;
+  user-select: none;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}
+
+.wy-appbar {
+  // light theme (default)
+  &, .wy-light &, &.wy-light {
+    background-color: rgba($gray-50, $opacity-backdrop);
+    color: $navbar-light-color;
+    box-shadow: rgba($gray-200, $opacity-backdrop) 0px -1px 0px 0px inset;
+  }
+  // dark theme
+  .wy-dark &, &.wy-dark {
+    background-color: rgba($dark, $opacity-backdrop);
+    color: $navbar-dark-color;
+    box-shadow: rgba($gray-800, $opacity-backdrop) 0px -1px 0px 0px inset;
+  }
+}
+
+.wy-footerbars {
+  padding-bottom: $footerbar-height;
+}
+
+.wy-footerbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $zindex-sticky;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100vw;
+    left: 0;
+    bottom: 0;
+    height: $footerbar-height;
+    border-top: $border-width solid rgba($gray-200, $opacity-backdrop);
+    background: rgba($gray-50, $opacity-backdrop);
+    z-index: -1;
+
+    @include backdrop.filter;
+  }
+
+  .wy-buttons {
+    flex-direction: row-reverse;
+
+    > :not(:last-child) {
+      margin: 0 0 0 .5rem;
+    }
+  }
+}
+
+.wy-footerbars-fixed {
+  .wy-footerbar {
+    position: fixed;
+
+    &::after {
+      position: fixed;
+    }
+  }
+}

package/src/scss/theme/_attachments.scss

@@ -0,0 +1,74 @@
+@use "config" as *;
+@use "bs/list-group";
+
+
+.wy-attachments,
+.wy-meetings {
+  border: none;
+  border-radius: $border-radius-sm;
+  flex: 1 1 100%;
+  min-width: 0;
+
+  .wy-attachment,
+  .wy-meeting {
+    border-left: none;
+    border-right: none;
+  }
+
+  > * {
+    padding: .25rem .5rem;
+  }
+
+  > :first-child {
+    border-top: none;
+  }
+
+  > :last-child {
+    //border-top: variables.$border-width solid variables.$border-color;
+    border-bottom: none;
+  }
+}
+
+.wy-attachment,
+.wy-meeting {
+  @extend 
+  %list-group-item, 
+  %list-group-item-action;
+
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.wy-attachment-icon {
+  flex: 0 0 auto;
+  display: flex;
+
+  .wy-icon, .wy-icon-stack {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+.wy-attachment-content {
+  flex: 1 1 100%;
+  min-width: 0;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
+
+.wy-attachment-title {
+  font-family: $headings-font-family;
+  font-style: $headings-font-style;
+  font-weight: $headings-font-weight;
+  color: $headings-color;
+  @include text-truncate();
+  @include font-size($h6-font-size);
+  margin: 0;
+}
+
+.wy-attachment-meta {
+  @include text-truncate();
+  @include font-size($small-font-size);
+  color: $text-muted;
+}

package/src/scss/theme/_avatar.scss

@@ -0,0 +1,54 @@
+@use "config" as *;
+@use "bs/forms";
+
+.wy-avatar {
+  border-radius: 50%;
+}
+
+.wy-avatar-header {
+  padding: 1.5rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.wy-avatar-input {
+  @extend %form-control, %form-control-sm;
+  background: $light;
+  border-color: transparent;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1.5rem;
+}
+
+.wy-avatar-presence {
+  position: relative;
+}
+
+.wy-avatar-display-name {
+  font-size: $h4-font-size;
+  font-weight: $display-font-weight;
+  line-height: $display-line-height;
+  text-align: center;
+}
+
+
+// presence indicator
+.wy-presence {
+  display: none; // initially hidden
+  background-color: $gray-100;
+  width: .75rem;
+  height: .75rem;
+  border-radius: 50%;
+  outline: .125rem solid $white;
+  position: absolute;
+  bottom: 0;
+  right: -5%;
+}
+
+// online
+.wy-presence-active {
+  background-color: $green-400;
+  display: block;
+}

package/src/scss/theme/_badge.scss

@@ -0,0 +1,47 @@
+@use "config" as *;
+@use "bs/badge";
+
+
+.wy-badge {
+  @extend %badge;
+  border-radius: 50rem;
+  background-color: $primary;
+}
+
+.wy-badge-success {
+  background-color: $success;
+}
+
+.wy-badge-warning {
+  background-color: $warning;
+}
+
+.wy-badge-danger {
+  background-color: $danger;
+}
+
+.wy-button {
+  position: relative; // so that we can position .badge
+
+  // badge, e.g. notification count
+  .wy-badge {
+    font-size: $font-size-xs;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border-radius: 1rem;
+    margin: 0;
+    padding: .25rem;
+    min-width: 1rem;
+    max-width: 2rem;
+    height: 1rem;
+    line-height: .5rem;
+    display: block;
+    text-align: center;
+    @include text-truncate();
+
+    &:empty {
+      display: none;
+    }
+  }
+}

package/src/scss/theme/_buttons.scss

@@ -0,0 +1,96 @@
+@use "config" as *;
+@use "bs/buttons";
+
+// basic unstyled button with support for icon and text
+.wy-button {
+  @extend %btn;
+  
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .25rem;
+
+  // align icons
+  &:not(.wy-button-icon) {
+    .wy-icon {
+      &:first-child {
+        margin-left: -.25rem;
+      }
+
+      &:last-child {
+        margin-right: -.25rem;
+      }
+    }
+  }
+ 
+}
+
+// default button
+.wy-button:not(.wy-button-link, .wy-button-primary) {
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-active-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}btn-color);
+    --#{$prefix}btn-hover-bg: #{$btn-hover-bg};
+    --#{$prefix}btn-focus-bg: #{$btn-hover-bg};
+    --#{$prefix}btn-active-color: var(--#{$prefix}btn-color);
+    --#{$prefix}btn-active-bg: #{$btn-active-bg};
+
+     // dark mode
+    .wy-dark & {
+      color: var(--#{$prefix}white);
+    }
+}
+
+// button with only icon (no text)
+.wy-button-icon {  
+  width: 2rem;
+  height: 2rem;
+  padding: .25rem;
+  line-height: 1;
+  border-radius: 50%;
+  border-width: 0;
+}
+
+// default icon button
+.wy-button-icon:not(.wy-button-primary) {
+  color: $icon-color;
+
+  &:hover {
+    .wy-icon {
+      color: $icon-hover-color;
+    }
+  }
+  
+  // dark mode
+  .wy-dark & {
+    color: $icon-light-color;
+    .wy-icon {
+      color: $icon-light-color;
+    }
+
+    &:hover {
+      color: $icon-light-hover-color;
+      .wy-icon {
+        color: $icon-light-hover-color;
+      }
+    }
+  }
+}
+
+// primary button
+.wy-button-primary {
+    @extend %btn-primary;
+}
+
+// button that looks and behaves like a link
+.wy-button-link {
+  @extend %btn-link;
+}
+
+// container for proper spacing and alignment of buttons
+.wy-buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .5rem;
+}

package/src/scss/theme/_card.scss

@@ -0,0 +1,7 @@
+.wy-card-header {
+  border-bottom: none;
+}
+
+.wy-card-footer {
+  border-top: none;
+}