@weavy/uikit-react 12.1.0 → 13.0.0

package/src/scss/theme/_overlays.scss

@@ -104,9 +104,9 @@
             }
 
             &.wy-open[data-title]::before {
-                background: rgba($dark, $opacity-backdrop);
+                background-color: rgba($dark, $opacity-backdrop);
                 color: $navbar-dark-color;
-                border-bottom: $border-width #000 solid;
+                box-shadow: rgba($gray-800, $opacity-backdrop) 0px -1px 0px 0px inset
             }
         }
 

package/src/scss/theme/_panels.scss

@@ -25,8 +25,8 @@
     flex-direction: column;
 
     .wy-controls {
-        top: .5rem;
-        left: .5rem;
+        top: .75rem;
+        left: .75rem;
         min-width: 2rem;
         width: auto;
         display: flex;
@@ -65,20 +65,24 @@
             top: 0;
             left: 0;
             right: 0;
-            height: ($appbar-height - .0625rem);
+            height: $appbar-height;
+            padding: $navbar-padding-y $navbar-padding-x;
             opacity: 0;
             pointer-events: none;
             display: flex;
             align-items: center;
             justify-content: center;
-            background-color: rgba($gray-50, $opacity-backdrop);
-            color: $navbar-light-color;
-            border-bottom: $border-width solid $border-color;
             transition: opacity .1s .2s step-end;
-            font-family: $font-family-base;
+            font-family: var(--#{$prefix}font-sans-serif, #{$font-family-sans-serif});
             line-height: $line-height-base;
             font-weight: $font-weight-base;
 
+            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;
+
+
             @include backdrop.filter;
         }
 

package/src/scss/theme/_preview-code.scss

@@ -0,0 +1,5 @@
+.wy-content-code {
+  align-self: flex-start;
+  width: 100%;
+  padding: 1rem 3rem;
+}

package/src/scss/theme/_preview-embed.scss

@@ -2,14 +2,14 @@
 
 // Embedded iframes
 
-.wy-content-iframe, [data-controller~="embed"] {
+.wy-content-iframe {
   border: 0;
   display: block;
   width: 100%;
   height: 100%;
   flex: 1 1 100%;
 
-  &:not(.wy-loading):not([data-controller~="embed"]), &[data-controller~="embed"].wy-loaded {
+  &.wy-loaded {
     background: $white;
 
     ~ .wy-content-iframe-fallback, ~ .wy-spinner {
@@ -17,7 +17,7 @@
     }
   }
 
-  &.wy-loading:not(.wy-loaded), &[data-controller~="embed"]:not(.wy-loaded) {
+  &.wy-loading:not(.wy-loaded) {
     position: absolute;
     visibility: hidden;
     z-index: -1;

package/src/scss/theme/_preview-image.scss

@@ -18,7 +18,7 @@
     height: 100%;
     width: 100%;
     // Similar to object-fit: contain; but works for divs. Must subtract margins.
-    --max-width: #{'min(calc((100vh - 3rem - 1px) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%)'};
+    --max-width: #{'min(calc((100vh - 3rem) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%)'};
     --max-height: #{'min(calc(100vw * (var(--height) / var(--width))), calc(var(--height) * 1px), 100%)'};
 /*     // With sidebar
     body.controller-content & {

package/src/scss/theme/_preview-text.scss

@@ -2,4 +2,4 @@
 .wy-content-text {
   word-break: break-word;
   white-space: pre-wrap;
-}
+}

package/src/scss/theme/_preview.scss

@@ -8,6 +8,11 @@
   justify-content: center;
   height: calc(100% - $appbar-height - $border-width);
   position: relative;
+  background-color: $body-bg;
+
+  .wy-dark &, &.wy-dark {
+    background-color: $dark;
+  }
 }
 
 .wy-nav-prev, .wy-nav-next {
@@ -43,7 +48,7 @@
   @include media-breakpoint-up(md) {
     padding: 3rem 4rem;
     margin: 2rem 3.5rem;
-    border-radius: $border-radius-sm;
+    border-radius: .125rem;
     box-shadow: $box-shadow-sm;
     width: 120ch;
     min-height: 170ch;
@@ -82,7 +87,7 @@
   @include backdrop.filter;
 
   // dark theme
-  .wy-dark &, &.wy-dark {
+  .wy-dark & {
     background-color: rgba($dark, $opacity-backdrop);
     color: $navbar-dark-color;
 

package/src/scss/weavy-chat.scss

@@ -18,6 +18,7 @@
 @use "theme/panels";
 @use "theme/picker-list";
 @use "theme/preview";
+@use "theme/preview-code";
 @use "theme/preview-embed";
 @use "theme/preview-html";
 @use "theme/preview-icon";

package/src/scss/weavy-messenger.scss

@@ -24,6 +24,7 @@
 @use "theme/panels";
 @use "theme/picker-list";
 @use "theme/preview";
+@use "theme/preview-code";
 @use "theme/preview-embed";
 @use "theme/preview-html";
 @use "theme/preview-icon";

package/src/types/Chat.ts

@@ -1,3 +1,3 @@
 export interface ChatProps {
-  id: string 
+  uid: string 
 }

package/src/types/types.ts

@@ -1,13 +1,16 @@
 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>
 }
 
 type WeavyClientOptions = {
     url: string,
-    tokenFactory: (() => string | Promise<string>)
+    tokenFactory: (refresh: boolean) => Promise<string>
 }
 
 type WeavyContextProps = {
@@ -21,6 +24,8 @@ type WeavyContextOptions = {
     enableCloudFiles?: boolean,
     enableScrollbarDetection?: boolean,
     filebrowserUrl?: string,
+    pdfWorkerUrl?: string,
+    pdfCMapsUrl?: string,
     reactions?: string[]
 }
 
@@ -132,12 +137,18 @@ type AttachmentType = {
     size: number,
     provider: string,
     download_url: string,
-    preview_url: string,
+    embed_url: string,
+    external_url: string,
     thumbnail_url: string,
-    external_url: string
+    preview_format: PreviewFormatType,
+    application_url: string,
+    preview_url: string,
+    created_at: string,
+    created_by?: UserType,
+    createdById?: number
 }
 
-type PreviewFormatType = "text"|"code"|"markup"|"image"|"video"|"audio"|"document"|"embed"|"link"|"download"|"none";
+type PreviewFormatType = "audio"|"code"|"embed"|"html"|"image"|"pdf"|"text"|"video"|"none";
 
 type ReactionType = {    
     id: number,

package/src/ui/Spinner.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type SpinnerProps = {
+    size?: number,
+    spin?: boolean,
+}
+  
+const SpinnerImpl = ({ spin = true, size = 24 }: SpinnerProps) => {
+ 
+    return (
+      <svg className={classNames("wy-spinner", {"wy-spin" : spin })} width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle fill="none" cx="12" cy="12" r="11" stroke-linecap="butt" stroke-width="2" /></svg>
+    )
+}
+
+// Export as replacable UI component
+const UISpinner = { UI: SpinnerImpl };
+export default UISpinner;

package/src/utils/fileUtilities.ts

@@ -144,6 +144,16 @@ export function isVideo (ext: string) {
     }
 }
 
+export function isMarkdown (ext: string) {
+    switch (ext) {
+        case ".markdown":
+        case ".md":
+            return true;
+        default:
+            return false;
+    }
+}
+
 export function isMarkup (ext: string) {
     switch (ext) {
         case ".htm":
@@ -192,10 +202,6 @@ export function isCode (ext: string) {
         case ".lst":
         case ".m":
         case ".make":
-        case ".markdown":
-        case ".md":
-        case ".mdown":
-        case ".mkdn":
         case ".ml":
         case ".mm":
         case ".out":
@@ -228,7 +234,7 @@ export function isCode (ext: string) {
 }
 
 export function isText (ext: string) {
-    if (isCode(ext)) {
+    if (isCode(ext) || isMarkdown(ext)) {
         return true;
     }
     switch (ext) {
@@ -261,99 +267,6 @@ export function isOfficeDocument(path: string) {
     }
 }
 
-export function canResize(path:string) {
-    return isBitmap(path) || isMetaFile(path);
-}
-
-export function canConvertToImage (filename: string) {
-    var ext = getExtension(filename);
-    if (canResize(ext) || isText(ext)) {
-        return true;
-    }
-    switch (ext) {
-        case ".ai":
-        case ".csv":
-        case ".doc":
-        case ".docm":
-        case ".docx":
-        case ".dot":
-        case ".dotm":
-        case ".dotx":
-        case ".eml":
-        case ".eps":
-        case ".msg":
-        case ".odp":
-        case ".ods":
-        case ".odt":
-        case ".ott":
-        case ".pdf":
-        case ".potm":
-        case ".potx":
-        case ".ppt":
-        case ".pptx":
-        case ".pps":
-        case ".ppsx":
-        case ".pptm":
-        case ".ppsm":
-        case ".psd":
-        case ".rtf":
-        case ".svg":
-        case ".xls":
-        case ".xlsb":
-        case ".xlsm":
-        case ".xlsx":
-        case ".xltm":
-        case ".xltx":
-        case ".webp":
-            return true;
-        default:
-            return false;
-    }
-}
-
-export function canConvertToPdf (filename: string) {
-    var ext = getExtension(filename);
-    switch (ext) {
-        case ".ai":
-        case ".doc":
-        case ".docm":
-        case ".docx":
-        case ".dot":
-        case ".dotm":
-        case ".dotx":
-        case ".eml":
-        case ".html":
-        case ".mhtml":
-        case ".msg":
-        case ".odt":
-        case ".ott":
-        case ".pdf":
-        case ".rtf":
-        case ".txt":
-        case ".xml":
-        case ".xls":
-        case ".xlsb":
-        case ".xlsm":
-        case ".xlsx":
-        case ".xltm":
-        case ".xltx":
-        case ".ods":
-        case ".csv":
-        case ".ppt":
-        case ".pptx":
-        case ".pps":
-        case ".ppsx":
-        case ".pptm":
-        case ".ppsm":
-        case ".potx":
-        case ".potm":
-        case ".odp":
-            return true;
-        default:
-            return false;
-    }
-}
-
 export function getIcon (name: string, mediaType?: string): { icon: string, color?: string } {
     var ext = getExtension(name);
 
@@ -408,31 +321,4 @@ export function getIcon (name: string, mediaType?: string): { icon: string, colo
 
     // fallback
     return { icon: "file" };
-}
-
-export function getPreviewFormat(filename:string): PreviewFormatType {
-    var ext = getExtension(filename);
-    if (isCode(ext)) {
-        //return "code";
-    }
-    if (isText(ext)) {
-        return "text";
-    }
-    if (isWebImage(ext)) {
-        return "image";
-    }
-    if (isVideo(ext)) {
-        return "video";
-    }
-    if (isAudio(ext)) {
-        return "audio";
-    }
-    if (canConvertToPdf(ext)) {
-        return "document";
-    }
-    if (canConvertToImage(ext)) {
-        return "image";
-    }
-
-    return "none";
 }