@weavy/uikit-react 13.0.0 → 14.0.0

package/src/scss/weavy-chat.scss

@@ -1,7 +1,9 @@
 // weavy reboot
-@use "theme/reboot";
+@use "theme/base/reboot";
+@use "theme/base/scroll";
+@use "theme/base/vars";
+
 // weavy ui components 
-@use "theme/attachments";
 @use "theme/avatar";
 @use "theme/buttons";
 @use "theme/code";
@@ -10,8 +12,12 @@
 @use "theme/emoji";
 @use "theme/icons";
 @use "theme/image-grid";
+@use "theme/input";
+@use "theme/item";
+@use "theme/list";
 @use "theme/messages";
 @use "theme/message-editor";
+@use "theme/meta";
 @use "theme/overlays";
 @use "theme/pager";
 @use "theme/pane";
@@ -21,12 +27,12 @@
 @use "theme/preview-code";
 @use "theme/preview-embed";
 @use "theme/preview-html";
-@use "theme/preview-icon";
 @use "theme/preview-image";
 @use "theme/preview-media";
 @use "theme/preview-pdf";
 @use "theme/preview-text";
 @use "theme/reactions";
-@use "theme/scroll";
 @use "theme/spinner";
+@use "theme/type";
 @use "theme/typing";
+@use "theme/meeting";

package/src/scss/weavy-messenger.scss

@@ -1,9 +1,10 @@
 // weavy reboot
-@use "theme/reboot";
+@use "theme/base/reboot";
+@use "theme/base/scroll";
+@use "theme/base/colors";
 
 // weavy ui components 
 @use "theme/appbar";
-@use "theme/attachments";
 @use "theme/avatar";
 @use "theme/badge";
 @use "theme/buttons";
@@ -15,9 +16,12 @@
 @use "theme/emoji";
 @use "theme/icons";
 @use "theme/image-grid";
-@use "theme/inputs";
+@use "theme/input";
+@use "theme/item";
+@use "theme/list";
 @use "theme/messages";
 @use "theme/message-editor";
+@use "theme/meta";
 @use "theme/overlays";
 @use "theme/pager";
 @use "theme/pane";
@@ -27,35 +31,47 @@
 @use "theme/preview-code";
 @use "theme/preview-embed";
 @use "theme/preview-html";
-@use "theme/preview-icon";
 @use "theme/preview-image";
 @use "theme/preview-media";
 @use "theme/preview-pdf";
 @use "theme/preview-text";
 @use "theme/reactions";
-@use "theme/search";
-@use "theme/scroll";
 @use "theme/spinner";
+@use "theme/tables";
+@use "theme/type";
 @use "theme/typing";
+@use "theme/meeting";
 
 // layout
 .wy-messenger-provider {
-    display: flex;
-    min-height: 0;
-    min-width: 0;
-    flex: 1 1 0;
-  }
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  flex: 1 1 0;
+}
   
-  .wy-messenger-sidebar {
-    width: 300px;
-    border-right: 1px solid #ccc;
-  }
+.wy-messenger-sidebar {
+  ---background-color: #{colors.$background};
+  ---color: #{colors.$on-background};
+
+  background-color: var(---background-color);
+  color: var(---color);
+
+  width: 300px;
+  border-right: 1px solid #{colors.$outline-variant};
+}
   
-  .wy-messenger-conversation{
-    overflow-anchor: none;
-    display: flex;
-    flex-direction: column;                    
-    flex: 1 1 0;
-  }
+.wy-messenger-conversation {
+  ---background-color: #{colors.$background};
+  ---color: #{colors.$on-background};
+
+  background-color: var(---background-color);
+  color: var(---color);
+
+  overflow-anchor: none;
+  display: flex;
+  flex-direction: column;                    
+  flex: 1 1 0;
+}
   
   

package/src/types/Chat.ts

@@ -1,3 +1,4 @@
 export interface ChatProps {
-  uid: string 
+  uid: string,
+  className?: string
 }

package/src/types/Message.ts

@@ -6,11 +6,13 @@ export interface MessageProps {
     avatar?: string,
     name: string,
     created_at: string,
+    created_by: string,
     attachments: AttachmentType[],
     meeting: MeetingCardType,
     parentId: number | null,
     reactions: ReactableType[],
     reactions_count?: number,
-    seenBy: MemberType[]
+    seenBy: MemberType[],
+    chatRoom: boolean
 }
 

package/src/types/types.ts

@@ -92,9 +92,16 @@ type MemberType = {
     name: string,
     display_name: string,
     avatar_url: string,    
-    delivered_at: string,
-    read_at: string,
-    presence: string
+    delivered_at?: string,
+    read_at?: string,
+    presence: string,
+    marked_id?: number,
+    marked_at?: string
+
+}
+
+type MemberTypingType =  MemberType & {
+    time: number
 }
 
 type MessageType = {
@@ -105,6 +112,7 @@ type MessageType = {
     temp?: boolean,
     created_at: string,
     created_by: MemberType,    
+    created_by_id: number,
     attachments: AttachmentType[],
     attachment_ids: number[],
     meeting: MeetingCardType,
@@ -114,10 +122,11 @@ type MessageType = {
  
 type UserType = {
     id: number,
+    uid: string,
+    name: string,
     username: string, 
     email: string,
-    name: string,
-    title: string,
+    display_name: string,    
     avatar_url: string,
     presence: string
 }
@@ -189,3 +198,45 @@ type BadgeType = {
     rooms: number,
     chat: number
 }
+
+type EntityType = {
+    id: number,
+    type: string
+}
+
+type RealtimeMessage = {
+    action: string,
+    id: number,
+    actor: UserType,
+    message: MessageType
+}
+
+type RealtimeReaction = {
+    action: string,
+    id: number,
+    actor: UserType,
+    entity: EntityType,
+    reaction: string
+}
+
+type RealtimeApp = {
+    action: string,
+    id: number,
+    actor: UserType,
+    app: ConversationType    
+}
+
+type RealtimeMember = {
+    action: string,
+    id: number,
+    actor: UserType,
+    app: ConversationType,
+    member: MemberType    
+}
+
+type RealtimeTyping = {
+    action: string,
+    id: number,
+    actor: MemberTypingType,
+    conversation: ConversationType    
+}

package/src/ui/Icon.tsx

@@ -103,7 +103,7 @@ const Icon = ({ name, color = "", size, ...props }: Props) => {
     let overlayPath = getIconOverlay(name);
 
     return (
-        <span className={'wy-icon ' + color} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} { ...props }>
+        <span className={'wy-icon' + (color ? ' wy-icon-' + color : '')} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} { ...props }>
             {iconPath ? <MdiIcon.Icon color={color} path={iconPath} size={size} /> : name }
             {overlayPath && <MdiIcon.Icon color={color} path={overlayPath} className="wy-icon-overlay" size={(size || 1) / 2} /> }
         </span>

package/src/ui/Spinner.tsx

@@ -4,12 +4,13 @@ import classNames from 'classnames';
 type SpinnerProps = {
     size?: number,
     spin?: boolean,
+    overlay?: boolean
 }
   
-const SpinnerImpl = ({ spin = true, size = 24 }: SpinnerProps) => {
+const SpinnerImpl = ({ spin = true, size = 24, overlay= false }: 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>
+      <svg className={classNames("wy-spinner", {"wy-spin" : spin, "wy-spinner-overlay" : overlay })} 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" strokeLinecap="butt" strokeWidth="2" /></svg>
     )
 }
 

package/src/utils/infiniteScroll.js

@@ -9,6 +9,12 @@
     console.log("creating regular scroller");
     var parent = getScrollParent(observeElement);
 
+    // Disable scroll anchoring https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+    parent.style.overflowAnchor = "none";
+
+    // Bug using scrollingElement in frames. See https://github.com/w3c/IntersectionObserver/issues/372
+    var intersectionParent = (parent === document.documentElement ? document : parent);
+
     whenNext ??= () => Promise.reject(new Error("No scroller handler function defined")); // default
 
     const nextObserver = new IntersectionObserver((entries, observer) => {
@@ -17,7 +23,7 @@
                 whenNext();
             }
         });
-    }, { root: parent, threshold: 0 });
+    }, { root: intersectionParent, threshold: 0, rootMargin: "500px" });
 
     nextObserver.observe(observeElement);
 
@@ -41,6 +47,9 @@ export function createReverseScroller(observeElement, whenNext) {
     // Disable scroll anchoring https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
     parent.style.overflowAnchor = "none";
 
+    // Bug using scrollingElement in frames. See https://github.com/w3c/IntersectionObserver/issues/372
+    var intersectionParent = (parent === document.documentElement ? document : parent);
+
     whenNext ??= () => Promise.reject(new Error("No reverse scroller handler function defined")); // default
 
     const prevObserver = new IntersectionObserver((entries, observer) => {
@@ -97,7 +106,7 @@ export function createReverseScroller(observeElement, whenNext) {
                 }
             }
         })
-    }, { root: parent, threshold: 0, rootMargin: "500px 0px 0px 0px" });
+    }, { root: intersectionParent, threshold: 0, rootMargin: "500px" });
 
     prevObserver.observe(observeElement);