@weavy/uikit-react 14.0.3 → 15.0.0

package/src/scss/theme/_sheet.scss

@@ -41,6 +41,8 @@
 .wy-sheet-body {
   overflow: hidden;
   padding: .5rem;
+  position: relative;
+  min-height: 3rem;
 }
 
 // Transitions
@@ -55,5 +57,6 @@
     transform: none;
     // transition show
     transition: transform vars.$transition, opacity vars.$transition;
+    pointer-events: auto;
   }
-}
+}

package/src/scss/theme/_spinner.scss

@@ -12,7 +12,7 @@ $spinner-duration: 1.4s !default;
     stroke-dasharray: 1, 100;
     stroke-dashoffset: 0;
     transform-origin: center;
-    fill:none !important;
+    fill: none !important;
   }
 
   &.wy-spin {
@@ -23,6 +23,15 @@ $spinner-duration: 1.4s !default;
       animation: wy-dash $spinner-duration ease-in-out infinite, wy-color ($spinner-duration*2) ease-in-out infinite;
     }
   }
+
+  &.wy-spinner-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+  }
 }
 
 @keyframes wy-rotate {

package/src/scss/theme/_tables.scss

@@ -97,4 +97,6 @@
 .wy-table-sort-link {
   display: inline-flex;
   align-items: center;
+  color: colors.$link;
+  cursor: pointer;
 }

package/src/scss/theme/base/_scroll.scss

@@ -133,6 +133,9 @@
     overflow-x: hidden;
     touch-action: pan-y;
   }
+
+  scroll-padding-top: var(--wy-scrollbar-adjust-top, 0);
+  scroll-padding-bottom: var(--wy-scrollbar-adjust-bottom, 0);
 }
 
 .wy-scroll-x {

package/src/scss/weavy-chat.scss

@@ -16,7 +16,6 @@
 @use "theme/item";
 @use "theme/list";
 @use "theme/messages";
-@use "theme/message-editor";
 @use "theme/meta";
 @use "theme/overlays";
 @use "theme/pager";
@@ -32,7 +31,10 @@
 @use "theme/preview-pdf";
 @use "theme/preview-text";
 @use "theme/reactions";
+@use "theme/sheet";
 @use "theme/spinner";
 @use "theme/type";
 @use "theme/typing";
 @use "theme/meeting";
+@use "theme/message-editor";
+@use "theme/message-editor-cm";

package/src/scss/weavy-files.scss

@@ -0,0 +1,31 @@
+// weavy reboot
+@use "theme/base/reboot";
+
+// weavy ui components 
+@use "theme/base/vars";
+@use "theme/base/scroll";
+@use "theme/appbar";
+@use "theme/buttons";
+@use "theme/card";
+@use "theme/dropdown";
+@use "theme/files";
+@use "theme/grid";
+@use "theme/icons";
+@use "theme/input";
+@use "theme/item";
+@use "theme/list";
+@use "theme/overlays";
+@use "theme/pager";
+@use "theme/pane";
+@use "theme/preview";
+@use "theme/preview-code";
+@use "theme/preview-embed";
+@use "theme/preview-html";
+@use "theme/preview-image";
+@use "theme/preview-media";
+@use "theme/preview-pdf";
+@use "theme/preview-text";
+@use "theme/sheet";
+@use "theme/sidebar";
+@use "theme/spinner";
+@use "theme/tables";

package/src/scss/weavy-messenger.scss

@@ -20,7 +20,6 @@
 @use "theme/item";
 @use "theme/list";
 @use "theme/messages";
-@use "theme/message-editor";
 @use "theme/meta";
 @use "theme/overlays";
 @use "theme/pager";
@@ -36,11 +35,14 @@
 @use "theme/preview-pdf";
 @use "theme/preview-text";
 @use "theme/reactions";
+@use "theme/sheet";
 @use "theme/spinner";
 @use "theme/tables";
 @use "theme/type";
 @use "theme/typing";
 @use "theme/meeting";
+@use "theme/message-editor";
+@use "theme/message-editor-cm";
 
 // layout
 .wy-messenger-provider {

package/src/scss/weavy-posts.scss

@@ -0,0 +1,35 @@
+// weavy reboot
+@use "theme/base/reboot";
+
+// weavy ui components 
+@use "theme/base/vars";
+@use "theme/base/scroll";
+@use "theme/alert";
+@use "theme/appbar";
+@use "theme/avatar";
+@use "theme/buttons";
+@use "theme/card";
+@use "theme/comments";
+@use "theme/comment-editor";
+@use "theme/comment-editor-cm";
+@use "theme/content";
+@use "theme/dropdown";
+@use "theme/embed";
+@use "theme/emoji";
+@use "theme/facepile";
+@use "theme/icons";
+@use "theme/input";
+@use "theme/image-grid";
+@use "theme/item";
+@use "theme/list";
+@use "theme/meta";
+@use "theme/pager";
+@use "theme/picker-list";
+@use "theme/placeholder";
+@use "theme/poll";
+@use "theme/post";
+@use "theme/post-editor";
+@use "theme/post-editor-cm";
+@use "theme/sheet";
+@use "theme/spinner";
+@use "theme/meeting";

package/src/scss/weavy.scss

@@ -1,2 +1,4 @@
 @use "weavy-chat";
 @use "weavy-messenger";
+@use "weavy-posts";
+@use "weavy-files";

package/src/types/ConversationListItem.ts

@@ -1,4 +1,5 @@
 export interface ConversationListItemProps {
     item: ConversationType,
+    userId: number,
     refetchConversations: Function
 }

package/src/types/Files.ts

@@ -0,0 +1,7 @@
+export interface FilesProps {
+  uid: string,
+  className?: string,
+  view?: FileView,
+  order?: FileOrder,
+  trashed?: boolean 
+}

package/src/types/Message.ts

@@ -7,8 +7,8 @@ export interface MessageProps {
     name: string,
     created_at: string,
     created_by: string,
-    attachments: AttachmentType[],
-    meeting: MeetingCardType,
+    attachments: FileType[],
+    meeting?: MeetingType,
     parentId: number | null,
     reactions: ReactableType[],
     reactions_count?: number,

package/src/types/Posts.ts

@@ -0,0 +1,4 @@
+export interface PostsProps {
+  uid: string,
+  className?: string
+}

package/src/types/interfaces.ts

@@ -0,0 +1,13 @@
+import { Completion } from "@codemirror/autocomplete"
+
+interface MentionsCompletion extends Completion {
+    item?: {
+        is_member: boolean,
+        avatar_url: string,
+        display_name: string
+    }
+}
+
+export {
+    MentionsCompletion
+}

package/src/types/types.ts

@@ -5,7 +5,8 @@ interface WeavyClient {
     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>
+    post: (url: string, method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH", body: string | FormData, contentType?: string, retry?: boolean) => Promise<Response>,
+    upload: (url: string, method: "POST" | "PUT" | "PATCH", body: string | FormData, contentType?: string, onProgress?: (progress: number) => void, retry?: boolean) => Promise<Response>
 }
 
 type WeavyClientOptions = {
@@ -13,6 +14,12 @@ type WeavyClientOptions = {
     tokenFactory: (refresh: boolean) => Promise<string>
 }
 
+type ServerErrorResponse = {
+    status: number,
+    title: string,
+    detail?: string
+}
+
 type WeavyContextProps = {
     client: WeavyClient | null,
     options?: WeavyContextOptions  
@@ -38,9 +45,14 @@ type UserContextProps = {
     user: UserType    
 };
 
+type CloudFilesContextProps = {        
+  open: Function  
+};
+
 type PreviewContextProps = {
     openPreview: Function,
-    closePreview: Function
+    closePreview: Function,
+    setPreviewFiles: Function
 }
 
 
@@ -76,15 +88,39 @@ type MessagesResult = {
     count: number
 }
 
+type SortOrder = {
+    by: string,
+    descending: boolean
+} 
+
+type FileOrderBy = "id" | "name" | "size" | "created_at" | "modified_at" | "timestamp";
+
+type FileOrder = SortOrder & {
+    by: FileOrderBy,
+    descending: boolean
+}
+
+type FileView = "list" | "grid";
+
+type FilesResult = {
+    data: FileType[],
+    start: number,
+    end: number,
+    count: number
+}
+
 type ConversationType = {
     id: number,
+    created_by_id: number,
     display_name: string,    
     last_message: MessageType,
     is_unread : boolean,
     is_pinned: boolean,    
+    is_starred: boolean,
     type: string,
-    member_ids: number[],
-    avatar_url: string
+    avatar_url: string,
+    user_id?: number,
+    member_count?: number
 }
 
 type MemberType = {
@@ -108,16 +144,34 @@ type MessageType = {
     id: number,
     html: string,    
     text: string,    
+    plain: string,    
     app_id: number,        
     temp?: boolean,
     created_at: string,
     created_by: MemberType,    
     created_by_id: number,
-    attachments: AttachmentType[],
+    modified_at?: string,
+    modified_by?: MemberType,        
+    trashed_at?: string,
+    trashed_by?: MemberType,        
+    attachments: FileType[],
     attachment_ids: number[],
-    meeting: MeetingCardType,
+    attachment_count?: number,
+    meeting?: MeetingType,
     meeting_id?: number,
     reactions: ReactableType[],    
+    embed?: EmbedType,
+    comment_count?: number,
+    is_subscribed: boolean,
+    is_trashed: boolean,
+    options?: PollOptionType[]
+}
+
+type PollOptionType = {
+    id: number | null,
+    text: string,
+    has_voted?: boolean,
+    vote_count?: number
 }
  
 type UserType = {
@@ -131,34 +185,52 @@ type UserType = {
     presence: string
 }
 
-type FileType = {
+type FileKindType = "archive"|"audio"|"code"|"document"|"email"|"presentation"|"spreadsheet"|"image"|"text"|"video"|"file";
+
+type PreviewFormatType = "audio"|"code"|"embed"|"html"|"image"|"pdf"|"text"|"video"|"none";
+
+type ProviderType = "google-drive"|"onedrive"|"box"|"dropbox";
+
+type BlobType = {
     id: number,
-    name: string
+    name: string,
+    size?: number,
+    media_type?: string,
+    thumbnail_url?: string
 }
 
-type AttachmentType = {
+type FileType = {
     id: number,
-    name: string,    
-    kind: string,
+    refId?: number 
+    version: number,
+    name: string,
+    kind: FileKindType,
     media_type: string,
-    width: number,
-    height: number,
-    size: number,
-    provider: string,
-    download_url: string,
+    width?: number,
+    height?: number,
+    size?: number,
+    provider?: string,
+    download_url?: string,
     embed_url: string,
-    external_url: string,
-    thumbnail_url: string,
+    external_url?: string,
+    application_url?: string,
     preview_format: PreviewFormatType,
-    application_url: string,
-    preview_url: string,
+    preview_url?: string,
+    thumbnail_url?: string,
     created_at: string,
     created_by?: UserType,
-    createdById?: number
+    created_by_id: number,
+    modified_at?: string,
+    modified_by?: UserType,
+    modified_by_id?: number,
+    comment_ids?: number[],
+    is_subscribed: boolean,
+    is_trashed: boolean,
+    status?: "ok"|"pending"|"conflict"|"error",
+    statusText?: string,
+    progress?: number
 }
 
-type PreviewFormatType = "audio"|"code"|"embed"|"html"|"image"|"pdf"|"text"|"video"|"none";
-
 type ReactionType = {    
     id: number,
     parent: MessageType, 
@@ -178,12 +250,14 @@ type ReactionGroup = {
     has_reacted: boolean
 }
 
-type MeetingType = {
-    id: number,
-    provider: string
+type ReactionsResult = {
+    data: ReactionType[],
+    start: number,
+    end: number,
+    count: number
 }
 
-type MeetingCardType = {
+type MeetingType = {
     id: number,
     provider: string,
     provider_id: string,
@@ -238,5 +312,60 @@ type RealtimeTyping = {
     action: string,
     id: number,
     actor: MemberTypingType,
-    conversation: ConversationType    
+    entity: EntityType,
+    type: string    
+}
+
+type AppType = {
+    id: number,
+    type: string,
+    uid: string,
+    display_name: string,
+    name: string,
+    description: string,   
+    avatar_url: string,
+    metadata: any,
+    tags?: string[],
+    created_at: string,
+    created_by_id: number,
+    created_by?: UserType,
+    modified_at?: string,
+    modified_by_id?: number,
+    modified_by?: UserType,
+    member_count?: number,
+    members?: MemberType[],
+    is_subscribed: boolean,
+    is_trashed: boolean,
+    archive_url: string
+}
+
+type PostsType = {
+    id: number,
+    display_name: string,    
+    last_message: MessageType,
+    is_unread : boolean,
+    is_pinned: boolean,    
+    type: string,
+    member_ids: number[],
+    avatar_url: string
+}
+
+type EmbedType = {
+    id: number,
+    title: string,
+    description: string,
+    type: "link" | "video" | "photo" | "audio" | "rich",
+    host: string,
+    original_url: string,
+    provider_name: string,
+    provider_url?: string,
+    thumbnail_url?: string,
+    thumbnail_width?: number,
+    thumbnail_height?: number,
+    width?: number,
+    height?: number,
+    author_name: string,
+    author_url: string,
+    html?: string
+    image?: string
 }

package/src/ui/Button.tsx

@@ -1,17 +1,18 @@
 import React, { Children } from "react";
 import Icon from "./Icon";
 import classNames from "classnames";
+import Spinner from "./Spinner";
 
 type Props = {
     active?: boolean,
     type?: "button" | "submit" | "reset",
     onClick?: (e: any) => void,
     className?: string,
-    children: React.ReactNode,
+    children?: React.ReactNode,
     props?: React.ButtonHTMLAttributes<HTMLButtonElement>
 }
 
-const Button: any = ({ active = false, type = "button", onClick, className = "", children, ...props }: Props) => {
+const Button: any = React.forwardRef(({ active = false, type = "button", onClick, className = "", children, ...props }: Props, ref: React.LegacyRef<HTMLButtonElement> | undefined) => {
     let singleChild: any = Children.count(children) === 1 && Children.toArray(children).pop();
 
     let buttonClassNames = classNames(
@@ -19,12 +20,12 @@ const Button: any = ({ active = false, type = "button", onClick, className = "",
         className,
         {
             "wy-active": active,
-            "wy-button-icon": singleChild?.type === Icon.UI
+            "wy-button-icon": singleChild?.type === Icon.UI || singleChild?.type === Icon.ActiveStack || singleChild?.type === Spinner.UI
         }
     );
 
-    return <button type={type} className={buttonClassNames} onClick={onClick} { ...props }>{children}</button>
-}
+    return <button ref={ref} type={type} className={buttonClassNames} onClick={onClick} { ...props }>{children}</button>
+});
 
 // Export as replacable UI component
 const UIButton = { UI: Button };

package/src/ui/Dropdown.tsx

@@ -2,39 +2,63 @@ import React, { useEffect, useState } from "react";
 import classNames from 'classnames';
 import Icon from "./Icon";
 import Button from "./Button";
+import { usePopper } from 'react-popper';
 
 type DropdownProps = {
     directionX?: "left" | "right";
     directionY?: "up" | "down";
+    icon?: string,
     children: React.ReactNode,
     className?: string,
-    props?: React.HTMLAttributes<HTMLSpanElement>
+    title?: string,
+    buttonContent?: React.ReactNode,
+    disabled?: boolean,
+    noWrapper?: boolean,
+    props?: React.HTMLAttributes<HTMLSpanElement>,
 }
 
-const Dropdown = ({ directionX = "right", directionY = "down", children, className = "", ...props }: DropdownProps) => {
+const Dropdown = ({ directionX = "right", directionY = "down", icon = "dots-vertical", children, className = "", title = "", buttonContent, disabled = false, noWrapper, ...props }: DropdownProps) => {
     const [visible, setVisible] = useState<boolean>(false);
 
+    const placement = 
+        directionX === "right" && directionY === "down" ? "bottom-start" :
+        directionX === "left" && directionY === "down" ? "bottom-end" :
+        directionX === "right" && directionY === "up" ? "top-start" :
+        "top-end";
+
+    const [referenceElement, setReferenceElement] = useState<HTMLButtonElement|null>(null);
+    const [popperElement, setPopperElement] = useState<HTMLDivElement|null>(null);
+    const { styles, attributes, update } = usePopper(referenceElement, popperElement, { placement: placement });
+
+    const documentClickHandler = () => { 
+        setVisible(false);
+    };
+
     useEffect(() => {
-        if (visible) {
-            document.addEventListener("click", () => { setVisible(false) });
-        } else {
-            document.removeEventListener("click", () => { setVisible(false) });
-        }
+        update?.();
+
+        setTimeout(() => {
+            if (visible) {
+                document.addEventListener("click", documentClickHandler, { once: true });
+            } else {
+                document.removeEventListener("click", documentClickHandler);
+            }
+        })
 
     }, [visible]);
 
     const handleMenuClick = (e: any) => {
-        e.stopPropagation();
+        e.preventDefault();
         setVisible(!visible);
     }
 
     return (
-        <span className={classNames("wy-dropdown", { "wy-dropup": directionY === "up" }, className)} {...props}>
-            <Button.UI onClick={(e: any) => handleMenuClick(e)} className={classNames({ "wy-active": visible })}>
-                <Icon.UI name="dots-vertical" />
+        <span className={classNames({"wy-dropdown": !noWrapper, "wy-dropup": !noWrapper && directionY === "up" }, className)} {...props}>
+            <Button.UI ref={setReferenceElement} onClick={(e: any) => handleMenuClick(e)} className={classNames({ "wy-active": visible })} title={title} disabled={disabled}>
+                {buttonContent || <Icon.UI name={ icon } />}
             </Button.UI>
 
-            <div className={classNames("wy-dropdown-menu", { "wy-dropdown-menu-end": directionX === "left" })} hidden={!visible}>
+            <div ref={setPopperElement} className={classNames("wy-dropdown-menu", { "wy-dropdown-menu-end": directionX === "left" })} hidden={!visible} style={styles.popper} {...attributes.popper}>
                 {children}
             </div>
         </span>
@@ -42,16 +66,43 @@ const Dropdown = ({ directionX = "right", directionY = "down", children, classNa
     )
 
 }
+
 type ItemProps = {
     children: React.ReactNode,
     className?: string,
-    onClick?: (e: any) => void,
+    onClick?: (e: any) => void,    
+    active?: boolean,
     props?: React.HTMLAttributes<HTMLDivElement>
 }
-const DropdownItem = ({ children, className = "", onClick, ...props }: ItemProps) => {
-    return <div className={classNames("wy-dropdown-item", className)} onClick={onClick} {...props}>{children}</div>
+
+type AnchorProps = {
+    children: React.ReactNode,
+    className?: string,    
+    link?: string,
+    active?: boolean,
+    download?: boolean,
+    props?: React.HTMLAttributes<HTMLAnchorElement>
+}
+
+const DropdownItem = ({ children, className = "", onClick, active, ...props }: ItemProps) => {
+    const onClickWrapper = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        if (onClick) {
+            onClick(e);
+        }
+    }
+    return <div className={classNames("wy-dropdown-item", { "wy-active": active }, className)} onClick={onClickWrapper} {...props}>{children}</div>
+}
+
+const DropdownAnchorItem = ({ children, className = "", link, active, download, ...props }: AnchorProps) => {    
+    if(download){
+        props = {...props, ...{download: true}}
+    }
+    return <a className={classNames("wy-dropdown-item", { "wy-active": active }, className)} href={link} {...props}>{children}</a>
 }
 
+const DropdownDivider = () => <hr className="wy-dropdown-divider"></hr>;
+
 // Export as replacable UI component
-const UIDropdown = { UI: Dropdown, Item: DropdownItem };
+const UIDropdown = { UI: Dropdown, Item: DropdownItem, Anchor: DropdownAnchorItem, Divider: DropdownDivider };
 export default UIDropdown;