@weavy/uikit-react 12.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/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/scss/theme/_appbar.scss

@@ -21,6 +21,8 @@
   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;
 
@@ -57,13 +59,13 @@
   &, .wy-light &, &.wy-light {
     background-color: rgba($gray-50, $opacity-backdrop);
     color: $navbar-light-color;
-    border-bottom: $border-width solid rgba($gray-200, $opacity-backdrop);
+    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;
-    border-bottom: $border-width solid rgba($gray-800, $opacity-backdrop);
+    box-shadow: rgba($gray-800, $opacity-backdrop) 0px -1px 0px 0px inset;
   }
 }
 

package/src/scss/theme/_cm-editor.scss

@@ -32,7 +32,7 @@
   }
 }
 
-textarea.is-invalid + [data-editor-target] .cm-editor {
+.wy-is-invalid + [data-editor-target] .cm-editor {
   padding-right: $input-height-inner;
   background-image: escape-svg($form-feedback-icon-invalid);
   background-repeat: no-repeat;

package/src/scss/theme/_code-vscode-dark.scss

@@ -0,0 +1,184 @@
+// Theme generated from VS Code using https://prism.dotenv.dev/
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #d4d4d4;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/*pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #1e1e1e;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #1e1e1e;
+}*/
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  color: white;
+  background: #1e1e1e;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+
+.token.prolog {
+  color: #8080ff;
+  
+}
+
+.token.comment {
+  color: #6A9955;
+  
+}
+
+.token.punctuation {
+  color: #6A9955;
+  
+}
+
+.token.builtin {
+  color: #4FC1FF;
+  
+}
+
+.token.number {
+  color: #B5CEA8;
+  
+}
+
+.token.variable {
+  color: #B5CEA8;
+  
+}
+
+.token.inserted {
+  color: #B5CEA8;
+  
+}
+
+.token.operator {
+  color: #D4D4D4;
+  
+}
+
+.token.constant {
+  color: #646695;
+  
+}
+
+.token.hexcode {
+  color: #646695;
+  
+}
+
+.token.tag {
+  color: #569CD6;
+  
+}
+
+.token.changed {
+  color: #569CD6;
+  
+}
+
+.token.function {
+  color: #569CD6;
+  
+}
+
+.token.keyword {
+  color: #569CD6;
+  
+}
+
+.token.attr-name {
+  color: #9CDCFE;
+  
+}
+
+.token.selector {
+  color: #9CDCFE;
+  
+}
+
+.token.property {
+  color: #9CDCFE;
+  
+}
+
+.token.deleted {
+  color: #CE9178;
+  
+}
+
+.token.string {
+  color: #CE9178;
+  
+}
+
+.token.regex {
+  color: #D16969;
+  
+}
+
+.token.char {
+  color: #D16969;
+  
+}
+
+.token.class-name {
+  color: #4EC9B0;
+  
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}

package/src/scss/theme/_code-vscode-light.scss

@@ -0,0 +1,179 @@
+// Theme generated from VS Code using https://prism.dotenv.dev/
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #000000;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/*pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #ffffff;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #ffffff;
+}*/
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  color: white;
+  background: #ffffff;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+
+.token.comment {
+  color: #008000;
+  
+}
+
+.token.builtin {
+  color: #0070C1;
+  
+}
+
+.token.number {
+  color: #098658;
+  
+}
+
+.token.variable {
+  color: #098658;
+  
+}
+
+.token.inserted {
+  color: #098658;
+  
+}
+
+.token.operator {
+  color: #000000;
+  
+}
+
+.token.constant {
+  color: #811F3F;
+  
+}
+
+.token.hexcode {
+  color: #811F3F;
+  
+}
+
+.token.regex {
+  color: #811F3F;
+  
+}
+
+.token.char {
+  color: #811F3F;
+  
+}
+
+.token.tag {
+  color: #800000;
+  
+}
+
+.token.attr-name {
+  color: #FF0000;
+  
+}
+
+.token.selector {
+  color: #FF0000;
+  
+}
+
+.token.property {
+  color: #FF0000;
+  
+}
+
+.token.deleted {
+  color: #A31515;
+  
+}
+
+.token.string {
+  color: #A31515;
+  
+}
+
+.token.changed {
+  color: #0451A5;
+  
+}
+
+.token.punctuation {
+  color: #0451A5;
+  
+}
+
+.token.function {
+  color: #0000FF;
+  
+}
+
+.token.keyword {
+  color: #0000FF;
+  
+}
+
+.token.class-name {
+  color: #267F99;
+  
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}

package/src/scss/theme/_code.scss

@@ -1,115 +1,12 @@
 @use "config" as *;
 
-// custom theme for syntax highlighting with Prism
-code[class*="language-"], pre[class*="language-"] {
-  color: $pre-color;
-  font-family: $font-family-code;
-  font-size: 1em;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  line-height: $line-height-base;
-  tab-size: 4;
-  hyphens: none;
-} 
-
-pre[class*="language-"] {
-  background: $white;
-  font-size: $code-font-size;
-  padding: 1rem;
-  margin: 0.5rem 0;
-  overflow: auto;
-}
-
-// token colors from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.token.namespace {
-  opacity: .7;
-}
-
-.token.string {
-  color: #A31515;
-}
-
-.token.punctuation,
-.token.operator {
-  color: $pre-color;
-}
-
-.token.url,
-.token.symbol,
-.token.number,
-.token.boolean,
-.token.variable,
-.token.constant,
-.token.inserted {
-  color: #36acaa;
-}
-
-.token.atrule,
-.token.keyword,
-.token.attr-value,
-.language-autohotkey .token.selector,
-.language-json .token.boolean,
-.language-json .token.number,
-code[class*="language-css"] {
-  color: #0000ff;
-}
-
-.token.function {
-  color: $pre-color;
-}
-
-.token.deleted,
-.language-autohotkey .token.tag {
-  color: #9a050f;
-}
-
-.token.selector,
-.language-autohotkey .token.keyword {
-  color: #00009f;
-}
-
-.token.important {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: $font-weight-bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.class-name,
-.language-json .token.property {
-  color: #2B91AF;
-}
-
-.token.tag,
-.token.selector {
-  color: #800000;
-}
-
-.token.attr-name,
-.token.property,
-.token.regex,
-.token.entity {
-  color: #ff0000;
-}
-
-.token.directive.tag .tag {
-  background: #ffff00;
-  color: $pre-color;
+// Themes generated from VS Code using https://prism.dotenv.dev/
+.wy-code {
+  :not(.wy-dark) &, &:not(.wy-dark) {
+    @import "code-vscode-light";
+  }
+
+  .wy-dark &, &.wy-dark {
+    @import "code-vscode-dark";
+  }
 }

package/src/scss/theme/_files.scss

@@ -119,7 +119,7 @@
 
   @include media-breakpoint-up(sm) {
     thead {
-      display: revert;
+      display: table-header-group;
     }
 
     td:nth-child(5),

package/src/scss/theme/_message-editor.scss

@@ -19,7 +19,7 @@
       display: block;
     }
 
-    .wy-icon-attachment {
+    [data-icon=plus] {
       display: none;
     }
   }