@weavy/uikit-react 23.3.0 → 24.0.0

package/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>
-    >,
-  },
 });

package/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,
+});

package/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>
-    >,
-  },
 });

package/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>
-    >,
-  },
 });

package/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
+    >,
+  },
+});

package/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
+    >,
+  },
+});

package/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>
-    >,
-  },
 });

package/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";

package/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>,
   },
 });

package/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,
+});
+

package/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,
+});
+

package/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({

package/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",

package/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;

package/lib/components/WyImageGrid.tsx

@@ -1,7 +1,7 @@
 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({
@@ -9,10 +9,6 @@ export const WyImageGrid = createComponent({
   tagName: "wy-image-grid",
   elementClass: WyImageGridWC,
   events: {
-    onFileOpen: "file-open" as EventName<
-      CustomEvent<{
-        file: FileType;
-      }>
-    >,
+    onFileOpen: "file-open" as EventName<FileOpenEventType>,
   },
 });

package/lib/components/WyMessage.tsx

@@ -3,7 +3,8 @@ import { EventName, createComponent } from "@lit/react";
 import { 
   WyMessage as WyMessageWC,
   WyMessages as WyMessagesWC,
-  WyMessageEditor as WyMessageEditorWC  
+  WyMessageEditor as WyMessageEditorWC,
+  WyMessageTyping as WyMessageTypingWC
 } from "@weavy/uikit-web";
 import { PollOptionType } from "@weavy/uikit-web/dist/types/types/polls.types";
 
@@ -40,3 +41,9 @@ export const WyMessageEditor = createComponent({
     >,
   },
 });
+
+export const WyMessageTyping = createComponent({
+  react: React,
+  tagName: "wy-message-typing",
+  elementClass: WyMessageTypingWC,
+});

package/lib/components/WyNotification.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { 
+  WyNotificationBadge as WyNotificationBadgeWC,
+  WyNotificationButtonList as WyNotificationButtonListWC,
+  WyNotificationList as WyNotificationListWC,
+  WyNotificationListItem as WyNotificationListItemWC,
+} from "@weavy/uikit-web";
+
+// Creates a React component from a Lit component
+export const WyNotificationBadge = createComponent({
+  react: React,
+  tagName: "wy-notification-badge",
+  elementClass: WyNotificationBadgeWC
+});
+
+export const WyNotificationButtonList = createComponent({
+  react: React,
+  tagName: "wy-notification-button-list",
+  elementClass: WyNotificationButtonListWC
+});
+
+export const WyNotificationList = createComponent({
+  react: React,
+  tagName: "wy-notification-list",
+  elementClass: WyNotificationListWC
+});
+
+export const WyNotificationListitem = createComponent({
+  react: React,
+  tagName: "wy-notification-list-item",
+  elementClass: WyNotificationListItemWC
+});

package/lib/components/WyOverlay.tsx

@@ -9,6 +9,6 @@ export const WyOverlay = createComponent({
   elementClass: WyOverlayWC,
   events: {
     onReleaseFocus: "release-focus" as EventName<CustomEvent>,
-    onRemoveModal: "removeModal" as EventName<Event>
+    onClose: "close" as EventName<CustomEvent>
   }
 });

package/lib/components/WySheet.tsx

@@ -9,6 +9,6 @@ export const WySheet = createComponent({
   elementClass: WySheetWC,
   events: {
     onReleaseFocus: "release-focus" as EventName<CustomEvent>,
-    onRemoveModal: "removeModal" as EventName<Event>,
+    onClose: "close" as EventName<CustomEvent>,
   }
 });

package/lib/components/WyToast.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { createComponent, EventName } from "@lit/react";
+import {
+  WyToasts as WyToastsWC,
+  WyToast as WyToastWC,
+} from "@weavy/uikit-web";
+
+// Creates a React component from a Lit component
+export const WyToasts = createComponent({
+  react: React,
+  tagName: "wy-toasts",
+  elementClass: WyToastsWC,
+  events: {
+    onHide: "hide" as EventName<CustomEvent>,
+    onReleaseFocus: "release-focus" as EventName<CustomEvent>,
+  },
+});
+
+export const WyToast = createComponent({
+  react: React,
+  tagName: "wy-toast",
+  elementClass: WyToastWC,
+  events: {
+    onHide: "closed" as EventName<
+      CustomEvent<{
+        silent: boolean;
+      }>
+    >,
+    onReleaseFocus: "release-focus" as EventName<CustomEvent>,
+  },
+});

package/lib/components/index.ts

@@ -1,6 +1,7 @@
 export * from "./WyAttachment";
 export * from "./WyAvatar";
 export * from "./WyBadge";
+export * from "./WyBlobUpload";
 export * from "./WyButton";
 export * from "./WyCloudFiles";
 export * from "./WyComment";
@@ -19,10 +20,10 @@ export * from "./WyIcon";
 export * from "./WyImageGrid";
 export * from "./WyMeetingCard";
 export * from "./WyMessage";
+export * from "./WyNotification";
 export * from "./WyOverlay";
 export * from "./WyPdfViewer";
 export * from "./WyPoll";
-export * from "./WyPortal";
 export * from "./WyPost";
 export * from "./WyPresence";
 export * from "./WyPreview";

package/lib/hooks/useWeavy.ts

@@ -7,6 +7,9 @@ import { WeavyOptions } from "@weavy/uikit-web/dist/types/types/weavy.types";
 export function useWeavy(options: WeavyOptions) {
   const [weavy, setWeavy] = useState<WeavyContext>();
 
+  /**
+   * Any option that is an instance/object needs to be memoized or converted.
+   */
   const cacheSafeOptions: WeavyOptions = {
     ...options,
     cloudFilePickerUrl: options.cloudFilePickerUrl?.toString(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "23.3.0",
+  "version": "24.0.0",
   "author": "Weavy",
   "description": "React components UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",
@@ -36,37 +36,33 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.5",
-    "@weavy/uikit-web": "^23.3.0"
+    "@weavy/uikit-web": "^24.0.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": ">=16",
+    "react-dom": ">=16"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "dotenv": "^16.3.2",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-react-refresh": "^0.4.8",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.7",
+    "rimraf": "^6.0.0",
     "rollup-preserve-directives": "^1.1.1",
-    "sass": "^1.77.4",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12",
+    "sass": "^1.77.7",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
     "vite-plugin-dts": "^3.9.1"
-  },
-  "engines": {
-    "node": ">=20.10.0",
-    "npm": ">=10.2.3"
   }
 }

package/dist/types/components/WyPortal.d.ts

@@ -1,3 +0,0 @@
-import { WyPortal as WyPortalWC } from '@weavy/uikit-web';
-
-export declare const WyPortal: import('@lit/react').ReactWebComponent<WyPortalWC, {}>;

package/lib/components/WyPortal.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { WyPortal as WyPortalWC } from "@weavy/uikit-web";
-
-// Creates a React component from a Lit component
-export const WyPortal = createComponent({
-  react: React,
-  tagName: "wy-portal",
-  elementClass: WyPortalWC,
-});