ea91a11

changelog.md

@@ -1,5 +1,26 @@
 # Changelog for Weavy
 
+## v24.0.0
+
+<time>2024-07-10</time>
+
+* Added `<wy-notifications>` component to view and manage notifications.
+* Added `<wy-notification-toasts>` component to show notification toasts and native browser notifications.
+* Added `wy:notifications` event to listen to realtime notifications. Enable notification events by setting the `notificationEvents` property on the Weavy context.
+* Added `wy:link` event to handle navigation when interacting with notifications.
+* Added `name` property to all contextual blocks, which will set the display name for the app. The name is widely used in notification texts and falls back to the `uid` when not set.
+* Added Google Meet integration.
+* Added Microsoft Teams integration.
+* Fixed an issue when removing attributes on wy-context.
+* Fixed an issue with the user presence indicator not being updated.
+* Fixed some issues with realtime subscribe/unsubscribe.
+* Fixed some issues with exports and compatibility the uikit-react package.
+* Changed modals to use the Popover API. This removes the need for the `submodals` property on blocks and the `modalParent` property on the Weavy context.
+
+###### Breaking Changes
+
+* Removed realtime events `wy:*` on all blocks in uikit-web. Use the `wy:notifications` event for realtime updates instead.
+
 ## v23.4.0
 
 <time>2024-06-27</time>

dev/vite.config.legacy.ts

@@ -52,7 +52,7 @@ export default defineConfig({
     alias: [
       {
         find: '@weavy/uikit-web',
-        replacement: '@weavy/uikit-web/dist/weavy.js',
+        replacement: '@weavy/uikit-web/dist/weavy.esm.bundle.js',
       },
     ],
   },

lib/blocks/WyChat.tsx

@@ -1,31 +1,12 @@
 'use client';
 
 import React from "react";
-import { EventName, createComponent } from "@lit/react";
+import { createComponent } from "@lit/react";
 import { WyChat as WyChatWC } from "@weavy/uikit-web";
-import {
-  RealtimeAppEventType,
-  RealtimeMessageEventType,
-  RealtimeReactionEventType,
-} from "@weavy/uikit-web/dist/types/types/realtime.types";
 
 // Creates a React component from a Lit component
 export const WyChat = createComponent({
   react: React,
   tagName: "wy-chat",
   elementClass: WyChatWC,
-  events: {
-    onWyMessageCreated: "wy:message_created" as EventName<
-      CustomEvent<RealtimeMessageEventType>
-    >,
-    onWyReactionAdded: "wy:reaction_added" as EventName<
-      CustomEvent<RealtimeReactionEventType>
-    >,
-    onWyReactionRemoved: "wy:reaction_removed" as EventName<
-      CustomEvent<RealtimeReactionEventType>
-    >,
-    onWyAppUpdated: "wy:app_updated" as EventName<
-      CustomEvent<RealtimeAppEventType>
-    >,
-  },
 });

lib/blocks/WyComments.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import React from "react";
+import { createComponent } from "@lit/react";
+import { WyComments as WyCommentsWC } from "@weavy/uikit-web";
+
+// Creates a React component from a Lit component
+export const WyComments = createComponent({
+  react: React,
+  tagName: "wy-comments",
+  elementClass: WyCommentsWC,
+});

lib/blocks/WyFiles.tsx

@@ -1,30 +1,12 @@
 'use client';
 
 import React from "react";
-import { EventName, createComponent } from "@lit/react";
+import { createComponent } from "@lit/react";
 import { WyFiles as WyFilesWC } from "@weavy/uikit-web";
-import { RealtimeFileEventType } from "@weavy/uikit-web/dist/types/types/realtime.types";
 
 // Creates a React component from a Lit component
 export const WyFiles = createComponent({
   react: React,
   tagName: "wy-files",
   elementClass: WyFilesWC,
-  events: {
-    onWyFileCreated: "wy:file_created" as EventName<
-      CustomEvent<RealtimeFileEventType>
-    >,
-    onWyFileUpdated: "wy:file_updated" as EventName<
-      CustomEvent<RealtimeFileEventType>
-    >,
-    onWyFileTrashed: "wy:file_trashed" as EventName<
-      CustomEvent<RealtimeFileEventType>
-    >,
-    onWyFileRestored: "wy:file_restored" as EventName<
-      CustomEvent<RealtimeFileEventType>
-    >,
-    onWyFileDeleted: "wy:file_deleted" as EventName<
-      CustomEvent<RealtimeFileEventType>
-    >,
-  },
 });

lib/blocks/WyMessenger.tsx

@@ -1,36 +1,12 @@
 'use client';
 
 import React from "react";
-import { EventName, createComponent } from "@lit/react";
+import { createComponent } from "@lit/react";
 import { WyMessenger as WyMessengerWC } from "@weavy/uikit-web";
-import {
-  RealtimeAppEventType,
-  RealtimeConversationDeliveredEventType,
-  RealtimeConversationMarkedEventType,
-  RealtimeMemberEventType,
-  RealtimeMessageEventType,
-} from "@weavy/uikit-web/dist/types/types/realtime.types";
 
 // Creates a React component from a Lit component
 export const WyMessenger = createComponent({
   react: React,
   tagName: "wy-messenger",
   elementClass: WyMessengerWC,
-  events: {
-    onWyMessageCreated: "wy:message_created" as EventName<
-      CustomEvent<RealtimeMessageEventType>
-    >,
-    onWyAppCreated: "wy:app_created" as EventName<
-      CustomEvent<RealtimeAppEventType>
-    >,
-    onWyConversationMarked: "wy:conversation_marked" as EventName<
-      CustomEvent<RealtimeConversationMarkedEventType>
-    >,
-    onWyConversationDelivered: "wy:conversation_delivered" as EventName<
-      CustomEvent<RealtimeConversationDeliveredEventType>
-    >,
-    onWyMemberAdded: "wy:member_added" as EventName<
-      CustomEvent<RealtimeMemberEventType>
-    >,
-  },
 });

lib/blocks/WyNotificationToasts.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import React from "react";
+import { EventName, createComponent } from "@lit/react";
+import { WyNotificationToasts as WyNotificationToastsWC } from "@weavy/uikit-web";
+import { WyLinkEventType } from "@weavy/uikit-web/dist/types/types/notifications.types";
+
+// Creates a React component from a Lit component
+export const WyNotificationToasts = createComponent({
+  react: React,
+  tagName: "wy-notification-toasts",
+  elementClass: WyNotificationToastsWC,
+  events: {
+    onWyLink: "wy:link" as EventName<
+      WyLinkEventType
+    >,
+  },
+});

lib/blocks/WyNotifications.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import React from "react";
+import { EventName, createComponent } from "@lit/react";
+import { WyNotifications as WyNotificationsWC } from "@weavy/uikit-web";
+import { WyLinkEventType } from "@weavy/uikit-web/dist/types/types/notifications.types";
+
+// Creates a React component from a Lit component
+export const WyNotifications = createComponent({
+  react: React,
+  tagName: "wy-notifications",
+  elementClass: WyNotificationsWC,
+  events: {
+    onWyLink: "wy:link" as EventName<
+      WyLinkEventType
+    >,
+  },
+});

lib/blocks/WyPosts.tsx

@@ -1,31 +1,12 @@
 'use client';
 
 import React from "react";
-import { EventName, createComponent } from "@lit/react";
+import { createComponent } from "@lit/react";
 import { WyPosts as WyPostsWC } from "@weavy/uikit-web";
-import {
-  RealtimeCommentEventType,
-  RealtimePostEventType,
-  RealtimeReactionEventType,
-} from "@weavy/uikit-web/dist/types/types/realtime.types";
 
 // Creates a React component from a Lit component
 export const WyPosts = createComponent({
   react: React,
   tagName: "wy-posts",
   elementClass: WyPostsWC,
-  events: {
-    onWyPostCreated: "wy:post_created" as EventName<
-      CustomEvent<RealtimePostEventType>
-    >,
-    onWyCommentCreated: "wy:comment_created" as EventName<
-      CustomEvent<RealtimeCommentEventType>
-    >,
-    onWyReactionAdded: "wy:reaction_added" as EventName<
-      CustomEvent<RealtimeReactionEventType>
-    >,
-    onWyReactionRemoved: "wy:reaction_removed" as EventName<
-      CustomEvent<RealtimeReactionEventType>
-    >,
-  },
 });

lib/blocks/index.ts

@@ -1,5 +1,8 @@
 export * from "./WyChat";
+export * from "./WyComments";
 export * from "./WyContext";
 export * from "./WyFiles";
 export * from "./WyMessenger";
+export * from "./WyNotifications";
+export * from "./WyNotificationToasts";
 export * from "./WyPosts";

lib/components/WyAttachment.tsx

@@ -4,7 +4,7 @@ import {
   WyAttachment as WyAttachmentWC,
   WyAttachmentsList as WyAttachmentsListWC,
 } from "@weavy/uikit-web";
-import { FileType } from "@weavy/uikit-web/dist/types/types/files.types";
+import { FileOpenEventType } from "@weavy/uikit-web/dist/types/types/files.types";
 
 // Creates a React component from a Lit component
 export const WyAttachment = createComponent({
@@ -18,10 +18,6 @@ export const WyAttachmentsList = createComponent({
   tagName: "wy-attachments-list",
   elementClass: WyAttachmentsListWC,
   events: {
-    onFileOpen: "file-open" as EventName<
-      CustomEvent<{
-        file: FileType;
-      }>
-    >,
+    onFileOpen: "file-open" as EventName<FileOpenEventType>,
   },
 });

lib/components/WyBlobUpload.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { WyBlobUpload as WyBlobUploadWC } from "@weavy/uikit-web"
+
+// Creates a React component from a Lit component
+export const WyBlobUpload = createComponent({
+  react: React,
+  tagName: "wy-blob-upload",
+  elementClass: WyBlobUploadWC,
+});
+

lib/components/WyButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { createComponent } from "@lit/react";
-import { WyButton as WyButtonWC } from "@weavy/uikit-web"
+import { WyButton as WyButtonWC, WyButtons as WyButtonsWC } from "@weavy/uikit-web"
 
 // Creates a React component from a Lit component
 export const WyButton = createComponent({
@@ -9,3 +9,9 @@ export const WyButton = createComponent({
   elementClass: WyButtonWC,
 });
 
+export const WyButtons = createComponent({
+  react: React,
+  tagName: "wy-buttons",
+  elementClass: WyButtonsWC,
+});
+

lib/components/WyComment.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { EventName, createComponent } from "@lit/react";
 import {
-  WyComments as WyCommentsWC,
+  WyCommentList as WyCommentListWC,
   WyComment as WyCommentWC,
   WyCommentView as WyCommentViewWC,
   WyCommentEdit as WyCommentEditWC,
@@ -11,10 +11,10 @@ import {
 import { PollOptionType } from "@weavy/uikit-web/dist/types/types/polls.types";
 
 // Creates a React component from a Lit component
-export const WyComments = createComponent({
+export const WyCommentList = createComponent({
   react: React,
-  tagName: "wy-comments",
-  elementClass: WyCommentsWC,
+  tagName: "wy-comment-list",
+  elementClass: WyCommentListWC,
 });
 
 export const WyComment = createComponent({

lib/components/WyConversation.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { EventName, createComponent } from "@lit/react";
 import { 
   WyConversation as WyConversationWC,
+  WyConversationExtended as WyConversationExtendedWC,
+  WyConversationAppbar as WyConversationAppbarWC,
   WyConversationNew as WyConversationNewWC,
 } from "@weavy/uikit-web"
 
@@ -15,6 +17,24 @@ export const WyConversation = createComponent({
   }
 });
 
+export const WyConversationExtended = createComponent({
+  react: React,
+  tagName: "wy-conversation-extended",
+  elementClass: WyConversationExtendedWC,
+  events: {
+    onReleaseFocus: "release-focus" as EventName<CustomEvent>
+  }
+});
+
+export const WyConversationAppbar = createComponent({
+  react: React,
+  tagName: "wy-conversation-appbar",
+  elementClass: WyConversationAppbarWC,
+  events: {
+    onReleaseFocus: "release-focus" as EventName<CustomEvent>
+  }
+});
+
 export const WyConversationNew = createComponent({
   react: React,
   tagName: "wy-conversation-new",

lib/components/WyFilesList.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { EventName, createComponent } from "@lit/react";
 import { WyFilesList as WyFilesListWC } from "@weavy/uikit-web";
 import {
+  FileOpenEventType,
   FileOrderType,
   FileType,
 } from "@weavy/uikit-web/dist/types/types/files.types";
@@ -12,11 +13,7 @@ export const WyFilesList = createComponent({
   tagName: "wy-files-list",
   elementClass: WyFilesListWC,
   events: {
-    onFileOpen: "file-open" as EventName<
-      CustomEvent<{
-        file: FileType;
-      }>
-    >,
+    onFileOpen: "file-open" as EventName<FileOpenEventType>,
     onOrder: "order" as EventName<
       CustomEvent<{
         order: FileOrderType;

lib/components/WyImageGrid.tsx

@@ -1,18 +1,14 @@
 import React from "react";
 import { EventName, createComponent } from "@lit/react";
 import { WyImageGrid as WyImageGridWC } from "@weavy/uikit-web";
-import { FileType } from "@weavy/uikit-web/dist/types/types/files.types";
+import { FileOpenEventType } from "@weavy/uikit-web/dist/types/types/files.types";
 
 // Creates a React component from a Lit component
 export const WyImageGrid = createComponent({
   react: React,
   tagName: "wy-image-grid",
   elementClass: WyImageGridWC,
   events: {
-    onFileOpen: "file-open" as EventName<
-      CustomEvent<{
-        file: FileType;
-      }>
-    >,
+    onFileOpen: "file-open" as EventName<FileOpenEventType>,
   },
 });